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

move to a link hub

This commit is contained in:
Clove 2026-05-29 01:26:03 +01:00
parent 8a323f97b8
commit 3cc9e8f18f
2 changed files with 315 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
index.html
View File

@ -3,21 +3,121 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="0; url=https://github.com/doughmination">
<title>Redirecting...</title>
<title>Clove Twilight - Link Center</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<a rel="me" href="https://mastodon.social/@doughmination" style="display: none;"></a>
<h1>Redirecting...</h1>
<div class="spinner"></div>
<p>If you are not redirected automatically, <a href="https://github.com/doughmination">click here</a>.</p>
</div>
<script>
// JavaScript redirect as backup
window.location.href = "https://github.com/doughmination";
</script>
<a rel="me" href="https://mastodon.social/@doughmination" style="display: none;"></a>
<main class="hub">
<header class="hub-header">
<h1>Clove Twilight</h1>
<h2 class="pronouns">(fae/faer)</h2>
<p class="tagline">Link Center</p>
</header>
<nav class="links">
<a class="link-card" href="https://github.com/doughmination">
<img class="icon" src="/github.svg" alt="">
<span class="link-text">
<span class="link-title">GitHub</span>
<span class="link-sub">@doughmination</span>
</span>
</a>
<a class="link-card" href="https://x.com/DoughminCEO">
<img class="icon" src="/twitter.svg" alt="">
<span class="link-text">
<span class="link-title">Twitter</span>
<span class="link-sub">@DoughminCEO</span>
</span>
</a>
<a class="link-card" href="https://bsky.app/profile/doughmination.win">
<img class="icon" src="/bluesky.svg" alt="">
<span class="link-text">
<span class="link-title">Bluesky</span>
<span class="link-sub">@doughmination.win</span>
</span>
</a>
<a class="link-card" href="https://www.linkedin.com/in/estrogen/">
<img class="icon" src="/linkedin.svg" alt="">
<span class="link-text">
<span class="link-title">LinkedIn</span>
<span class="link-sub">Clove Twilight</span>
</span>
</a>
<a class="link-card" href="https://open.spotify.com/user/x060f5w4ftwv8zc8fi9662t70">
<img class="icon" src="/spotify.svg" alt="">
<span class="link-text">
<span class="link-title">Spotify</span>
<span class="link-sub">doughmination</span>
</span>
</a>
<a class="link-card" href="https://www.twitch.tv/doughminationgaming">
<img class="icon" src="/twitch.svg" alt="">
<span class="link-text">
<span class="link-title">Twitch</span>
<span class="link-sub">@doughminationgaming</span>
</span>
</a>
<a class="link-card" href="https://www.reddit.com/user/XerinDotZero/">
<img class="icon" src="/reddit.svg" alt="">
<span class="link-text">
<span class="link-title">Reddit</span>
<span class="link-sub">u/XerinDotZero</span>
</span>
</a>
<a class="link-card" href="https://www.youtube.com/@CloveTwiGaming">
<img class="icon" src="/youtube.svg" alt="">
<span class="link-text">
<span class="link-title">YouTube</span>
<span class="link-sub">@CloveTwiGaming</span>
</span>
</a>
<a class="link-card" rel="me" href="https://mastodon.social/@doughmination">
<img class="icon" src="/mastodon.svg" alt="">
<span class="link-text">
<span class="link-title">Mastodon</span>
<span class="link-sub">@doughmination@mastodon.social</span>
</span>
</a>
<a class="link-card" href="https://doughmination.win/">
<img class="icon" src="/site.svg" alt="">
<span class="link-text">
<span class="link-title">My Company Website</span>
<span class="link-sub">doughmination.win</span>
</span>
</a>
<a class="link-card" href="https://doughmination.co.uk/">
<img class="icon" src="/site.svg" alt="">
<span class="link-text">
<span class="link-title">My Portfolio</span>
<span class="link-sub">doughmination.co.uk</span>
</span>
</a>
<a class="link-card arch" href="/">
<img class="icon" src="/arch.svg" alt="">
<span class="link-text">
<span class="link-title">I use arch btw</span>
</span>
</a>
<a class="link-card arch" href="/">
<img class="icon" src="/amd.svg" alt="">
<span class="link-text">
<span class="link-title">AMD Purist</span>
</span>
</a>
</nav>
</main>
<script src="/cat.js" data-cat="/oneko.gif"></script>
</body>
</html>

221
style.css
View File

@ -1,30 +1,213 @@
/* Comic Code Import*/
@font-face {
font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff2') format('woff2'),
url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff2') format('woff2'),
url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff2') format('woff2'),
url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff2') format('woff2'),
url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff') format('woff');
font-weight: 700;
font-style: normal;
}
:root {
/* https://catppuccin.com/palette/ */
/* Catppuccin Mocha */
/* accents */
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--saphire: #74c7ec;
--blue: #89b4fa;
/* a lovely new blue passport */
--lavender: #b4befe;
/* Text */
--text: #cdd6f4;
--subtext-0: #a6adc8;
--subtext-1: #bac2de;
--overlay-0: #6c7086;
--overlay-1: #7f849c;
--overlay-2: #9399b2;
--surface-0: #313244;
--surface-1: #45475a;
--surface-2: #585b70;
/* Backgrounds */
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
/* Is this the crusty crab? */
}
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-family: 'Comic Code', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 1rem;
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
color: var(--text);
}
.container {
.hub {
width: 100%;
max-width: 460px;
}
.hub-header {
text-align: center;
margin-bottom: 2.25rem;
}
.spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
.hub-header h1 {
margin: 0;
font-size: 2rem;
font-weight: 700;
color: var(--pink);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
.tagline {
margin: 0.35rem 0 0;
color: var(--subtext-0);
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
a {
color: white;
text-decoration: underline;
.pronouns {
margin: 0.35rem 0 0;
color: var(--mauve);
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: lowercase;
}
.links {
display: grid;
grid-template-columns: repeat(auto-fit, 72px);
gap: 0.9rem;
justify-content: center;
}
.link-card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 16px;
background: var(--surface-0);
border: 1px solid var(--surface-1);
color: var(--text);
text-decoration: none;
transition: transform 0.15s ease, border-color 0.15s ease,
background 0.15s ease, box-shadow 0.15s ease;
}
.link-card:hover {
transform: translateY(-3px);
background: var(--surface-1);
border-color: var(--pink);
box-shadow: 0 6px 20px rgba(245, 194, 231, 0.22);
}
.icon {
width: 30px;
height: 30px;
flex-shrink: 0;
filter: invert(86%) sepia(8%) saturate(900%) hue-rotate(190deg) brightness(105%);
}
.link-card:hover .icon {
filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
}
/* Details revealed on hover as a tooltip */
.link-text {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
padding: 0.5rem 0.75rem;
border-radius: 10px;
background: var(--crust);
border: 1px solid var(--pink);
box-shadow: 0 6px 18px rgba(17, 17, 27, 0.55);
white-space: nowrap;
line-height: 1.3;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 10;
}
/* Tooltip arrow */
.link-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--pink);
}
.link-card:hover .link-text,
.link-card:focus-visible .link-text {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.link-title {
font-weight: 500;
font-size: 0.95rem;
color: var(--text);
}
.link-sub {
font-size: 0.78rem;
color: var(--subtext-0);
}
.link-card.arch .link-title {
color: var(--pink);
}