chore: Use new layout colours and figma re-design - Step 4

[lilyndk]

Description

Interior pages: incorporate new colours, type variables, and html page wrapper structure

NOTE: To avoid review of long PRs, this PR is dependent on/'split from' the main branding change PR, i.e. dependent on the changes in:

• layout/default.html
• custom/_variables.scss
• main.scss
• custom.scss
• mixins.scss
• page-header.html

New branding

• Added new colour and typography variables

Bug/refactor

• Fixed inconsistent page HTML structure and related inconsistent vertical spacings
• Refactored pages to use standardised page markup:

Change Type

• [X] Bug Fix
• [X] New Feature
• [X] Code Refactor
• [ ] Mentor Update
• [ ] Documentation
• [ ] Other

Related Issue

• Update branding colour: https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/189
• Create reusable font styles: https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/38
• bug: Fix inconsistent page use of semantic HTML elements (https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/200)

Screenshots

AFTER: BEFORE:

AFTER: BEFORE:

AFTER: BEFORE:

AFTER: BEFORE:

AFTER: BEFORE:

AFTER: BEFORE:

AFTER:

Pull request checklist

BEFORE:

AFTER:

BEFORE:

Please check if your PR fulfills the following requirements:

• [X] I checked and followed the contributor guide
• [X] I have tested my changes locally.
• [X] I have added a screenshot from the website after I tested it locally