Make media queries for content direction

pkg/templates/menu.go.tmpl

@@ -1,6 +1,6 @@
-<div class="menu">
+<div class="menu columns-on-mobile">
     <div class="menu-logo"><a href="{{ getIndexURL }}"><span>nikita</span>.tokarch.uk</a></div>
-    <ul class="menu-nav">
+    <ul class="menu-nav columns-on-tablet columns-on-mobile">
         <li class="menu-nav-li1"><a href="#this-is-blog"><i class="bi bi-journal-arrow-down"></i> blog</a></li>
         <li class="menu-nav-li2"><a class="external" target="_blank" href="https://github.com/mainnika"><i class="bi bi-github"></i> github</a></li>
         <li class="menu-nav-li3"><a class="external" target="_blank" href="https://www.linkedin.com/in/mainnika"><i class="bi bi-linkedin"></i> linkedin</a></li>

web/style/index.scss

@@ -62,6 +62,10 @@ a.external::after {
     margin-left: 1.4em;
     margin-right: 1.4em;
   }
+
+  .columns-on-tablet {
+    flex-direction: column;
+  }
 }
 
 @media all and (max-width: 512px) {
@@ -69,4 +73,8 @@ a.external::after {
     margin-left: 0.8em;
     margin-right: 0.8em;
   }
+
+  .columns-on-mobile {
+    flex-direction: column;
+  }
 }

web/style/menu.scss

@@ -46,6 +46,7 @@
 .menu-nav {
     display: flex;
     list-style: none;
+    align-items: flex-end;
 }
 .menu-nav > li::before {
     content: "";
@@ -56,10 +57,6 @@
 }
 
 @media all and (max-width: 1024px) {
-    .menu-nav {
-        flex-direction: column;
-        align-items: flex-end;
-    }
     .menu-nav > li.menu-nav-li1::before {
         display: inline;
     }
@@ -69,9 +66,6 @@
 }
 
 @media all and (max-width: 512px) {
-    .menu {
-        flex-direction: column;
-    }
     .menu-nav {
         margin-top: 0.3em;
     }