Provide configurable image, font, icon paths and make them available within CSS along with baseURL

Signed-off-by: Ivan Boothe <git@rootwork.org>

4 files changed, 17 insertions, 16 deletions

diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index ccd0b85..9b08dc6 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -593,7 +593,7 @@ figcaption
       left: 0.1rem
       width: 1.3rem
       height: 1.3rem
-      background-image: url("#{$images}sun.svg")
+      background-image: url("#{$imagesPath}sun.svg")
       background-position: center
       background-size: cover
       border-radius: 50%
diff --git a/assets/sass/_fonts.sass b/assets/sass/_fonts.sass
index 2ea6d01..4d93109 100644
--- a/assets/sass/_fonts.sass
+++ b/assets/sass/_fonts.sass
@@ -2,68 +2,68 @@
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 200
-  src: local('Metropolis Extra Light'), local('Metropolis-Light'), url('#{$font-path}/Metropolis-ExtraLight.woff2') format('woff2'), url('#{$font-path}/Metropolis-ExtraLight.woff') format('woff')
+  src: local('Metropolis Extra Light'), local('Metropolis-Light'), url('#{$fontsPath}/Metropolis-ExtraLight.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-ExtraLight.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 200
-  src: local('Metropolis Extra Light Italic'), local('Metropolis-ExtraLightItalic'), url('#{$font-path}/Metropolis-ExtraLightItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-ExtraLightItalic.woff') format('woff')
+  src: local('Metropolis Extra Light Italic'), local('Metropolis-ExtraLightItalic'), url('#{$fontsPath}/Metropolis-ExtraLightItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-ExtraLightItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 300
-  src: local('Metropolis Light'), local('Metropolis-Light'), url('#{$font-path}/Metropolis-Light.woff2') format('woff2'), url('#{$font-path}/Metropolis-Light.woff') format('woff')
+  src: local('Metropolis Light'), local('Metropolis-Light'), url('#{$fontsPath}/Metropolis-Light.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Light.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 300
-  src: local('Metropolis Light Italic'), local('Metropolis-LightItalic'), url('#{$font-path}/Metropolis-LightItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-LightItalic.woff') format('woff')
+  src: local('Metropolis Light Italic'), local('Metropolis-LightItalic'), url('#{$fontsPath}/Metropolis-LightItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-LightItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 400
-  src: local('Metropolis Regular'), local('Metropolis-Regular'), url('#{$font-path}/Metropolis-Regular.woff2') format('woff2'), url('#{$font-path}/Metropolis-Regular.woff') format('woff')
+  src: local('Metropolis Regular'), local('Metropolis-Regular'), url('#{$fontsPath}/Metropolis-Regular.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Regular.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 400
-  src: local('Metropolis Regular Italic'), local('Metropolis-RegularItalic'), url('#{$font-path}/Metropolis-RegularItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-RegularItalic.woff') format('woff')
+  src: local('Metropolis Regular Italic'), local('Metropolis-RegularItalic'), url('#{$fontsPath}/Metropolis-RegularItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-RegularItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 500
-  src: local('Metropolis Medium'), local('Metropolis-Medium'), url('#{$font-path}/Metropolis-Medium.woff2') format('woff2'), url('#{$font-path}/Metropolis-Medium.woff') format('woff')
+  src: local('Metropolis Medium'), local('Metropolis-Medium'), url('#{$fontsPath}/Metropolis-Medium.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Medium.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 500
-  src: local('Metropolis Medium Italic'), local('Metropolis-MediumItalic'), url('#{$font-path}/Metropolis-MediumItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-MediumItalic.woff') format('woff')
+  src: local('Metropolis Medium Italic'), local('Metropolis-MediumItalic'), url('#{$fontsPath}/Metropolis-MediumItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-MediumItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 700
-  src: local('Metropolis Bold'), local('Metropolis-Bold'), url('#{$font-path}/Metropolis-Bold.woff2') format('woff2'), url('#{$font-path}/Metropolis-Bold.woff') format('woff')
+  src: local('Metropolis Bold'), local('Metropolis-Bold'), url('#{$fontsPath}/Metropolis-Bold.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Bold.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 700
-  src: local('Metropolis Bold Italic'), local('Metropolis-BoldItalic'), url('#{$font-path}/Metropolis-BoldItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-BoldItalic.woff') format('woff')
+  src: local('Metropolis Bold Italic'), local('Metropolis-BoldItalic'), url('#{$fontsPath}/Metropolis-BoldItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-BoldItalic.woff') format('woff')
   font-display: swap
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index 2597a95..afabd69 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -1,6 +1,3 @@
-$font-path: '../fonts'
-// $icons: '{{ printf "../%s" (default "icons/" .Site.Params.iconsDir) }}'
-$images: '../images/'
 $light: #fff
 $haze: #fafafa
 $xhaze: darken($haze, 11%)
@@ -97,7 +94,7 @@ html
     .color
       &_choice
         &::after
-          background-image: url("#{$images}night-moon.jpg")
+          background-image: url("#{$imagesPath}night-moon.jpg")
           transform: translateX(1.4rem)
 
   @media (prefers-color-scheme: dark)
@@ -121,5 +118,5 @@ html
       .color
         &_choice
           &::after
-            background-image: url("#{$images}night-moon.jpg")
+            background-image: url("#{$imagesPath}night-moon.jpg")
             transform: translateX(1.4rem)
diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index 4b63187..cd7db72 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -1,3 +1,7 @@
+$baseURL: '{{ .Site.BaseURL }}'
+$fontsPath: '{{ printf "../%s" (default "fonts/" .Site.Params.fontsDir) }}'
+$imagesPath: '{{ printf "../%s" (default "images/" .Site.Params.imagesDir) }}'
+$iconsPath: '{{ printf "../%s" (default "icons/" .Site.Params.iconsDir) }}'
 @import 'variables'
 @import 'override'
 // include static fonts only when they're not overriden