This commit is contained in:
Clove 2026-06-15 02:19:58 +01:00
parent 3b2b360e45
commit d7c298a83b
2 changed files with 185 additions and 14 deletions

View File

@ -1696,6 +1696,117 @@ body:has(.waka) {
margin: 1.4rem 0 0;
}
/* ---- collapsible dropdown sections (details/summary) ---- */
details.waka-section {
/* keep the card padding tight when collapsed; expands via [open] below */
padding-bottom: 1.15rem;
transition: padding-bottom 0.15s ease;
}
details.waka-section[open] {
padding-bottom: 1.35rem;
}
/* The clickable header row */
summary.section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
cursor: pointer;
list-style: none;
user-select: none;
margin-bottom: 0;
transition: margin-bottom 0.15s ease, color 0.15s ease;
}
/* Hide the native disclosure triangle (both engines) */
summary.section-title::-webkit-details-marker {
display: none;
}
summary.section-title::marker {
content: "";
}
summary.section-title:hover {
color: rgb(var(--accent-rgb));
}
summary.section-title:focus-visible {
outline: 2px solid rgb(var(--accent-rgb));
outline-offset: 3px;
border-radius: 6px;
}
/* Custom chevron that flips when the section is open */
summary.section-title::after {
content: "";
flex: none;
width: 0.5rem;
height: 0.5rem;
margin-right: 0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
details.waka-section[open] > summary.section-title {
margin-bottom: 1rem;
}
details.waka-section[open] > summary.section-title::after {
transform: rotate(-135deg);
}
/* Tech-stack icons sit inside a collapsible card now: drop the big
page-bottom padding the standalone .dev-info block used. */
.tech-stack .dev-info {
padding-bottom: 0;
justify-content: flex-start;
}
/* ---- hardware spec list ---- */
.hw-intro {
margin: 0 0 0.9rem;
font-size: 0.8rem;
color: var(--subtext-0);
}
.hw-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin: 0;
}
.hw-row {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 0.7rem;
align-items: baseline;
}
.hw-row dt {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--subtext-0);
}
.hw-row dd {
margin: 0;
font-size: 0.88rem;
color: var(--text);
}
@media (max-width: 560px) {
.hw-row {
grid-template-columns: 6rem 1fr;
}
}
/* ============================================================
14. TERMINAL HOMEPAGE (+ 88x31 button wall)

View File

@ -100,7 +100,9 @@
<p class="waka-meta" id="waka-meta" hidden></p>
</header>
<section class="dev-info" aria-label="Tech stack">
<details class="waka-section tech-stack" id="tech-stack">
<summary class="section-title">Tech Stack</summary>
<section class="dev-info" aria-label="Tech stack">
<span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/javascript')" role="img"
aria-label="JavaScript"></span>
<span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/openjdk')" role="img"
@ -189,7 +191,65 @@
aria-label="Raspberry Pi"></span>
<span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/vscodium')" role="img"
aria-label="VSCodium"></span>
</section>
<span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/css')" role="img"
aria-label="CSS"></span>
</section>
</details>
<details class="waka-section hardware" id="waka-section-hardware">
<summary class="section-title">Hardware</summary>
<p class="hw-intro">This is the beast setup I daily-drive. ✨</p>
<dl class="hw-list">
<div class="hw-row">
<dt>CPU</dt>
<dd>AMD Ryzen 9 9950x3d 4.3 GHz 16-Core Processor</dd>
</div>
<div class="hw-row">
<dt>GPU</dt>
<dd>XFX Speedster MERC 310 Black Edition Radeon RX 7900 XTX 24 GB Video Card</dd>
</div>
<div class="hw-row">
<dt>RAM</dt>
<dd>Corsair Vengeance 64 GB (2 x 32 GB) DDR5-6000 CL40 Memory</dd>
</div>
<div class="hw-row">
<dt>Storage</dt>
<dd>2x 1 TB NVMe + 10TB HDD</dd>
</div>
<div class="hw-row">
<dt>Motherboard</dt>
<dd>Gigabyte B850M AORUS ELITE WIFI6E ICE Micro ATX AM5 Motherboard</dd>
</div>
<div class="hw-row">
<dt>Cooling</dt>
<dd>Thermalright Aqua Elite V3 66.17 CFM Liquid CPU Cooler</dd>
</div>
<div class="hw-row">
<dt>Keyboard</dt>
<dd>Akko Sakura Miku 5108B Plus</dd>
</div>
<div class="hw-row">
<dt>Mouse</dt>
<dd>Logitech G502 X Gaming Lightspeed Wireless</dd>
</div>
<div class="hw-row">
<dt>Monitor(s)</dt>
<dd>Gigabyte G34WQCP 34.0" 3440 x 1440 180 Hz Curved Monitor</dd>
</div>
<div class="hw-row">
<dt>Headphones</dt>
<dd>Yowu Cat Ear Headphones Hatsune Miku NX</dd>
</div>
<div class="hw-row">
<dt>Microphone</dt>
<dd>Aokeo AK-60 USB Microphone</dd>
</div>
<div class="hw-row">
<dt>OS</dt>
<dd>Arch Linux | Windows 11</dd>
</div>
</dl>
</details>
<div id="contrib"></div>
@ -201,26 +261,26 @@
<div class="waka-week" id="waka-week"></div>
</section>
<section class="waka-section" id="waka-section-languages" hidden>
<h2 class="section-title">Languages</h2>
<details class="waka-section" id="waka-section-languages" hidden>
<summary class="section-title">Languages</summary>
<div class="waka-bars" id="waka-languages"></div>
</section>
</details>
<section class="waka-section" id="waka-section-categories" hidden>
<h2 class="section-title">Categories</h2>
<details class="waka-section" id="waka-section-categories" hidden>
<summary class="section-title">Categories</summary>
<div class="waka-bars" id="waka-categories"></div>
</section>
</details>
<div class="waka-grid2">
<section class="waka-section" id="waka-section-editors" hidden>
<h2 class="section-title">Editors</h2>
<details class="waka-section" id="waka-section-editors" hidden>
<summary class="section-title">Editors</summary>
<div class="waka-bars" id="waka-editors"></div>
</section>
</details>
<section class="waka-section" id="waka-section-os" hidden>
<h2 class="section-title">Operating Systems</h2>
<details class="waka-section" id="waka-section-os" hidden>
<summary class="section-title">Operating Systems</summary>
<div class="waka-bars" id="waka-os"></div>
</section>
</details>
</div>
<p class="waka-credit">Tracked automatically with <a href="https://wakatime.com" target="_blank"