From 32c01f72e70eaa003b4d84e89cce4e17652bb7e8 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Tue, 2 Dec 2025 13:39:16 -0800
Subject: add banner to theme

---
 micro.pinapelz.moe/categories/default/index.html   |  2 +-
 micro.pinapelz.moe/categories/index.html           |  2 +-
 micro.pinapelz.moe/categories/life/index.html      |  2 +-
 micro.pinapelz.moe/css/style.css                   | 41 ++++++++++++++++++++++
 micro.pinapelz.moe/index.html                      |  9 +++--
 .../posts/2025-12-01-hello-world/index.html        |  9 +++--
 .../posts/2025-12-02-china-town-fair/index.html    |  9 +++--
 micro.pinapelz.moe/posts/index.html                | 16 +++++++--
 micro.pinapelz.moe/tags/arcade/index.html          |  2 +-
 micro.pinapelz.moe/tags/default/index.html         |  2 +-
 micro.pinapelz.moe/tags/index.html                 |  2 +-
 11 files changed, 81 insertions(+), 15 deletions(-)

(limited to 'micro.pinapelz.moe')

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;
-- 
cgit v1.2.3