set max width of pages in Hugo config.toml, retrieve value from SCSS

https://gohugo.io/hugo-pipes/resource-from-template/

assets/sass/abstracts/_functions.scss

@@ -6,7 +6,7 @@
   // Calculate lighter underline color compared to text color by
   // mix()'ing with background (#fff) to give the impression of
   // opacity but with MUCH better compatibility.
-  $color-opaque: mix($color, $color-background, $link-opacity);
+  $color-opaque: mix($color, $color-background, $link-underline-opacity);
 
   // Return non-gradient linear-gradient():
   @return linear-gradient($color-opaque, $color-opaque);

assets/sass/abstracts/_variables.scss

@@ -14,10 +14,11 @@ $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 $system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
                "Menlo", "Courier", monospace;
+// stylelint-enable indentation
 
 // Misc Settings
 $responsive-width: 890px;
-$link-opacity: 40%;
+$link-underline-opacity: 40%;
 $link-underline-size: 2px;
 
 // Global Colors

assets/sass/components/_wave.scss

@@ -20,3 +20,4 @@ span.wave {
  50% { transform: rotate(  0.0deg); }
 100% { transform: rotate(  0.0deg); }
 }
+// stylelint-enable indentation

assets/sass/main.scss

@@ -1,5 +1,10 @@
 @charset "UTF-8";
 
+// all variables set by Hugo's config.toml must go here
+// stylelint-disable
+$max-width: {{ printf "%d%s" .Site.Params.pageMaxWidth "px" }};
+// stylelint-enable
+
 // Variables & Functions
 @import 'abstracts/variables';
 @import 'abstracts/functions';

assets/sass/pages/_etc.scss

@@ -2,7 +2,7 @@
 
 // Video Styles
 main#etc {
-  max-width: 910px;
+  max-width: $max-width;
   padding: 1.5em 2em;
   margin: 0 auto;
 

assets/sass/pages/_single.scss

@@ -2,7 +2,7 @@
 
 // Post Styles
 main#single {
-  max-width: 910px;
+  max-width: $max-width;
   padding: 1em 2em;
   margin: 0 auto;