/* ========================================================================= Composer portfolio — shared styles One stylesheet for all pages. Dark, minimal, serif. Tweak the variables below to restyle the whole site at once. ========================================================================= */ :root { --bg: #0a0a0a; /* near-black background */ --text: #f0ece4; /* off-white / cream primary text */ --text-muted: #8c8880; /* muted gray for secondary text */ --accent: #c0392b; /* subtle red, used sparingly (e.g. [Video]) */ --line: #262421; /* hairline borders */ --serif-display: "Playfair Display", Georgia, serif; --serif-body: "EB Garamond", Georgia, serif; /* ╔═══════════════════════════════════════════════════════════════════╗ ║ ✏️ EDIT: LEFT / RIGHT LAYOUT (how wide the content is) ║ ║ ║ ║ These are the DEFAULT widths, used by About and Contact. ║ ║ BIGGER number = content is wider, less empty space on the sides. ║ ║ SMALLER number = content is narrower, more empty space. ║ ║ Everything stays centred either way. ║ ║ ║ ║ The Compositions page is WIDER — it overrides these just below, ║ ║ in the `body.wide-layout` rule. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ --content-max: 960px; /* outer page width */ --content-width: 820px; /* the column the text actually sits in */ --edge-band: 1080px; /* black centre band over the background photo; must stay WIDER than --content-width */ --gutter: 1.5rem; } /* ╔═════════════════════════════════════════════════════════════════════╗ ║ ✏️ EDIT: WIDER LAYOUT — Compositions page only ║ ║ Applied via in ║ ║ compositions.html. Change these three numbers to make ONLY the ║ ║ Compositions page wider or narrower. Remove the `wide-layout` ║ ║ class from that page's to make it match the other pages. ║ ╚═════════════════════════════════════════════════════════════════════╝ */ body.wide-layout { --content-max: 1180px; --content-width: 1060px; --edge-band: 1220px; /* keep this wider than --content-width */ } /* ╔═════════════════════════════════════════════════════════════════════╗ ║ ✏️ EDIT: FONT SIZES — where each one lives in this file ║ ║ ║ ║ Sizes are in `rem`: 1rem = 16px. So 0.8rem ≈ 13px, 1.5rem = 24px. ║ ║ Search this file for the property name in the middle column. ║ ║ ║ ║ WHAT YOU SEE ON SCREEN SEARCH FOR CURRENT ║ ║ ───────────────────────────────────────────────────────────── ║ ║ Body text everywhere body { 1.125rem ║ ║ Big name on Home page .hero-name clamp(...6.5rem) ║ ║ Tagline on Home page .hero-tagline clamp(...1.35rem)║ ║ Your name, top of each page .site-id-name 1.3rem ║ ║ "composer, educator..." line .site-id-role 0.68rem ║ ║ Nav links (HOME, ABOUT...) .nav-links a 0.78rem ║ ║ "Works: Multi Media | ..." .works-nav 0.9rem ║ ║ Section headings .works-heading 1.05rem ║ ║ Piece titles .comp-title 0.98rem ║ ║ "(for reed quintet)" .comp-medium 0.95rem ║ ║ "Immersive | audiovisual..." .comp-tags 0.8rem ║ ║ Duration, e.g. 7':00" .comp-duration 0.9rem ║ ║ [Video, Audio] links .comp-media 0.95rem ║ ║ Performance lines .comp-performances li 0.95rem ║ ║ "Performed by ..." note .perf-performers 0.9rem ║ ║ Footer .site-footer 0.8rem ║ ║ ║ ║ NOTE: a few sizes are overridden for phones inside the ║ ║ `@media (max-width: 720px)` block at the BOTTOM of this file. ║ ║ If a change doesn't show up on a narrow screen, look there too. ║ ╚═════════════════════════════════════════════════════════════════════╝ */ /* ----- Reset-ish ----- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* jump links glide instead of snapping */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--serif-body); font-size: 1.125rem; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } /* ========================================================================= Header / navigation (shared on every page) ========================================================================= */ .site-header { position: relative; z-index: 20; padding: 1.75rem var(--gutter); } .nav { max-width: var(--content-max); margin: 0 auto; display: flex; justify-content: center; } /* ----- Name block, at the very top above the nav (all pages except Home) ----- Markup lives in about/compositions/contact .html inside
, before the