From 64bd8ae4b35b1682a9934d358e76809413dfc119 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:36:54 -0600
Subject: [PATCH] feat: Add image banner back

---
 assets/styles/millironx.css                  | 39 ++++++++++++++++++++
 layouts/partials/scrolling-image-header.html | 27 +++++++++-----
 2 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index fba1a0f..cd9d974 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -130,6 +130,45 @@ blockquote small {
   width: 100%;
 }
 
+.motto {
+  position: relative;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  color: #fff;
+  font-weight: 600;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.33);
+  width: 100%;
+  padding: 0 0 0.5em 0;
+  border-radius: 0.25rem;
+}
+
+.motto::before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+.motto-inside {
+  position: relative;
+  max-width: 95%;
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+
+.motto .motto-inside h1 {
+  background-color: rgba(0.33, 0.33, 0.33, 0.33);
+  -webkit-text-stroke: 0.3px lightgray;
+  line-height: 1;
+}
+
 /*
   Helper classes
 */
diff --git a/layouts/partials/scrolling-image-header.html b/layouts/partials/scrolling-image-header.html
index 89eecb7..ef35399 100644
--- a/layouts/partials/scrolling-image-header.html
+++ b/layouts/partials/scrolling-image-header.html
@@ -1,15 +1,22 @@
-{{ $millironx := resources.Get "graphics/millironx.svg" }}
-<div class="blurred-container">
-  <div class="motto">
+{{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
+{{ $mainimg := resources.Get $imgsrc }}
+{{ $cardImageDescription := .Param "cardImageDescription" }}
+{{ $croppedImage := $mainimg.Fill "6000x2000 center" }}
+
+<style>
+  .motto::before {
+    background-image: url('{{ $croppedImage.RelPermalink }}');
+  }
+</style>
+
+<div class="motto">
+  <div class="motto-inside">
     <h1 id="motto">
       {{ default .Title (safeHTML (.Param "motto")) }}
     </h1>
   </div>
-  {{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
-  {{ $mainimg := resources.Get $imgsrc }}
-  <div
-    class="img-src"
-    style="background-image: url('{{ $mainimg.RelPermalink }}');"
-  ></div>
 </div>
-<br />
+<div
+  class="img-src"
+  style="background-image: url('{{ $mainimg.RelPermalink }}');"
+></div>