From 9633a899e505cabb659cffb75eb925ebbfb0e65a Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 4 Sep 2022 20:48:15 +1200
Subject: [PATCH] Wrapping CSS calcs in calc(); TODO: Remove FontAwesome

---
 src/scss/global/_variables.scss                | 6 +++---
 src/scss/vendor/font-awesome/_fixed-width.scss | 2 +-
 src/scss/vendor/font-awesome/_larger.scss      | 4 ++--
 src/scss/vendor/font-awesome/_list.scss        | 4 ++--
 src/scss/vendor/font-awesome/_variables.scss   | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 16d4a651..c27e089a 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -243,7 +243,7 @@ $bp_shallow: 650px;
  **/
 
 @mixin grid_item($cols, $gap: 2%, $bottom_margin: 3%) {
-  width: (0% + (100 / $cols) - ($gap * 2) + (($gap * 2) / $cols));
+  width: (0% + calc(100 / $cols) - ($gap * 2) + calc(calc($gap * 2) / $cols));
   box-sizing: border-box;
   margin: 0 $gap $bottom_margin;
 
@@ -265,9 +265,9 @@ $bp_shallow: 650px;
 @mixin resolution($pixel_ratio: 2) {
   @media only screen and (-webkit-min-device-pixel-ratio: $pixel_ratio),
 	only screen and (   min--moz-device-pixel-ratio: $pixel_ratio),
-	only screen and (     -o-min-device-pixel-ratio: $pixel_ratio/1),
+	only screen and (     -o-min-device-pixel-ratio: calc($pixel_ratio/1)),
 	only screen and (        min-device-pixel-ratio: $pixel_ratio),
-	only screen and (                min-resolution: #{$pixel_ratio * 96}dpi),
+	only screen and (                min-resolution: #{calc($pixel_ratio * 96)}dpi),
 	only screen and (                min-resolution: #{$pixel_ratio}dppx) {
     @content;
   }
diff --git a/src/scss/vendor/font-awesome/_fixed-width.scss b/src/scss/vendor/font-awesome/_fixed-width.scss
index b221c981..7102bbac 100755
--- a/src/scss/vendor/font-awesome/_fixed-width.scss
+++ b/src/scss/vendor/font-awesome/_fixed-width.scss
@@ -1,6 +1,6 @@
 // Fixed Width Icons
 // -------------------------
 .#{$fa-css-prefix}-fw {
-  width: (18em / 14);
+  width: calc(18em / 14);
   text-align: center;
 }
diff --git a/src/scss/vendor/font-awesome/_larger.scss b/src/scss/vendor/font-awesome/_larger.scss
index 41e9a818..d76b2406 100755
--- a/src/scss/vendor/font-awesome/_larger.scss
+++ b/src/scss/vendor/font-awesome/_larger.scss
@@ -3,8 +3,8 @@
 
 /* makes the font 33% larger relative to the icon container */
 .#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
+  font-size: calc(4em / 3);
+  line-height: calc(3em / 4);
   vertical-align: -15%;
 }
 .#{$fa-css-prefix}-2x { font-size: 2em; }
diff --git a/src/scss/vendor/font-awesome/_list.scss b/src/scss/vendor/font-awesome/_list.scss
index 7d1e4d54..30bdd5a0 100755
--- a/src/scss/vendor/font-awesome/_list.scss
+++ b/src/scss/vendor/font-awesome/_list.scss
@@ -11,9 +11,9 @@
   position: absolute;
   left: -$fa-li-width;
   width: $fa-li-width;
-  top: (2em / 14);
+  top: calc(2em / 14);
   text-align: center;
   &.#{$fa-css-prefix}-lg {
-    left: -$fa-li-width + (4em / 14);
+    left: -$fa-li-width + calc(4em / 14);
   }
 }
diff --git a/src/scss/vendor/font-awesome/_variables.scss b/src/scss/vendor/font-awesome/_variables.scss
index 746bcb67..4ec987f2 100755
--- a/src/scss/vendor/font-awesome/_variables.scss
+++ b/src/scss/vendor/font-awesome/_variables.scss
@@ -9,7 +9,7 @@ $fa-css-prefix:       fa !default;
 $fa-version:          "4.7.0" !default;
 $fa-border-color:     #eee !default;
 $fa-inverse:          #fff !default;
-$fa-li-width:         (30em / 14) !default;
+$fa-li-width:         calc(30em / 14) !default;
 
 $fa-var-500px: "\f26e";
 $fa-var-address-book: "\f2b9";