117 lines
4.6 KiB
HTML
117 lines
4.6 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<title>Pattern</title>
|
|
</head>
|
|
<body data-prismjs-copy-timeout="1500">
|
|
<h2>What is it</h2>
|
|
<p>A header is layout pattern that helps the user identify the site. </p>
|
|
<h2>When to use it</h2>
|
|
<p>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. </p>
|
|
<h2>How to use it</h2>
|
|
<p>Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the
|
|
<pre class="inline language-js">core: true </pre> and create your own pattern in the location you wish it in your design system.
|
|
</p>
|
|
<div class="tab-group" id="header">
|
|
<pre class="language-html" data-tab="html">
|
|
<!-- create temp variables and store the design system values-->
|
|
<header>
|
|
<!-- The headline banner area -->
|
|
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<text>[site name]</text>
|
|
</svg>
|
|
<div>
|
|
<div class="header-title">
|
|
<h1> <a href="./">[site name]</a></h1>
|
|
</div>
|
|
<!-- Other sections can go here, such as search and directory-->
|
|
</div>
|
|
</header></pre>
|
|
<pre class="language-html" data-tab="html">
|
|
<header>
|
|
<!-- The headline banner area -->
|
|
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<text>DS2 core</text>
|
|
</svg>
|
|
<div>
|
|
<div class="header-title">
|
|
<h1> <a href="./">DS2 core</a></h1>
|
|
</div>
|
|
<!-- Other sections can go here, such as search and directory-->
|
|
</div>
|
|
</header></pre>
|
|
<pre class="language-pug" data-tab="pug">//- 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
|
|
</pre>
|
|
<pre class="language-css" data-tab="css">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}</pre>
|
|
<pre class="language-sass" data-tab="scss">//- 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</body>
|
|
</html> |