/* ============================================================================
SHARED LOOK — the palette, and the "plain page" style.
Loaded by FIVE files: index.html (where it dresses the phone version) and the
four real pages, about/projects/employment/contact.html. That's the point: the
pages and the phone view are the same CSS, so they can't drift apart. Change a
colour here and every one of them follows.
The four pages set — the same class index.html puts
on itself when the window is narrow — so all of it applies to both.
============================================================================ */
/* ============================================================
PALETTE — every colour was sampled out of YOUR OWN art, so
the interface can't drift away from the world.
--moss/--deep/--leaf/--fleck : grass yet again.png
--stone : pebbles.png
--ink : your character's outline
--cream : her skin highlight, lightened
The four section colours are the same idea: each is a hue
that already exists somewhere in your tiles.
============================================================ */
:root {
--font-pixel: "Pixelify Sans", "Silkscreen", "Courier New", monospace;
--font-read: system-ui, -apple-system, "Segoe UI", sans-serif;
--ink: #0c0c0c; /* character outline */
--deep: #0e3a31; /* grass shadow */
--moss: #165a4c; /* grass body */
--leaf: #91db69; /* grass highlight */
--fleck: #d7e05a; /* the yellow-green in the grass, lifted */
--stone: #7a7881; /* pebble mid-tone */
--cream: #efe6d3;
--c-about: #d36982; /* hue 346 — her crimson dress */
--c-projects: #5ec998; /* hue 152 — the bright grass tuft */
--c-work: #d8bb5a; /* hue 46 — door 2's olive frame */
--c-contact: #be77c5; /* hue 295 — the violet flower */
--shadow: 2px 2px 0 rgba(6,20,16,.85); /* hard, never blurred */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-pixel); color: #fff; background: var(--moss); -webkit-font-smoothing: none; }
.readable { font-family: var(--font-read); }
/* ---- The door that heads each section -------------------------------------
The class goes on the HEADING itself, not on the section, on purpose: the
game's pop-up copies the section's INSIDES into the panel, so the section
element (and anything on it) is left behind. Put it on the h2 and the door
comes along for the ride — pop-up, phone page and real page all get it. */
h1.door, h2.door { display: flex; align-items: center; gap: 12px; }
.door::before {
content: ""; flex: 0 0 auto; width: 56px; height: 56px;
background-repeat: no-repeat;
background-size: 112px 56px; /* the sheets are 2 frames (closed | open)... */
background-position: 0 0; /* ...and we want the CLOSED one */
image-rendering: pixelated;
}
.door-about::before { background-image: url("assets/door%202%20shadow.png"); }
.door-projects::before { background-image: url("assets/door%204%20shadow.png"); }
.door-work::before { background-image: url("assets/door%201.png"); }
.door-contact::before { background-image: url("assets/door%203%20shadow.png"); }
/* Each section's colour, set in BOTH places on purpose — they cover different cases:
...on the SECTION, so everything inside it (the "Read more" button, the bullets,
the project titles) inherits the colour. A variable set on the heading alone
stops at the heading; it never reaches its own siblings.
...and on the HEADING's class, because the game's pop-up copies the section's
INSIDES into the panel and leaves the section element behind — so without this
the pop-up heading would have no colour at all. */
#sec-about { --c: var(--c-about); }
#sec-projects { --c: var(--c-projects); }
#sec-work { --c: var(--c-work); }
#sec-contact { --c: var(--c-contact); }
.door-about { --c: var(--c-about); }
.door-projects { --c: var(--c-projects); }
.door-work { --c: var(--c-work); }
.door-contact { --c: var(--c-contact); }
/* ============================================================================
THE PLAIN PAGE.
On a phone, index.html turns into this (see PAGE_MODE in its script). The four
real pages ARE this. It's still your world — it's all your art:
background = your grass tile, repeating
section mark = the actual door that opens that section in the game
divider = your pebble path
============================================================================ */
body.page-mode {
overflow: auto; height: auto;
/* Your grass, tiled. The sheet is 4 variants in a 256x64 strip, so repeating
the WHOLE strip lays all four down in a row — the ground never looks stamped.
Scaled 1.5x, exactly as the game draws it: a page pixel is a game pixel. */
background: var(--moss) url("assets/grass%20lighter%20tips.png") repeat top left / 384px 96px;
image-rendering: pixelated;
}
body.page-mode #content {
position: static; width: auto; height: auto; overflow: visible;
clip: auto; clip-path: none; white-space: normal;
max-width: 640px; margin: 0 auto; padding: 28px 20px 8px;
}
/* The words sit on a dark card, not straight on the grass: pixel grass behind
16px prose is unreadable, and legibility beats scenery every time. The grass
still shows around it, which is enough to say where you are. */
body.page-mode #content > section,
body.page-mode #page-head {
background: rgba(12, 30, 25, 0.90);
border: 3px solid var(--deep);
box-shadow: 0 6px 0 rgba(6,20,16,.45);
padding: 20px 20px 22px;
margin: 0 0 26px;
}
body.page-mode #page-head { text-align: center; padding: 26px 20px; }
body.page-mode #page-head h1 { font-size: 30px; letter-spacing: 1px; text-shadow: var(--shadow); }
body.page-mode #page-head p { font-family: var(--font-read); font-size: 13px; color: rgba(255,255,255,.6); margin-top: 12px; }
body.page-mode #content h2 {
position: relative;
font-size: 22px; letter-spacing: 1px; color: var(--c, #fff); text-shadow: var(--shadow);
padding-bottom: 32px; /* room for the path underneath */
}
/* Your pebble path, as the rule under each heading — the same stones you walk on.
ABSOLUTELY positioned, which is what keeps it out of the flex row above (a
pseudo-element inside a flex container is otherwise a flex ITEM, and it would
line up beside the door instead of sitting under the words).
pebbles.png is 256x64 — FOUR tiles in a strip, not one square — so the size has
to keep that 4:1 ratio. 88x22 lays down four 22px stones and repeats. Sizing it
square is what smeared grey mush across the headings the first time round. */
body.page-mode #content h2::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
background: url("assets/pebbles.png") repeat-x left center / 88px 22px;
image-rendering: pixelated; opacity: .8;
}
body.page-mode #content .readable { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); padding-top: 14px; }
body.page-mode #content .readable p + p { margin-top: 10px; }
body.page-mode #content .note { color: rgba(255,255,255,.55); font-size: 13px; }
body.page-mode #content ul { list-style: none; margin-top: 12px; }
body.page-mode #content li { margin: 8px 0; }
body.page-mode #content li::before { content: "\25B8"; color: var(--c, var(--fleck)); margin-right: 8px; }
body.page-mode #content a { color: var(--c, var(--fleck)); text-underline-offset: 3px; }
/* ============================================================================
ONE COPY OF THE WORDS, THREE VIEWS OF THEM.
The sections in index.html hold the FULL text. Nothing is ever written twice —
these rules just decide how much of it you see:
BIG SCREEN, pop-up everything. `.more` is hidden (see index.html's #panel
rules) because on a laptop you're already reading it.
PHONE, list the `.lead` paragraph only, then the "read more" button.
PHONE, reading everything, on its own screen, with a back button.
`body.reading` is set by the script when the URL has #about / #projects /
#work / #contact on it. That's what makes "read more" behave like a real page:
its own URL, shareable, and the browser's Back button works — without the words
having to exist in a second file that you'd then have to keep in step.
============================================================================ */
/* ---- The teaser -------------------------------------------------------------
`` is a line that ONLY EXISTS ON THE PHONE CARD. It is not
part of your writing and nobody else ever sees it: the pop-up hides it, and the
phone hides it the moment you tap into the section.
It's separate on purpose. Before, the card showed the real first paragraph and
then stopped — so every section read as though it had been cut off mid-sentence,
which is exactly what it was. A teaser is a whole thought that happens to be
short. Write it as a line you'd be happy to end on. */
body.page-mode:not(.reading) #content .readable > *:not(.teaser):not(.more) { display: none; }
body.page-mode.reading .teaser { display: none; }
/* Phone, reading view: one section, full, alone. */
body.page-mode.reading #page-head,
body.page-mode.reading #page-dog,
body.page-mode.reading .more { display: none; }
body.page-mode.reading #content > section { display: none; }
body.page-mode.reading #content > section.reading { display: block; }
/* The back button only exists once you've gone INTO something. */
#page-back { display: none; }
body.page-mode.reading #page-back { display: block; }
/* ---- "read more" -----------------------------------------------------------
Styled as a door you can push rather than a line of text, because it's the
whole point of the hook above it. */
.more { margin-top: 18px; padding-top: 0; }
.more a {
display: inline-block; font-family: var(--font-pixel); font-size: 16px;
color: var(--c, var(--fleck)); text-decoration: none;
border: 2px solid var(--c, var(--fleck)); padding: 8px 16px;
transition: transform .12s ease-out, background .12s ease-out;
}
.more a:hover, .more a:focus-visible {
background: var(--c, var(--fleck)); color: #10201b; outline: none; transform: translateY(-2px);
}
/* ---- Contact icons ---------------------------------------------------------
Not scoped to page-mode: these plain class names mean the same row of icons
renders in the game's pop-up, on the phone card, and in the phone's reading
view. One definition, three places.
`currentColor` is what makes them work: the SVGs never name a colour, they
inherit the link's, so the hover state is a single line of CSS and the icons
can't fall out of step with the section they live in. */
.icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.icons a {
display: grid; place-items: center;
width: 48px; height: 48px;
color: rgba(255,255,255,.42); /* quiet by default — they're not the point of the page */
text-decoration: none;
transition: color .14s ease-out, transform .14s ease-out;
}
.icons svg {
width: 100%; height: 100%;
fill: none; stroke: currentColor; stroke-width: 1.3;
stroke-linecap: round; stroke-linejoin: round;
}
/* The bits that are filled shapes rather than outlines: LinkedIn's dot, the
octocat, Instagram's little corner light. */
.icons svg .solid { fill: currentColor; stroke: none; }
.icons a:hover, .icons a:focus-visible {
color: var(--c, var(--fleck)); /* Contact's violet */
transform: translateY(-2px);
outline: none;
}
/* A visible focus ring for keyboard users — the lift alone isn't enough of a cue. */
.icons a:focus-visible { box-shadow: 0 0 0 2px var(--c, var(--fleck)); }
@media (prefers-reduced-motion: reduce) {
.icons a { transition: none; }
.icons a:hover, .icons a:focus-visible { transform: none; }
}
/* ---- Back to the village (top of every real page) --------------------------
It gets the same dark chip the cards have. Plain text here sat straight on the
grass and you genuinely could not read it — pixel foliage behind small type is
camouflage, not decoration. */
.back { padding: 0 0 20px; }
.back a {
display: inline-block; font-family: var(--font-pixel); font-size: 15px;
color: rgba(255,255,255,.8); text-decoration: none;
background: rgba(12,30,25,.90); border: 2px solid var(--deep);
padding: 7px 13px;
}
.back a:hover, .back a:focus-visible { color: var(--fleck); border-color: var(--fleck); outline: none; }
/* ---- The four real pages: one entry per project / per job -------------------
Each is separated by a hairline in the section's own colour, so a long list
still reads as a list without needing a box around every item. */
body.page-mode .project,
body.page-mode .role { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.10); }
body.page-mode .project:first-of-type,
body.page-mode .role:first-of-type { border-top: 0; padding-top: 14px; }
body.page-mode #content h3 {
font-family: var(--font-pixel); font-weight: 600; font-size: 19px;
color: var(--c, #fff); letter-spacing: .5px; margin-bottom: 4px;
}
body.page-mode .where { color: rgba(255,255,255,.55); font-weight: 400; }
body.page-mode .when { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
/* Screenshots size themselves to the card — you never have to think about width.
`class="pixel"` on pixel art keeps it crisp instead of letting the browser
smudge it; leave it off for photos and normal screenshots. */
body.page-mode #content img {
display: block; max-width: 100%; height: auto;
margin: 12px 0 4px; border: 3px solid var(--deep);
}
body.page-mode #content img.pixel { image-rendering: pixelated; }
/* Several screenshots in one project: wrap them in
and they
become a wrapping row of thumbnails you tap to see full size, instead of a tall
stack. Same gallery you get in the laptop pop-up, sized down a touch for phones. */
body.page-mode .shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
body.page-mode .shots img { height: 96px; width: auto; max-width: 100%; margin: 0; cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) {
.more a { transition: none; }
.more a:hover, .more a:focus-visible { transform: none; }
}