Ari
GitHub
commit
9f8e96b878
|
|
@ -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>
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.3 KiB |
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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
198
index.html
|
|
@ -1,51 +1,169 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="ca">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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.">
|
<title>stupid.cat — un petit racó d'Internet</title>
|
||||||
<meta name="theme-color" content="#cba6f7">
|
<meta name="description"
|
||||||
<meta name="robots" content="noindex">
|
content="stupid.cat és un petit espai web personal per a projectes, experiments i coses que fem amb amics.">
|
||||||
<style>
|
<meta name="author" content="Ari & Clove">
|
||||||
:root {
|
<meta name="theme-color" content="#1e1e2e">
|
||||||
--base: #1e1e2e;
|
<meta name="color-scheme" content="dark">
|
||||||
--text: #cdd6f4;
|
<link rel="canonical" href="https://stupid.cat/">
|
||||||
--muted: #a6adc8;
|
|
||||||
--mauve: #cba6f7;
|
<!-- Open Graph -->
|
||||||
}
|
<meta property="og:type" content="website">
|
||||||
html, body { height: 100%; margin: 0; }
|
<meta property="og:site_name" content="stupid.cat">
|
||||||
body {
|
<meta property="og:title" content="stupid.cat — un petit racó d'Internet">
|
||||||
display: grid;
|
<meta property="og:description"
|
||||||
place-items: center;
|
content="Un petit espai web personal per a projectes, experiments i coses que fem.">
|
||||||
padding: 1.5rem;
|
<meta property="og:locale" content="ca_ES">
|
||||||
box-sizing: border-box;
|
<meta property="og:locale:alternate" content="en_GB">
|
||||||
background: var(--base);
|
<meta property="og:url" content="https://stupid.cat/">
|
||||||
color: var(--text);
|
<meta property="og:image" content="https://stupid.cat/assets/cat.svg">
|
||||||
font: 1.125rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
||||||
text-align: center;
|
<!-- Twitter -->
|
||||||
}
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
main { max-width: 32rem; }
|
<meta name="twitter:title" content="stupid.cat">
|
||||||
a {
|
<meta name="twitter:description"
|
||||||
color: var(--mauve);
|
content="Un petit espai web personal per a projectes, experiments i coses que fem.">
|
||||||
text-decoration: none;
|
<meta name="twitter:image" content="https://stupid.cat/assets/cat.svg">
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
}
|
<link rel="icon" href="/assets/cat.svg">
|
||||||
a:hover { border-bottom-color: currentColor; }
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
.tag {
|
|
||||||
margin-top: 1.25rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<a class="skip-link" href="#main">Salta al contingut / Skip to content</a>
|
||||||
<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>
|
<div class="home-wrap">
|
||||||
</main>
|
|
||||||
|
<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 & Clove.</span>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/js/main.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue