Skip to content

Commit b7dc6a4

Browse files
cakcak
committed
initial commit
1 parent 03098b4 commit b7dc6a4

3 files changed

Lines changed: 209 additions & 0 deletions

File tree

‎assets/snally-logo.png‎

69.3 KB
Loading

‎index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Snally.com</title>
7+
<meta
8+
name="description"
9+
content="A sandbox for web builds, data science, and experiments."
10+
/>
11+
<link rel="preload" href="assets/snally-logo.png" as="image" />
12+
<link rel="stylesheet" href="style.css" />
13+
</head>
14+
<body>
15+
<main>
16+
<header class="hero">
17+
<img
18+
src="assets/snally-logo.png"
19+
alt="Snallygaster logo"
20+
class="logo"
21+
width="200"
22+
height="256"
23+
loading="lazy"
24+
fetchpriority="high"
25+
/>
26+
27+
<h1 class="title">Snally.com</h1>
28+
<p class="tagline">
29+
where cryptids code, data shapeshifts, and experiments escape the lab
30+
</p>
31+
32+
<div class="description">
33+
<p>
34+
Some sites wear neckties; this one shows up in neon sneakers,
35+
half-finished prototypes tucked under its arm. It is a sandbox for
36+
wild web builds and off-beat data-science sketches, a playground
37+
where folklore trades campfire stories for JavaScript, CSS, and
38+
Quarto.
39+
</p>
40+
41+
<p>
42+
Numbers here morph into playful visuals, and HTML stretches into
43+
unexpected shapes. One week you might find a data-driven journey
44+
through long-distance running, the next an interactive
45+
monster-sighting map or a retro-inspired game.
46+
</p>
47+
48+
<p>
49+
Think of it as a garage after midnight—lights on, coffee brewing,
50+
code flickering across screens. Wander in, tap a few buttons, and
51+
discover what has hatched today.
52+
</p>
53+
</div>
54+
55+
<nav class="links">
56+
<a href="https://github.com/snally-labs" class="btn">GitHub</a>
57+
<a href="mailto:caleb@typeerror.com" class="btn">Contact</a>
58+
</nav>
59+
</header>
60+
</main>
61+
</body>
62+
</html>

‎style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/* ─── THEME VARIABLES ─── */
2+
:root {
3+
--pink: #ff3bbd;
4+
--purple: #8e22ff;
5+
--cyan: #00e8ff;
6+
--dark: #0c0118;
7+
8+
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
9+
Arial, sans-serif;
10+
--text-light: #e7e7ff;
11+
--text-muted: #d5d5ff;
12+
}
13+
14+
/* ─── GLOBAL RESET ─── */
15+
*,
16+
*::before,
17+
*::after {
18+
box-sizing: border-box;
19+
margin: 0;
20+
padding: 0;
21+
}
22+
html {
23+
background: var(--dark);
24+
color-scheme: dark;
25+
}
26+
body {
27+
font-family: var(--font-sans);
28+
color: var(--text-light);
29+
line-height: 1.6;
30+
}
31+
32+
/* ─── HERO ─── */
33+
.hero {
34+
position: relative;
35+
overflow: hidden;
36+
min-height: 100vh;
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
justify-content: center;
41+
padding: clamp(2rem, 5vw, 6rem) 1rem;
42+
text-align: center;
43+
}
44+
45+
/* glowing flame behind content */
46+
.hero::before {
47+
content: "";
48+
position: absolute;
49+
inset: -20vmax;
50+
background: conic-gradient(
51+
from 180deg at 50% 50%,
52+
var(--pink),
53+
var(--purple),
54+
var(--cyan),
55+
var(--pink)
56+
);
57+
filter: blur(100px) saturate(200%);
58+
animation: spin 25s linear infinite;
59+
z-index: -2;
60+
}
61+
/* dark overlay for legibility */
62+
.hero::after {
63+
content: "";
64+
position: absolute;
65+
inset: 0;
66+
background: var(--dark);
67+
opacity: 0.85;
68+
z-index: -1;
69+
}
70+
71+
/* ─── LOGO & TITLE ─── */
72+
.logo {
73+
width: clamp(120px, 20vw, 200px);
74+
height: auto;
75+
margin-bottom: 1.5rem;
76+
}
77+
78+
.title {
79+
font-size: clamp(2.5rem, 8vw, 4rem);
80+
font-weight: 900;
81+
background: linear-gradient(90deg, var(--pink), var(--cyan));
82+
-webkit-background-clip: text;
83+
-webkit-text-fill-color: transparent;
84+
margin-bottom: 0.5rem;
85+
}
86+
87+
.tagline {
88+
font-size: clamp(1rem, 2.5vw, 1.2rem);
89+
font-style: italic;
90+
color: var(--text-muted);
91+
margin-bottom: 2rem;
92+
max-width: 40ch;
93+
}
94+
95+
/* ─── DESCRIPTION ─── */
96+
.description {
97+
max-width: 54ch;
98+
}
99+
.description p + p {
100+
margin-top: 1.25rem;
101+
}
102+
103+
/* ─── BUTTONS ─── */
104+
.links {
105+
display: flex;
106+
gap: 1rem;
107+
flex-wrap: wrap;
108+
justify-content: center;
109+
margin-top: 3rem;
110+
}
111+
112+
.btn {
113+
display: inline-block;
114+
padding: 0.6rem 1.4rem;
115+
font-size: 1rem;
116+
font-weight: 600;
117+
border-radius: 0.4rem;
118+
background: linear-gradient(145deg, var(--pink), var(--purple));
119+
color: #fff;
120+
text-decoration: none;
121+
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
122+
transition: transform 0.2s ease, box-shadow 0.2s ease;
123+
}
124+
.btn:hover,
125+
.btn:focus-visible {
126+
transform: translateY(-2px);
127+
box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.5);
128+
}
129+
.btn:active {
130+
transform: translateY(0);
131+
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3) inset;
132+
}
133+
134+
/* ─── ANIMATIONS & ACCESSIBILITY ─── */
135+
@keyframes spin {
136+
to {
137+
transform: rotate(360deg);
138+
}
139+
}
140+
@media (prefers-reduced-motion: reduce) {
141+
.hero::before,
142+
.btn {
143+
animation: none;
144+
transition: none;
145+
transform: none;
146+
}
147+
}

0 commit comments

Comments
 (0)