Styling Guide

by

Typography

H1 Literally an old chip off the block

H2 Literally an old chip off the block

H3 Literally an old chip off the block

H4 Literally an old chip off the block

Michael Reinsch, a journalist from the Frankfurter Allgemeine Zeitung, a nationwide daily newspaper, was initially denied an interview with the Hessen Athletics Association on the grounds of a gagging order. A limited press session was later agreed with the attendance of Thomas Kurschilgen, sports director of the Deutscher Leichtathletik-Verband (German Athletics Association), to dismiss the rumours.

Drop Cap

Drop Caps are automatically set to all Single Posts. They can also be applied manually. Using the same class to which you can adjust its styles.
Search Additional CSS (it’s under Typography) for: .drop-cap

Colour swatch

Key Colours

#e5232a
#3f3f3f
#d6d7d8
#f6f7f8
#ffffff

Button

Block uses the default GeneratePress button. And can be styled from the customiser.

Block Button

 

Site Header

Block uses a Full width header & navigation with a contained inner container. The inner container is limited to the same width as the body inside article of 36em on all pages.

Site Logo

The site logo is an SVG and applied as normal via Customiser > Site Identity and Layout > Header > Mobile Header. SVG’s require this CSS for sizing: .site-logo {width: #px};

Navigation

Primary Navigation

Primary Navigation matches the Header for Full width and inner content contained and is also limited to 36em wide. Navigation Search has also been enabled. Additional CSS has been used to position the Navigation around the logo.

The menu assigned to the Primary Navigation is a blank menu. That is it contains no menu items. This is to stop the horizontal menu from auto-populating on Desktop.

Secondary Navigation

Secondary Navigation is also set to the same containment as the Header and Primary Navigation. Additional CSS has been used to fix this to the bottom of the Page Header. And apply a border-top.

The menu assigned to the Secondary Navigation is currently a list of post categories.

Slide out Navigation

Slide out navigation has been set to default on Mobile. Additional CSS has been used to create the unique centre drop down effect. It also contains a Widget for the Lightweight Social Icons.

The menu assigned to the Slide Out Navigation is also the categories list. You should add any pages to this menu. Please note the ‘home’ page label has been assigned an image which is the site logo. And carries the same .site-logo class.

Blog and Archive Posts font colours and sizes are controlled by the customiser. Additional CSS has been used to apply element specific backgrounds and borders. Below you will find a guide to the CSS selectors required for restyling.

# Element CSS Selector
1 – Entry Title .post .entry-title a
2 – Entry Meta .post .entry-header .entry-meta a
3 & 4 – Category Links .blog .cat-links,
.archive .cat-links
5 – Entry Summary .post .entry-summary
6 – Inside Article .blog .inside-article,
.archive .inside-article
7 – Page Navigation .page-numbers
.page-numbers.current

 

Layout requirements

  • GP Page Headers – Navigation merged with Header
  • Slide Out – Main Menu
  • Primary Menu – Blank Menu to remove horizontal primary
  • Secondary – Currently set to Categories

 

Plugin requirements

  • Safe SVG – required to display SVG images
  • Light Weight Social Icons – Footer and Slide out
  • Scriptless Social Sharing – Bottom of post content

 

Additional CSS

CSS has been applied to create the unique style of Block. Below is the hierarchical index of that, as listed in Additional CSS. The typical change requirements such as fonts and colours have been listed first. CSS below them are generally layout options and should not require adjusting. Please note that the Blog / Archive pages uses CSS Grid.

CSS Index

  • Typography inc. Root Font & Drop Cap
  • Colours and Borders
    Navigation Search styling
    Secondary Navigation Top Border
    Blog Article Styling > Background Colours and Borders
    Social Share Icon colours > Overwrite default brand
    Lightweight Social Icons  > Transparent Background
  • Site Header
    Logo sizing
    Site Header Z-index (position in over Nav)
    Relative container for absolute positioning of navigation
  • Page Headers > Single Post Header H1 Title and H4 Meta
  • Navigation & Menus
    Position Site Navigation > Primary, Secondary, Slide out
    Archive Pagination Navigation inc. Background Colours
  • Page and Articles
    Single Post Page > Fixed Column Width and Extended Container|
    Blog Page > CSS Grid (beware there be dragons), element padding and hide icons.
  • Footer
    Footer Logo Sizing
    Single Widget Alignment (Flex Justify Center)
  • Flex Container
    Inside Footer Widgets, Slide Out Widget, Primary Menu
  • Widgets and Plugins
    Lightweight Social Icons and Scriptless Social Sharing

Leave a Comment