jutty/incand
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reduce centerpiece drop shadow clipping

Browse source
This commit is contained in:
Juno Takano 2026-05-16 19:38:19 -03:00
commit 386b599905
2 changed files with 15 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

11
static/assets/css/index.css
View file

@ -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)

23
templates/index.html
View file

@ -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>