Move css and js to appropriate files

Having the CSS and JS in the html template produces pages larger
than necessary, as each page need to contain all the js/css.
Separating them in appropriate files allow the browser to just download
them once and use them for all the pages. This is even more effective
with an aggressive cache policy for the js and css, something that can
be done without fear thanks to the implemented cache-busting.
Also, having then in separate files allows us to use Hugo pipelines
for minimizing the code.

layouts/partials/head.html

@@ -8,24 +8,21 @@
 
     <!-- CSS Stylesheets and Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
-    {{$css := slice "base.scss" "darkmode.scss" "syntax.scss" "custom.scss"}}
-    {{range $css}}
-    {{$sass := resources.Get . | resources.ToCSS }}
-    {{with $sass | minify}}
-    <style>
-        {{.Content | safeCSS}}
-    </style>
-    {{end}}
+    {{$sass := resources.Match "styles/[!_]*.scss" }}
+    {{$css := slice }}
+    {{range $sass}}
+    {{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }}
+    {{$css = $css | append $scss}}
     {{end}}
+    {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify  }}
+    <link href="{{$finalCss.Permalink}}" rel="stylesheet">
 
-    {{- with resources.Get "darkmode.js" | minify -}}
-    <script>
-      {{.Content | safeJS }}
-    </script>
-    {{- end -}}
+    {{ $darkMode := resources.Get "js/darkmode.js" |  resources.Fingerprint "md5" | resources.Minify }}
+    <script src="{{$darkMode.Permalink}}"></script>
 
     <!--  Preload page vars  -->
     <script>
+      const BASE_URL = {{.Site.BaseURL}}
       let saved = false
       const fetchData = async () => {
         if (saved) {