Section Header

Wrap header with <header class="section-header">. Define section further with <h3> and <a id="x">, where x = section header id; color is from section header class. On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)

Main body

Define body content with a wrapper <main id="main" class="m-all t-all d-all cf" role="main">. Define inner wrapper with <article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">. This functions as desktop and tablet layout.

Header

Use <h1 id="page-title"> for the Events page header.

Archive year and collapsible header

Wrap each year of the archive with <section class="show-section cf">; inner container with <header class="category">. Lay out for different screens with <div class="m-8of12 t-10of12 d-10of12 m-o-2of12 t-o-1of12 d-o-1of12 aligncenter">.

Style archive year with <h3>. Call either the plus or minus icon (depending on default state of collapse), making sure image has class="icon hideshow".

Upcoming events

For the current year, display new events with a sub-header styled with <h4>. Code template to pull metadata for future events under this sub-header and style with the following: <h1 class="h5"> for the title; <span class="meta"> for the date and place; and a <p> for the short summary.

Past events

For the current year only, display past events with a sub-header styled with <h4>. Code template to pull metadata for past events under this sub-header and style as with Upcoming Events.