From 5da00eefeeac22be14c0ebe1841f273a612d225c Mon Sep 17 00:00:00 2001
From: Nikita Tokarchuk <nikita@tokarch.uk>
Date: Wed, 12 Jan 2022 00:06:55 +0100
Subject: [PATCH] Make media queries for content direction

---
 pkg/templates/menu.go.tmpl | 4 ++--
 web/style/index.scss       | 8 ++++++++
 web/style/menu.scss        | 8 +-------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/pkg/templates/menu.go.tmpl b/pkg/templates/menu.go.tmpl
index eef155d..43dbf39 100644
--- a/pkg/templates/menu.go.tmpl
+++ b/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>
diff --git a/web/style/index.scss b/web/style/index.scss
index 3a48bf3..8d145b7 100644
--- a/web/style/index.scss
+++ b/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;
+  }
 }
diff --git a/web/style/menu.scss b/web/style/menu.scss
index 7161ae1..a9dee2b 100644
--- a/web/style/menu.scss
+++ b/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;
     }