aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--about.html3
-rw-r--r--css/base.css34
-rw-r--r--tutorial.html3
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>