23.3
The title and cover image
The web page title and cover image look like this:
You probably don’t need me to tell you how this works, but I’ll run through it anyway.
First the HTML for the title and cover image:
<!-- ********************************************************************** [WP TITLE] COVER IMAGE *******************************************************************--> <div class="rg-row"> <!-- Start of cover row --> <div class="rg-col rg-span1-5"></div> <!-- Left col not used --> <div class="rg-col rg-span3-5"> <!-- Start of Cover area column --> <div class="cover-overline"></div> <!-- Overline bar --> <div class="cover-title"> <!-- Start of cover title area --> <h1>Practical Series</h1> <!-- Main title --> <h2>A website template</h2> <!-- Subtitle --> <h3>by Michael Gledhill</h3> <!-- Author --> </div> <!-- End of cover title area --> <figure class="cover-fig"> <!-- Start of cover figure --> <img src="01-pages/00-00-index/02-images/fig-00.svg" alt="cover logo"> </figure> <!-- End of cover figure --> </div> <!-- End of cover area --> <div class="rg-col rg-span1-5"></div> <!-- Right col not used --> </div> <!-- End of cover row --> <!-- ====================================================================== [WP END] -->
There are a few classes to go with it:
.cover-overline{ /* creates a line above the cover titles */
margin-top: 4rem;
margin-bottom: 0.5rem;
border-top: 4px solid #404030; }
}
.cover-title h1 { /* format h1 - MAIN TITLE */
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 340%;
margin: 0 0 0.4rem 0;
}
.cover-title h2,
.cover-title h3,
.cover-title h4 {
font-family: "conc-t4-r";
font-feature-settings: "ss02";
text-transform: uppercase;
letter-spacing: 0.086rem;
}
.cover-title h2 { /* format h2 - SUB TITLE */
font-size: 140%;
line-height: 140%;
margin: 0 0 1.5rem 0;
}
.cover-title h3 { /* format h3 - AUTHOR */
font-size: 110%;
margin: 0 0 0.4rem 0;
}
.cover-title h4 { /* format h4 - OPTIONAL DESCRIPTION */
font-size: 104%;
margin: 0 0 0rem 0;
}
.cover-fig { /* holder for cover image */
width: 100%;
margin: 2rem auto;
padding: 0;
}
.cover-fig img {width: 100%;} /* format cover image */
The whole thing starts with a standard rg-row, complete with two empty sidebars rg-span1-5. The same thing used in all the sections (§ 10.3).
The title lives in the central area:
<div class="rg-col rg-span3-5">
The title starts with an over-line, in this case cover-overline:
.cover-overline{
margin-top: 4rem;
margin-bottom: 0.5rem;
border-top: 4px solid #404030; }
}
This is a four pixel high line the same colour as the text #404030, there is a reasonable amount of whitespace above it and some below to separate it from the following title text.
The over-line is followed by a div that contains the words of the title:
<div class="cover-title"> <!-- Start of cover title area --> <h1>Practical Series</h1> <!-- Main title --> <h2>A website template</h2> <!-- Subtitle --> <h3>by Michael Gledhill</h3> <!-- Author --> <h4>Optional line</h3> <!-- Optional line --> </div> <!-- End of cover title area -->
The title itself has four components each with its own heading level:
| Heading level | Purpose | Appearance | |
|---|---|---|---|
| <h1> | Main title | 82 px Concourse t3 font | |
| <h2> | Subtitle | 34 px Concourse t4 font all caps | |
| <h3> | Author | 26 px Concourse t4 font all caps | |
| <h4> | Optional title line | 25 px Concourse t4 font all caps | |
| Table 23.1 Landing page heading levels | |||
The height in pixels is at the maximum screen width.
All four headings have this appearance:
The heading div has the class cover-title and the CSS sets the font properties for each heading. I won’t go through all the CSS, it is the basic font, font-size and spacing that we’ve used everywhere.
The final thing is the image, the landing page is the only page that has one of these. Think of it as the cover photograph on a book. The HTML is very straight forward:
<figure class="cover-fig"> <!-- Start of cover figure -->
<img src="01-pages/00-00-index/02-images/fig-00.svg" alt="cover logo">
</figure> <!-- End of cover figure -->
It is a basic image (not a Lightbox image) in a figure element with the class cover-fig:
.cover-fig { /* holder for cover image */
width: 100%;
margin: 2rem auto;
padding: 0;
}
.cover-fig img {width: 100%;} /* format cover image */
The cover-fig class doesn’t do much, it adds some whitespace at the top to separate it from the heading text, it makes sure the figure spans the central column and makes sure the image it contains does the same.
