# Starter templates Three pages you can open right now, change, and put online. Built for academic work — a homepage, a project page, a reading page. No build step, no frameworks, no npm. Four files that work by double-clicking them. | File | What it is | |---|---| | [`index.html`](index.html) | **Homepage** — name, photo, interests, selected work, contact | | [`project.html`](project.html) | **Project or paper page** — abstract, plain-language summary, figure, data, citation | | [`reading.html`](reading.html) | **Reading page** — long-form essay with footnotes | | [`theme.css`](theme.css) | **The design.** All colours, fonts and spacing live here. This is the file you edit. | ## Try them first ```bash open index.html ``` That is the whole setup. Edit a file, save, reload the browser. Everything in `[square brackets]` is placeholder text meant to be replaced. If a page still says `[Your Name]` when it goes live, that is the one mistake people actually make — search for `[` before you publish. ## How this is put together All three pages read from `theme.css`. Change a colour there and every page changes together. That is the point: design decisions live in one place instead of being copy-pasted across pages and drifting apart. Inside `theme.css`, the first three blocks are the ones you touch — fonts, colour, size. Everything below is plumbing that applies those values. --- ## Fonts The templates ship with **fonts already installed on the reader's computer.** They load instantly, work offline, cost nothing, never flash-and-reflow, and cannot break. For most academic sites this is the right answer, and you can stop reading here. If you want something more distinctive, four pairings that suit academic work: | | Body | UI / headings | Feels like | |---|---|---|---| | **Default** | Iowan Old Style / Charter / Georgia *(system)* | System sans | Quiet, classical, zero cost | | **Humanities** | EB Garamond | System sans | Old-style, book-like, essayistic | | **Modern academic** | Source Serif 4 | Source Sans 3 | Clean, contemporary, made for screen reading | | **Quantitative** | IBM Plex Serif | IBM Plex Sans | Precise, technical, good with tables and numbers | All three named families are open-source and free for any use. ### Three ways to load a font **1. System fonts — the default.** Nothing to load. Already set up. **2. Google Fonts — easiest.** Add one line to each page's ``, above the stylesheet link: ```html ``` Then in `theme.css`: ```css --font-body: "EB Garamond", Georgia, serif; ``` Always keep the fallbacks after the comma. They are what the reader sees while the font loads, or forever if it fails. > ⚠️ **Worth knowing if you are in the EU.** Loading fonts from Google's servers > sends your visitor's IP address to Google. A German regional court > (München I, January 2022) held that doing this without consent breached the > GDPR. Whether that reasoning applies to your situation is a question for your > institution — but option 3 below avoids the issue entirely, which is why many > university sites use it. **3. Self-hosted — best of both.** Download the font files into your repo and serve them yourself. No external request, no privacy question, no dependency on someone else's uptime, and it is *faster* than Google Fonts. Get the files from [fonts.google.com](https://fonts.google.com) (Download family) or [github.com/google/fonts](https://github.com/google/fonts), put them in a `fonts/` folder, and declare them: ```css @font-face{ font-family: "EB Garamond"; src: url("fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; /* show fallback text immediately, swap when ready */ } ``` Ask Claude Code to do this — the prompt is in the next section. It is fiddly by hand and trivial to delegate. ### Two rules that matter more than which font you pick - **Line length beats font choice.** 60–75 characters per line. It is set by `--measure` in `theme.css`. Text running the full width of a wide screen is measurably harder to read, because the eye loses its place returning to the next line. This one setting does more for readability than any typeface will. - **Two families is the limit.** One for text, one for interface. A third is almost always a mistake. --- ## Colour One accent colour. Not two. Academic pages look considered when they are restrained and cluttered when they are not — the accent should mark links and almost nothing else. Five presets are listed in `theme.css` §2, all contrast-checked against the page background: | | | | |---|---|---| | `#7a2e2e` | **Burgundy** | Classic, humanities, book-like *(default)* | | `#1f4e79` | **Ink blue** | Sober, quantitative, institutional | | `#2f5d46` | **Forest** | Calm, natural sciences | | `#8a4b1f` | **Sienna** | Warm, archival | | `#4a3d6b` | **Aubergine** | Distinctive without shouting | Swap one line and reload. **Dark mode** is already handled — the page follows the reader's system setting. Note that the accent gets *lighter* in dark mode: a dark colour on a dark background fails contrast requirements. If you change the light accent, change the dark one too. --- ## Customising with Claude Code You do not have to edit CSS by hand. These prompts are written to be pasted. Open a Claude Code session in this `templates/` folder first. ### Start here ```text I'm new to web design. Look at theme.css and explain, in plain English, what each value in blocks 1-3 controls. Don't change anything yet — I want to understand the file before I touch it. ``` ```text Fill in these templates with my real details: Name: [your name] Role: [postdoc / assistant professor / PhD candidate] Institution: [institution] Field: [field] Research interests: [three of them] Email: [email] Replace every [bracketed placeholder] across all three pages. Done when: no square brackets are left anywhere in the folder. ``` ### Fonts ```text Switch these templates to the "Modern academic" pairing from README.md — Source Serif 4 for body, Source Sans 3 for UI. Self-host the font files rather than loading them from Google, and explain what you did. Keep the existing fallback fonts in the stack so nothing breaks while the font loads. Done when: the page still renders with fonts visibly changed, and no request goes to an external domain. ``` ```text Show me the same page with three different font pairings so I can compare before I choose. Make three copies — font-a.html, font-b.html, font-c.html — and tell me which one you'd pick for [my field] and why. Don't touch the original files. ``` ```text The text feels cramped / too spread out. Adjust the line length, size and line spacing in theme.css to fix it, and tell me which value did what. ``` ### Colour and feel ```text Change the accent colour to the ink blue preset. Update BOTH the light and dark mode values, and confirm both still pass WCAG AA contrast against their backgrounds. ``` ```text I want this to feel more [formal / warm / minimal / institutional]. Suggest three specific changes to theme.css, tell me what each one does, and wait for me to pick before you change anything. ``` ```text Make the whole thing squarer and more severe — no rounded corners, tighter spacing, heavier rules. Only edit theme.css. ``` ### Content and structure ```text Add a Teaching page to this site — same header, nav and styling as the others. It should list courses with a title, term, level and a link to a syllabus. Update the nav on every existing page so they all link to it. ``` ```text Here's my CV: [paste it, or give a file path] Fill in the publications on index.html using the .entry markup that's already there. Keep my formatting conventions for author order and journal names. Don't invent anything that isn't in what I gave you — if a field is missing, leave the placeholder and tell me what's missing. ``` ```text Turn this markdown file into a reading.html page using the existing template and styling: [path to file] Convert the footnotes properly so they link both ways. ``` ### Checking your work ```text Check these pages before I publish: - any [bracketed placeholders] left - any broken internal links - does it work on a phone-sized screen - does dark mode look right - is the alt text on images actually descriptive Show me the problems; don't fix them yet. ``` ```text Look at this page on a 375px-wide screen and tell me what breaks. ``` ### Going live ```text This templates folder is ready. Walk me through putting it on GitHub Pages, one step at a time. Tell me first whether the repo needs to be public and whether there's anything in here I wouldn't want public. ``` --- ## Where to go next These are plain HTML, which is the right starting point — and stays fine for a handful of pages you edit by hand. The moment you find yourself copy-pasting the header into a fifth page, you have outgrown it. That is what a static site generator is for: write the header once, write pages in Markdown, let it build the HTML. [Part 5c of the main guide](../README.md#part-5--turning-a-repo-into-a-website) covers that step. Do not start there. Get something online first.