From 8e22007bfd5d087cba4666001e4fe7ba20ca4492 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Mon, 1 Sep 2025 01:10:16 -0500
Subject: [PATCH] Rename feature-figure.html to featured-media and combine CSS
 with figures

- Rename feature-figure.html and its class from post-media to
  featured-media
- Move all <figure> formatting to a separate section
- Put the .featured-media CSS next to the rest of the figure formatting
  as it's sorta a special case of regular figure
---
 assets/css/bobastyle.css                      | 59 ++++++++++---------
 ...eature-figure.html => featured-media.html} |  2 +-
 layouts/page.html                             |  2 +-
 layouts/summary.html                          |  2 +-
 4 files changed, 35 insertions(+), 30 deletions(-)
 rename layouts/_partials/{feature-figure.html => featured-media.html} (88%)

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index b65e463..bffccd9 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -174,30 +174,6 @@ video {
   max-width: 100%;
 }
 
-figure > .figure-media {
-  padding: 5px;
-}
-
-figure > .figure-media.border {
-  border: 2px solid var(--figure-border);
-}
-
-.post-media > figure > .figure-media {
-  border: 7px solid var(--figure-border);
-}
-
-figure {
-  display: block;
-  text-align: center;
-  margin: 0;
-}
-
-figcaption {
-  font-style: italic;
-  font-size: small;
-  text-align: center;
-}
-
 a {
   color: var(--link-0);
   text-decoration: inherit;
@@ -495,9 +471,7 @@ body {
   content: ",";
 }
 
-.post-media {
-  margin-top: 15px;
-}
+/* for formatting of the featured image/media, see the .featured-media class */
 
 .summary-card-description {
   margin-top: 10px;
@@ -509,6 +483,37 @@ body {
 
 /* }}} */
 
+/* Figures, and featured media component (used in page.html and summary-card) {{{ */
+
+figure > .figure-media {
+  padding: 5px;
+}
+
+figure > .figure-media.border {
+  border: 2px solid var(--figure-border);
+}
+
+figure {
+  display: block;
+  text-align: center;
+  margin: 0;
+}
+
+figcaption {
+  font-style: italic;
+  font-size: small;
+  text-align: center;
+}
+
+.featured-media {
+  margin-top: 15px;
+}
+.featured-media > figure > .figure-media {
+  border: 7px solid var(--figure-border);
+}
+
+/* }}} */
+
 /* List layout {{{ */
 
 .page-list {
diff --git a/layouts/_partials/feature-figure.html b/layouts/_partials/featured-media.html
similarity index 88%
rename from layouts/_partials/feature-figure.html
rename to layouts/_partials/featured-media.html
index 01df020..8dc1c57 100644
--- a/layouts/_partials/feature-figure.html
+++ b/layouts/_partials/featured-media.html
@@ -1,5 +1,5 @@
 {{ with .Resources.Get "feature" }}
-    <div class="post-media">
+    <div class="featured-media">
         <figure>
             {{ partial "embed-resource.html" . }}
             {{ with .Title }}
diff --git a/layouts/page.html b/layouts/page.html
index 1382b45..2d691df 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -23,7 +23,7 @@
             </div>
         {{ end }}
 
-        {{ partial "feature-figure.html" . }}
+        {{ partial "featured-media.html" . }}
 
         <div class="post-content" data-pagefind-body>
             {{ .Content }}
diff --git a/layouts/summary.html b/layouts/summary.html
index 4c4104b..f861c62 100644
--- a/layouts/summary.html
+++ b/layouts/summary.html
@@ -7,7 +7,7 @@
 
     {{ partial "page-metadata/post-short.html" . }}
 
-    {{ partial "feature-figure.html" . }}
+    {{ partial "featured-media.html" . }}
 
     {{ with .Summary }}
         <div class="summary-card-description">