Building the About Page(s)
Until we have something like postcss-custom-properties to create the fallback hex codes for IE, these will need to be manually updated in the about.css file.
--text: Used for the text color.
--background: This is the base background for section blocks.
--subtle-background: Used for section backgrounds if given the class
--nav-background: The nav banner background
--nav-color: The default nav text (active tabs use the accent color).
—accent-3: 3 accent colors used for the header,
--accent-1is also used for
has-accent-background-color, nav link text.
The about page is a collection of rows of columns. A column can have text or images (or gifs, videos, etc). Each row needs to be its own section, so that the grid placement works in IE. Each row is called a section or block, and should have the class
about__section. This block defaults to one column, but can have multiple columns with the classes
Each section should have children with the class
.column has padding by default, but that can be removed with
is-edge-to-edge. A section can optionally have a heading with
is-section-header – this will span across all columns.
To create space between sections, an
<hr /> element is used.
Colors & Typography
.about__section can have background colors by adding classes:
has-subtle-background-color: currently this makes the background a darker beige (color
has-accent-background-color: currently this makes the background a bright red (color
is-feature class can be added to highlight a section, it increases the font size and weight.
The following classes can be used on
.column to align the content inside.
When it comes to point releases, we'll use the new wrapper classes:
<div class="about__section changelog point-releases"> <div class="column"> <h3><?php _e( 'Maintenance and Security Releases' ); ?></h3> ... p tags with strings as usual ... </div> </div> <hr />