meow
This commit is contained in:
parent
2ef6b01570
commit
1e311f2f73
111
css/main.css
111
css/main.css
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -100,6 +100,8 @@
|
|||
<p class="waka-meta" id="waka-meta" hidden></p>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
<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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue