Added initial noscript fallbacks

assets/scss/_custom.scss

@@ -19,6 +19,10 @@ html[data-theme="dark"] {
     text-decoration: underline;
   }
 
+  & .screen-reader-text:focus {
+    background-color: $contrast;
+  }
+
   & .logo {
     fill: $contrast !important;
   }

layouts/_default/about.html

@@ -4,7 +4,7 @@
     <div class="container-fluid services">
         <div class="container">
             <div class="row">
-                <div class="col-xl-3 col-lg-4 col-12 pt-5 pe-0 background-gray-50 d-none d-lg-block">
+                <div id="services" class="col-xl-3 col-lg-4 col-12 pt-5 pe-0 background-gray-50 d-none d-lg-block">
 
                     {{ if .IsTranslated }}
                     | {{ i18n "postAvailable" }}
@@ -62,7 +62,7 @@
                     </script>
                 </div>
 
-                <div class="col-12 pt-5 d-block d-lg-none">
+                <div id="expertise" class="col-12 pt-5 d-block d-lg-none">
                     <h2 class="mb-5">Our Expertise</h2>
                     {{ range (where .Site.RegularPages "Type" "services") }}
                     <details>

layouts/partials/animation.html

@@ -0,0 +1,90 @@
+<script>
+    function fadeInPage() {
+      if (!window.AnimationEvent) { return; }
+      var fader = document.getElementById('fader');
+      fader.classList.add('fade-out');
+    }
+  
+    document.addEventListener('DOMContentLoaded', function () {
+      if (!window.AnimationEvent) { return }
+  
+      var anchors = document.getElementsByTagName('a');
+  
+      for (var idx = 0; idx < anchors.length; idx += 1) {
+        if (anchors[idx].hostname !== window.location.hostname) {
+          continue;
+        }
+  
+        anchors[idx].addEventListener('click', function (event) {
+          var fader = document.getElementById('fader'),
+            anchor = event.currentTarget;
+  
+          var listener = function () {
+            window.location = anchor.href;
+            fader.removeEventListener('animationend', listener);
+          };
+          fader.addEventListener('animationend', listener);
+  
+          event.preventDefault();
+          fader.classList.add('fade-in');
+        });
+      }
+    });
+  
+    window.addEventListener('pageshow', function (event) {
+      if (!event.persisted) {
+        return;
+      }
+      var fader = document.getElementById('fader');
+      fader.classList.remove('fade-in');
+    });
+  </script>
+  
+  <style>
+    #fader {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+      pointer-events: none;
+      background: white;
+      animation-duration: 300ms;
+      animation-timing-function: ease-in-out;
+    }
+  
+    #fader:before {
+      content: 'fade'
+    }
+  
+    @keyframes fade-out {
+      from {
+        opacity: 1
+      }
+  
+      to {
+        opacity: 0
+      }
+    }
+  
+    @keyframes fade-in {
+      from {
+        opacity: 0
+      }
+  
+      to {
+        opacity: 1
+      }
+    }
+  
+    #fader.fade-out {
+      opacity: 0;
+      animation-name: fade-out;
+    }
+  
+    #fader.fade-in {
+      opacity: 1;
+      animation-name: fade-in;
+    }
+  </style>

layouts/partials/head.html

@@ -31,97 +31,9 @@
 {{ end }} 
 {{ end }}
 
+{{ partial "noscript.html" . }}
 
-<script>
-  function fadeInPage() {
-    if (!window.AnimationEvent) { return; }
-    var fader = document.getElementById('fader');
-    fader.classList.add('fade-out');
-  }
-
-  document.addEventListener('DOMContentLoaded', function () {
-    if (!window.AnimationEvent) { return }
-
-    var anchors = document.getElementsByTagName('a');
-
-    for (var idx = 0; idx < anchors.length; idx += 1) {
-      if (anchors[idx].hostname !== window.location.hostname) {
-        continue;
-      }
-
-      anchors[idx].addEventListener('click', function (event) {
-        var fader = document.getElementById('fader'),
-          anchor = event.currentTarget;
-
-        var listener = function () {
-          window.location = anchor.href;
-          fader.removeEventListener('animationend', listener);
-        };
-        fader.addEventListener('animationend', listener);
-
-        event.preventDefault();
-        fader.classList.add('fade-in');
-      });
-    }
-  });
-
-  window.addEventListener('pageshow', function (event) {
-    if (!event.persisted) {
-      return;
-    }
-    var fader = document.getElementById('fader');
-    fader.classList.remove('fade-in');
-  });
-</script>
-
-<style>
-  #fader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 999999;
-    pointer-events: none;
-    background: white;
-    animation-duration: 300ms;
-    animation-timing-function: ease-in-out;
-  }
-
-  #fader:before {
-    content: 'fade'
-  }
-
-  @keyframes fade-out {
-    from {
-      opacity: 1
-    }
-
-    to {
-      opacity: 0
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0
-    }
-
-    to {
-      opacity: 1
-    }
-  }
-
-  #fader.fade-out {
-    opacity: 0;
-    animation-name: fade-out;
-  }
-
-  #fader.fade-in {
-    opacity: 1;
-    animation-name: fade-in;
-  }
-</style>
+{{ partial "animation.html" . }}
 
 <!-- Icons -->
 {{- partial "favicons.html" . }} {{- template "_internal/schema.html" . }} {{- template "_internal/opengraph.html" . }} {{- template "_internal/twitter_cards.html" . }} {{ range .Params.categories }}

layouts/partials/noscript.html

@@ -0,0 +1,15 @@
+<noscript>
+    <style>
+        #expertise {
+            display: block !important;
+        }
+
+        .services {
+            background: none !important;
+        }
+
+        #services {
+            display: none !important;
+        }
+    </style>
+</noscript>