feat: polish Moonlit Shell showcase

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;
   }

index.html

@@ -19,8 +19,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&amp;family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&amp;display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="css/style.css?v=7">
+  <link rel="stylesheet" href="css/style.css?v=8">
-  <link rel="stylesheet" href="css/editorial.css?v=7">
+  <link rel="stylesheet" href="css/editorial.css?v=8">
 
   <link rel="icon" href="/favicon.ico" sizes="any">
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -281,14 +281,19 @@
       </article>
 
       <article class="project-feature reveal" data-repo="Moonlit-shell">
-        <a class="project-visual" href="https://github.com/Fi3w0/Moonlit-shell" target="_blank" rel="noreferrer" aria-label="View Moonlit Shell on GitHub">
+        <a class="project-visual project-visual-moonlit" href="https://github.com/Fi3w0/Moonlit-shell" target="_blank" rel="noreferrer" aria-label="View Moonlit Shell on GitHub">
-          <img src="img/moonlit-shell.jpg" alt="Moonlit Shell desktop with its top bar over a nocturnal landscape" width="1600" height="900">
+          <span class="moonlit-screen">
-          <span class="image-label">Daily driver / ThinkPad T14</span>
+            <span class="moonlit-camera" aria-hidden="true"></span>
+            <img src="img/moonlit-shell.jpg" alt="Moonlit Shell running on Arch Linux with its custom top panels over a nocturnal landscape" width="1600" height="900" loading="lazy">
+            <span class="moonlit-session" aria-hidden="true"><b>Moonlit Shell</b><span>ThinkPad T14 · live session</span><i>ACTIVE</i></span>
+          </span>
+          <span class="moonlit-specs" aria-hidden="true"><span><b>12</b> native panels</span><span><b>/proc</b> direct telemetry</span><span><b>safe</b> dotfile updates</span></span>
+          <span class="image-label">Arch · Hyprland · Quickshell</span>
         </a>
         <div class="project-feature-copy">
-          <div class="project-meta"><span>Featured system</span><span>QML / Go / Linux</span></div>
+          <div class="project-meta"><span>Daily system</span><span>QML / Go / Linux</span></div>
           <h3>Moonlit Shell</h3>
-          <p>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 <code>/proc</code>.</p>
+          <p>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.</p>
           <ul class="project-facts">
             <li><strong>12</strong><span>native panels</span></li>
             <li><strong>1</strong><span>live config</span></li>
@@ -443,7 +448,7 @@
     <p>&copy; <span id="year">2026</span> Alex / Fi3w0</p>
   </footer>
 
-  <script src="js/app.js?v=7" defer></script>
+  <script src="js/app.js?v=8" defer></script>
 </body>
 
 </html>