//- 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;
}
}
}
}
}
}