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.

Headcrumb

Connect the page to parent via a headcrumb, containing it in <header class="section-header">; and wrapping the link in <h1> and <a id="page-title-ourdistrict-press">.

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".

Article

Code the template to pull press release titles and dates in the appropriate years. Style with <h1 class="h5"> for the title and <span class="meta"> for the date.