From ccdd2d6e40277f4a73d478b58cce753b5abe71dc Mon Sep 17 00:00:00 2001 From: Fi3w0 Date: Tue, 11 Aug 2026 16:54:39 +0200 Subject: [PATCH] feat: polish featured project cards --- css/editorial.css | 432 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 38 ++-- 2 files changed, 451 insertions(+), 19 deletions(-) diff --git a/css/editorial.css b/css/editorial.css index af151e3..8937a9a 100644 --- a/css/editorial.css +++ b/css/editorial.css @@ -2142,6 +2142,438 @@ code { } } +/* Product-led project cards: quieter surfaces, tighter hierarchy, and real + product evidence in place of the earlier oversized ASCII treatments. */ +.current-project-tide { + min-height: 36rem; + border: 1px solid rgba(143, 212, 208, 0.55); + background: + radial-gradient(circle at 8% 100%, rgba(92, 196, 192, 0.16), transparent 28rem), + linear-gradient(135deg, #102832 0%, #101d26 58%, #0c171e 100%); + color: var(--text); + grid-template-columns: minmax(0, 1.4fr) minmax(21rem, 0.72fr); + box-shadow: 0 1.8rem 5rem rgba(3, 9, 13, 0.24); +} + +.current-project-tide:hover { + transform: translateY(-0.2rem); + border-color: var(--cyan); +} + +.current-project-tide::after { + position: absolute; + z-index: 0; + right: 24%; + bottom: -14rem; + width: 44rem; + height: 25rem; + border: 1px solid rgba(143, 212, 208, 0.12); + border-radius: 50%; + box-shadow: + 0 -2.5rem 0 rgba(143, 212, 208, 0.025), + 0 -5rem 0 rgba(143, 212, 208, 0.025), + 0 -7.5rem 0 rgba(143, 212, 208, 0.025); + content: ""; + pointer-events: none; +} + +.current-project-tide .current-project-main { + padding: clamp(2rem, 4vw, 3.8rem); +} + +.current-project-tide .current-meta { + border-bottom-color: rgba(143, 212, 208, 0.3); + color: var(--muted); +} + +.current-project-tide .current-meta > span:last-child { + color: var(--cyan); +} + +.current-project-tide .current-meta i { + border-radius: 50%; + background: var(--lime); +} + +.current-project-tide .current-kicker { + margin: clamp(3.2rem, 7vw, 6rem) 0 0.9rem; + color: var(--cyan); +} + +.current-project-tide .tide-heading { + gap: clamp(0.8rem, 1.8vw, 1.4rem); +} + +.current-project-tide .tide-heading h3 { + color: var(--paper); + font-size: clamp(4.2rem, 7.4vw, 7.4rem); + line-height: 0.88; +} + +.current-project-tide .tide-mark { + width: clamp(3rem, 4.5vw, 4.2rem); + height: clamp(3rem, 4.5vw, 4.2rem); + filter: drop-shadow(0 0.7rem 1rem rgba(60, 166, 182, 0.22)); +} + +.current-project-tide .current-project-main > p:not(.current-kicker) { + max-width: 50rem; + margin: 1.8rem 0 0; + color: #c7d4d2; + font-size: 0.9rem; + line-height: 1.72; +} + +.tide-proof { + position: relative; + z-index: 2; + display: grid; + max-width: 48rem; + margin: 2rem 0 1.7rem; + border-top: 1px solid rgba(143, 212, 208, 0.32); + border-bottom: 1px solid rgba(143, 212, 208, 0.2); + grid-template-columns: repeat(3, 1fr); +} + +.tide-proof div { + padding: 1rem 0.9rem 1rem 0; +} + +.tide-proof div + div { + padding-left: 1rem; + border-left: 1px solid rgba(143, 212, 208, 0.2); +} + +.tide-proof strong, +.tide-proof span { + display: block; +} + +.tide-proof strong { + color: var(--lime); + font-family: var(--display); + font-size: clamp(1.2rem, 2vw, 1.8rem); + font-weight: 400; + letter-spacing: -0.04em; +} + +.tide-proof span { + margin-top: 0.2rem; + color: var(--muted); + font-size: 0.57rem; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.current-project-tide .current-tags { + color: var(--muted); +} + +.current-project-tide .current-repo-link { + color: var(--text); +} + +.current-project-tide .current-roadmap { + z-index: 2; + padding: clamp(2rem, 3.2vw, 3rem); + border-left: 1px solid rgba(143, 212, 208, 0.26); + background: rgba(7, 18, 24, 0.42); + color: var(--text); +} + +.current-project-tide .current-roadmap > p { + color: var(--cyan); +} + +.current-project-tide .current-roadmap ol { + border-top-color: rgba(143, 212, 208, 0.55); +} + +.current-project-tide .current-roadmap li { + min-height: 6.2rem; + border-bottom-color: rgba(143, 212, 208, 0.2); + grid-template-columns: 1.7rem minmax(0, 1fr) auto; +} + +.current-project-tide .current-roadmap li > span { + color: #6ca3a7; +} + +.current-project-tide .current-roadmap strong { + color: var(--text); +} + +.current-project-tide .current-roadmap small { + max-width: 28rem; + color: #9eb1b2; + line-height: 1.45; + overflow-wrap: anywhere; +} + +.current-project-tide .current-roadmap li > b { + background: rgba(200, 238, 128, 0.12); + color: var(--lime); +} + +.current-project-tide .current-roadmap li:last-child > b { + background: rgba(240, 153, 110, 0.12); + color: var(--coral-bright); +} + +.current-project-tide .current-watermark { + right: auto; + bottom: -0.24em; + left: -0.04em; + color: rgba(143, 212, 208, 0.045); + font-size: clamp(10rem, 18vw, 17rem); +} + +.project-visual-flux { + min-height: 36rem; + padding: 0; + border-color: rgba(186, 177, 238, 0.55); + background: + radial-gradient(circle at 88% 12%, rgba(184, 146, 255, 0.2), transparent 24rem), + linear-gradient(145deg, #1a1d2a, #111821 72%); +} + +.project-visual-flux::after { + display: none; +} + +.flux-product-frame { + position: absolute; + top: 2.2rem; + right: 2.2rem; + bottom: 6.5rem; + left: 2.2rem; + display: grid; + min-width: 0; + overflow: hidden; + border: 1px solid rgba(237, 241, 233, 0.28); + background: #0d1015; + box-shadow: 1rem 1rem 0 rgba(111, 92, 170, 0.14); + grid-template-rows: auto minmax(0, 1fr); +} + +.flux-product-bar { + display: grid; + min-height: 2.9rem; + padding: 0 1rem; + border-bottom: 1px solid rgba(237, 241, 233, 0.16); + color: var(--muted); + font-family: var(--mono); + font-size: 0.58rem; + letter-spacing: 0.06em; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 0.9rem; + text-transform: uppercase; +} + +.flux-product-bar > span { + display: flex; + gap: 0.35rem; +} + +.flux-product-bar i { + width: 0.55rem; + height: 0.55rem; + border-radius: 50%; + background: var(--coral); +} + +.flux-product-bar i:nth-child(2) { + background: var(--yellow); +} + +.flux-product-bar i:nth-child(3) { + background: var(--lime); +} + +.flux-product-bar b { + color: var(--text); + font-weight: 500; +} + +.flux-product-bar em { + color: var(--cyan); + font-style: normal; +} + +.project-visual-flux .flux-product-shot { + position: relative; + width: 100%; + height: 100%; + min-height: 0; + border: 0; + filter: saturate(0.84) contrast(1.04); + object-fit: cover; + object-position: left center; + transform: none; + transition: filter 250ms ease, transform 500ms ease; +} + +.project-visual-flux:hover .flux-product-shot { + filter: saturate(1) contrast(1.03); + transform: scale(1.012); +} + +.flux-product-caption { + position: absolute; + z-index: 3; + right: 2.2rem; + bottom: 1.5rem; + display: flex; + min-width: 18rem; + padding: 0.65rem 0.8rem; + border: 1px solid rgba(237, 241, 233, 0.25); + background: #171d27; + color: var(--text); + align-items: center; + gap: 0.8rem; +} + +.project-visual-flux .flux-product-caption img { + width: 2.8rem; + height: 2.8rem; + border-radius: 22%; + filter: none; + object-fit: contain; + transform: none; +} + +.flux-product-caption span, +.flux-product-caption strong, +.flux-product-caption small { + display: block; +} + +.flux-product-caption strong { + font-family: var(--mono); + font-size: 0.68rem; + font-weight: 600; +} + +.flux-product-caption small { + margin-top: 0.15rem; + color: var(--muted); + font-size: 0.55rem; +} + +.project-visual-flux .image-label { + right: auto; + bottom: 1.8rem; + left: 2.2rem; + border-color: rgba(237, 241, 233, 0.22); +} + +.contact-links { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +@media (max-width: 68rem) { + .current-project-tide { + grid-template-columns: 1fr; + } + + .current-project-tide .current-roadmap { + border-top: 1px solid rgba(143, 212, 208, 0.26); + border-left: 0; + } + + .contact-links { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .contact-links > *:nth-child(odd) { + padding-left: 0; + border-left: 0; + } + + .contact-links > *:nth-child(n + 3) { + border-top: 2px solid var(--ink); + } +} + +@media (max-width: 52rem) { + .current-project-tide .current-kicker { + margin-top: 3rem; + } + + .current-project-tide .tide-heading h3 { + font-size: clamp(3.2rem, 15vw, 5rem); + } + + .tide-proof { + grid-template-columns: 1fr; + } + + .tide-proof div, + .tide-proof div + div { + padding: 0.75rem 0; + border-top: 1px solid rgba(143, 212, 208, 0.18); + border-left: 0; + } + + .tide-proof div:first-child { + border-top: 0; + } + + .project-visual-flux { + min-height: 27rem; + } + + .flux-product-frame { + top: 1rem; + right: 1rem; + bottom: 5.8rem; + left: 1rem; + box-shadow: 0.55rem 0.55rem 0 rgba(111, 92, 170, 0.14); + } + + .flux-product-bar { + padding: 0 0.7rem; + } + + .flux-product-caption { + right: 1rem; + bottom: 0.9rem; + min-width: 0; + } + + .project-visual-flux .image-label { + bottom: 1.2rem; + left: 1rem; + } + + .contact-links { + grid-template-columns: 1fr; + } + + .contact-links > * + *, + .contact-links > *:nth-child(n + 3) { + padding-left: 0; + border-top: 0; + border-left: 0; + } +} + +@media (max-width: 36rem) { + .current-project-tide .current-project-main, + .current-project-tide .current-roadmap { + padding: 1.35rem; + } + + .flux-product-caption { + display: none; + } + + .project-visual-flux .image-label { + right: 1rem; + } +} + @media print { .site-header, .signal-strip { diff --git a/index.html b/index.html index a40f640..65f4a30 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@ - - + + @@ -201,7 +201,7 @@

Public repositories, installable mods, and rougher ideas that started on my own machines.

-
+
Functional pre-releasev0.90 / daily-driver path

Wayland compositor / Rust

@@ -210,11 +210,16 @@

TideWM

A Wayland desktop that feels like water, built in Rust on Smithay. Under the ripples, wave transitions, glass, shadows, and window sway is a real tiling compositor with multi-monitor, XWayland, IPC, screencasting, and two spatial engines you can switch live.

+
+
2spatial engines
+
~63 MBnine glass windows
+
liveconfig reload
+
SmithayRustWaylandGPL-3.0
View repository
-

Project shape

+

Core systems

  1. 01
    ClassicBSP, master/stack, cascade, workspaces, Depth Deck
    done
  2. 02
    OceanOne continuous 2D world with reefs, cameras, and bookmarks
    done
    3. @@ -223,7 +228,6 @@
-
@@ -253,20 +257,15 @@
- - - -
Native media workbenchSwiftUI / AppKit / macOS
@@ -428,6 +427,7 @@

Say hello.

Linux, infrastructure, self-hosting, Minecraft tooling, or a strange project you cannot stop thinking about are all good reasons to message me.

+ Emailalex@fiwlabs.dev→ GitHub@Fi3w0↗ Telegram@fi3w0↗ @@ -443,7 +443,7 @@

© 2026 Alex / Fi3w0

- +