From a817460fa71882d503cba3af2e96c5685bd0084c Mon Sep 17 00:00:00 2001 From: Fi3w0 Date: Tue, 11 Aug 2026 16:59:43 +0200 Subject: [PATCH] feat: polish Moonlit Shell showcase --- css/editorial.css | 179 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 21 +++--- 2 files changed, 192 insertions(+), 8 deletions(-) diff --git a/css/editorial.css b/css/editorial.css index 8937a9a..c5d9693 100644 --- a/css/editorial.css +++ b/css/editorial.css @@ -2468,6 +2468,143 @@ code { border-color: rgba(237, 241, 233, 0.22); } +.project-visual-moonlit { + min-height: 36rem; + overflow: hidden; + border-color: rgba(113, 177, 179, 0.58); + background: + radial-gradient(circle at 12% 90%, rgba(65, 147, 157, 0.18), transparent 24rem), + linear-gradient(145deg, #0c2028, #0a141b 72%); +} + +.project-visual-moonlit::after { + display: none; +} + +.moonlit-screen { + position: absolute; + top: 2.2rem; + right: 2.2rem; + bottom: 6.6rem; + left: 2.2rem; + display: block; + overflow: hidden; + border: 1px solid rgba(143, 212, 208, 0.42); + background: #071219; + box-shadow: 1rem 1rem 0 rgba(31, 103, 112, 0.15); +} + +.moonlit-camera { + position: absolute; + z-index: 3; + top: 0.45rem; + left: 50%; + width: 0.35rem; + height: 0.35rem; + transform: translateX(-50%); + border: 1px solid rgba(237, 241, 233, 0.22); + border-radius: 50%; + background: #03090d; +} + +.project-visual-moonlit .moonlit-screen > img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + filter: saturate(0.92) contrast(1.04) brightness(0.98); + object-fit: contain; + object-position: center; + transform: none; + transition: filter 300ms ease, transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1); +} + +.project-visual-moonlit:hover .moonlit-screen > img { + filter: saturate(1) contrast(1.03) brightness(1.03); + transform: scale(1.008); +} + +.moonlit-session { + position: absolute; + z-index: 3; + right: 1rem; + bottom: 1rem; + left: 1rem; + display: grid; + min-height: 3.4rem; + padding: 0.7rem 0.85rem; + border: 1px solid rgba(143, 212, 208, 0.28); + background: rgba(5, 17, 24, 0.84); + color: var(--text); + font-family: var(--mono); + grid-template-columns: 1fr auto; + align-content: center; + backdrop-filter: blur(0.5rem); +} + +.moonlit-session b, +.moonlit-session span, +.moonlit-session i { + display: block; +} + +.moonlit-session b { + font-size: 0.68rem; + font-weight: 600; +} + +.moonlit-session span { + margin-top: 0.12rem; + color: #9eb7b8; + font-size: 0.54rem; +} + +.moonlit-session i { + color: var(--lime); + font-size: 0.56rem; + font-style: normal; + letter-spacing: 0.08em; + grid-column: 2; + grid-row: 1 / 3; + align-self: center; +} + +.moonlit-specs { + position: absolute; + z-index: 3; + right: 2.2rem; + bottom: 1.5rem; + display: flex; + color: #aebfc0; + font-family: var(--mono); + font-size: 0.54rem; + letter-spacing: 0.03em; + gap: 1.1rem; +} + +.moonlit-specs span + span::before { + margin-right: 1.1rem; + color: #4c6e72; + content: "/"; +} + +.moonlit-specs b { + color: var(--cyan); + font-weight: 600; + text-transform: uppercase; +} + +.project-visual-moonlit .image-label { + right: auto; + bottom: 1.35rem; + left: 2.2rem; + border-color: rgba(143, 212, 208, 0.24); +} + +article[data-repo="Moonlit-shell"] .project-feature-copy { + border-top-color: var(--cyan); +} + .contact-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } @@ -2524,6 +2661,10 @@ code { min-height: 27rem; } + .project-visual-moonlit { + min-height: 27rem; + } + .flux-product-frame { top: 1rem; right: 1rem; @@ -2547,6 +2688,35 @@ code { left: 1rem; } + .moonlit-screen { + top: 1rem; + right: 1rem; + bottom: 5.8rem; + left: 1rem; + box-shadow: 0.55rem 0.55rem 0 rgba(31, 103, 112, 0.15); + } + + .moonlit-session { + right: 0.6rem; + bottom: 0.6rem; + left: 0.6rem; + } + + .moonlit-specs { + right: 1rem; + bottom: 1.25rem; + gap: 0.55rem; + } + + .moonlit-specs span + span::before { + margin-right: 0.55rem; + } + + .project-visual-moonlit .image-label { + bottom: 1.1rem; + left: 1rem; + } + .contact-links { grid-template-columns: 1fr; } @@ -2569,6 +2739,15 @@ code { display: none; } + .moonlit-session span, + .moonlit-specs { + display: none; + } + + .moonlit-session { + grid-template-columns: 1fr auto; + } + .project-visual-flux .image-label { right: 1rem; } diff --git a/index.html b/index.html index 65f4a30..a39a79b 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@ - - + + @@ -281,14 +281,19 @@
- - Moonlit Shell desktop with its top bar over a nocturnal landscape - Daily driver / ThinkPad T14 + + + + Moonlit Shell running on Arch Linux with its custom top panels over a nocturnal landscape + + + + Arch · Hyprland · Quickshell
-
Featured systemQML / Go / Linux
+
Daily systemQML / Go / Linux

Moonlit Shell

-

This is the desktop I actually use: Arch, Hyprland, and Quickshell with twelve panels, a live settings app, safe dotfile updates, and no monitoring daemon between the UI and /proc.

+

My daily Arch desktop, built around Hyprland and Quickshell. Twelve native panels, one live settings surface, recoverable dotfile updates, and direct system telemetry without another monitoring daemon in the middle.

  • 12native panels
  • 1live config
    • @@ -443,7 +448,7 @@

    © 2026 Alex / Fi3w0

    - +