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

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

.markdownlintrc

@@ -10,7 +10,7 @@
   "no-blanks-blockquote": true,
   "no-empty-links": false,
   "no-hard-tabs": false,
-  "no-inline-html": { "allowed_elements": [ "span", "sup" ] },
+  "no-inline-html": { "allowed_elements": [ "img", "span", "sup" ] },
   "no-multiple-blanks": false,
   "no-trailing-punctuation": false,
   "single-h1": false,

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;
 

config.toml

@@ -2,8 +2,8 @@ baseURL = "https://jarv.is/"
 languageCode = "en-us"
 title = "Jake Jarvis"
 
-# increase timeout for image processing
+# increase timeout for image processing (3 minutes)
-timeout = 120000
+timeout = 180000
 
 canonifyURLs = true
 
@@ -24,6 +24,7 @@ disableAliases = true
 [params]
   description = "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and progressive web apps."
   domain = "jarv.is"
+  pageMaxWidth = 910
   facebookAppID = "3357248167622283"
   gitRepo = "https://github.com/jakejarvis/jarv.is"
   defaultImage = "/me_large.jpg"
@@ -66,7 +67,7 @@ disableAliases = true
   [[menu.main]]
     name = "Email"
     pre = "📬"
-    # encode my email address -- probably not effective but why not?
+    # encode my email address like it's 2005 ( ͡° ͜ʖ ͡°)
     url = "mailto:jake@jarv.is"
     weight = -70
 

content/notes/coronavirus-open-source/index.md

@@ -12,8 +12,6 @@ image: "covid19dashboards.png"
 draft: false
 ---
 
-<!-- markdownlint-disable MD033 -->
-
 {{< page-css >}}
 /* override link underlines */
 h2 a {

layouts/partials/functions/optimize-image.html

@@ -3,7 +3,7 @@
 {{ $original := .Page.Resources.GetMatch (.Get "src") }}
 {{ .Scratch.Set "image" $original }}
 
-{{ $setWidth := 910 }}
+{{ $setWidth := .Site.Params.pageMaxWidth }}
 
 {{ if .Get "width" }}
   {{ $setWidth = (int (.Get "width")) }}

layouts/partials/head/styles.html

@@ -1,2 +1,2 @@
-{{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
+{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">

layouts/shortcodes/video.amp.html

@@ -1,6 +1,6 @@
 <amp-video
   layout="responsive"
-  width="{{ with .Get "width" }}{{ . }}{{ else }}910{{ end }}"
+  width="{{ with .Get "width" }}{{ . }}{{ else }}{{ .Site.Params.pageMaxWidth }}{{ end }}"
   height="{{ with .Get "height" }}{{ . }}{{ else }}600{{ end }}"
   {{- with .Page.Resources.GetMatch (.Get "poster") }} poster="{{ .Permalink }}"{{ end }}
   {{- if .Get "autoplay" }} autoplay{{ end }}