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

Headcrumb

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

Main body

Define body content with a wrapper <main id="main" class="m-all t-all d-all cf">. Define inner wrapper with <article role="article">, and further with <main class="entry-content cf m-all t-all d-10of12 d-o-1of12">.

Heading

Style heading with <div class="section-hed">. For the tagline, use <div class="tagline">

Social links

Create a container for desktop with <div id="share-links"> and call appropriate icons and links, following the order seen here. Use a modified grid for mobile with <div class="mobile ur-3col m-all t-4of12 d-4of12">, which will appear at the bottom of the page.

Story image and link

Code the template to pull stories in descending order by date. Create a container with <div class="ur-3col m-all t-4of12 d-4of12">. Size image to 319 x 300. Place the text in <div class="ur-text">, and style name with <h5 class="ur-title">; and the story title with <p>.

View more

Create a link that loads more stories within <div class="load_more_container">. Style text with <h2 class="strong aligncenter">.