/*
* Hi. I'm Elliott Short.
*
* This page is empty. I'm going to build it while
* you watch, one rule at a time.
*
* Press Esc to skip to the end.
*/
/*
* First, a transition, so whatever I change
* next eases in.
*/
[data-build="typing"],
[data-build="typing"] * {
transition: 0.8s;
transition-property: color, background-color,
border-color, border-radius;
}
/*
* You won't see that one yet.
*
* I'd rather read light text on a dark page,
* so I'll switch the colors.
*/
html {
color-scheme: dark;
background: #09090b;
color: #e4e4e7;
}
/*
* Better. This text needs a panel of its own.
*/
.editor {
position: fixed;
z-index: 50;
inset: 1rem 1rem 1rem auto;
width: min(40vw, 620px);
background: #111113;
border: 1px solid #27272a;
border-radius: 14px;
}
/*
* That's the nav and the hero with no styles of
* their own: default font, default links, no
* layout. The panel is in the way, so I'll make
* room first.
*/
body:has(.editor[data-dock="open"]) .stage {
padding-right: calc(min(40vw, 620px) + 2rem);
}
/*
* Browsers default to a serif font. I'll use
* Geist instead.
*/
body {
font-family: var(--font-geist), sans-serif;
-webkit-font-smoothing: antialiased;
}
/*
* The nav goes in a bar along the top.
*/
.nav-bar {
display: flex;
max-width: 72rem;
height: 3rem;
margin: 0 auto;
border: 1px solid #ffffff1a;
border-radius: 12px;
background: #09090bcc;
backdrop-filter: blur(24px);
}
/*
* The hero is mostly my name. It gets heavy
* capitals, set tight.
*/
.hero-name {
font-weight: 700;
line-height: 0.84;
letter-spacing: -0.04em;
text-transform: uppercase;
}
/*
* At this size the name looks flat. A gradient
* lights it from above.
*/
.hero-name {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(#fafafa 40%, #71717b);
color: transparent;
}
/*
* Every accent on the page is still gray. I'll
* fill them in with four colors.
*/
:root {
--sky: #74d4ff;
--indigo: #615fff;
--violet: #a684ff;
--pink: #fb64b6;
}
/*
* The light beams and the dithered planet are
* already on the page at zero opacity. I'll fade
* them in.
*/
.fx {
opacity: 1;
transition: opacity 1.6s;
}
/*
* The code in this panel could use color too.
*/
.tk-com { color: #a1a1aa; font-style: italic; }
.tk-sel, .tk-tag { color: #74d4ff; }
.tk-prop, .tk-attr { color: #fda5d5; }
.tk-str { color: #c4b4ff; }
.tk-num, .tk-kw { color: #a3b3ff; }
/*
* The About paragraph is the one thing on the
* page you should read. I'll set it large.
*/
.statement {
font-size: clamp(1.6rem, 3.4cqi, 2.6rem);
font-weight: 500;
line-height: 1.22;
letter-spacing: -0.03em;
}
/*
* Four projects, stacked like a plain document.
* Each one goes in a card, and the cards go in
* a grid once there's room for two columns.
*/
.cards {
display: grid;
gap: 1rem;
}
@container (width >= 64rem) {
.cards {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.card {
padding: 0.5rem;
border: 1px solid #ffffff1a;
border-radius: 22px;
}
/*
* I'd rather cut the corners at an angle, like
* the HUD in Bungie's Marathon.
*/
.card, .card-body, .editor {
corner-shape: bevel;
}
.card-body {
border-radius: 16px;
box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.8);
}
/*
* I pull the member count from Discord every
* hour. It should be the biggest thing here.
*/
.members {
font-size: clamp(3.5rem, 9cqi, 6.5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.045em;
}
/*
* Last section. The links get big enough to hit
* with a thumb.
*/
.contact-link {
font-size: clamp(1.25rem, 3.2cqi, 2.25rem);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.03em;
}
/*
* That's the whole page.
*
* The panel slides out of the way in a moment.
* Reopen it from the bottom-right corner. Press
* Inspect, then click anything on the page to see
* the rule that styled it. The CSS stays live, so
* you can edit it and watch the page change.
*/
