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

3 files changed, 27 insertions, 13 deletions

diff --git a/about.html b/about.html
index 7f4b4f4..c8c1879 100644
--- a/about.html
+++ b/about.html
@@ -2,6 +2,7 @@
 <!--
     Webpage of Maneage: a framework for managing data lineage
 
+    Copyright (C) 2020, Pedram Ashofteh Ardakani <pedramardakani@pm.me>
     Copyright (C) 2020, Mohammad Akhlaghi <mohammad@akhlaghi.org>
 
     This file is part of Maneage. Maneage is free software: you can
@@ -50,8 +51,8 @@
                 <header role="banner">
                     <!-- global navigation -->
                     <nav role="navigation" id="nav-hamburger-wrapper">
-                        <label for="nav-hamburger-input">&#9776;</label>
                         <input type="checkbox" id="nav-hamburger-input"/>
+                        <label for="nav-hamburger-input">|||</label>
                         <div id="nav-hamburger-items" class="button">
                             <a href="index.html">Home</a>
                             <a href="about.html">About</a>
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;
diff --git a/tutorial.html b/tutorial.html
index 0432507..6dce9c8 100644
--- a/tutorial.html
+++ b/tutorial.html
@@ -2,6 +2,7 @@
 <!--
     Webpage of Maneage: a framework for managing data lineage
 
+    Copyright (C) 2020, Pedram Ashofteh Ardakani <pedramardakani@pm.me>
     Copyright (C) 2020, Mohammad Akhlaghi <mohammad@akhlaghi.org>
 
     This file is part of Maneage. Maneage is free software: you can
@@ -50,8 +51,8 @@
                 <header role="banner">
                     <!-- global navigation -->
                     <nav role="navigation" id="nav-hamburger-wrapper">
-                        <label for="nav-hamburger-input">&#9776;</label>
                         <input type="checkbox" id="nav-hamburger-input"/>
+                        <label for="nav-hamburger-input">|||</label>
                         <div id="nav-hamburger-items" class="button">
                             <a href="index.html">Home</a>
                             <a href="about.html">About</a>