From 7a189b50440c2fa6363cb8acc08e996ea634f7eb Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sat, 2 Feb 2019 23:57:22 +0100
Subject: [PATCH] active nav link highlighting draft

---
 layout.css  |  7 +++++--
 layout.scss |  3 +++
 nav.css     |  8 ++++----
 nav.scss    |  4 ++--
 styles.css  | 15 +++++++++------
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/layout.css b/layout.css
index 9ed1c02..997073c 100644
--- a/layout.css
+++ b/layout.css
@@ -45,14 +45,17 @@
 
 .ipt-wrap {
   display: table;
+  vertical-align: top;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box; }
   .ipt-wrap .ipt-first {
     width: 100%;
-    display: table-cell; }
+    display: table-cell;
+    vertical-align: inherit; }
   .ipt-wrap .ipt-second {
     padding-left: 5px;
-    display: table-cell; }
+    display: table-cell;
+    vertical-align: inherit; }
 
 /*# sourceMappingURL=layout.css.map */
diff --git a/layout.scss b/layout.scss
index 704de5f..c81bc73 100644
--- a/layout.scss
+++ b/layout.scss
@@ -2,15 +2,18 @@
 
 .ipt-wrap {
     display: table;
+    vertical-align: top;
     @include box-sizing(border-box);
 
     .ipt-first {
         width: 100%;
         display: table-cell;
+        vertical-align: inherit;
     }
 
     .ipt-second {
         padding-left: 5px;
         display: table-cell;
+        vertical-align: inherit;
     }
 }
\ No newline at end of file
diff --git a/nav.css b/nav.css
index 94d3546..fdf5a75 100644
--- a/nav.css
+++ b/nav.css
@@ -65,7 +65,7 @@
       border-bottom: 1px solid #252525; }
       #nav-side > li li:not(:first-child) {
         background: #444; }
-      #nav-side > li li:hover {
+      #nav-side > li li:hover, #nav-side > li li.active {
         color: #252525;
         background: #FBA026;
         border-top: 1px solid #ffc06e; }
@@ -120,17 +120,17 @@ label[for="nav-trigger"] {
     display: inline-block;
     position: relative;
     cursor: pointer; }
-    .nav-top li:hover {
+    .nav-top li:hover, .nav-top li.active {
       -moz-box-shadow: inset 0px 1px 0px 0px #FFC06E;
       -webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E;
       box-shadow: inset 0px 1px 0px 0px #FFC06E;
       background: #FBA026;
       color: #252525; }
-      .nav-top li:hover:first-child {
+      .nav-top li:hover:first-child, .nav-top li.active:first-child {
         -moz-box-shadow: inset 1px 1px 0px 0px #FFC06E;
         -webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E;
         box-shadow: inset 1px 1px 0px 0px #FFC06E; }
-      .nav-top li:hover > ul {
+      .nav-top li:hover > ul, .nav-top li.active > ul {
         display: block;
         opacity: 1;
         visibility: visible; }
diff --git a/nav.scss b/nav.scss
index a9be4fd..c94ccb8 100644
--- a/nav.scss
+++ b/nav.scss
@@ -80,7 +80,7 @@
 
             border-bottom: 1px solid #252525;
 
-            &:hover {
+            &:hover, &.active {
                 color: #252525;
                 background: $default-highlighter;
                 border-top: 1px solid rgb(255, 192, 110);
@@ -162,7 +162,7 @@ label[for="nav-trigger"] {
         position: relative;
         cursor: pointer;
 
-        &:hover {
+        &:hover, &.active {
             @include box-shadow-top(#FFC06E);
 
             &:first-child {
diff --git a/styles.css b/styles.css
index be9f0fb..cda5f9d 100644
--- a/styles.css
+++ b/styles.css
@@ -3333,15 +3333,18 @@ article {
 
 .ipt-wrap {
   display: table;
+  vertical-align: top;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box; }
   .ipt-wrap .ipt-first {
     width: 100%;
-    display: table-cell; }
+    display: table-cell;
+    vertical-align: inherit; }
   .ipt-wrap .ipt-second {
     padding-left: 5px;
-    display: table-cell; }
+    display: table-cell;
+    vertical-align: inherit; }
 
 *[draggable] {
   cursor: move; }
@@ -4427,7 +4430,7 @@ ul.h-list li {
       border-bottom: 1px solid #252525; }
       #nav-side > li li:not(:first-child) {
         background: #444; }
-      #nav-side > li li:hover {
+      #nav-side > li li:hover, #nav-side > li li.active {
         color: #252525;
         background: #FBA026;
         border-top: 1px solid #ffc06e; }
@@ -4482,17 +4485,17 @@ label[for="nav-trigger"] {
     display: inline-block;
     position: relative;
     cursor: pointer; }
-    .nav-top li:hover {
+    .nav-top li:hover, .nav-top li.active {
       -moz-box-shadow: inset 0px 1px 0px 0px #FFC06E;
       -webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E;
       box-shadow: inset 0px 1px 0px 0px #FFC06E;
       background: #FBA026;
       color: #252525; }
-      .nav-top li:hover:first-child {
+      .nav-top li:hover:first-child, .nav-top li.active:first-child {
         -moz-box-shadow: inset 1px 1px 0px 0px #FFC06E;
         -webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E;
         box-shadow: inset 1px 1px 0px 0px #FFC06E; }
-      .nav-top li:hover > ul {
+      .nav-top li:hover > ul, .nav-top li.active > ul {
         display: block;
         opacity: 1;
         visibility: visible; }