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 classhas-subtle-background-color
.--nav-background
: The nav banner background--nav-color
: The default nav text (active tabs use the accent color).--accent-1
,—accent-2
,—accent-3
: 3 accent colors used for the header,--accent-1
is also used forhas-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 has-2-columns
, has-3-columns
, has-4-columns
.
Each section should have children with the class column
. A .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.
The .column
or .about__section
can have background colors by adding classes:
has-subtle-background-color
: currently this makes the background a darker beige (color--subtle-background
).has-accent-background-color
: currently this makes the background a bright red (color--accent-1
).
The 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.
.alignleft
.alignright
.aligncenter
.is-vertically-aligned-top
.is-vertically-aligned-center
.is-vertically-aligned-bottom
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 />