extract inline page styles into a separate CSS file, and scope to content via SCSS

styles on AMP pages still won't be scoped to div#content like vanilla pages, though

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

@@ -10,13 +10,11 @@ tags:
   - GitHub
 image: "covid19dashboards.png"
 css: |
-  /* disable link underlines for octocats */
   h2 a:last-child {
-    background-image: none !important;
-    padding-bottom: 0 !important;
+    background-image: none;
+    padding-bottom: 0;
     margin-left: 8px;
   }
-  /* align octocat with text */
   h2 img {
     vertical-align: text-bottom;
   }

content/notes/shodan-search-queries/index.md

@@ -10,10 +10,9 @@ tags:
   - Dorking
 image: "shodan.png"
 css: |
-  /* disable hover underlines for search links */
   h3 a:last-child, h4 a:last-child {
-    background-image: none !important;
-    padding-bottom: 0 !important;
+    background-image: none;
+    padding-bottom: 0;
     margin-left: 6px;
   }
 draft: false

layouts/_default/single.amp.html

@@ -219,7 +219,7 @@
 
       {{/* Page-specific styles set via front matter */}}
       {{- with .Params.css }}
-        {{- . | safeCSS -}}
+        {{- replace . " !important" "" | safeCSS -}}
       {{ end -}}
     </style>
 

layouts/partials/head/styles.html

@@ -1,9 +1,12 @@
 {{ $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 }}">
 
-{{/* Page-specific styles set via front matter */}}
+{{/* Page-specific styles set via front matter, scoped via SCSS */}}
 {{ with .Params.css }}
-<style>
-  {{ . | safeCSS }}
-</style>
+  {{- $sass := printf "div#content { %s }" . }}
+  {{- $target := path.Join $.File.Dir "inline.scss" }}
+
+  {{- $css := $sass | resources.FromString $target | resources.ToCSS | resources.PostCSS (dict "config" "postcss.config.js") -}}
+
+  <link rel="stylesheet" href="{{ $css.Permalink }}">
 {{ end }}