SCSS, Image processing, and reorg of content

themes/lhs/layouts/_default/baseof.html

@@ -12,7 +12,9 @@
 
     {{ block "hero" . }}
     <section id="hero">
-        <div class="hero is-medium" style="background-image: linear-gradient(-249deg, black, white), url({{ default "/images/hero-bg.jpg" .Params.hero_bg_image}});">
+        {{ $img := resources.Get "/images/hero-bg.jpg" }}
+        {{ $img = $img.Resize "1256x jpg" }}
+        <div class="hero is-medium" style="background-image: linear-gradient(-249deg, #53071b, #d41246), url({{ $img.RelPermalink }});">
             <div class="hero-body">
                 <div class="container">
                     {{ block "hero-content" . }}
@@ -44,7 +46,6 @@
 
     {{ partial "footer.html" .}}
 
-    <script src="/js/simplebox.min.js"></script>
     <script src="/js/site.js"></script>
 </body>
 

themes/lhs/layouts/partials/head.html

@@ -15,8 +15,10 @@
 <script src="https://kit.fontawesome.com/589b48ea08.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 
-<link rel="stylesheet" href="/css/bulma.min.css">
-<link rel="stylesheet" href="/css/leighhack.css" type="text/css">
+{{ $opts := dict "transpiler" "libsass" "targetPath" "css/leighhack.css" }}
+{{ with resources.Get "sass/leighhack.scss" | toCSS $opts | minify | fingerprint }}
+  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end }}
 
 <style>
     @font-face {

themes/lhs/layouts/shortcodes/image.html

@@ -0,0 +1,5 @@
+{{ $img := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
+{{ $img = $img.Resize "1256x jpg" }}
+<figure class="image">
+  <img src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}">`
+</figure>

themes/lhs/layouts/shortcodes/image_custom.html

@@ -0,0 +1,24 @@
+{{ $img := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
+{{ $command := .Get 1 }}
+{{ $options := .Get 2 }}
+{{ if eq $command "Fit"}}
+  {{ $img = $img.Fit $options }}
+{{ else if eq $command "Resize"}}
+  {{ $img = $img.Resize $options }}
+{{ else if eq $command "Fill"}}
+  {{ $img = $img.Fill $options }}
+{{ else if eq $command "Crop"}}
+  {{ $img = $img.Crop $options }}
+{{ else }}
+  {{ errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize."}}
+{{ end }}
+<figure class="image">
+  <img src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}">
+  <figcaption>
+  <small>
+    {{ with .Inner }}
+      {{ . }}
+    {{ end }}
+  </small>
+  </figcaption>
+</figure>