Make social links adaptable

themes/swr/assets/css/style.scss

@@ -28,7 +28,6 @@ body {
 }
 
 aside {
-    margin-right: 2em;
     border: 1px solid;
     border-radius: 3mm;
     padding: 16px;
@@ -66,6 +65,17 @@ aside {
     margin: 0;
 }
 
+#nav-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 2em;
+}
+
+#social-widescreen {
+    margin-top: 10px;
+}
+
 .menu-item {
     margin-block-start: 1em;
     margin-block-end: 1em;
@@ -128,23 +138,34 @@ article {
     text-shadow: 0px 0px 18px white;
 }
 
+#social-mobile {
+    display: none;
+    visibility: hidden;
+}
+
 @media only screen and (max-width: 768px) {
     #wrapper {
         flex-direction: column;
         align-items: center;
         width: 85vw;
+        padding-bottom: 0;
     }
     
     aside {
         width: 100%;
         margin: 0;
         display: flex;
-        margin-bottom: 16px;
         flex-direction: column;
         align-items: center;
         align-self: unset;
     }
 
+    #nav-wrapper {
+        margin: 0;
+        width: 100%;
+        margin-bottom: 16px;
+    }
+
     #content{
         // max-width: 100%;
         width: 100%;
@@ -174,4 +195,16 @@ article {
         display: flex;
         justify-content: center;
     }
+
+    #social-widescreen {
+        display: none;
+        visibility: hidden;
+    }
+
+    #social-mobile {
+        display: block;
+        visibility: visible;
+        margin-top: 10px;
+        // margin-bottom: 7px;
+    }
 }

themes/swr/layouts/_default/baseof.html

@@ -5,7 +5,13 @@
         <div id="container">
             {{- partial "header.html" . -}}
             <div id="wrapper">
+                <div id="nav-wrapper">
                     {{- partial "nav.html" . -}}
+                    <div id="social-widescreen">
+                        <a href="https://t.me/southwestradio" style="filter: unset;"><img class="social-link" src="/telegram.svg" onload="SVGInject(this)" /></a>
+                        <a href="https://vk.com/southwest_radio" style="filter: unset;"><img class="social-link" src="/vk.svg" onload="SVGInject(this)" /></a>
+                    </div>                    
+                </div>
                 <div id="content">
                 {{- block "main" . }}{{- end }}
                 </div>
@@ -18,6 +24,10 @@
                         iframe.addEventListener('load', () => iframe.removeAttribute('srcdoc'));
                     </script>
                 </div>
+                <div id="social-mobile">
+                    <a href="https://t.me/southwestradio" style="filter: unset;"><img class="social-link" src="/telegram.svg" onload="SVGInject(this)" /></a>
+                    <a href="https://vk.com/southwest_radio" style="filter: unset;"><img class="social-link" src="/vk.svg" onload="SVGInject(this)" /></a>
+                </div>
             </div>
             {{- partial "footer.html" . -}}
         </div>

themes/swr/layouts/partials/footer.html

@@ -1,4 +0,0 @@
-<div id="social">
-    <a href="https://t.me/southwestradio" style="filter: unset;"><img class="social-link" src="/telegram.svg" onload="SVGInject(this)" /></a>
-    <a href="https://vk.com/southwest_radio" style="filter: unset;"><img class="social-link" src="/vk.svg" onload="SVGInject(this)" /></a>
-</div>