fix(style): fix corrupted header on mobile device

1 files changed, 17 insertions, 6 deletions

diff --git a/static/style.css b/static/style.css
index e919bc9..953aaf4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -19,12 +19,6 @@ body {
   justify-content: space-between;
 }
 
-@media screen and (max-width: 768px) {
-  main {
-    padding: 0 1rem;
-  }
-}
-
 header.header {
   background-color: #f5f5f5;
   display: flex;
@@ -58,6 +52,7 @@ nav ul {
   padding: 0;
   margin: 0;
   display: flex;
+  flex-direction: row;
 }
 
 nav ul li {
@@ -215,3 +210,19 @@ article.post-entry {
   text-align: left;
   color: #666;
 }
+
+@media screen and (max-width: 768px) {
+  main {
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  header.header {
+    padding: 1rem 0;
+  }
+
+  nav ul li:not(:first-child) {
+    display: none;
+  }
+}