From 1103ad9e37748f97b229d22ff715238dfe75c770 Mon Sep 17 00:00:00 2001
From: Pedram Ashofteh Ardakani <pedramardakani@pm.me>
Date: Thu, 7 May 2020 22:40:32 +0430
Subject: Change `burger` menu behavior, minor fixes

* Add more comments in CSS
* Fill the entire top with nav bar in smaller screens
* Rotate the `burger` menu 180degrees and change color on click
* Replace the `burger` unicode with pipe `|` in other pages too
* Add the licensing info in other pages too
* Increase the page width for more space
---
 css/base.css | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

(limited to 'css')

diff --git a/css/base.css b/css/base.css
index b612d5e..a115d77 100644
--- a/css/base.css
+++ b/css/base.css
@@ -22,9 +22,7 @@
  * General Public License for more details. See
  * <http://www.gnu.org/licenses/>.
  *
- * */
-
-/* ==================================================================
+ * ==================================================================
  * Preliminary information:
  * ==================================================================
  *
@@ -63,13 +61,16 @@ h3 {
     line-height: 1;
 }
 
-/* Center the whole page into a narrow column. Keeps the webpage stylish
- * and easy to look at in the widest screens. */
+/* Wrap the entire content of the page in this `div` - the navigation
+ * bar is an exception, because of its fixed position. */
 #container {
+    /* Prevent additional horizontal spacing in smaller screens */
+    width: 100%;
+    /* Center the whole page into a narrow column. Keeps the webpage stylish
+     * and easy to look at in the widest screens. */
+    max-width: 960px;
     /* The container should always have a margin-top high enough to
      * prevent content overlapping with the navigation bar */
-    width: 90%;
-    max-width: 950px;
     margin: 45px auto 0;
 }
 
@@ -131,9 +132,13 @@ li > code {
     /* Stick to the top */
     position: fixed;
     top: 0;
-    /* Keep the top navigation bar as wide as the `#container` */
-    width: 90%;
-    max-width: 950px;
+    /* Make sure `left`, `right`, and `width` values add up to 100% to
+     * help keep the navigation bar in center for big screens */
+    margin: 0 auto;
+    left: 0.5%;
+    right: 0.5%;
+    width: 99%;
+    max-width: 960px; /* same as the `#container` max-width */
     margin: 0 auto;
     /* Prevent sharp edges on the top navigation bar */
     border-radius: 0 0 5px 5px;
@@ -151,7 +156,8 @@ li > code {
 }
 
 #nav-hamburger-wrapper input:checked + label {
-    transform: rotate(0);
+    color: #ff216e;
+    transform: rotate(270deg);
 }
 
 /* Horizontal hamburger menu items. Keep the tabs in one line and don't
@@ -282,7 +288,13 @@ section {
  * ================================================================== */
 
 @media only screen and (max-width: 480px) {
+
     /* === hamburger navigation === */
+    /* Let the navigation fill the entire top for smaller screens */
+    #nav-hamburger-wrapper {
+        left: 0;
+        width: 100%;
+    }
     /* Show Hamburger Icon */
     #nav-hamburger-wrapper label {
         display: inline-block;
-- 
cgit v1.2.1