Bundle CSS with Hugo's Sass feature (#705)

* migrate bootstrap and flags to bundle

* migrated main.css

* migrate navbar.css and plyr

* migrated mulish font and darkreader

* migrated static/css/sections stylesheets

* migrated list page and sidebar styles

* migrated search.html ( nothing to add )

* migration single page styles

* remove duplicated style tags

* migrate notes.  Deleted unused css in static

* migrate 404 css to bundle

* migrate katex styles

* migrate embedpdf styles

* migrated katex css

---------

Co-authored-by: Aaron Qian <aaron@yeet.io>

layouts/partials/header.html

@@ -2,21 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<!-- ============ import common css ========== -->
-<link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | relURL }}"/>
-<link rel="stylesheet" href="{{ "/css/layouts/main.css" | relURL }}"/>
-<link rel="stylesheet" href="{{ "/css/navigators/navbar.css" | relURL }}"/>
-<link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
-{{ if ne site.Params.features.flags.enable false }}
-<link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>
-{{ end }}
-<!--=================== fonts ==============================-->
-<link rel="stylesheet" href="{{ "/google-fonts/Mulish/mulish.css" | relURL }}"/>
-
-<!--=================== dark mode ==========================-->
-{{ if site.Params.features.darkMode.enable }}
-<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
-{{ end }}
+{{ partial "helpers/style-bundle.html" . }}
 
 <!--================= fab-icon =========================-->
 {{/* add favicon only if the site author has provided the the favicon */}}

layouts/partials/helpers/get-sass-options.html

@@ -0,0 +1,5 @@
+{{ return (dict
+    "outputStyle" "compressed"
+    "enableSourceMap" (not hugo.IsProduction)
+    "includePaths" "node_modules"
+) }}

layouts/partials/helpers/style-bundle.html

@@ -0,0 +1,11 @@
+{{/*  setup Sass options  */}}
+{{- $options := partial "helpers/get-sass-options.html" -}}
+{{- $options = $options | merge (dict "targetPath" "application.css") -}}
+
+{{/*  Compile hugo template `application.template.scss` into `application.scss`.  */}}
+{{- $template := resources.Get "styles/application.template.scss" -}}
+{{- $scss := $template | resources.ExecuteAsTemplate "styles/application.scss" . -}}
+
+{{/*  Bundle application.scss  */}}
+{{- $bundle := $scss | resources.ToCSS $options | fingerprint -}}
+<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}" />

layouts/partials/math.html

@@ -1 +0,0 @@
-<link rel="stylesheet" href="{{ "/katex/katex.min.css" | relURL }}">