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="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</header>
@ -129,22 +130,6 @@
</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">
<span class="badge">
<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 */
.terminal {
width: 94vw;
min-height: 0;
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 */
@ -1862,7 +1847,8 @@ details.waka-section[open]>summary.section-title::after {
.terminal {
position: relative;
z-index: 1;
width: min(92vw, 760px);
width: min(92vw, 600px);
min-height: min(62vh, 460px);
max-height: 76vh;
display: flex;
flex-direction: column;
@ -1879,7 +1865,7 @@ details.waka-section[open]>summary.section-title::after {
}
body:has(.terminal) .hub {
max-width: min(92vw, 760px);
max-width: min(92vw, 600px);
width: 100%;
}
@ -2030,18 +2016,14 @@ body:has(.terminal) .hub .terminal {
color: transparent;
}
/* ---- 88x31 button wall (always visible) ---- */
/* ---- 88x31 button wall (lives on the dedicated /88x31 page) ---- */
.button-wall {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
max-width: min(90vw, 480px);
gap: 0.6rem;
max-width: min(92vw, 480px);
margin: 0 auto;
}
.button-wall a {
@ -2058,54 +2040,60 @@ body:has(.terminal) .hub .terminal {
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);
border-color: rgb(var(--accent-rgb));
}
/* ---- boot reveal of side chrome ---- */
/* ---- boot reveal of side chrome (homepage terminal) ---- */
.nav,
.badges,
.button-wall {
.badges {
transition: opacity 0.6s ease, transform 0.6s ease;
}
body.term-booting .nav,
body.term-booting .badges,
body.term-booting .button-wall {
body.term-booting .badges {
opacity: 0;
transform: translateY(8px);
}
body.term-booting .button-wall {
transform: translate(-50%, 8px);
}
body.term-chrome-in .nav,
body.term-chrome-in .badges,
body.term-chrome-in .button-wall {
body.term-chrome-in .badges {
opacity: 1;
transform: none;
}
body.term-chrome-in .button-wall {
transform: translateX(-50%);
/* ---- 88x31 page: scrolls like the other content pages ---- */
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) {
.terminal {
width: 94vw;
min-height: 0;
max-height: clamp(300px, 65dvh, 70vh);
}
/* FIX: button-wall mobile — override both the base fixed position AND the
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;
.button-wall {
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" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</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 selected" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</header>
@ -176,22 +177,6 @@
</section>
</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">
<span class="badge">
<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="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</header>
@ -62,22 +63,6 @@
<div class="terminal" id="terminal"></div>
</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">
<span class="badge">
<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="/discord-bots">Discord Bots</a>
<a class="nav-link selected" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</header>