From 386b599905822f8c3b0aa62f423fa26dc13e84de Mon Sep 17 00:00:00 2001
From: jutty <j@jutty.dev>
Date: Sat, 16 May 2026 19:38:19 -0300
Subject: [PATCH] Reduce centerpiece drop shadow clipping

---
 static/assets/css/index.css | 11 +++++++----
 templates/index.html        | 23 ++++++++---------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/static/assets/css/index.css b/static/assets/css/index.css
index 9e57be3..e1503b8 100644
--- a/static/assets/css/index.css
+++ b/static/assets/css/index.css
@@ -10,11 +10,11 @@ j-wrap.index {
 
     figure.centerpiece {
         grid-area: centerpiece;
-        padding: 2em 1em;
     }
 
     img.centerpiece {
         height: 100%;
+        padding: 2em 0 4em 0;
     }
 
     h1 {
@@ -22,6 +22,7 @@ j-wrap.index {
         text-align: center;
         font-size: calc(1em + 2vw);
         margin-bottom: 0.125em;
+        margin-top: 0;
     }
 
     nav {
@@ -50,6 +51,7 @@ j-wrap.index {
 img.centerpiece:hover {
     cursor: crosshair;
     border-radius: 180px;
+    mask-image: none;
     backdrop-filter:
     blur(2px)
     drop-shadow(4px 4px 10px red)
@@ -62,7 +64,8 @@ img.centerpiece {
     animation-timing-function: linear;
     animation-duration: 30s;
     animation-iteration-count: infinite;
-    mask-image: linear-gradient(90deg,
+    mask-image: repeating-radial-gradient(
+        circle at farthest-corner in hsl longer hue,
         light-dark(#222, #000) 0%,
         light-dark(#888, #444) 50%,
         #fff 100%
@@ -84,7 +87,7 @@ img.five { animation-delay: -30s; }
     10% {
         filter:
         hue-rotate(0deg)
-        drop-shadow(0 0 8vw #3B050560)
+        drop-shadow(0 0 26vw #3B050580)
         brightness(3)
         blur(0.2px)
         saturate(1)
@@ -106,7 +109,7 @@ img.five { animation-delay: -30s; }
     60% {
         filter:
         hue-rotate(0deg)
-        drop-shadow(0 0 8vw #66000060)
+        drop-shadow(0 0 26vw #66000080)
         brightness(1)
         blur(0.2px)
         saturate(1)
diff --git a/templates/index.html b/templates/index.html
index 56f704e..a9cce96 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,25 +1,18 @@
 {% extends "base.html" %}
+
 {% block extra_head %}
-  <link href="{{ get_url(path="assets/css/index.css") }}" rel="stylesheet">
+    <link href="{{ get_url(path="assets/css/index.css") }}" rel="stylesheet">
 {% endblock extra_head %}
+
 {% block content %}
 <j-wrap class="index">
     {% set medusa = get_url(path="images/discomedusae_gamma_dark.png") %}
-    <figure class="centerpiece one">
-        <img class="centerpiece one" src="{{ medusa }}">
-    </figure>
-    <figure class="centerpiece two">
-        <img class="centerpiece two" src="{{ medusa }}">
-    </figure>
-    <figure class="centerpiece three">
-        <img class="centerpiece three" src="{{ medusa }}">
-    </figure>
-    <figure class="centerpiece four">
-        <img class="centerpiece four" src="{{ medusa }}">
-    </figure>
-    <figure class="centerpiece five">
-        <img class="centerpiece five" src="{{ medusa }}">
+    {% set centerpieces = [ "one", "two", "three", "four", "five" ] %}
+    {% for class in centerpieces %}
+    <figure class="centerpiece">
+        <img class="centerpiece {{ class }}" src="{{ medusa }}">
     </figure>
+    {% endfor %}
     <h1>Incandescência</h1>
     <nav>
         <ul>