G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sharpen the Let's talk ribbon and center small outline buttons

Browse Source 
The ribbon was a 1600px image stretched almost 3x. It is now upscaled 2x
with Lanczos and light sharpening (keeping transparency) and stretched less.
Small outline buttons such as Replay get symmetric padding since they have
no arrow tile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-01 13:08:28 -04:00
parent cc7d385c9f
commit a7d8e4968e
5 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/assets/home.css
+1 -1
View File
@@ -245,7 +245,7 @@
/* ---------- connect ---------- */
.o2 > #connect { padding: clamp(3rem, 8vh, 5rem) 0 0; overflow: hidden; }
.talk { position: relative; width: 100%; height: clamp(14rem, 38vw, 34rem); display: flex; justify-content: center; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.ribbon { position: absolute; left: 50%; top: 50%; width: max(165%, 1900px); max-width: none; height: auto; transform: translate(-50%, -50%); animation: rib 14s ease-in-out infinite alternate; }
.ribbon { position: absolute; left: 50%; top: 50%; width: max(130%, 1500px); max-width: none; height: auto; transform: translate(-50%, -50%); animation: rib 14s ease-in-out infinite alternate; filter: blur(.35px) saturate(1.08); image-rendering: auto; }
@keyframes rib { from { transform: translate(-52%, -48%) rotate(-3deg) scale(1); } to { transform: translate(-48%, -52%) rotate(3deg) scale(1.06); } }
.talk h2 { position: relative; z-index: 2; font-weight: 600; font-size: clamp(5rem, 23vw, 22rem); line-height: .9; letter-spacing: -0.07em; color: #fff; mix-blend-mode: difference; white-space: nowrap; }
:root[data-theme="light"] .talk h2 { mix-blend-mode: normal; color: #0b1220; text-shadow: 0 2px 30px rgba(255, 255, 255, .6); }