A header is layout pattern that helps the user identify the site.
Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages.
Place the header at the top of the page after the skip to main content link. This basic header should be replaced with your own site's header.
//- DS2 core (c) 2024 Alexander McIlwraith //- Licensed under CC BY-SA 4.0 //- required variables //- site - the site name that goes in the site title //- root - the path to the root of the site header // The headline banner area svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true') text= site div div.header-title h1 a(href="./")= site // Other sections can go here, such as search and directory
header {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1.75rem 3.5rem;
grid-template-rows: 1.75rem 3.5rem;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2/4;
overflow: hidden;
}
header svg {
grid-column: 1/-1;
grid-row: 1/-1;
-ms-grid-row-align: stretch;
-ms-grid-column-align: stretch;
place-self: stretch;
}
header svg text {
-webkit-transform: translate(-1rem, 7.25rem);
-ms-transform: translate(-1rem, 7.25rem);
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: sans-serif;
fill: var(--colour-grey-xxl);
}
header > div {
-ms-grid-row: 2;
grid-row: 2;
grid-column: 1/-1;
display: -ms-grid;
display: grid;
grid-column-gap: 1rem;
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
-ms-grid-columns: auto max-content max-content;
grid-template-columns: auto -webkit-max-content -webkit-max-content;
grid-template-columns: auto max-content max-content;
}
header > div .header-title h1 {
margin: 0;
padding: 0 1rem;
}
header > div .header-title h1 a, header > div .header-title h1 a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: sans-serif;
font-size: 2.5rem;
font-size: 32px;
font-weight: 700;
margin: 0;
padding: 0;
text-decoration: none;
}
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$header-bg-color: var(--colour-grey-xxl) !default;
$font-heading: sans-serif !default;
$font-weight: 700 !default;
@mixin header {
header {
display: grid;
grid-template-rows: 1.75rem 3.5rem;
grid-column: 2 / 4;
overflow: hidden;
svg {
grid-column: 1 / -1;
grid-row: 1 / -1;
place-self: stretch;
text {
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: $font-heading;
fill: $header-bg-color;
}
}
> div {
grid-row: 2;
grid-column: 1 / -1;
display: grid;
grid-column-gap: 1rem;
grid-template-columns: auto max-content max-content;
.header-title {
h1 {
margin: 0;
padding: 0 1rem;
a, a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: $font-heading;
font-size: 2.5rem;
font-size: 32px;
font-weight: $font-weight;
margin: 0;
padding: 0;
text-decoration: none;
}
}
}
}
}
}