fix aria-current attr

jmau111 · Aug 31, 2021 · bb8b5e0 · bb8b5e0
1 parent f902554
commit bb8b5e0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
@@ -84,7 +84,7 @@
   }
   .title-container {
     margin: 0 auto;
-    padding: 3rem;
+    padding: 1.5rem;
     background-color: rgba(0, 0, 0, 0.85);
     border-radius: 0.5rem;
     color: var(--color-subheader);
@@ -114,14 +114,16 @@
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
-
     li + li {
       margin-left: 2rem;
     }
     a {
       color: var(--color-header);
       text-transform: uppercase;
       font-weight: 900;
+      &[aria-current="page"] {
+        color: var(--accent-color);
+      }
     }
   }
 }

diff --git a/assets/scss/_mode-dark.scss b/assets/scss/_mode-dark.scss
@@ -10,7 +10,7 @@
   --color: hsl(0, 0%, 79%);
   --color-header: hsl(24, 9%, 78%);
   --color-menu-mobile: hsl(0, 0%, 98%);
-  --color-subheader: hsl(27, 17%, 77%);
+  --color-subheader: hsl(27, 24%, 91%);
   --color-footer: hsl(27, 12%, 71%);
   --color-btn: hsl(240, 3%, 7%);
   --accent-color: hsl(53, 80%, 63%);

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -19,8 +19,10 @@ <h1 class="site-title slide-horizontal-invert">
             <ul class="site-menu">
                 {{ $currentPage := . }}
                 {{ range .Site.Menus.main }}
-                    <li>
-                        <a href="{{ .URL }}"{{ if $currentPage.IsMenuCurrent "main" . }} aria-current="page"{{ end }}>
+                    {{ $menu_item_url := .URL | relLangURL }}
+                    {{ $page_url:= $currentPage.RelPermalink | relLangURL }}
+                    <li{{ if eq $menu_item_url $page_url }} class="active"{{ end }}>
+                        <a href="{{ .URL }}"{{ if eq $menu_item_url $page_url }} aria-current="page"{{ end }}>
                             <span>{{ .Name }}</span>
                         </a>
                     </li>