WIP #4147 @7

diff --git a/.htaccess b/.htaccess
index 2a4bb8cb90ebbcb5062ce77b586ac76ea541ea4d..99609ab732de4b12be8b66f109fd7eb1cffbf8c3 100644 (file)
--- 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 74d70e025e0248dee40169a5f1f179ba4317590a..f8b8c18326069e0b893571fe6fa4dcb1055fba76 100644 (file)
--- 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 6fefc02d8875457dabf3517cbcb1ee89adc37951..dd51cca0918161bf5618d7b1a08a3057e530fc21 100644 (file)
--- 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 8e4e4a12247fd8fec0255324e58cf111f91f9bf1..a767c8bcee208dd51113e54bdf95f7a99e05f976 100644 (file)
--- 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>