add banner to theme

14 files changed, 129 insertions, 16 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 */
diff --git a/micro.pinapelz.moe/categories/default/index.html b/micro.pinapelz.moe/categories/default/index.html
index 524c0ea..f046e6e 100644
--- a/micro.pinapelz.moe/categories/default/index.html
+++ b/micro.pinapelz.moe/categories/default/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Default | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
diff --git a/micro.pinapelz.moe/categories/index.html b/micro.pinapelz.moe/categories/index.html
index 4145ff0..2df2185 100644
--- a/micro.pinapelz.moe/categories/index.html
+++ b/micro.pinapelz.moe/categories/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Categories | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
diff --git a/micro.pinapelz.moe/categories/life/index.html b/micro.pinapelz.moe/categories/life/index.html
index a37eecb..9a6fc64 100644
--- a/micro.pinapelz.moe/categories/life/index.html
+++ b/micro.pinapelz.moe/categories/life/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Life | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
diff --git a/micro.pinapelz.moe/css/style.css b/micro.pinapelz.moe/css/style.css
index 26bd17b..bc04f86 100644
--- a/micro.pinapelz.moe/css/style.css
+++ b/micro.pinapelz.moe/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 */
diff --git a/micro.pinapelz.moe/index.html b/micro.pinapelz.moe/index.html
index ab86de9..8c8b7e4 100644
--- a/micro.pinapelz.moe/index.html
+++ b/micro.pinapelz.moe/index.html
@@ -8,7 +8,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>micro.pinapelz.moe | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
@@ -62,8 +62,13 @@
 	<main>
         <hr />
         <h1 class="site-title">micro.pinapelz.moe</h1><div class="h-card p-author bio-card" style="text-align:center;">
+    
+    <div class="banner" style="margin-bottom: 1rem; position: relative;">
+      <img class="u-featured" src="https://files.pinapelz.com/pso2ngs-2232-collab.png" alt="Banner" style="width: 100%; max-width: 400px; height: auto; border-radius: 8px; opacity: 0.6;">
+      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+    </div>
+    
     <div class="bio">
-      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar">
       <p class="p-note">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/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html b/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html
index 7acc49d..2081599 100644
--- a/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html
+++ b/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Hello World - Why This | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
@@ -64,8 +64,13 @@
             <h1 class="p-name">Hello World - Why This</h1>
 
             <div hidden><div class="h-card p-author bio-card" style="text-align:center;">
+    
+    <div class="banner" style="margin-bottom: 1rem; position: relative;">
+      <img class="u-featured" src="https://files.pinapelz.com/pso2ngs-2232-collab.png" alt="Banner" style="width: 100%; max-width: 400px; height: auto; border-radius: 8px; opacity: 0.6;">
+      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+    </div>
+    
     <div class="bio">
-      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar">
       <p class="p-note">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/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html b/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html
index b941ce5..3b955be 100644
--- a/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html
+++ b/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>China Town Fair | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
@@ -64,8 +64,13 @@
             <h1 class="p-name">China Town Fair</h1>
 
             <div hidden><div class="h-card p-author bio-card" style="text-align:center;">
+    
+    <div class="banner" style="margin-bottom: 1rem; position: relative;">
+      <img class="u-featured" src="https://files.pinapelz.com/pso2ngs-2232-collab.png" alt="Banner" style="width: 100%; max-width: 400px; height: auto; border-radius: 8px; opacity: 0.6;">
+      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+    </div>
+    
     <div class="bio">
-      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar">
       <p class="p-note">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/micro.pinapelz.moe/posts/index.html b/micro.pinapelz.moe/posts/index.html
index 9d441d5..ef15140 100644
--- a/micro.pinapelz.moe/posts/index.html
+++ b/micro.pinapelz.moe/posts/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Posts | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
@@ -97,8 +97,13 @@
           <li class="h-entry">
               <div hidden>
                   <div class="h-card p-author bio-card" style="text-align:center;">
+    
+    <div class="banner" style="margin-bottom: 1rem; position: relative;">
+      <img class="u-featured" src="https://files.pinapelz.com/pso2ngs-2232-collab.png" alt="Banner" style="width: 100%; max-width: 400px; height: auto; border-radius: 8px; opacity: 0.6;">
+      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+    </div>
+    
     <div class="bio">
-      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar">
       <p class="p-note">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/>
@@ -131,8 +136,13 @@
           <li class="h-entry">
               <div hidden>
                   <div class="h-card p-author bio-card" style="text-align:center;">
+    
+    <div class="banner" style="margin-bottom: 1rem; position: relative;">
+      <img class="u-featured" src="https://files.pinapelz.com/pso2ngs-2232-collab.png" alt="Banner" style="width: 100%; max-width: 400px; height: auto; border-radius: 8px; opacity: 0.6;">
+      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+    </div>
+    
     <div class="bio">
-      <img class="u-photo avatar" src="https://files.catbox.moe/5r1pue.jpg" alt="Pinapelz's avatar">
       <p class="p-note">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/micro.pinapelz.moe/tags/arcade/index.html b/micro.pinapelz.moe/tags/arcade/index.html
index 82924e2..3df2874 100644
--- a/micro.pinapelz.moe/tags/arcade/index.html
+++ b/micro.pinapelz.moe/tags/arcade/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Arcade | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
diff --git a/micro.pinapelz.moe/tags/default/index.html b/micro.pinapelz.moe/tags/default/index.html
index 656529b..2d7c5dd 100644
--- a/micro.pinapelz.moe/tags/default/index.html
+++ b/micro.pinapelz.moe/tags/default/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Default | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;
diff --git a/micro.pinapelz.moe/tags/index.html b/micro.pinapelz.moe/tags/index.html
index 6602be4..28b95cd 100644
--- a/micro.pinapelz.moe/tags/index.html
+++ b/micro.pinapelz.moe/tags/index.html
@@ -7,7 +7,7 @@
   <style type=text/css>body{font-family:monospace;}</style>
   <title>Tags | micro.pinapelz.moe</title>
   
-  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
+  <meta name="author" content="map[avatar:https://files.catbox.moe/5r1pue.jpg banner:https://files.pinapelz.com/pso2ngs-2232-collab.png bio:yo! and he&#39;s more than a cover he&#39;s a quilt&lt;br/&gt;
     General arcade rhythm game enjoyer (SDVX, IIDX, CHUNITHM)&lt;br/&gt;
     Mostly play MMOs (FFXIV, OSRS), JRPGs, and VNs (anything with a good story)&lt;br/&gt;
     I Watch only slice of life (and Bandori)&lt;br/&gt;