gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Move pug pattern files to .pp, check tab order

Browse Source
This commit is contained in:
A McIlwraith
2024-07-16 02:49:53 -04:00
parent 0036bcf0fd
commit fa708175b7
17 changed files with 188 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
public/patterns/core/header/index.html
View File

@@ -22,6 +22,89 @@
<!-- 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
@@ -75,59 +158,6 @@ $font-weight: 700 !default;
}
}
}
}</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>
</div>
</body>