GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.
This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
GOV.UK Frontend's template wraps all content in a
`<main>` tag and puts it in the main column.
Some of Notify's pages need to reach out of the
main column (product page).
Some have several blocks of navigation before the
main content area.
This adjusts the blocks in all the templates
where this is the case so those conditions can be
met.
GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.
This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
GOV.UK Frontend's template wraps all content in a
`<main>` tag and puts it in the main column.
Some of Notify's pages need to reach out of the
main column (product page).
Some have several blocks of navigation before the
main content area.
This adjusts the blocks in all the templates
where this is the case so those conditions can be
met.
GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.
This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
GOV.UK Frontend's template wraps all content in a
`<main>` tag and puts it in the main column.
Some of Notify's pages need to reach out of the
main column (product page).
Some have several blocks of navigation before the
main content area.
This adjusts the blocks in all the templates
where this is the case so those conditions can be
met.
This copies what the other GaaP components will be doing for their
product pages.
The SASS and HTML is taken from here:
f05ca1fb71/source/stylesheets/modules/_breadcrumbs.scss
Only changes I’ve made are:
- making the file paths work with our build pipeline
Changes to our code to accomodate this are:
- putting the padding on the product page `<h1>` not its container
- moving the hero image accordingly so that it lines up
- making the `<main>` element on the product page into an anchor so that
the breadcrumb can link to it – screenreader will then announce the
link as “GOV.UK Notify, same page”
