Hide menu navigation on mobile, disable text decoration on links

themes/red/assets/css/site.css

@@ -419,3 +419,7 @@ pre {
     padding: 5px;
     text-align: center;
 }
+
+.no-decoration {
+    text-decoration: none;
+}

themes/red/assets/js/gallery.js

@@ -0,0 +1,8 @@
+imagesLoaded(document.querySelector('.grid'), function(instance) {
+    new Masonry('.grid', {
+        itemSelector: '.grid-item',
+        columnWidth: '.grid-sizer',
+        fitWidth: true,
+        gutter: 10,
+    });
+});

themes/red/assets/js/site.js

@@ -1,8 +1,3 @@
-imagesLoaded(document.querySelector('.grid'), function(instance) {
+if (window.matchMedia('(max-device-width: 768px)').matches) {
-    new Masonry('.grid', {
+    document.getElementById("nav-menu").open = false;
-        itemSelector: '.grid-item',
+}
-        columnWidth: '.grid-sizer',
-        fitWidth: true,
-        gutter: 10,
-    });
-});

themes/red/layouts/_default/baseof.html

@@ -13,5 +13,11 @@
         </article>
         </div>
         <footer>{{- partial "footer.html" . -}}</footer>
+
+        {{ $site := resources.Get "js/site.js" }}
+        {{ if hugo.IsProduction }}
+            {{ $site = $site | minify | fingerprint | resources.PostProcess }}
+        {{ end }}
+        <script src="{{ $site.RelPermalink }}" integrity="{{ $site.Data.Integrity }}"></script>
     </body>
 </html>

themes/red/layouts/_default/gallery.html

@@ -14,7 +14,7 @@
 
     </div>
 
-    {{ $site := resources.Get "js/site.js" }}
+    {{ $site := resources.Get "js/gallery.js" }}
     {{ if hugo.IsProduction }}
         {{ $site = $site | minify | fingerprint | resources.PostProcess }}
     {{ end }}

themes/red/layouts/partials/art-gallery.html

@@ -26,7 +26,7 @@
 
 </div>
 
-{{ $site := resources.Get "js/site.js" }}
+{{ $site := resources.Get "js/gallery.js" }}
 {{ if hugo.IsProduction }}
     {{ $site = $site | minify | fingerprint | resources.PostProcess }}
 {{ end }}

themes/red/layouts/partials/art-years.html

@@ -2,7 +2,7 @@
 <div class="generic-con year-con">
 {{ range $.Param "years" }}
     {{ $year := . }}
-    <a href="/art/{{ . }}">
+    <a class="no-decoration" href="/art/{{ . }}">
         {{ $thumbp := printf "/year-thumbs/%d.webp" . }}
         {{ with resources.Get $thumbp }}
         <img width="256" height="128" alt="{{ $year }}" class="gallery-img article-img" src="{{ .RelPermalink }}">

themes/red/layouts/partials/featured-art.html

@@ -18,7 +18,7 @@
 
         {{ $path := printf "/art/%d/%.2d/%s" (int $year) (int $month) $filename_without_ext}}
 
-        <a href="{{ $path }}" aria-label="Click to view details">
+        <a href="{{ $path }}" aria-label="Click to view details" class="no-decoration">
             {{ $title := .title }}
             {{ with resources.Get (printf "art/%s" .filename) }}
             {{ $image := .Resize "500x" }}

themes/red/layouts/partials/render-art.html

@@ -12,7 +12,7 @@
         {{ $year = index $split 3 }}
 {{ end }}
 
-<a href="{{ .Permalink }}">
+<a class="no-decoration" href="{{ .Permalink }}">
 {{ $path := printf "/art/%d/%.2d/%s" (int $year) (int $month) $filename_without_ext}}
         {{ $title := .Params.title }}
         {{ $image := (resources.Get (printf "art/%s.webp" .Params.slug)).Resize "400x" }}

themes/red/layouts/partials/sidebar.html

@@ -1,9 +1,12 @@
 <nav>
-    {{ $icon := resources.Get "external-link.svg" }}
+    <details id="nav-menu" open="true">
+        <summary>Navigation</summary>
+        {{ $icon := resources.Get "external-link.svg" }}
 
-    {{ range .Site.Menus.main }}
+        {{ range .Site.Menus.main }}
-        <div class="site-menu">
+            <div class="site-menu">
-            <a href="{{ .URL  }}">{{ .Name }}{{ if strings.HasPrefix .URL "http" }}<img class="external-link" aria-hidden="true" alt="External link" width="16" height="16" src="{{ $icon.Permalink }}"/>{{- end -}}</a>
+                <a href="{{ .URL  }}">{{ .Name }}{{ if strings.HasPrefix .URL "http" }}<img class="external-link" aria-hidden="true" alt="External link" width="16" height="16" src="{{ $icon.Permalink }}"/>{{- end -}}</a>
-        </div>
+            </div>
-    {{ end }}
+        {{ end }}
+    </details>
 </nav>