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 class="padding-bottom-add desktop"> for desktop; and <h1 class="mobile"> for mobile.

Current president sub-header

Code the template to pull taxonomy terms under the appropriate category. Then, style the title with <h1 class="h2 section-title">. section-title creates the horizontal line.

Article

Enclose each article (speech) with <article class="margin-bottom-add">. Style the elements with the following:
Title link: <header><h1 class="h5">
Date: <p class="meta date">
Teaser or short description: <p>.

Past presidents

Style sub-header same as current president's (see annotation 5). Add link to taxonomy term ("Read speeches").