README

Overview

How this site is put together, and how to add to it.

Keep it simple; this site is designed to be editable by non-technical people. When in doubt, write normal HTML and CSS.

To add a page, follow Adding a Page, which builds one from an empty file step by step.

Structure

What each file in the source tree is.

Each .svelte file is a Svelte component made up of HTML, CSS, and TypeScript. CSS is scoped to the component by default.

SvelteKit uses the file structure in site/ as the source of the site's pages.

Each +page.svelte file in site/ defines a page on the site.
The site-wide layout is defined in site/+layout.svelte.
Files without a + prefix are helper components or static assets used within pages and layouts. Helper components should begin with a capital letter.
You shouldn't need to modify files outside site/.

Public vs Private

Public pages go in site/(main)/. These are the pages of the conference site proper: the ones a visitor reaches from the site's own navigation. An internal page, like this readme, sits outside the group. The public layout at site/(main)/+layout.svelte supplies the header and footer. A private page, like this readme, sits outside the group and gets neither.

The parentheses keep (main) out of the URL, so a page at site/(main)/info/ is served at /info.

For details on how SvelteKit uses different file types to construct the site, see SvelteKit routing.

Static assets

Import the file, then interpolate it.

Static assets such as images or PDFs must be imported and referenced using interpolation. For example, to include a PDF:

<script>
  import schedule from './schedule.pdf';
</script>

<a href={schedule} download>Schedule</a>

Style reference

What this site is built from, documented page by page.

Nothing here is a component library. Every class is a small, composable utility layered over plain semantic HTML, so a page is written as ordinary markup first and then adjusted with the classes below.

Before writing new CSS, look for a utility that already does the job.

Page Layout: The three-column page grid, the ( and ) margin columns, and the classes that place a block across them.
Text: Headings and <hgroup>, prose roles such as .lede and .note, the size scale, and vertical spacing.
Appearance: Color, icons, buttons, areas, accents, and tables, i.e. everything that gives an element its surface.
Layout: Rules, counters, media shapes, the grid and flex layout system, and .dedent.