Merge pull request #88 from pbrucla/fix/ch

navbar styling fixes
pbrucla · Oct 18, 2023 · 96a88be · 96a88be
2 parents 82893db + 48a5165
commit 96a88be
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 17 deletions.
diff --git a/_data/navbar.yml b/_data/navbar.yml
@@ -5,6 +5,7 @@
   href: /blog
   # make sure g isn't cut off
   z-index: 1
+  has_posts: true
 
 - name: Team
   href: /team

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -13,7 +13,7 @@
             <li {% if entry.z-index != nil -%}style="z-index: {{ entry.z-index }};"{%- endif -%}>
                 <a href="{{ entry.href }}"
                    title="{{ entry.name }}"
-                   {%- if stripped-page-url == entry.href -%}highlighted{%- endif -%}
+                   {%- if stripped-page-url == entry.href or (entry.has_posts != nil and layout.layout == "default") -%}highlighted{%- endif -%}
                 >
                     {{- entry.name | truncate: 4, "" -}}
                 </a>

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
@@ -10,7 +10,7 @@ body {
   background-color: #2c2c2c;
   color: #ffffff;
 
-  --min-nav-inner-width: 80px;
+  --min-nav-inner-width: 8ch;
   --nav-width: calc(max(var(--min-nav-inner-width), 10%) + 2rem);
   --nav-footer-font-size: max(2.1vw, calc(0.21 * var(--min-nav-inner-width)));
   --nav-footer-line-height-multiplier: 1.32;

diff --git a/assets/styles/nav.scss b/assets/styles/nav.scss
@@ -1,12 +1,12 @@
 nav {
-    --nav-inner-width: 5em;
+    --nav-inner-width: 8ch;
 
     position: fixed;
     overflow: visible;
     top: 0;
     left: 0;
     bottom: 0;
-    padding: 1rem 0rem 0rem 0.7rem;
+    padding: 1rem 0rem 0rem 1.75ch;
     -webkit-padding-start: 0.4rem;
     width: calc(var(--nav-width) - 2rem);
 
@@ -76,22 +76,12 @@ nav {
                 float: right;
                 isolation: isolate;
                 color: #FFFFFF;
+                background-color: #2C2C2C;
                 text-decoration: none;
                 text-align: center;
 
-                &:not([highlighted])::before {
-                    content: "\00a0\00a0\00a0\00a0";
-                    position: absolute;
-                    background-color: #2C2C2C;
-                    z-index: -1;
-                }
-
-                &:not([highlighted])::after {
-                    content: "\00a0\00a0";
-                }
-
-                &[highlighted] {
-                    background-color: #2C2C2C;
+                &:not([highlighted]) {
+                    margin: 0 2ch;
                 }
 
                 &[highlighted], &:hover {