diff options
Diffstat (limited to 'micro.pinapelz.moe/css/style.css')
| -rw-r--r-- | micro.pinapelz.moe/css/style.css | 41 |
1 files changed, 41 insertions, 0 deletions
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 */ |