Stupid-Cat
/
c.stupid.cat
mirror of https://git.gay/doughmination/c.stupid.cat.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix 88x31, other visuals later

This commit is contained in:
Clove 2026-06-16 00:16:49 +01:00
parent 0bf288c46b
commit c131bf33c9
7 changed files with 153 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
88x31/index.html Normal file
View File

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>88x31 Buttons | Clove Twilight</title>
<link rel="stylesheet" href="/css/main.css">
<script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
<link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
<!-- SEO Meta Tags -->
<meta name="description" content="The 88x31 buttons featured across clove.is-a.dev" />
<meta name="keywords" content="Portfolio, Personal, Developer, 88x31, buttons" />
<meta name="author" content="doughmination" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<!-- Canonical URL -->
<link rel="canonical" href="https://clove.is-a.dev/88x31" />
<!-- Alternate for mobile -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://clove.is-a.dev" />
<!-- Theme Color -->
<meta name="theme-color" content="#f5c2e7" />
<!-- Open Graph / Discord / Facebook -->
<meta property="og:image" content="https://clove.is-a.dev/assets/favicon/favicon.png" />
<meta property="og:site_name" content="clove.is-a.dev" />
<meta property="og:title" content="88x31 Buttons | Clove Twilight" />
<meta property="og:description" content="The 88x31 buttons featured across clove.is-a.dev" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://clove.is-a.dev/88x31" />
<meta property="og:locale" content="en_GB" />
<!-- Twitter Card -->
<meta name="twitter:image" content="https://clove.is-a.dev/assets/favicon/favicon.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="88x31 Buttons | Clove Twilight" />
<meta name="twitter:description" content="The 88x31 buttons featured across clove.is-a.dev" />
</head>
<body>
<header class="nav">
<nav class="nav-links">
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link" data-href="/cool-people">Cool People</a>
<a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link selected" data-href="/88x31">88x31</a>
</nav>
</header>
<div id="now-playing"></div>
<div class="hub">
<header class="hub-header">
<h1>88x31 Buttons</h1>
<p class="tagline">The little badges from around my site, all in one spot</p>
</header>
<section class="button-page">
<aside class="button-wall" aria-label="88x31 buttons">
<img src="/assets/88x31/linux.gif" alt="Linux" loading="lazy">
<img src="/assets/88x31/microslop.gif" alt="Microslop" loading="lazy">
<img src="/assets/88x31/estrogen.gif" alt="Estrogen" loading="lazy">
<img src="/assets/88x31/girlsnow.png" alt="Girls Network" loading="lazy">
<img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
<img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
<img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
<img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
<img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
<img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
<img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
<img src="/assets/88x31/transnow.gif" alt="TransNow" loading="lazy">
<img src="/assets/88x31/doughmination.png" alt="Doughmination" loading="lazy">
</aside>
</section>
</div>
<aside class="badges" aria-label="System badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
</aside>
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
<script src="/js/nav.js"></script>
<script src="/js/now-playing.js" data-user="1464890289922641993"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js"></script>
<script src="/js/terminal.js"></script>
<script src="/js/site-switcher.js"></script>
</body>
</html>

17
cool-people/index.html
View File

@ -49,6 +49,7 @@
<a class="nav-link" data-href="/dev-info">Dev Info</a> <a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a> <a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a> <a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav> </nav>
</header> </header>
@ -129,22 +130,6 @@
</div> </div>
<aside class="button-wall" aria-label="88x31 buttons">
<img src="/assets/88x31/linux.gif" alt="Linux" loading="lazy">
<img src="/assets/88x31/microslop.gif" alt="Microslop" loading="lazy">
<img src="/assets/88x31/estrogen.gif" alt="Estrogen" loading="lazy">
<img src="/assets/88x31/girlsnow.png" alt="Girls Network" loading="lazy">
<img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
<img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
<img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
<img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
<img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
<img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
<img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
<img src="/assets/88x31/transnow.gif" alt="TransNow" loading="lazy">
<img src="/assets/88x31/doughmination.png" alt="Doughmination" loading="lazy">
</aside>
<aside class="badges" aria-label="System badges"> <aside class="badges" aria-label="System badges">
<span class="badge"> <span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt=""> <img class="badge-icon" src="/assets/misc/amd.svg" alt="">

84
css/main.css
View File

@ -1405,24 +1405,9 @@ body:has(.friend-grid) {
/* FIX: terminal height — respect short landscape viewports */ /* FIX: terminal height — respect short landscape viewports */
.terminal { .terminal {
width: 94vw; width: 94vw;
min-height: 0;
max-height: clamp(300px, 65dvh, 70vh); max-height: clamp(300px, 65dvh, 70vh);
} }
/* FIX: button-wall — static in mobile flow, centered */
.button-wall {
order: 5;
position: static;
transform: none;
margin: 0 auto;
max-width: 100%;
}
/* FIX: override the term-chrome-in transform that wins by source order
over the plain .button-wall rule above (same specificity, later in sheet) */
body.term-booting .button-wall,
body.term-chrome-in .button-wall {
transform: none;
}
} }
/* Very narrow phones — squeeze waka bar name column further */ /* Very narrow phones — squeeze waka bar name column further */
@ -1862,7 +1847,8 @@ details.waka-section[open]>summary.section-title::after {
.terminal { .terminal {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: min(92vw, 760px); width: min(92vw, 600px);
min-height: min(62vh, 460px);
max-height: 76vh; max-height: 76vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1879,7 +1865,7 @@ details.waka-section[open]>summary.section-title::after {
} }
body:has(.terminal) .hub { body:has(.terminal) .hub {
max-width: min(92vw, 760px); max-width: min(92vw, 600px);
width: 100%; width: 100%;
} }
@ -2030,18 +2016,14 @@ body:has(.terminal) .hub .terminal {
color: transparent; color: transparent;
} }
/* ---- 88x31 button wall (always visible) ---- */ /* ---- 88x31 button wall (lives on the dedicated /88x31 page) ---- */
.button-wall { .button-wall {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.6rem;
max-width: min(90vw, 480px); max-width: min(92vw, 480px);
margin: 0 auto;
} }
.button-wall a { .button-wall a {
@ -2058,54 +2040,60 @@ body:has(.terminal) .hub .terminal {
transition: transform 0.12s ease, border-color 0.12s ease; transition: transform 0.12s ease, border-color 0.12s ease;
} }
.button-wall a:hover img { .button-wall a:hover img,
.button-wall img:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb));
} }
/* ---- boot reveal of side chrome ---- */ /* ---- boot reveal of side chrome (homepage terminal) ---- */
.nav, .nav,
.badges, .badges {
.button-wall {
transition: opacity 0.6s ease, transform 0.6s ease; transition: opacity 0.6s ease, transform 0.6s ease;
} }
body.term-booting .nav, body.term-booting .nav,
body.term-booting .badges, body.term-booting .badges {
body.term-booting .button-wall {
opacity: 0; opacity: 0;
transform: translateY(8px); transform: translateY(8px);
} }
body.term-booting .button-wall {
transform: translate(-50%, 8px);
}
body.term-chrome-in .nav, body.term-chrome-in .nav,
body.term-chrome-in .badges, body.term-chrome-in .badges {
body.term-chrome-in .button-wall {
opacity: 1; opacity: 1;
transform: none; transform: none;
} }
body.term-chrome-in .button-wall { /* ---- 88x31 page: scrolls like the other content pages ---- */
transform: translateX(-50%); html:has(.button-page),
body:has(.button-page) {
height: auto;
min-height: 100dvh;
overflow-y: auto;
}
body:has(.button-page) {
align-items: flex-start;
}
body:has(.button-page) .hub {
max-width: 560px;
}
.button-page {
display: flex;
justify-content: center;
padding-bottom: 4.5rem;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.terminal { .terminal {
width: 94vw; width: 94vw;
min-height: 0;
max-height: clamp(300px, 65dvh, 70vh); max-height: clamp(300px, 65dvh, 70vh);
} }
/* FIX: button-wall mobile — override both the base fixed position AND the .button-wall {
term-chrome-in rule (which is later in source order and wins by cascade) */
.button-wall,
body.term-booting .button-wall,
body.term-chrome-in .button-wall {
position: static;
transform: none;
margin: 0 auto;
max-width: 100%; max-width: 100%;
} }
} }

1
dev-info/index.html
View File

@ -51,6 +51,7 @@
<a class="nav-link selected" data-href="/dev-info">Dev Info</a> <a class="nav-link selected" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a> <a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a> <a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav> </nav>
</header> </header>

17
discord-bots/index.html
View File

@ -51,6 +51,7 @@
<a class="nav-link" data-href="/dev-info">Dev Info</a> <a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link selected" data-href="/discord-bots">Discord Bots</a> <a class="nav-link selected" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a> <a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav> </nav>
</header> </header>
@ -176,22 +177,6 @@
</section> </section>
</main> </main>
<aside class="button-wall" aria-label="88x31 buttons">
<img src="/assets/88x31/linux.gif" alt="Linux" loading="lazy">
<img src="/assets/88x31/microslop.gif" alt="Microslop" loading="lazy">
<img src="/assets/88x31/estrogen.gif" alt="Estrogen" loading="lazy">
<img src="/assets/88x31/girlsnow.png" alt="Girls Network" loading="lazy">
<img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
<img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
<img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
<img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
<img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
<img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
<img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
<img src="/assets/88x31/transnow.gif" alt="TransNow" loading="lazy">
<img src="/assets/88x31/doughmination.png" alt="Doughmination" loading="lazy">
</aside>
<aside class="badges" aria-label="System badges"> <aside class="badges" aria-label="System badges">
<span class="badge"> <span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt=""> <img class="badge-icon" src="/assets/misc/amd.svg" alt="">

17
index.html
View File

@ -48,6 +48,7 @@
<a class="nav-link" data-href="/dev-info">Dev Info</a> <a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a> <a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a> <a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav> </nav>
</header> </header>
@ -62,22 +63,6 @@
<div class="terminal" id="terminal"></div> <div class="terminal" id="terminal"></div>
</main> </main>
<aside class="button-wall" aria-label="88x31 buttons">
<img src="/assets/88x31/linux.gif" alt="Linux" loading="lazy">
<img src="/assets/88x31/microslop.gif" alt="Microslop" loading="lazy">
<img src="/assets/88x31/estrogen.gif" alt="Estrogen" loading="lazy">
<img src="/assets/88x31/girlsnow.png" alt="Girls Network" loading="lazy">
<img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
<img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
<img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
<img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
<img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
<img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
<img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
<img src="/assets/88x31/transnow.gif" alt="TransNow" loading="lazy">
<img src="/assets/88x31/doughmination.png" alt="Doughmination" loading="lazy">
</aside>
<aside class="badges" aria-label="System badges"> <aside class="badges" aria-label="System badges">
<span class="badge"> <span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt=""> <img class="badge-icon" src="/assets/misc/amd.svg" alt="">

1
music/index.html
View File

@ -34,6 +34,7 @@
<a class="nav-link" data-href="/dev-info">Dev Info</a> <a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a> <a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link selected" data-href="/music">Music</a> <a class="nav-link selected" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav> </nav>
</header> </header>