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

Merge pull request #1 from doughmination/main 

Add the actual site
This commit is contained in:
Ari 2026-06-18 05:21:24 +01:00 committed by GitHub
parent 632253c6c1 3c0bbc60cb
commit 9f8e96b878
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 630 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
404.html Normal file
View File

@ -0,0 +1,44 @@
<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 — stupid.cat</title>
<meta name="description" content="Aquesta pàgina no existeix. / This page doesn't exist.">
<meta name="theme-color" content="#1e1e2e">
<meta name="color-scheme" content="dark">
<meta name="robots" content="noindex">
<link rel="icon" href="/assets/cat.svg">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="error-wrap">
<p class="error-code">404</p>
<h1>
<span data-i18n="ca">Aquesta pàgina s'ha escapat.</span>
<span data-i18n="en" hidden>This page wandered off.</span>
</h1>
<p>
<span data-i18n="ca">No hi ha res aquí. Potser el gat ho ha amagat en algun racó.</span>
<span data-i18n="en" hidden>There's nothing here. Maybe the cat hid it somewhere.</span>
</p>
<a class="btn-home" href="/">
<span data-i18n="ca">Torna a l'inici</span>
<span data-i18n="en" hidden>Back home</span>
</a>
<div class="lang-switch" role="group" aria-label="Tria d'idioma / Language" style="margin-top:1.6rem;">
<button type="button" class="lang-btn is-active" data-lang="ca" aria-pressed="true">CA</button>
<button type="button" class="lang-btn" data-lang="en" aria-pressed="false">EN</button>
</div>
</div>
<script src="/js/main.js" defer></script>
</body>
</html>

1
CNAME
View File

@ -1 +0,0 @@
stupid.cat

16
assets/cat.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

32
css/fonts.css Normal file
View File

@ -0,0 +1,32 @@
/* 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;
}

319
css/style.css Normal file
View File

@ -0,0 +1,319 @@
/* ============================================================
style.css — the stylesheet for stupid.cat (root site)
Self-contained: palette + base pulled from main.css so this
page doesn't depend on the big shared stylesheet.
Theme: Catppuccin Mocha.
============================================================ */
@import url(/css/fonts.css);
/* ---------- palette (Catppuccin Mocha, accent = mauve) ---------- */
:root {
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
--text: #cdd6f4;
--subtext-1: #bac2de;
--subtext-0: #a6adc8;
--surface-0: #313244;
--surface-1: #45475a;
--surface-2: #585b70;
--mauve: #cba6f7;
--yellow: #f9e2af;
--red: #f38ba8;
--accent-rgb: 203, 166, 247;
}
/* ---------- base (from main.css) ---------- */
* { box-sizing: border-box; }
html {
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
}
body {
margin: 0;
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem 1rem;
font-family: 'Comic Code', ui-monospace, "SFMono-Regular", Menlo, monospace;
color: var(--text);
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
}
html:has(.home-wrap),
body:has(.home-wrap) {
height: auto;
min-height: 100dvh;
overflow-y: auto;
}
body:has(.home-wrap) {
align-items: flex-start;
}
.home-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 880px;
margin-inline: auto;
padding-bottom: 3rem;
}
/* ---------- skip link ---------- */
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
background: var(--yellow, #f9e2af);
color: var(--crust, #11111b);
padding: 0.5rem 0.9rem;
border-radius: 10px;
font-weight: 600;
z-index: 50;
transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }
/* ---------- top bar: brand + language ---------- */
.home-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.home-brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
color: var(--text, #cdd6f4);
text-decoration: none;
}
.home-brand .cat { width: 22px; height: 22px; display: block; }
.home-brand .dot { color: var(--red, #f38ba8); }
.lang-switch {
display: inline-flex;
background: var(--surface-0, #313244);
border: 1px solid var(--surface-1, #45475a);
border-radius: 999px;
padding: 3px;
gap: 2px;
}
.lang-btn {
font: inherit;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--subtext-0, #a6adc8);
background: transparent;
border: 0;
padding: 0.32rem 0.65rem;
border-radius: 999px;
transition: color 0.15s ease, background 0.15s ease;
}
.lang-btn:hover { color: var(--text, #cdd6f4); }
.lang-btn.is-active {
color: var(--crust, #11111b);
background: rgb(var(--accent-rgb, 203, 166, 247));
}
/* ---------- hero ---------- */
.home-hero {
text-align: center;
margin: 1.5rem 0 2.75rem;
}
.home-hero .kicker {
display: inline-block;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: lowercase;
color: var(--subtext-0, #a6adc8);
margin-bottom: 1rem;
}
.home-hero h1 {
margin: 0 0 0.9rem;
font-size: clamp(2.6rem, 10vw, 4.5rem);
line-height: 1;
font-weight: 700;
color: rgb(var(--accent-rgb, 203, 166, 247));
}
.home-hero h1 .dot { color: var(--red, #f38ba8); }
.hero-sub {
margin: 0 auto 0.75rem;
max-width: 36ch;
font-size: clamp(1.05rem, 3vw, 1.35rem);
font-weight: 500;
color: var(--text, #cdd6f4);
}
.hero-lede {
margin: 0 auto;
max-width: 46ch;
color: var(--subtext-0, #a6adc8);
}
/* ---------- section heading ---------- */
.section-head {
margin: 0 0 1.1rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--text, #cdd6f4);
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.section-head::before {
content: "";
width: 1.3rem;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, var(--yellow, #f9e2af), var(--red, #f38ba8));
}
/* ---------- subdomain cards ---------- */
.spaces { margin-bottom: 2.75rem; }
.space-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0.9rem;
}
.space-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.3rem;
height: 100%;
padding: 1.1rem 1.15rem 1.25rem;
border-radius: 16px;
background: var(--surface-0, #313244);
border: 1px solid var(--surface-1, #45475a);
color: var(--text, #cdd6f4);
text-decoration: none;
overflow: hidden;
transition: transform 0.15s ease, border-color 0.15s ease,
background 0.15s ease, box-shadow 0.15s ease;
}
.space-card:hover {
transform: translateY(-3px);
background: var(--surface-1, #45475a);
border-color: rgb(var(--accent-rgb, 203, 166, 247));
box-shadow: 0 6px 20px rgba(var(--accent-rgb, 203, 166, 247), 0.22);
}
.space-host {
font-weight: 700;
font-size: 1.02rem;
}
.space-host .dot { color: var(--red, #f38ba8); }
.space-alias {
font-size: 0.76rem;
color: var(--subtext-0, #a6adc8);
opacity: 0.85;
}
.space-alias .dot { color: var(--red, #f38ba8); }
.space-desc { color: var(--subtext-0, #a6adc8); font-size: 0.92rem; }
.space-go {
margin-top: auto;
align-self: flex-end;
font-size: 1.2rem;
color: var(--subtext-0, #a6adc8);
transition: transform 0.15s ease, color 0.15s ease;
}
.space-card:hover .space-go {
transform: translateX(3px);
color: rgb(var(--accent-rgb, 203, 166, 247));
}
.spaces-note {
margin: 1.1rem 0 0;
color: var(--subtext-0, #a6adc8);
font-size: 0.9rem;
font-style: italic;
}
/* ---------- about ---------- */
.about { margin-bottom: 2.5rem; }
.about-body {
max-width: 62ch;
padding: 1.4rem 1.6rem;
border-radius: 16px;
background: var(--mantle, #181825);
border: 1px solid var(--surface-0, #313244);
}
.about-body p { margin: 0 0 0.9rem; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--yellow, #f9e2af); }
.about-soft { color: var(--subtext-0, #a6adc8); font-size: 0.95rem; }
/* ---------- footer ---------- */
.home-footer {
text-align: center;
padding-top: 1.75rem;
border-top: 1px solid var(--surface-0, #313244);
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem 1.1rem;
margin-bottom: 0.9rem;
}
.footer-links a {
font-size: 0.88rem;
color: var(--subtext-0, #a6adc8);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-links a:hover {
color: var(--text, #cdd6f4);
border-bottom-color: var(--red, #f38ba8);
}
.footer-tag { margin: 0 0 0.35rem; font-weight: 600; color: var(--text, #cdd6f4); }
.footer-made { margin: 0; color: var(--subtext-0, #a6adc8); font-size: 0.88rem; }
/* ---------- 404 ---------- */
.error-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 32rem;
text-align: center;
}
.error-code {
margin: 0;
font-size: clamp(4rem, 20vw, 8rem);
line-height: 1;
font-weight: 700;
color: rgb(var(--accent-rgb, 203, 166, 247));
}
.error-wrap h1 { margin: 0.4rem 0 0.7rem; font-size: 1.3rem; color: var(--text, #cdd6f4); }
.error-wrap p { margin: 0 0 1.5rem; color: var(--subtext-0, #a6adc8); }
.error-wrap .btn-home {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 999px;
background: rgb(var(--accent-rgb, 203, 166, 247));
color: var(--crust, #11111b);
font-weight: 700;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.error-wrap .btn-home:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(var(--accent-rgb, 203, 166, 247), 0.35);
}
/* ---------- responsive ---------- */
@media (max-width: 420px) {
.home-top { flex-wrap: wrap; }
}

198
index.html
View File

@ -1,51 +1,169 @@
<!doctype html>
<html lang="en">
<html lang="ca">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>stupid.cat</title>
<meta name="description" content="A private domain for Ari and friends to grab funny subdomains and dodge rising domain prices.">
<meta name="theme-color" content="#cba6f7">
<meta name="robots" content="noindex">
<style>
:root {
--base: #1e1e2e;
--text: #cdd6f4;
--muted: #a6adc8;
--mauve: #cba6f7;
}
html, body { height: 100%; margin: 0; }
body {
display: grid;
place-items: center;
padding: 1.5rem;
box-sizing: border-box;
background: var(--base);
color: var(--text);
font: 1.125rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
text-align: center;
}
main { max-width: 32rem; }
a {
color: var(--mauve);
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }
.tag {
margin-top: 1.25rem;
font-size: 0.875rem;
color: var(--muted);
}
</style>
<title>stupid.cat — un petit racó d'Internet</title>
<meta name="description"
content="stupid.cat és un petit espai web personal per a projectes, experiments i coses que fem amb amics.">
<meta name="author" content="Ari & Clove">
<meta name="theme-color" content="#1e1e2e">
<meta name="color-scheme" content="dark">
<link rel="canonical" href="https://stupid.cat/">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="stupid.cat">
<meta property="og:title" content="stupid.cat — un petit racó d'Internet">
<meta property="og:description"
content="Un petit espai web personal per a projectes, experiments i coses que fem.">
<meta property="og:locale" content="ca_ES">
<meta property="og:locale:alternate" content="en_GB">
<meta property="og:url" content="https://stupid.cat/">
<meta property="og:image" content="https://stupid.cat/assets/cat.svg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="stupid.cat">
<meta name="twitter:description"
content="Un petit espai web personal per a projectes, experiments i coses que fem.">
<meta name="twitter:image" content="https://stupid.cat/assets/cat.svg">
<link rel="icon" href="/assets/cat.svg">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<main>
<p>A private domain for <a href="https://a.stupid.cat">Ari</a> and friends to grab funny subdomains and save money on the ever-rising price of domains.</p>
<p class="tag">A proper site is on the way.</p>
</main>
<a class="skip-link" href="#main">Salta al contingut / Skip to content</a>
<div class="home-wrap">
<header class="home-top">
<a class="home-brand" href="/">
<img class="cat" src="/assets/cat.svg" alt="" aria-hidden="true" width="22" height="22">
<span>stupid<span class="dot">.</span>cat</span>
</a>
<div class="lang-switch" role="group" aria-label="Tria d'idioma / Language">
<button type="button" class="lang-btn is-active" data-lang="ca" aria-pressed="true">CA</button>
<button type="button" class="lang-btn" data-lang="en" aria-pressed="false">EN</button>
</div>
</header>
<main id="main">
<!-- ===== HERO ===== -->
<section class="home-hero" aria-labelledby="hero-title">
<p class="kicker">
<span data-i18n="ca">un racó petit, fet a casa</span>
<span data-i18n="en" hidden>a small, homemade corner</span>
</p>
<h1 id="hero-title">stupid<span class="dot">.</span>cat</h1>
<p class="hero-sub">
<span data-i18n="ca">Un petit espai web personal per a projectes, experiments i coses que fem.</span>
<span data-i18n="en" hidden>A small personal web space for projects, experiments, and things we build.</span>
</p>
<p class="hero-lede">
<span data-i18n="ca">És un raconet privat on uns quants amics poden tenir el seu propi espai a Internet.</span>
<span data-i18n="en" hidden>It's a small private space where a few friends can have their own corner of the internet.</span>
</p>
</section>
<!-- ===== SUBDOMAINS ===== -->
<section class="spaces" aria-labelledby="spaces-title">
<h2 id="spaces-title" class="section-head">
<span data-i18n="ca">Els espais</span>
<span data-i18n="en" hidden>The spaces</span>
</h2>
<ul class="space-grid">
<li>
<a class="space-card" href="https://c.stupid.cat">
<span class="space-host">c<span class="dot">.</span>stupid.cat</span>
<span class="space-alias">↳ clove<span class="dot">.</span>stupid.cat <span data-i18n="ca">hi redirigeix</span><span data-i18n="en" hidden>redirects here</span></span>
<span class="space-desc">
<span data-i18n="ca">L'espai personal de la Clove — projectes, experiments i proves.</span>
<span data-i18n="en" hidden>Clove's personal space — projects, experiments and tinkering.</span>
</span>
<span class="space-go" aria-hidden="true">→</span>
</a>
</li>
<li>
<a class="space-card" href="https://a.stupid.cat">
<span class="space-host">a<span class="dot">.</span>stupid.cat</span>
<span class="space-alias">↳ ari<span class="dot">.</span>stupid.cat <span data-i18n="ca">hi redirigeix</span><span data-i18n="en" hidden>redirects here</span></span>
<span class="space-desc">
<span data-i18n="ca">L'espai personal de l'Ari.</span>
<span data-i18n="en" hidden>Ari's personal space.</span>
</span>
<span class="space-go" aria-hidden="true">→</span>
</a>
</li>
</ul>
<p class="spaces-note">
<span data-i18n="ca">Amb el temps potser n'apareixen uns quants més.</span>
<span data-i18n="en" hidden>A few more may show up over time.</span>
</p>
</section>
<!-- ===== ABOUT ===== -->
<section class="about" aria-labelledby="about-title">
<h2 id="about-title" class="section-head">
<span data-i18n="ca">Què és això?</span>
<span data-i18n="en" hidden>What is this?</span>
</h2>
<div class="about-body">
<p data-i18n="ca">
<strong>stupid.cat</strong> és un espai privat per a amics i projectes personals. Un lloc petit on
experimentar, aprendre, fer coses i mantenir webs personals en línia sense que cadascú necessiti el
seu propi domini.
</p>
<p data-i18n="en" hidden>
<strong>stupid.cat</strong> is a private namespace for friends and personal projects. A small place
to experiment, learn, build things, and keep personal websites online without everyone needing
their own domain.
</p>
<p class="about-soft">
<span data-i18n="ca">
Cada subdomini fa servir l'idioma que vol. Aquesta pàgina parla català perquè el domini acaba en
<code>.cat</code> 💛❤️
</span>
<span data-i18n="en" hidden>
Each subdomain uses whatever language it likes. This page speaks Catalan because the domain ends
in <code>.cat</code> 💛❤️
</span>
</p>
</div>
</section>
</main>
<footer class="home-footer">
<div class="footer-links" aria-label="Subdominis disponibles">
<a href="https://c.stupid.cat">c.stupid.cat</a>
<a href="https://a.stupid.cat">a.stupid.cat</a>
</div>
<p class="footer-tag">stupid.cat — <span data-i18n="ca">projectes i experiments personals</span><span
data-i18n="en" hidden>personal projects and experiments</span></p>
<p class="footer-made">
<span data-i18n="ca">Fet amb cura per l'Ari i la Clove.</span>
<span data-i18n="en" hidden>Made with care by Ari &amp; Clove.</span>
</p>
</footer>
</div>
<script src="/js/main.js" defer></script>
</body>
</html>

61
js/main.js Normal file
View File

@ -0,0 +1,61 @@
/* ============================================================
stupid.cat — language switcher (Catalan / English)
No dependencies. Remembers your choice. Defaults to Catalan.
============================================================ */
(function () {
'use strict';
var STORAGE_KEY = 'stupidcat-lang';
var SUPPORTED = ['ca', 'en'];
var DEFAULT_LANG = 'ca';
/* Catalan is always the default. Only an explicit, remembered
choice can override it — browser language is ignored. */
function detectLang() {
var saved;
try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) { /* ignore */ }
if (saved && SUPPORTED.indexOf(saved) !== -1) return saved;
return DEFAULT_LANG;
}
function applyLang(lang) {
if (SUPPORTED.indexOf(lang) === -1) lang = DEFAULT_LANG;
document.documentElement.lang = lang;
/* Toggle every translatable node. */
var nodes = document.querySelectorAll('[data-i18n]');
for (var i = 0; i < nodes.length; i++) {
var el = nodes[i];
el.hidden = el.getAttribute('data-i18n') !== lang;
}
/* Update the switcher buttons. */
var btns = document.querySelectorAll('.lang-btn');
for (var j = 0; j < btns.length; j++) {
var b = btns[j];
var active = b.getAttribute('data-lang') === lang;
b.classList.toggle('is-active', active);
b.setAttribute('aria-pressed', active ? 'true' : 'false');
}
try { localStorage.setItem(STORAGE_KEY, lang); } catch (e) { /* ignore */ }
}
function init() {
applyLang(detectLang());
var btns = document.querySelectorAll('.lang-btn');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
applyLang(this.getAttribute('data-lang'));
});
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();