Fix 88x31, other visuals later
This commit is contained in:
parent
0bf288c46b
commit
c131bf33c9
|
|
@ -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>
|
||||
|
|
@ -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
84
css/main.css
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
17
index.html
|
|
@ -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="">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue