Use relative font/image paths in CSS

Absolute /fonts and /img URLs 404'd when the site is served under a
subpath (e.g. dw.stu/dw), breaking the Bootstrap icons, Gaegu font, and
background SVGs. Relative ../ paths resolve under both the subpath and
the production root. Also updates the bootstrap-icons font-dir in the
SCSS source.

css/style.css

@@ -38,7 +38,7 @@ body {
 }
      
 #backgroundsvg {
-  background-image: url('/img/background.svg');
+  background-image: url('../img/background.svg');
   background-repeat: no-repeat;
   background-position: 0% 0%;
   background-size: cover;
@@ -50,7 +50,7 @@ body {
   opacity: .75;
 }
 #backgroundsvg2 {
-  background-image: url('/img/background2.svg');
+  background-image: url('../img/background2.svg');
   background-repeat: no-repeat;
   background-position: 0% 0%;
   background-size: cover;
@@ -62,7 +62,7 @@ body {
   opacity: .75;
 }
 #backgroundsvg3 {
-  background-image: url('/img/background3.svg');
+  background-image: url('../img/background3.svg');
   background-repeat: no-repeat;
   background-position: 0% 0%;
   background-size: cover;
@@ -715,17 +715,17 @@ ul.work {
 
 /***************************************************
 .hello {
-  background-image: url('/img/hello.svg') !important;
+  background-image: url('../img/hello.svg') !important;
   background-size:cover  !important;
   background-position: 50% 50%  !important;
 }
 .who {
-  background-image: url('/img/who.svg') !important;
+  background-image: url('../img/who.svg') !important;
   background-size:cover  !important;
   background-position: 50% 50%  !important;
 }
 #dw-footer {
-  background-image: url('/img/footer.svg');
+  background-image: url('../img/footer.svg');
   background-size:100% 100%;
   background-size:cover;
   background-repeat: no-repeat;
@@ -1438,8 +1438,8 @@ blockquote {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: url("/fonts/Inter-Regular.woff2") format("woff2"),
-    url("/fonts/Inter-Regular.woff") format("woff");
+  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
+    url("../fonts/Inter-Regular.woff") format("woff");
   font-display: swap;
 }
 
@@ -1447,8 +1447,8 @@ blockquote {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 400;
-  src: url("/fonts/Inter-Italic.woff2") format("woff2"),
-    url("/fonts/Inter-Italic.woff") format("woff");
+  src: url("../fonts/Inter-Italic.woff2") format("woff2"),
+    url("../fonts/Inter-Italic.woff") format("woff");
   font-display: swap;
 }
 
@@ -1456,8 +1456,8 @@ blockquote {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: url("/fonts/Inter-Medium.woff2") format("woff2"),
-    url("/fonts/Inter-Medium.woff") format("woff");
+  src: url("../fonts/Inter-Medium.woff2") format("woff2"),
+    url("../fonts/Inter-Medium.woff") format("woff");
   font-display: swap;
 }
 
@@ -1465,8 +1465,8 @@ blockquote {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 500;
-  src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"),
-    url("/fonts/Inter-MediumItalic.woff") format("woff");
+  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"),
+    url("../fonts/Inter-MediumItalic.woff") format("woff");
   font-display: swap;
 }
 
@@ -1474,8 +1474,8 @@ blockquote {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
-  src: url("/fonts/Inter-SemiBold.woff2") format("woff2"),
-    url("/fonts/Inter-SemiBold.woff") format("woff");
+  src: url("../fonts/Inter-SemiBold.woff2") format("woff2"),
+    url("../fonts/Inter-SemiBold.woff") format("woff");
   font-display: swap;
 }
 
@@ -1483,8 +1483,8 @@ blockquote {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 600;
-  src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter-SemiBoldItalic.woff") format("woff");
+  src: url("../fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
+    url("../fonts/Inter-SemiBoldItalic.woff") format("woff");
   font-display: swap;
 }
 
@@ -1492,8 +1492,8 @@ blockquote {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
-  src: url("/fonts/Inter-Bold.woff2") format("woff2"),
-    url("/fonts/Inter-Bold.woff") format("woff");
+  src: url("../fonts/Inter-Bold.woff2") format("woff2"),
+    url("../fonts/Inter-Bold.woff") format("woff");
   font-display: swap;
 }
 
@@ -1501,8 +1501,8 @@ blockquote {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 700;
-  src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter-BoldItalic.woff") format("woff");
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"),
+    url("../fonts/Inter-BoldItalic.woff") format("woff");
   font-display: swap;
 }
 
@@ -1510,8 +1510,8 @@ blockquote {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
-  src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"),
-    url("/fonts/Inter-ExtraBold.woff") format("woff");
+  src: url("../fonts/Inter-ExtraBold.woff2") format("woff2"),
+    url("../fonts/Inter-ExtraBold.woff") format("woff");
   font-display: swap;
 }
 
@@ -1519,8 +1519,8 @@ blockquote {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 800;
-  src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter-ExtraBoldItalic.woff") format("woff");
+  src: url("../fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
+    url("../fonts/Inter-ExtraBoldItalic.woff") format("woff");
   font-display: swap;
 }
 
@@ -1528,8 +1528,8 @@ blockquote {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
-  src: url("/fonts/Inter-Black.woff2") format("woff2"),
-    url("/fonts/Inter-Black.woff") format("woff");
+  src: url("../fonts/Inter-Black.woff2") format("woff2"),
+    url("../fonts/Inter-Black.woff") format("woff");
   font-display: swap;
 }
 
@@ -1537,8 +1537,8 @@ blockquote {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 900;
-  src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"),
-    url("/fonts/Inter-BlackItalic.woff") format("woff");
+  src: url("../fonts/Inter-BlackItalic.woff2") format("woff2"),
+    url("../fonts/Inter-BlackItalic.woff") format("woff");
   font-display: swap;
 }
 
@@ -1546,18 +1546,18 @@ blockquote {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 400;
-  src: url('/fonts/montserrat-v14-latin-italic.eot');
+  src: url('../fonts/montserrat-v14-latin-italic.eot');
   /* IE9 Compat Modes */
   src: local('Montserrat Italic'), local('Montserrat-Italic'),
-    url('/fonts/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/montserrat-v14-latin-italic.woff2') format('woff2'),
+    url('../fonts/montserrat-v14-latin-italic.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/montserrat-v14-latin-italic.woff') format('woff'),
+    url('../fonts/montserrat-v14-latin-italic.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/montserrat-v14-latin-italic.ttf') format('truetype'),
+    url('../fonts/montserrat-v14-latin-italic.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/montserrat-v14-latin-italic.svg#Montserrat') format('svg');
+    url('../fonts/montserrat-v14-latin-italic.svg#Montserrat') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1566,18 +1566,18 @@ blockquote {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/montserrat-v14-latin-regular.eot');
+  src: url('../fonts/montserrat-v14-latin-regular.eot');
   /* IE9 Compat Modes */
   src: local('Montserrat Regular'), local('Montserrat-Regular'),
-    url('/fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
+    url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/montserrat-v14-latin-regular.woff') format('woff'),
+    url('../fonts/montserrat-v14-latin-regular.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/montserrat-v14-latin-regular.ttf') format('truetype'),
+    url('../fonts/montserrat-v14-latin-regular.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
+    url('../fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1586,18 +1586,18 @@ blockquote {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
-  src: url('/fonts/montserrat-v14-latin-500.eot');
+  src: url('../fonts/montserrat-v14-latin-500.eot');
   /* IE9 Compat Modes */
   src: local('Montserrat Medium'), local('Montserrat-Medium'),
-    url('/fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/montserrat-v14-latin-500.woff2') format('woff2'),
+    url('../fonts/montserrat-v14-latin-500.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/montserrat-v14-latin-500.woff') format('woff'),
+    url('../fonts/montserrat-v14-latin-500.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/montserrat-v14-latin-500.ttf') format('truetype'),
+    url('../fonts/montserrat-v14-latin-500.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg');
+    url('../fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1606,18 +1606,18 @@ blockquote {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 500;
-  src: url('/fonts/montserrat-v14-latin-500italic.eot');
+  src: url('../fonts/montserrat-v14-latin-500italic.eot');
   /* IE9 Compat Modes */
   src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
-    url('/fonts/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/montserrat-v14-latin-500italic.woff2') format('woff2'),
+    url('../fonts/montserrat-v14-latin-500italic.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/montserrat-v14-latin-500italic.woff') format('woff'),
+    url('../fonts/montserrat-v14-latin-500italic.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/montserrat-v14-latin-500italic.ttf') format('truetype'),
+    url('../fonts/montserrat-v14-latin-500italic.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/montserrat-v14-latin-500italic.svg#Montserrat') format('svg');
+    url('../fonts/montserrat-v14-latin-500italic.svg#Montserrat') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1626,18 +1626,18 @@ blockquote {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 900;
-  src: url('/fonts/montserrat-v14-latin-900.eot');
+  src: url('../fonts/montserrat-v14-latin-900.eot');
   /* IE9 Compat Modes */
   src: local('Montserrat Black'), local('Montserrat-Black'),
-    url('/fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/montserrat-v14-latin-900.woff2') format('woff2'),
+    url('../fonts/montserrat-v14-latin-900.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/montserrat-v14-latin-900.woff') format('woff'),
+    url('../fonts/montserrat-v14-latin-900.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/montserrat-v14-latin-900.ttf') format('truetype'),
+    url('../fonts/montserrat-v14-latin-900.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg');
+    url('../fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1646,18 +1646,18 @@ blockquote {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/playfair-display-v20-latin-regular.eot');
+  src: url('../fonts/playfair-display-v20-latin-regular.eot');
   /* IE9 Compat Modes */
   src: local(''),
-    url('/fonts/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/playfair-display-v20-latin-regular.woff2') format('woff2'),
+    url('../fonts/playfair-display-v20-latin-regular.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-regular.woff') format('woff'),
+    url('../fonts/playfair-display-v20-latin-regular.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-regular.ttf') format('truetype'),
+    url('../fonts/playfair-display-v20-latin-regular.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg');
+    url('../fonts/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1666,18 +1666,18 @@ blockquote {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 700;
-  src: url('/fonts/playfair-display-v20-latin-700.eot');
+  src: url('../fonts/playfair-display-v20-latin-700.eot');
   /* IE9 Compat Modes */
   src: local(''),
-    url('/fonts/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/playfair-display-v20-latin-700.woff2') format('woff2'),
+    url('../fonts/playfair-display-v20-latin-700.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-700.woff') format('woff'),
+    url('../fonts/playfair-display-v20-latin-700.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-700.ttf') format('truetype'),
+    url('../fonts/playfair-display-v20-latin-700.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg');
+    url('../fonts/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1686,18 +1686,18 @@ blockquote {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 900;
-  src: url('/fonts/playfair-display-v20-latin-900.eot');
+  src: url('../fonts/playfair-display-v20-latin-900.eot');
   /* IE9 Compat Modes */
   src: local(''),
-    url('/fonts/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/playfair-display-v20-latin-900.woff2') format('woff2'),
+    url('../fonts/playfair-display-v20-latin-900.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-900.woff') format('woff'),
+    url('../fonts/playfair-display-v20-latin-900.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-900.ttf') format('truetype'),
+    url('../fonts/playfair-display-v20-latin-900.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg');
+    url('../fonts/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1706,18 +1706,18 @@ blockquote {
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 400;
-  src: url('/fonts/playfair-display-v20-latin-italic.eot');
+  src: url('../fonts/playfair-display-v20-latin-italic.eot');
   /* IE9 Compat Modes */
   src: local(''),
-    url('/fonts/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/playfair-display-v20-latin-italic.woff2') format('woff2'),
+    url('../fonts/playfair-display-v20-latin-italic.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-italic.woff') format('woff'),
+    url('../fonts/playfair-display-v20-latin-italic.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-italic.ttf') format('truetype'),
+    url('../fonts/playfair-display-v20-latin-italic.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg');
+    url('../fonts/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1726,18 +1726,18 @@ blockquote {
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 700;
-  src: url('/fonts/playfair-display-v20-latin-700italic.eot');
+  src: url('../fonts/playfair-display-v20-latin-700italic.eot');
   /* IE9 Compat Modes */
   src: local(''),
-    url('/fonts/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('/fonts/playfair-display-v20-latin-700italic.woff2') format('woff2'),
+    url('../fonts/playfair-display-v20-latin-700italic.woff2') format('woff2'),
     /* Super Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-700italic.woff') format('woff'),
+    url('../fonts/playfair-display-v20-latin-700italic.woff') format('woff'),
     /* Modern Browsers */
-    url('/fonts/playfair-display-v20-latin-700italic.ttf') format('truetype'),
+    url('../fonts/playfair-display-v20-latin-700italic.ttf') format('truetype'),
     /* Safari, Android, iOS */
-    url('/fonts/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg');
+    url('../fonts/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg');
   /* Legacy iOS */
   font-display: swap;
 }
@@ -1746,11 +1746,11 @@ blockquote {
   font-family: 'Gaegu';
   font-style: normal;
   font-weight: 300;
-  src: url('/fonts/gaegu-v15-latin-300.eot'); /* IE9 Compat Modes */
+  src: url('../fonts/gaegu-v15-latin-300.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('/fonts/gaegu-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/fonts/gaegu-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/fonts/gaegu-v15-latin-300.woff') format('woff'), /* Modern Browsers */
-       url('/fonts/gaegu-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/fonts/gaegu-v15-latin-300.svg#Gaegu') format('svg'); /* Legacy iOS */
+       url('../fonts/gaegu-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../fonts/gaegu-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../fonts/gaegu-v15-latin-300.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/gaegu-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../fonts/gaegu-v15-latin-300.svg#Gaegu') format('svg'); /* Legacy iOS */
 }

css/styles.css

@@ -11307,7 +11307,7 @@ textarea.form-control-lg {
 @font-face {
   font-display: block;
   font-family: "bootstrap-icons";
-  src: url("/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("/fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
+  src: url("../fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("../fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
 }
 .bi::before,
 [class^=bi-]::before,

css/styles.scss

@@ -98,5 +98,5 @@ $enable-negative-margins: true;
 ################### Bootstrap Icons ########################
 ************************************************************/
 
-$bootstrap-icons-font-dir: "/fonts";
+$bootstrap-icons-font-dir: "../fonts";
 @import '../node_modules/bootstrap-icons/font/bootstrap-icons.scss';