feat: polish Moonlit Shell showcase
This commit is contained in:
Fi3w0
parent
ccdd2d6e40
commit
a817460fa7
2 changed files with 192 additions and 8 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
21
index.html
21
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&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css?v=7">
|
||||
<link rel="stylesheet" href="css/editorial.css?v=7">
|
||||
<link rel="stylesheet" href="css/style.css?v=8">
|
||||
<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">
|
||||
<img src="img/moonlit-shell.jpg" alt="Moonlit Shell desktop with its top bar over a nocturnal landscape" width="1600" height="900">
|
||||
<span class="image-label">Daily driver / ThinkPad T14</span>
|
||||
<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">
|
||||
<span class="moonlit-screen">
|
||||
<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>© <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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue