refactor: Extract card overlays into class

Signed-off-by: Felicitas Pojtinger <felicitas@pojtinger.com>

Author: pojntfx

assets/scss/main.scss

@@ -20,3 +20,35 @@ dialog.pf-v6-c-modal-box:not([open]) {
 dialog[open].pf-v6-c-modal-box::backdrop {
   background-color: var(--pf-t--global--background--color--backdrop--default);
 }
+
+.pf-v6-c-card__body.pf-m-bg-overlay {
+  --bg-overlay-start: 60%;
+  --bg-overlay-mid: 80%;
+
+  background: linear-gradient(
+    color-mix(
+        in srgb,
+        var(--pf-t--global--background--color--primary--default)
+          var(--bg-overlay-start),
+        transparent
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--pf-t--global--background--color--primary--default)
+          var(--bg-overlay-mid),
+        transparent
+      )
+      50%,
+    var(--pf-t--global--background--color--primary--default) 100%
+  );
+  border-radius: inherit;
+
+  &.pf-m-overlay-light {
+    --bg-overlay-start: 40%;
+  }
+
+  &.pf-m-overlay-heavy {
+    --bg-overlay-start: 80%;
+  }
+}

layouts/_partials/section-events.html

@@ -100,10 +100,7 @@ <h3>Upcoming</h3>
                 min-height: 10rem;
               "
             >
-              <div class="pf-v6-c-card__body pf-v6-l-flex pf-m-column pf-m-justify-content-flex-end" style="
-                background: linear-gradient(color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 60%, transparent) 0%, color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 80%, transparent) 50%, var(--pf-t--global--background--color--primary--default) 100%);
-                border-radius: inherit;
-              ">
+              <div class="pf-v6-c-card__body pf-v6-l-flex pf-m-column pf-m-justify-content-flex-end pf-m-bg-overlay">
                 <div class="pf-v6-c-content">
                   <h4>{{ .tagline }}</h4>
                   <p>{{ .description }}</p>

layouts/_partials/section-home.html

@@ -130,10 +130,7 @@ <h3>{{ $c.expect.title }}</h3>
               "
             {{ end }}
           >
-            <div class="pf-v6-c-card__body pf-v6-l-flex pf-m-column pf-m-justify-content-flex-end pf-m-gap-sm" {{ with .image }}style="
-              background: linear-gradient(color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 60%, transparent) 0%, color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 80%, transparent) 50%, var(--pf-t--global--background--color--primary--default) 100%);
-              border-radius: inherit;
-            "{{ end }}>
+            <div class="pf-v6-c-card__body pf-v6-l-flex pf-m-column pf-m-justify-content-flex-end pf-m-gap-sm {{ with .image }}pf-m-bg-overlay{{ end }}">
               <div class="pf-v6-c-content">
                 <h4>{{ .title }}</h4>
                 <p>
@@ -214,10 +211,7 @@ <h3>{{ .title }}</h3>
                   background-position: center;
                 "
               >
-                <div class="pf-v6-c-card__body pf-v6-l-flex pf-m-column pf-m-justify-content-flex-end pf-m-gap-sm" style="
-                  background: linear-gradient(color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 40%, transparent) 0%, color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 80%, transparent) 50%, var(--pf-t--global--background--color--primary--default) 100%);
-                  border-radius: inherit;
-                ">
+                <div class="pf-v6-c-card__body pf-v6-l-flex pf-m-column pf-m-justify-content-flex-end pf-m-gap-sm pf-m-bg-overlay pf-m-overlay-light">
                   <div class="pf-v6-c-content">
                     <h4>{{ .title }}</h4>
                     <p><small>{{ .date }}</small></p>