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
 */

layouts/partials/scrolling-image-header.html

@@ -1,15 +1,22 @@
-{{ $millironx := resources.Get "graphics/millironx.svg" }}
+{{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
-<div class="blurred-container">
+{{ $mainimg := resources.Get $imgsrc }}
-  <div class="motto">
+{{ $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>