add banner to theme

3 files changed, 48 insertions, 1 deletions

diff --git a/indieweb-micro/hugo.toml b/indieweb-micro/hugo.toml
index 5dea410..4e41ee0 100644
--- a/indieweb-micro/hugo.toml
+++ b/indieweb-micro/hugo.toml
@@ -14,6 +14,7 @@ dateFmt = "Monday, January 2, 2006"
     name = "Pinapelz"
     email = "yukais@pinapelz.com"
     avatar = "https://files.catbox.moe/5r1pue.jpg"
+    banner = "https://files.pinapelz.com/pso2ngs-2232-collab.png"
     bio = '''yo! and he's more than a cover he's a quilt<br/>
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)<br/>
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)<br/>
diff --git a/indieweb-micro/themes/MinIndie/layouts/partials/bio-hcard.html b/indieweb-micro/themes/MinIndie/layouts/partials/bio-hcard.html
index 0a476e4..5de3fc6 100644
--- a/indieweb-micro/themes/MinIndie/layouts/partials/bio-hcard.html
+++ b/indieweb-micro/themes/MinIndie/layouts/partials/bio-hcard.html
@@ -1,6 +1,11 @@
 <div class="h-card p-author bio-card" style="text-align:center;">
+    {{ if .Site.Params.Author.banner }}
+    <div class="banner" style="margin-bottom: 1rem; position: relative;">
+      <img class="u-featured" src="{{ .Site.Params.Author.banner }}" alt="Banner" style="width: 100%; max-width: 400px; height: auto; border-radius: 8px; opacity: 0.6;">
+      <img class="u-photo avatar" src="{{ .Site.Params.Author.avatar }}" alt="{{ .Site.Params.Author.name }}'s avatar" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+    </div>
+    {{ end }}
     <div class="bio">
-      <img class="u-photo avatar" src="{{ .Site.Params.Author.avatar }}" alt="{{ .Site.Params.Author.name }}'s avatar">
       <p class="p-note">{{ .Site.Params.Author.Bio | safeHTML }}</p>
     </div>
     <p class="bio-name"><a href="{{ .Site.BaseURL }}" rel="me" class="p-nickname p-name u-url">{{ .Site.Params.Author.name }}</a></p>
diff --git a/indieweb-micro/themes/MinIndie/static/css/style.css b/indieweb-micro/themes/MinIndie/static/css/style.css
index 26bd17b..bc04f86 100644
--- a/indieweb-micro/themes/MinIndie/static/css/style.css
+++ b/indieweb-micro/themes/MinIndie/static/css/style.css
@@ -141,6 +141,37 @@ img {
   height: 100px;
   border-radius: 50%;
   box-shadow: 0 0 8px rgba(255, 140, 200, 0.4);
+  border: 4px solid var(--bgcolor);
+  transition: transform 0.3s ease;
+}
+
+/* Banner with overlay avatar */
+.banner {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.banner img:first-child {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
+  opacity: 0.85;
+}
+
+.banner .avatar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: 120px;
+  height: 120px;
+  box-shadow: 0 0 20px rgba(255, 140, 200, 0.6);
+}
+
+.banner .avatar:hover {
+  transform: translate(-50%, -50%) scale(1.05);
 }
 
 /* 🌸 ALERTS */
@@ -228,6 +259,16 @@ tbody tr:nth-child(even) {
     align-self: center;
     text-align: center;
   }
+  
+  /* Smaller avatar on mobile */
+  .banner .avatar {
+    width: 90px;
+    height: 90px;
+  }
+  
+  .banner img:first-child {
+    border-radius: 6px;
+  }
 }
 
 /* PRINT */