Style Guide

I am a GP Page Header

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
 

Button

Block Button

 

Colour swatch

Key Colours

#e5232a
#3f3f3f
#d6d7d8
#f6f7f8
#ffffff

 

Posts Backgrounds & Borders

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