From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 24 Feb 2021 19:43:42 +0000 (+0000)
Subject: WIP #4147 @7
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d98a510bd3d580895b696f447169e7af57b5e1d0;p=physioassist-wordpress.git

WIP #4147 @7
---

diff --git a/.htaccess b/.htaccess
index 2a4bb8cb..99609ab7 100644
--- a/.htaccess
+++ b/.htaccess
@@ -1,3 +1,13 @@
+# Security improvements
+Header always set X-Frame-Options "SAMEORIGIN"
+Header always set X-Xss-Protection "1; mode=block"
+Header always set X-Content-Type-Options "nosniff"
+Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
+Header always set Content-Security-Policy "upgrade-insecure-requests"
+Header always set Referrer-Policy: "same-origin"
+Header always set Permissions-Policy: "fullscreen=(self), geolocation=*"
+
+# Disable directory indexes
 Options -Indexes
 
 # Ensure HTTPS + WWW subdomains
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/cookie-notice.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/cookie-notice.styl
index 74d70e02..f8b8c183 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/cookie-notice.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/cookie-notice.styl
@@ -9,6 +9,10 @@
   padding: 2.3em
   z-index: 99
   font-size: 13px
+  display: none // Hidden until user interacts (scrolls) the page
+
+  .interaction-started &
+    display: block
 
   &-learn-more
     display: block
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
index 6fefc02d..dd51cca0 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
@@ -8,13 +8,17 @@ $header-height = 84px // How much space to leave for transparent header
   color: #fff
 
   +below($breakpoint-hero-block)
-    background-image: linear-gradient(55deg, rgb(16, 81, 118) 0%, rgb(83, 155, 191) 40%, rgb(175, 218, 238) 71%, rgb(239, 249, 255) 91%, rgb(239, 249, 255) 100%)
+    background-color: #0b4a70
+  //  background-image: linear-gradient(55deg, rgb(16, 81, 118) 0%, rgb(83, 155, 191) 40%, rgb(175, 218, 238) 71%, rgb(239, 249, 255) 91%, rgb(239, 249, 255) 100%)
 
   &-inner
     center()
     position: relative
     background-image: linear-gradient(to left,   #d8effa 0%, #acd1e7 35%, #0b4a70 100%)
 
+    +below(900px)
+      background-image: none
+
   &-image
     display: block
     width: 100%
diff --git a/wp-content/themes/physioassist/resources/views/partials/head.blade.php b/wp-content/themes/physioassist/resources/views/partials/head.blade.php
index 8e4e4a12..a767c8bc 100644
--- a/wp-content/themes/physioassist/resources/views/partials/head.blade.php
+++ b/wp-content/themes/physioassist/resources/views/partials/head.blade.php
@@ -9,13 +9,30 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
 
-  <!-- Google Tag Manager -->
-  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-M3NHJ8X');</script>
-  <!-- End Google Tag Manager -->
+  {{-- Google Tag Manager --}}
+  {{--
+  Scripts loaded via GTM can really hurt performance and SEO so instead of loading GTM right away, we wait for a scroll
+  event and 1s after that, let GTM load. There shouldn't be anything in GTM that is absolutely essential to the page.
+  This may affect analytics but they're unreliable anyway with browser privacy plugins. It's better to prioritise
+  performance and SEO benefits. Technique from: https://marketingexamples.com/seo/performance
+  --}}
+  <script>
+    window.addEventListener('scroll', function() {
+      {{-- Add class to HTML element indicate user has scrolled (for showing elements after first interaction --}}
+      document.documentElement.classList.add('interaction-started');
+
+      {{-- Wait 1s after scroll before calling GTM --}}
+      setTimeout(function() {
+        {{-- Google Tag Manager --}}
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','GTM-M3NHJ8X');
+      }, 1000);
+    }, { once: true })
+  </script>
+  {{-- End Google Tag Manager --}}
 
   @php(wp_head())
 </head>