From 4ea3f233b5b5e5828663075f07ba3eedd81053f5 Mon Sep 17 00:00:00 2001
From: Alex <alex@puer-robustus.eu>
Date: Mon, 26 Dec 2022 22:44:50 +0100
Subject: [PATCH] load scss via hugo pipe

* override theme's site asset loading html to also
  convert main.scss to css and load the resulting css.
  leverage hugo pipes for that:
  https://gohugo.io/hugo-pipes/
* main.css should not load the jekyll minimal-mistakes
  .scss files but rather a notices.scss which
  contains the necessary styles for the existing
  notice attributes in the posts to work (the fonts, sizes,
  etc. are still based on the minimal-mistakes defaults)
---
 assets/css/main.scss                   |   7 +-
 assets/css/notices.scss                | 132 +++++++++++++++++++++++++
 layouts/partials/load_site_assets.html |  27 +++++
 3 files changed, 161 insertions(+), 5 deletions(-)
 create mode 100644 assets/css/notices.scss
 create mode 100644 layouts/partials/load_site_assets.html

diff --git a/assets/css/main.scss b/assets/css/main.scss
index 44e6553..e887472 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1,9 +1,6 @@
----
-# Only the main Sass file needs front matter (the dashes are enough)
-search: false
----
-
 @charset "utf-8";
 
 $intro-transition  : none;
 $global-transition : none;
+
+@import "notices";
diff --git a/assets/css/notices.scss b/assets/css/notices.scss
new file mode 100644
index 0000000..ffafc35
--- /dev/null
+++ b/assets/css/notices.scss
@@ -0,0 +1,132 @@
+/* ==========================================================================
+   NOTICE TEXT BLOCKS
+   ========================================================================== */
+
+/** COLORS */
+
+$gray: #7a8288 !default;
+$light-gray: mix(#fff, $gray, 50%) !default;
+
+/** BLOG SETTINGS */
+
+$text-color: #000 !default;
+$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
+  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
+$global-font-family: $sans-serif !default;
+$type-size-6: 0.75em !default; // ~12px
+$background-color: #fff !default;
+$notice-background-mix: 80% !default;
+$code-notice-background-mix: 90% !default;
+$border-radius: 4px !default;
+$primary-color: #ff0000 !default;
+/** $primary-color: #6f777d !default; */
+$success-color: #3fa63f !default;
+$warning-color: #d67f05 !default;
+$danger-color: #ee5f5b !default;
+$info-color: #3b9cba !default;
+
+/**
+ *  Default Kramdown usage (no indents!):
+ *  <div class="notice" markdown="1">
+ *  #### Headline for the Notice
+ *  Text for the notice
+ *  </div>
+ */
+
+@mixin notice($notice-color) {
+  margin: 2em 0 !important;  /* override*/
+  padding: 1em;
+  color: $text-color;
+  font-family: $global-font-family;
+  font-size: $type-size-6 !important;
+  text-indent: initial; /* override*/
+  background-color: mix($background-color, $notice-color, $notice-background-mix);
+  border-radius: $border-radius;
+  box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+
+  h4 {
+    margin-top: 0 !important; /* override*/
+    margin-bottom: 0.75em;
+    line-height: inherit;
+  }
+
+  @at-root .page__content #{&} h4 {
+    /* using at-root to override .page-content h4 font size*/
+    margin-bottom: 0;
+    font-size: 1em;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0 !important; /* override*/
+    }
+  }
+
+  h4 + p {
+    /* remove space above paragraphs that appear directly after notice headline*/
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  a {
+    color: mix(#000, $notice-color, 10%);
+
+    &:hover {
+      color: mix(#000, $notice-color, 50%);
+    }
+  }
+
+  @at-root #{selector-unify(&, "blockquote")} {
+    border-left-color: mix(#000, $notice-color, 10%);
+  }
+
+  code {
+    background-color: mix($background-color, $notice-color, $code-notice-background-mix)
+  }
+
+	pre code {
+		background-color: inherit;
+	}
+
+  ul {
+    &:last-child {
+      margin-bottom: 0; /* override*/
+    }
+  }
+}
+
+/* Default notice */
+
+.notice {
+  @include notice($light-gray);
+}
+
+/* Primary notice */
+
+.notice--primary {
+  @include notice($primary-color);
+}
+
+/* Info notice */
+
+.notice--info {
+  @include notice($info-color);
+}
+
+/* Warning notice */
+
+.notice--warning {
+  @include notice($warning-color);
+}
+
+/* Success notice */
+
+.notice--success {
+  @include notice($success-color);
+}
+
+/* Danger notice */
+
+.notice--danger {
+  @include notice($danger-color);
+}
diff --git a/layouts/partials/load_site_assets.html b/layouts/partials/load_site_assets.html
new file mode 100644
index 0000000..1c77319
--- /dev/null
+++ b/layouts/partials/load_site_assets.html
@@ -0,0 +1,27 @@
+{{ $base_css := resources.Get "css/base.tpl.css" | resources.ExecuteAsTemplate "css/base.css" . }}
+
+{{ $site_css := $base_css }}
+
+{{ with site.Params.css }}
+  {{ $css_list := slice $site_css }}
+  {{ range . }}
+    {{ $custom_css := resources.Get . }}
+    {{ $css_list = $css_list | append $custom_css }}
+  {{ end }}
+  {{ $sass := resources.Get "css/main.scss" }}
+  {{ $style := $sass | resources.ToCSS }}
+  {{ $css_list = $css_list | append $style }}
+  {{ $site_css = $css_list | resources.Concat "css/base.css" }}
+{{ end }}
+
+{{ minify $site_css | fingerprint | .Page.Scratch.SetInMap "css" "base" }}
+
+{{ with site.Params.js }}
+  {{ $js_list := slice }}
+  {{ range . }}
+    {{ $custom_js := resources.Get . }}
+    {{ $js_list = $js_list | append $custom_js }}
+  {{ end }}
+  {{ $site_js := $js_list | resources.Concat "js/base.js" }}
+  {{ minify $site_js | fingerprint | $.Page.Scratch.SetInMap "js" "base" }}
+{{ end }}
-- 
2.45.2