Added support for Google Analytics 4 Properties. Removed duplication of Javascript snippets.

_includes/google-analytics.html

@@ -1,9 +1,24 @@
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+{% comment %} 
+  Old style Google analytics uses codes of the form UA-XXXXXXXX. The new Google Analytics 4 uses codes of the form G-XXXXXXX. Each has different javascript.
+{% endcomment %}
 
-  ga('create', '{{ site.google_analytics }}', 'auto');
-  ga('send', 'pageview');
-</script>
+{%- if site.google_analytics contains 'UA-' -%}
+  <script>
+  if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    ga('create', '{{ site.google_analytics }}', 'auto');
+    ga('send', 'pageview');
+  }
+  </script>
+{%- else %}
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics }}');
+  </script>
+{% endif %}

_includes/head.html

@@ -22,8 +22,9 @@
       document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + 'js';
     }
   </script>
-
-  <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+
+  {% assign cacheBust = site.time | date:'?v=%s' %}
+  <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url | append: cacheBust }}">
   <link rel="stylesheet" href="{{ site.skin | default: '/assets/css/skins/default.css' | relative_url }}">
   {% if site.google_fonts %}
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={%- for font in site.google_fonts -%}{{ font.name | replace: ' ', '+' }}{% if font.weights %}:{% endif %}{{ font.weights | remove: ' ' }}{% if forloop.last != true %}|{% endif %}{%- endfor -%}">

_includes/scripts.html

@@ -14,16 +14,7 @@
 {%- endif -%}
 
 {%- if jekyll.environment == 'production' and site.google_analytics -%}
-  <script>
-  if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-    ga('create', '{{ site.google_analytics }}', 'auto');
-    ga('send', 'pageview');
-  }
-  </script>
+  {% include google-analytics.html %}
 {%- endif %}
 
 {% if site.mathjax == true or site.mathjax.enable == true %}

_sass/so-simple/_page.scss

@@ -1,6 +1,7 @@
 /* ==========================================================================
    Page
    ========================================================================== */
+@use "sass:math";
 
 .page-wrapper {
   margin: 0 auto;
@@ -21,16 +22,16 @@
 .page-image {
   position: relative;
   text-align: center;
-  margin-top: (-1 * $site-logo-height) / 2;
+  margin-top: math.div(-1 * $site-logo-height, 2);
   margin-bottom: 2em;
   z-index: 1;
 
   @include breakpoint($medium) {
-    margin-top: (-1.5 * $site-logo-height) / 2;
+    margin-top: math.div(-1.5 * $site-logo-height, 2);
   }
 
   @include breakpoint($large) {
-    margin-top: (-2 * $site-logo-height) / 2;
+    margin-top: math.div(-2 * $site-logo-height, 2);
   }
 
   img {

_sass/so-simple/_variables.scss

@@ -1,6 +1,7 @@
 /* ==========================================================================
    Variables
    ========================================================================== */
+@use "sass:math";
 
 /* Breakpoint widths */
 $small: 320px !default;
@@ -34,8 +35,8 @@ $h4-max: $modular-scale-2 * $base-font-size !default;
 $h5-min: $base-font-size !default;
 $h5-max: $base-font-size !default;
 /* Heading 6 */
-$h6-min: ($base-font-size / $modular-scale-1) !default;
-$h6-max: ($base-font-size / $modular-scale-2) !default;
+$h6-min: (math.div($base-font-size, $modular-scale-1)) !default;
+$h6-max: (math.div($base-font-size, $modular-scale-2)) !default;
 
 /* Font Families */
 $serif-font-family: "Lora", serif !default;

_sass/so-simple/functions/_fluid-type.scss

@@ -2,9 +2,10 @@
    Fluid Type
    as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/
    ========================================================================== */
+@use "sass:math";
 
 @function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, ($value * 0 + 1));
 }
 
 @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
@@ -28,6 +29,6 @@
       }
     }
   } @else {
-    @error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4;
+    @error "Detected mixed units. Please use the same units for all parameters. " + $u1 + ", " + $u2 + ", " + $u3 + ", "+ $u4;
   }
 }

_sass/so-simple/functions/_yiq.scss

@@ -2,6 +2,7 @@
    Compass YIQ Color Contrast
    https://github.com/easy-designs/yiq-color-contrast
    ========================================================================== */
+@use "sass:math";
 
    @function yiq-is-light(
     $color,
@@ -11,7 +12,7 @@
     $green: green($color);
     $blue: blue($color);
 
-    $yiq: (($red*299)+($green*587)+($blue*114))/1000;
+    $yiq: math.div(($red*299)+($green*587)+($blue*114),1000);
 
     @if $yiq-debug { @debug $yiq, $threshold; }
 

_sass/so-simple/utilities/_responsive-embed.scss

@@ -12,6 +12,7 @@
      <iframe class="responsive-embed-item" src="..."></iframe>
    </div>
    ========================================================================== */
+@use "sass:math";
 
 .responsive-embed {
   display: block;
@@ -43,24 +44,24 @@
 
 .responsive-embed-21by9 {
   &::before {
-    padding-top: percentage(9 / 21);
+    padding-top: percentage(math.div(9, 21));
   }
 }
 
 .responsive-embed-16by9 {
   &::before {
-    padding-top: percentage(9 / 16);
+    padding-top: percentage(math.div(9, 16));
   }
 }
 
 .responsive-embed-4by3 {
   &::before {
-    padding-top: percentage(3 / 4);
+    padding-top: percentage(math.div(3, 4));
   }
 }
 
 .responsive-embed-1by1 {
   &::before {
-    padding-top: percentage(1 / 1);
+    padding-top: percentage(1);
   }
 }

_sass/so-simple/vendor/breakpoint/_helpers.scss

@@ -1,6 +1,8 @@
 //////////////////////////////
 // Converts the input value to Base EMs
 //////////////////////////////
+@use "sass:math";
+
 @function breakpoint-to-base-em($value) {
   $value-unit: unit($value);
 
@@ -25,16 +27,16 @@
   $unit: unit($value);
 
   @if $unit == 'px' {
-    @return $value / 16px * 1em;
+    @return math.div($value, 16px) * 1em;
   }
   @else if $unit == '%' {
-    @return $value / 100% * 1em;
+    @return math.div($value, 100%) * 1em;
   }
   @else if $unit == 'em' {
     @return $value;
   }
   @else if $unit == 'pt' {
-    @return $value / 12pt * 1em;
+    @return math.div($value, 12pt) * 1em;
   }
   @else {
     @return $value;