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

Make some fixes

This commit is contained in:
Clove 2026-06-13 21:53:43 +01:00
parent 4ecf06f903
commit e72642b0e0
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-face {
font-display: swap;
font-family: 'Comic Code'; font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff2') format('woff2'), 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'); url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff') format('woff');
@ -7,6 +8,7 @@
} }
@font-face { @font-face {
font-display: swap;
font-family: 'Comic Code'; font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff2') format('woff2'), 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'); url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff') format('woff');
@ -15,6 +17,7 @@
} }
@font-face { @font-face {
font-display: swap;
font-family: 'Comic Code'; font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff2') format('woff2'), 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'); url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff') format('woff');
@ -23,6 +26,7 @@
} }
@font-face { @font-face {
font-display: swap;
font-family: 'Comic Code'; font-family: 'Comic Code';
src: url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff2') format('woff2'), 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'); 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 */ /* IMPORTS */
@import url(fonts.css);
@import url("fonts.css"); @import url(picker.css);
@import url(theme-switcher.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/frappe.css);
@import url(themes/latte.css); @import url(themes/latte.css);
@import url(themes/macchiato.css);
@import url(themes/mocha.css);
/* Index.html */ *,
*::before,
*::after {
html, box-sizing: border-box;
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);
} }
html { html {
height: 100%;
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%); background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
} }
.hub { body {
position: auto; margin: 0;
z-index: 1; min-height: 100vh;
width: 100%; 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 { .pfp {
@ -138,19 +141,20 @@ body::before {
filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%); filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.intro { .intro {
margin-top: 10vh;
color: var(--text); color: var(--text);
text-align: center; text-align: center;
padding: 5vh padding: 0;
} }
.intro-text { .intro-text {
margin-top: 1vh; margin-top: 0.75rem;
padding: 1vh; 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 { .gitgay-link {
background-color: var(--mauve); background-color: var(--mauve);
border: none; border: none;
color: black; color: black;
padding: 20px; padding: 0.85rem 1.5rem;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 1rem;
margin: 4px 2px; font-weight: 600;
cursor: pointer; margin: 4px 2px;
border-radius: 15px; cursor: pointer;
font-family: "Comic Code"; 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 { .hub-header, .pfp, .hey, .pronouns, .intro-text, .gitgay-link {
@ -186,42 +212,42 @@ body::before {
/* ---- 88x31 button wall (always visible on desktop) ---- */ /* ---- 88x31 button wall (always visible on desktop) ---- */
.button-wall { .button-wall {
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 5; z-index: 5;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
max-width: min(90vw, 480px); max-width: min(90vw, 480px);
} }
/* hide on mobile */ /* hide on mobile */
@media (max-width: 768px) { @media (max-width: 768px) {
.button-wall { .button-wall {
display: none; display: none;
} }
} }
.button-wall a { .button-wall a {
display: block; display: block;
line-height: 0; line-height: 0;
} }
.button-wall img { .button-wall img {
width: 88px; width: 88px;
height: 31px; height: 31px;
image-rendering: pixelated; image-rendering: pixelated;
border: 1px solid var(--surface-1); border: 1px solid var(--surface-1);
border-radius: 2px; border-radius: 2px;
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 {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb));
} }
@ -242,7 +268,7 @@ body.message-page {
} }
.message-card { .message-card {
background: var(--surface0); background: var(--surface-0);
padding: 2.5rem; padding: 2.5rem;
border-radius: 12px; border-radius: 12px;
max-width: 520px; max-width: 520px;
@ -251,7 +277,7 @@ body.message-page {
text-align: center; text-align: center;
line-height: 1.6; line-height: 1.6;
color: var(--text); color: var(--text);
border: 1px solid var(--surface1); border: 1px solid var(--surface-1);
} }
.message-card h1 { .message-card h1 {
@ -261,7 +287,7 @@ body.message-page {
} }
.message-card p { .message-card p {
color: var(--subtext1); color: var(--subtext-1);
} }
.message-card .ok { color: var(--green); } .message-card .ok { color: var(--green); }
@ -269,7 +295,7 @@ body.message-page {
.message-card .warn { color: var(--yellow); } .message-card .warn { color: var(--yellow); }
.message-card .muted { .message-card .muted {
color: var(--overlay1); color: var(--overlay-1);
font-size: 0.9rem; font-size: 0.9rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }

19
index.html
View File

@ -8,6 +8,7 @@
<!-- Page Title --> <!-- Page Title -->
<title>Ari</title> <title>Ari</title>
<link rel="icon" type="image/png" href="/assets/media/favicon.png" /> <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> <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 --> <!-- SEO Meta Tags -->
@ -39,14 +40,12 @@
<meta name="twitter:card" content="summary_image" /> <meta name="twitter:card" content="summary_image" />
<meta name="twitter:title" content="Ari Stuff" /> <meta name="twitter:title" content="Ari Stuff" />
<meta name="twitter:description" content="Personal Site for Ari on git.gay" /> <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> </head>
<body> <body>
<main class="intro"> <main class="intro">
<header class="hub-header"> <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> <div>
<h1 class="hey">Hi, I'm<span class="name">Ari</span></h1> <h1 class="hey">Hi, I'm<span class="name">Ari</span></h1>
</div> </div>
@ -56,7 +55,7 @@
and just tries to help out whenever she can. and just tries to help out whenever she can.
</div> </div>
<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> </div>
</header> </header>
@ -69,16 +68,4 @@
<img src="/assets/88x31/skirt.gif" alt="Skirt" 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/gitgay.png" alt="GitGay" loading="lazy">
<img src="/assets/88x31/blink.gif" alt="Blink" 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>