Nav styling

Styling for sidebar navigation

docs/v3/DEVLOG.md

@@ -120,3 +120,5 @@
 - Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**.
 - Figured out the `line-height` thing for the afforementioned elements.
 - Styled `.logo` in `header`. The styling is now far simpler and easier to use.
+- Removed `display:block` fix from `nav` as it was targeting IE 9-.
+- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.

docs/v3_dev/src/App.js

@@ -13,9 +13,18 @@ class App extends Component {
         </header>
         <div className="row" id="doc-wrapper">
           <input type="checkbox" id="doc-drawer-checkbox" />
-          <nav className="drawer col-md-4 col-lg-3" id="doc-drawer">
-            <label htmlFor="doc-drawer-checkbox" className="button drawer-toggle close"></label>
-          </nav>
+          <nav>
+  <a href="#">Home</a>
+  <span>News</span>
+  <a href="#" class="sublink-1">New Courses</a>
+  <a href="#" class="sublink-1">Certifications</a>
+  <span class="sublink-1">Events</span>
+  <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
+  <a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
+  <a href="#" class="sublink-1">Policy Update</a>
+  <a href="#">About</a>
+  <a href="#">Contact</a>
+</nav>
           <main className="col-sm-12 col-md-8 col-lg-9" id="doc-content">
             <button>Home</button><a href="#" class="button">News</a>
           </main>

docs/v3_dev/src/index.css

@@ -774,6 +774,10 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
   --header-hover-back-color: #f0f0f0;
   --header-fore-color: #444;
   --header-border-color: #ddd;
+  --nav-back-color: #f8f8f8;
+  --nav-hover-back-color: #f0f0f0;
+  --nav-fore-color: #444;
+  --nav-border-color: #ddd;
 }
 
 header {
@@ -817,6 +821,61 @@ header button:hover, header button:focus, header [type="button"]:hover, header [
   background: var(--header-hover-back-color);
 }
 
+nav {
+  background: var(--nav-back-color);
+  color: var(--nav-fore-color);
+  border: 0.0625rem solid var(--nav-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  padding: 0;
+}
+
+nav * {
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+nav a, nav a:visited {
+  display: block;
+  color: var(--a-link-color);
+  border-radius: var(--universal-border-radius);
+  transition: background 0.3s;
+}
+
+nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
+  text-decoration: none;
+  background: var(--nav-hover-back-color);
+}
+
+nav .sublink-1 {
+  position: relative;
+  margin-left: calc(2 * var(--universal-padding));
+}
+
+nav .sublink-1:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 1 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
+nav .sublink-2 {
+  position: relative;
+  margin-left: calc(4 * var(--universal-padding));
+}
+
+nav .sublink-2:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 3 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
 header.sticky {
   position: -webkit-sticky;
   position: sticky;
@@ -970,50 +1029,6 @@ p.splash {
   clip-path: inset(100%);
 }
 
-nav {
-  display: block;
-  background: #eceff1;
-  border: 0.0625rem solid #c9c9c9;
-  margin: 0.5rem;
-  padding: 0.75rem 1rem;
-}
-
-nav a, nav a:visited {
-  display: block;
-  color: #145caf;
-  text-decoration: none;
-}
-
-nav .sublink-1 {
-  padding-left: 1rem;
-  position: relative;
-}
-
-nav .sublink-1:before {
-  position: absolute;
-  left: 0.1875rem;
-  top: -0.0625rem;
-  content: '';
-  height: 100%;
-  border: 0.0625rem solid #bdbdbd;
-  border-left: 0;
-}
-
-nav .sublink-2 {
-  padding-left: 2rem;
-  position: relative;
-}
-
-nav .sublink-2:before {
-  position: absolute;
-  left: 0.1875rem;
-  top: -0.0625rem;
-  content: '';
-  height: 100%;
-  border: 0.0625rem solid #bdbdbd;
-  border-left: 0;
-}
-
 .drawer-toggle:before {
   position: relative;
   top: 0.4375rem;