Refactor nav-main css, add shadows

Closes #205
GDQuest · Jun 28, 2020 · 3bf6121 · 3bf6121
1 parent 0b50939
commit 3bf6121
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 36 deletions.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,18 +1,6 @@
 <!DOCTYPE html>
 <html data-theme="default">
     {{ partial "head" . }}
-    <script type="text/javascript">
-     // Toggle adding the "-open" variant to the mobile menu button in the main navigation bar
-     function navToggleMenu() {
-         const cssVariantOpen = " -open";
-         var element = document.getElementById("nav-main");
-         if (element.className.endsWith(cssVariantOpen)) {
-             element.className = element.className.replace(cssVariantOpen, "");
-         } else {
-             element.className += cssVariantOpen;
-         }
-     }
-    </script>
     <body>
         <div class="page-base">
             <header class="header darkbg">

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -1,3 +1,4 @@
+<!-- Menu for the docs/ section and the hugo-learn theme -->
 <nav id="sidebar" class="{{ if $.Site.Params.showVisitedLinks }}showVisitedLinks{{ end }}">
     {{ $currentNode := . }}
     {{ $showvisitedlinks := .Site.Params.showVisitedLinks }}

diff --git a/layouts/partials/nav-main.html b/layouts/partials/nav-main.html
@@ -1,24 +1,31 @@
-<div class="nav-main">
+<script type="text/javascript">
+ // Toggle adding the "-open" variant to the mobile menu button in the main navigation bar
+ function navToggleMenu(navElement) {
+     navElement.classList.toggle("-open");
+ }
+</script>
+
+<nav role="navigation" class="nav-main">
     <a href="{{.Site.BaseURL}}" class="logo"><img loading="lazy" src="/img/gdquest-logo.svg" alt="GDQuest logo" /></a>
-    <a href="javascript:void(0);" class="menu" onclick="navToggleMenu()">
+    <a href="javascript:void(0);" class="menu" onclick="navToggleMenu(this.parentNode)">
         <i class="fa fa-bars"></i>
     </a>
-    <nav class="links">
+    <div class="links">
         {{ $currentNode := . }}
         {{ range .Site.Menus.main }}
         <a {{if $currentNode.IsMenuCurrent "main" . }} class="active" {{ end }} href="{{ .URL }}">
             {{ .Name }}
         </a>
         {{ end }}
-    </nav>
-    <nav class="links -social">
+    </div>
+    <div class="links -social">
         {{ range .Site.Params.social }}
         <a target="_blank" href="{{ .link }}" rel="noopener">
             <i class="fab fa-{{ .icon }}" title="{{ .description }}"></i>
         </a>
         {{ end }}
-    </nav>
-    <a target="_blank" rel="noopener" href="{{ .Site.Params.shop_link.url }}" class="links button-link -yellow">
+    </div>
+    <a target="_blank" rel="noopener" href="{{ .Site.Params.shop_link.url }}" class="links -shop button-link -yellow">
         {{ .Site.Params.shop_link.name }}
     </a>
-</div>
+</nav>
diff --git a/resources/scss/components/nav-main.scss b/resources/scss/components/nav-main.scss
@@ -9,23 +9,47 @@
   font-family: $font-title;
   text-transform: uppercase;
   color: $color-default-text-hl;
+  text-shadow: $shadow-tiny;
 
   > .logo {
     > * {
       max-height: 2.8rem;
     }
   }
 
+  > .menu {
+    display: none;
+    margin: 1rem;
+    font-size: 1.6rem;
+    color: white;
+  }
+
   > .links {
     justify-content: space-between;
     display: inline-block;
     margin-left: 2rem;
+
     font-size: $font-size-normal;
     font-weight: bold;
 
     user-select: none;
 
-    * {
+    > a {
+      margin-left: $spacing-small;
+    }
+
+    &.-social {
+      margin-left: auto;
+      margin-right: 2rem;
+
+      filter: drop-shadow($shadow-tiny);
+    }
+
+    &.-shop {
+      text-shadow: none;
+    }
+
+    > * {
       display: inline-block;
     }
 
@@ -37,21 +61,6 @@
       }
     }
   }
-  > .links > a {
-    margin-left: $spacing-small;
-  }
-
-  > .-social {
-    margin-left: auto;
-    margin-right: 2rem;
-  }
-
-  > .menu {
-    display: none;
-    margin: 1rem;
-    font-size: 1.6rem;
-    color: white;
-  }
 }
 
 @include tablet {