From a1849b3e81fa23b844933728c9ecce38b00b2a29 Mon Sep 17 00:00:00 2001
From: Nguyễn Gia Phong <mcsinyx@disroot.org>
Date: Mon, 8 Mar 2021 14:16:23 +0700
Subject: Clean up style

---
 _css/basic.css | 88 ++++++++++------------------------------------------------
 1 file changed, 15 insertions(+), 73 deletions(-)

(limited to '_css/basic.css')

diff --git a/_css/basic.css b/_css/basic.css
index 3b2ffc5..15046be 100644
--- a/_css/basic.css
+++ b/_css/basic.css
@@ -3,7 +3,6 @@
 ================================================================== */
 
 nav {
-  width: 64%;
   display: inline-block;
 }
 
@@ -20,7 +19,6 @@ nav li {
 nav li a {
   color: #004de6;
   text-decoration: none;
-  font-size: 18px;
   font-weight: bold;
   display: inline-block;
   float: center;
@@ -35,24 +33,17 @@ nav li a {
 }
 
 header {
-  text-align: right;
-  margin-top: 50px;
-  margin-bottom: 50px;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
 }
 
-header .blog-name {
-  width: 35%;
-  display: inline-block;
-  text-align: left;
-  font-size: 18px;
-  font-family: "Lucida Console", Monaco, monospace;
-  padding-top: 10px;
-}
-
 header .blog-name a {
-  color: #a6a2a0;
+  color: #436e58;
+  font-weight: bold;
   text-decoration: none;
 }
 
@@ -65,65 +56,13 @@ header li a:hover {
   display: none;
 }
 
-@media (max-width: 480px) {
-  header {
-    padding-left: 6%;
-    padding-right: 6%;
-  }
-}
-
-@media (min-width: 481px) {
-  header {
-    padding-left: 12.5%;
-    padding-right: 12.5%;
-  }
-}
-
-/* wide display: enforce maximum width of header to match content */
-@media (min-width: 940px) {
-  header {
-    width: 705px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/*
-medium display: nav goes under name
-*/
-@media (max-width: 760px) {
-  header { display: block; }
-
-  header .blog-name {
-    display: block;
-    width: 100%;
-    padding-bottom: 10px;
-  }
-
-  nav {
-    width: 100%;
-  }
-}
-
 /*
-narrow display: collapse the header (don't show the menu items)
-instead, display a burger menu.
-*/
-@media (max-width: 500px) {
-  header {
-    height: 35px;
-    display: flex;
-    align-items: center;
-  }
-
-  header .blog-name {
-    display: inline-block;
-    width: 70%;
-  }
-
+ * narrow display: collapse the header (don't show the menu items)
+ * instead, display a burger menu.
+ */
+@media (max-width: 480px) {
   nav {
     display: inline-block;
-    width: 27%;
   }
 
   nav ul,
@@ -156,8 +95,6 @@ instead, display a burger menu.
 
   #menu-icon {
     display: inline-block;
-    margin-right: 10px;
-    margin-top: 5px;
   }
 }
 
@@ -188,3 +125,8 @@ td {
 table tbody tr td {
   border: 1px solid lightgray;
 }
+
+.note {
+  background-color: aliceblue;
+  padding: 0px 1em;
+}
-- 
cgit 1.4.1