/* ================================================================ PORTFOLIO STYLESHEET Inspired by: eatock.com, dunneandraby.co.uk, carolyn-kirschner.com HOW TO CUSTOMISE: — To change fonts: edit the --font-* variables below — To change colours: edit the --color-* variables below — To adjust spacing: edit the --space-* variables below Everything else flows from these. ================================================================ */ /* ---------------------------------------------------------------- 1. DESIGN TOKENS — edit these to change the whole look ---------------------------------------------------------------- */ :root { /* Colours */ --color-bg: #ffffff; /* page background */ --color-text: #111111; /* main text */ --color-muted: #888888; /* secondary text (dates, meta) */ --color-link: #111111; /* link colour */ --color-hover: #888888; /* link hover colour */ --color-border: #e0e0e0; /* subtle borders */ /* Typography */ --font-main: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Lato is a free Google Font, loaded via the in each HTML file's . Every visitor sees it. Helvetica/Arial are just fallbacks while the font loads. Other options to try instead: "Georgia", Georgia, serif "Times New Roman", Times, serif "Courier New", Courier, monospace */ --font-size-base: 17px; --font-size-name: 17px; --font-size-nav: 15px; --font-size-h1: 17px; /* project titles are same weight as text */ --font-size-meta: 13px; /* Layout */ --sidebar-width: 340px; --header-height: 44px; --space-outer: 28px; /* outer page margin */ --space-content: 40px; /* gap between sidebar and content */ } /* ---------------------------------------------------------------- 2. RESET & BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-main); font-size: var(--font-size-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-hover); } img { display: block; max-width: 100%; height: auto; } /* ---------------------------------------------------------------- 3. HEADER ---------------------------------------------------------------- */ header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--color-bg); display: flex; align-items: center; padding: 0 var(--space-outer); z-index: 100; border-bottom: 1px solid var(--color-border); } #site-name { font-size: var(--font-size-name); font-weight: normal; flex: 1; } nav { display: flex; gap: 20px; font-size: var(--font-size-nav); } nav a { color: var(--color-text); } nav a:hover { color: var(--color-muted); } nav a.active { color: var(--color-text); } /* ---------------------------------------------------------------- 4. LAYOUT: sidebar + content ---------------------------------------------------------------- */ #layout { display: flex; margin-top: var(--header-height); min-height: calc(100vh - var(--header-height)); padding: var(--space-outer); gap: var(--space-content); } /* ---- Sidebar ---- */ #sidebar { width: var(--sidebar-width); flex-shrink: 0; padding-top: 4px; padding-right: var(--space-content); border-right: 1px solid var(--color-text); } #sidebar ul { list-style: none; } #sidebar ul li { margin-bottom: 4px; } #sidebar ul li a { font-size: var(--font-size-base); color: var(--color-text); display: block; line-height: 1.4; /* Allow long titles to wrap onto as many lines as needed to fit */ white-space: normal; overflow-wrap: break-word; } /* Give a little breathing room between multi-line titles */ #sidebar ul li { margin-bottom: 8px; } #sidebar ul li a:hover { color: var(--color-muted); } #sidebar ul li.current a { color: var(--color-text); font-weight: 700; } /* ---- Content ---- */ #content { flex: 1; max-width: 760px; padding-top: 4px; } /* ---------------------------------------------------------------- 5. CONTENT ELEMENTS ---------------------------------------------------------------- */ /* Intro / placeholder text */ .intro { color: var(--color-text); max-width: 480px; } /* Homepage random image — large, fills the content area */ #random-link { display: block; } /* Let the homepage image use the full width to the right of the sidebar */ #content:has(#random-link) { max-width: none; } #random-image { width: 100%; max-height: calc(100vh - var(--header-height) - (var(--space-outer) * 2)); object-fit: contain; object-position: top left; } /* Project header */ .project-header { margin-bottom: 24px; } .project-header h1 { font-size: var(--font-size-h1); font-weight: normal; } .project-meta { font-size: var(--font-size-meta); color: var(--color-text); } /* Images */ figure { margin-bottom: 16px; } figure img, figure video { width: 100%; display: block; } /* Project description text */ .project-text { margin-top: 24px; max-width: 520px; } /* When the description sits above the images, remove the top gap and add space below it instead. */ .project-text--top { margin-top: 0; margin-bottom: 28px; max-width: none; /* match the full width of the images below */ } .project-text p { margin-bottom: 12px; color: var(--color-text); } /* About page portrait */ .portrait { margin-bottom: 20px; max-width: 200px; } /* About page: allow the experience/education lists to use full width so each entry can stay on a single line on wide screens. */ #content:has(.about-list) { max-width: none; } .about-text { max-width: none; } .about-text p { max-width: 520px; /* keep the bio paragraph at a readable width */ } /* Detail text stays on one line when there's room, but is allowed to wrap onto multiple lines as the browser gets narrower. */ /* About page section headings (Experience, Education) */ .about-heading { font-size: var(--font-size-base); font-weight: 700; margin-top: 28px; margin-bottom: 8px; } /* About page lists (experience / education entries) */ .about-list { list-style: none; margin-bottom: 4px; } .about-list li { display: flex; gap: 16px; margin-bottom: 6px; } .about-list-year { flex-shrink: 0; width: 140px; color: var(--color-muted); } .about-list-detail { color: var(--color-text); } /* Inset sub-text under an education / experience entry */ .about-list-note { display: block; margin-top: 4px; padding-left: 20px; color: var(--color-muted); } @media (max-width: 640px) { .about-list li { flex-direction: column; gap: 0; } .about-list-year { width: auto; } } /* ---------------------------------------------------------------- 6. MOBILE On small screens the sidebar moves above the content ---------------------------------------------------------------- */ @media (max-width: 640px) { #layout { flex-direction: column; padding: 16px; gap: 24px; /* Hug the content instead of stretching to full viewport height, which otherwise leaves a tall blank white area at the bottom. */ min-height: 0; } #sidebar { width: 100%; /* When stacked, the divider becomes a horizontal line under the list */ border-right: none; border-bottom: 1px solid var(--color-text); padding-right: 0; padding-bottom: 16px; } header { padding: 0 16px; } /* Homepage: keep the project list and the random image side by side even on slim screens — the image stays to the right, not below. */ #layout:has(#random-link) { flex-direction: row; gap: 20px; } #layout:has(#random-link) #sidebar { /* Bounded width so the image keeps its space; long titles wrap inside */ width: 42%; flex-shrink: 0; /* Back to a vertical divider since it stays side by side here */ border-right: 1px solid var(--color-text); border-bottom: none; padding-right: 20px; padding-bottom: 0; } }