131 lines
3.1 KiB
HTML
131 lines
3.1 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<title>Pattern</title>
|
|
</head>
|
|
<body data-prismjs-copy-timeout="1500">
|
|
<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 root]">[site name]</a></h1>
|
|
</div>
|
|
<!-- Other sections can go here, such as search and directory-->
|
|
</div>
|
|
</header></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(--color-grey-xl) !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>
|
|
<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(--color-grey-xl);
|
|
}
|
|
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>
|
|
</div>
|
|
</body>
|
|
</html> |