add banner to theme

1 files changed, 41 insertions, 0 deletions

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 */