Chg: make usable without js

nicokaiser · Aug 29, 2024 · 1d495f2 · 1d495f2
1 parent f856f41
commit 1d495f2
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 3 deletions.
diff --git a/assets/css/_styles.scss b/assets/css/_styles.scss
@@ -266,7 +266,7 @@ section.gallery {
     border-radius: 1rem;
   }
 
-  & > img, & figure > img {
+  & > img, & figure > img, & noscript > img, & noscript > figure > img {
     transition-duration: 150ms;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

diff --git a/assets/css/no_script.css b/assets/css/no_script.css
@@ -0,0 +1,10 @@
+
+img.lazyload {
+  display: none;
+}
+
+#gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+}
diff --git a/layouts/partials/album-card.html b/layouts/partials/album-card.html
@@ -2,6 +2,9 @@
 {{ with $gallery }}
   <a class="card" href="{{ .page.RelPermalink }}" title="{{ .page.Title }}">
     <figure style="background-color: {{ .color }}">
+      <noscript>
+        <img loading="lazy" width="{{ .thumbnail.Width }}" height="{{ .thumbnail.Height }}" src="{{ .thumbnail.RelPermalink }}" alt="{{ .page.Title }}" />
+      </noscript>
       <img class="lazyload" width="{{ .thumbnail.Width }}" height="{{ .thumbnail.Height }}" data-src="{{ .thumbnail.RelPermalink }}" alt="{{ .page.Title }}" />
     </figure>
     <div>

diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html
@@ -1,5 +1,5 @@
 <section class="gallery">
-  <div id="gallery" style="visibility: hidden; height: 1px; overflow: hidden">
+  <div id="gallery" style="overflow: hidden">
     {{ $images := slice }}
     {{ range $image :=  .Resources.ByType "image" }}
       {{ $title := "" }}
@@ -27,6 +27,9 @@
       {{ $color := index $thumbnail.Colors 0 | default "transparent" }}
       <a class="gallery-item" href="{{ $image.RelPermalink }}" data-pswp-src="{{ $full.RelPermalink }}" data-pswp-width="{{ $full.Width }}" data-pswp-height="{{ $full.Height }}" title="{{ .Title }}" itemscope itemtype="https://schema.org/ImageObject" style="aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">
         <figure style="background-color: {{ $color }}; aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">
+          <noscript>
+            <img loading="lazy" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" />
+          </noscript>
           <img class="lazyload" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" data-src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" />
         </figure>
         <meta itemprop="contentUrl" content="{{ $image.RelPermalink }}" />
@@ -38,4 +41,8 @@
       </a>
     {{ end }}
   </div>
+  <script>menu =document.getElementById('menu')
+    menu.style("visibility") = "hidden";
+    menu.style("height") = "1px";
+  </script>
 </section>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -21,6 +21,9 @@
   {{ partial "opengraph.html" . }}
   {{ $css := resources.Get "/css/main.scss" | toCSS | minify | fingerprint }}
   <link rel="stylesheet" href="{{ $css.RelPermalink }}" />
+  {{ $css_noscript:= resources.Get "/css/no_script.css" | toCSS | minify | fingerprint }}
+  <noscript><link rel="stylesheet" href="{{ $css_noscript.RelPermalink }}" /></noscript>
+
   {{ $params := dict
     "closeTitle" (i18n "closeTitle")
     "zoomTitle" (i18n "zoomTitle")

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -1,5 +1,5 @@
 {{ with site.Menus.main }}
-  <menu class="hidden" id="menu">
+  <menu id="menu">
     {{ range . }}
       <li itemscope itemtype="http://www.schema.org/SiteNavigationElement">
         <a aria-current="{{ or (page.IsMenuCurrent .Menu .) (page.HasMenuCurrent .Menu .) }}" href="{{ .URL }}" itemprop="url">
@@ -8,4 +8,5 @@
       </li>
     {{ end }}
   </menu>
+  <script>document.getElementById('menu').classList.add("hidden");;</script>
 {{ end }}