Stupid-Cat
/
a.stupid.cat
mirror of https://github.com/AriTheStupidCat/a.stupid.cat.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request 'Make some fixes' (#3) from doughmination/ari-pages:main into main 

Reviewed-on: https://git.gay/ari/pages/pulls/3
This commit is contained in:
ari 2026-06-13 23:54:24 +02:00 committed by git.gay
parent 4ecf06f903 e72642b0e0
commit f569ae9a74
No known key found for this signature in database
GPG Key ID: BDA2A7586B5E1432
4 changed files with 107 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/media/avatar.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

4
css/fonts.css
View File

@ -1,4 +1,5 @@
@font-face {
font-display: swap;
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');
@ -7,6 +8,7 @@
}
@font-face {
font-display: swap;
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');
@ -15,6 +17,7 @@
}
@font-face {
font-display: swap;
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');
@ -23,6 +26,7 @@
}
@font-face {
font-display: swap;
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');

172
css/index.css
View File

@ -1,43 +1,46 @@
/* IMPORTS */
@import url("fonts.css");
@import url(fonts.css);
@import url(picker.css);
@import url(theme-switcher.css);
@import url("picker.css");
@import url(themes/mocha.css);
@import url(themes/macchiato.css);
@import url(themes/frappe.css);
@import url(themes/latte.css);
@import url(themes/macchiato.css);
@import url(themes/mocha.css);
/* Index.html */
html,
body {
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem 1rem;
height: 100%;
width: 100%;
overflow: hidden;
font-family: 'Comic Code', sans-serif;
overflow-x: hidden;
max-width: 100vw;
margin: 0;
min-height: 100vh;
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
color: var(--text);
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
}
.hub {
position: auto;
z-index: 1;
body {
margin: 0;
min-height: 100vh;
width: 100%;
max-width: 460px;
max-width: 100vw;
overflow-x: hidden;
font-family: 'Comic Code', sans-serif;
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
color: var(--text);
/* top-anchored, horizontally centered, scrollable */
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(2.5rem, 9vh, 6rem) 1.25rem 5rem;
}
/* main content column */
main.intro,
.hub {
width: 100%;
max-width: 480px;
z-index: 1;
}
.pfp {
@ -138,19 +141,20 @@ body::before {
filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
}
@media (max-width: 600px) {
.intro {
margin-top: 10vh;
color: var(--text);
text-align: center;
padding: 5vh
padding: 0;
}
.intro-text {
margin-top: 1vh;
padding: 1vh;
margin-top: 0.75rem;
padding: 0 0.25rem;
}
.hub-header h1 {
font-size: 1.7rem;
}
}
@ -164,19 +168,41 @@ body::before {
}
}
.intro-text {
max-width: 42ch;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
color: var(--subtext-1);
font-size: 0.98rem;
}
.gitgay-link {
background-color: var(--mauve);
border: none;
color: black;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
font-family: "Comic Code";
background-color: var(--mauve);
border: none;
color: black;
padding: 0.85rem 1.5rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
font-weight: 600;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
font-family: "Comic Code";
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.7);
}
.gitgay-link:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), 0.8);
}
.gitgay-link:active {
transform: translateY(0);
}
.hub-header, .pfp, .hey, .pronouns, .intro-text, .gitgay-link {
@ -186,42 +212,42 @@ body::before {
/* ---- 88x31 button wall (always visible on desktop) ---- */
.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);
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);
}
/* hide on mobile */
@media (max-width: 768px) {
.button-wall {
display: none;
}
.button-wall {
display: none;
}
}
.button-wall a {
display: block;
line-height: 0;
display: block;
line-height: 0;
}
.button-wall img {
width: 88px;
height: 31px;
image-rendering: pixelated;
border: 1px solid var(--surface-1);
border-radius: 2px;
transition: transform 0.12s ease, border-color 0.12s ease;
width: 88px;
height: 31px;
image-rendering: pixelated;
border: 1px solid var(--surface-1);
border-radius: 2px;
transition: transform 0.12s ease, border-color 0.12s ease;
}
.button-wall a:hover img {
transform: translateY(-2px);
border-color: rgb(var(--accent-rgb));
transform: translateY(-2px);
border-color: rgb(var(--accent-rgb));
}
@ -242,7 +268,7 @@ body.message-page {
}
.message-card {
background: var(--surface0);
background: var(--surface-0);
padding: 2.5rem;
border-radius: 12px;
max-width: 520px;
@ -251,7 +277,7 @@ body.message-page {
text-align: center;
line-height: 1.6;
color: var(--text);
border: 1px solid var(--surface1);
border: 1px solid var(--surface-1);
}
.message-card h1 {
@ -261,7 +287,7 @@ body.message-page {
}
.message-card p {
color: var(--subtext1);
color: var(--subtext-1);
}
.message-card .ok { color: var(--green); }
@ -269,7 +295,7 @@ body.message-page {
.message-card .warn { color: var(--yellow); }
.message-card .muted {
color: var(--overlay1);
color: var(--overlay-1);
font-size: 0.9rem;
margin-top: 1.5rem;
}

21
index.html
View File

@ -8,6 +8,7 @@
<!-- Page Title -->
<title>Ari</title>
<link rel="icon" type="image/png" href="/assets/media/favicon.png" />
<link rel="stylesheet" href="/css/index.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>
<!-- SEO Meta Tags -->
@ -39,14 +40,12 @@
<meta name="twitter:card" content="summary_image" />
<meta name="twitter:title" content="Ari Stuff" />
<meta name="twitter:description" content="Personal Site for Ari on git.gay" />
<link href="css/index.css" rel="stylesheet" />
<link href="css/picker.css" rel="stylesheet" />
</head>
<body>
<main class="intro">
<header class="hub-header">
<img class="pfp" src="assets/media/avatar.png" alt="Ari avatar">
<img class="pfp" src="assets/media/avatar.webp" alt="Ari avatar" width="96" height="96" fetchpriority="high">
<div>
<h1 class="hey">Hi, I'm<span class="name">Ari</span></h1>
</div>
@ -56,7 +55,7 @@
and just tries to help out whenever she can.
</div>
<div>
<a href="https://git.gay/Ari" target="_blank"><button class="gitgay-link">Check out my Git.Gay</button></a>
<a class="gitgay-link" href="https://git.gay/Ari" target="_blank" rel="noopener">Check out my Git.Gay</a>
</div>
</header>
@ -69,16 +68,4 @@
<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/transnow2.gif" alt="Melt Ice" loading="lazy">
</aside>
</body>
<script src="js/index.js"></script>
<script src="js/flavors.js"></script>
<script src="js/cat.js"></script>
</html>