/* ========================================================================== EDIT ME FIRST — everything below is the whole design system. Change a value here and it updates everywhere it's used on the page. ========================================================================== */ @font-face { font-family: 'Paquito-Variable'; src: url('../fonts/Paquito/Paquito-Variable.woff2') format('woff2'), url('../fonts/Paquito/Paquito-Variable.woff') format('woff'), url('../fonts/Paquito/Paquito-Variable.ttf') format('truetype'); font-weight: 300 700; font-display: swap; font-style: normal; } @font-face { font-family: 'Poppins-Regular'; src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'), url('../fonts/poppins/Poppins-Regular.woff') format('woff'), url('../fonts/poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: 'Made-Coachella-Bold'; src: url('../fonts/made_coachella/MADE\ Coachella\ Bold\ PERSONAL\ USE.otf') format('opentype'); } :root { /* ---- Colors --------------------------------------------------------- */ --color-bg: #f0ede7; /* page background */ --color-text: #1b1b1b; /* main text color */ --color-text-muted: #9a9ca3; /* secondary text — dates, meta info */ --color-accent: #dc5d3d; /* links, headings accent, hover states */ --color-line: #2a2d33; --color-title: #de502c; /* hairline borders / dividers Probably too bright of a blue if blue instead: #0920f9 */ /* ---- Fonts ------------------------------------------------------------ "Display" is used for the name and section headings. "Body" is used for everything else. To swap fonts: change the family name here AND in the tag in index.html's . --------------------------------------------- */ --font-display: 'Made-Coachella-Bold'; --font-body: 'Poppins-Regular'; --font-head: 'Paquito-Variable'; /* --font-display: "Fraunces", Georgia, serif; */ /* ---- Layout ------------------------------------------------------------ GUTTER controls the empty space on the left and right edges of every section. It is NOT a max-width — the page content fills the full screen width, it just never gets closer to the edge than this value. That's the difference from a typical centered "container": there's no separate empty margin outside a narrow column on wide screens, because there is no narrow column. clamp(min, preferred, max) reads as: never smaller than the first number, never bigger than the last number, and in between it scales with the screen width. So on a phone the gutter sits near 24px, and it grows smoothly as the screen widens, capping out at 96px even on a huge monitor — it never grows large enough to look like wasted space. If you'd rather it be one fixed number, replace the whole clamp(...) with a plain value, e.g. --gutter: 48px; ---------------- */ --gutter: clamp(24px, 6vw, 96px); /* Below this screen width, two-column project rows stack into one column (image on top, text below). Change this one number to move where that happens. */ --stack-breakpoint: 768px; } /* ========================================================================== Everything below this line rarely needs editing. ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; display: block; } h1, h2, h3 { color: var(--color-title); } /* ---- Header -------------------------------------------------------------- Padding shorthand below is written as four separate lines (top / right / bottom / left) on purpose, instead of one packed "padding: 20px var(--gutter)" line, so each number's job is unambiguous at a glance. ---------------------------------------------- */ .site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-right: var(--gutter); padding-bottom: 20px; padding-left: var(--gutter); border-bottom: 1px solid var(--color-line); } .site-header__name { font-family: var(--font-display); font-size: 18px; font-weight: 600; text-decoration: none; color: var(--color-line); } .site-header__nav { display: flex; gap: 24px; } .site-header__nav a { font-size: 15px; text-decoration: none; color: var(--color-text-muted); transition: color 0.15s ease; } .site-header__nav a:hover, .site-header__nav a:focus-visible { color: var(--color-accent); } @media (max-width: 480px) { .site-header { flex-direction: column; align-items: flex-start; } } /* ---- Hero ------------------------------------------------------------ The SECTION spans the full width (no max-width on it). Only the paragraph of body text gets a max-width, so long sentences stay readable without the whole page being squeezed into a narrow column. */ .hero { padding-top: 96px; padding-right: var(--gutter); padding-bottom: 64px; padding-left: var(--gutter); } .hero__kicker { margin: 0 0 12px; font-size: 14px; color: var(--color-text-muted); } .hero__name { margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.05; } @media (max-width: 600px) { .hero__name { font-size: 38px; } } .hero__line { margin: 0; max-width: 640px; /* keeps long sentences readable — see note above */ font-size: 19px; color: var(--color-text-muted); } /* ---- Sections ------------------------------------------------------- */ .section { padding-top: 64px; padding-right: var(--gutter); padding-bottom: 64px; padding-left: var(--gutter); border-top: 1px solid var(--color-line); } .section__title { margin: 0 0 32px; font-family: var(--font-display); font-weight: 600; font-size: 34px; } /* ---- Project entries --------------------------------------------------- Each .project is a two-column CSS grid: an image column and a text column. "45% 1fr" means the image column is 45% of the row's width and the text column takes whatever space is left — not a plain 50/50 split. Add the class "project--image-right" to an entry to flip which side the image is on; it just reorders the two children. Below --stack-breakpoint, grid-template-columns becomes a single "1fr" column, so image and text stack — image always on top, regardless of which side it was on at desktop width. -------------------------------- */ .project { display: grid; grid-template-columns: 45% 1fr; gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 48px; } .project:not(:last-child) { border-bottom: 1px solid var(--color-line); } .project--image-right .project__media { order: 2; } .project--image-right .project__text { order: 1; } .project__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; } .ob-fit-cov { object-fit: cover; } .ob-fit-con { object-fit: contain !important; } .project__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 28px; } .project__meta { margin: 0 0 16px; font-size: 14px; color: var(--color-text-muted); } .project__body { margin: 0 0 16px; max-width: 60ch; color: var(--color-text); } .project__link { display: inline-block; font-size: 15px; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.15s ease; } .project__link:hover, .project__link:focus-visible { opacity: 0.75; } @media (max-width: 768px) { .project { grid-template-columns: 1fr; } /* Force image first on mobile even for "image-right" entries, so the stacking order is always image-then-text. */ .project--image-right .project__media { order: 0; } .project--image-right .project__text { order: 1; } } /* ---- Contact / footer ------------------------------------------------- */ .section--contact .project__link { font-size: 17px; } .site-footer { padding-top: 28px; padding-right: var(--gutter); padding-bottom: 40px; padding-left: var(--gutter); text-align: center; font-size: 13px; color: var(--color-text-muted); } .highlight { position: relative; display: inline; white-space: nowrap; } .highlight::before { content: ""; position: absolute; z-index: -1; left: -0.15em; right: -0.15em; top: 0.08em; bottom: 0.02em; background: var(--color-accent); transform: rotate(-1.4deg); clip-path: polygon( 0% 9%, 4% 1%, 96% 0%, 100% 7%, 98% 93%, 95% 100%, 3% 97%, 1% 88% ); } .section__title--marked { position: relative; display: inline-block; /* so the block only spans the width of the text, not the full row */ padding: 0.15em 0.35em; } .section__title--marked::before { content: ""; position: absolute; z-index: -1; inset: -0.05em -0.1em; /* shorthand for top/right/bottom/left, pulls the block slightly past the padding */ background: var(--color-accent); transform: rotate(-1deg); clip-path: polygon( 0% 6%, 3% 0%, 97% 1%, 100% 8%, 99% 94%, 96% 100%, 2% 98%, 1% 91% ); }