76 lines
2.9 KiB
HTML
76 lines
2.9 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">$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>
|