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>

2
public/patterns/core/sticky-note/index.html
View File

@@ -17,7 +17,7 @@
<tabset id="sticky-note">
<pre class="language-html" tab="html">
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
<pre class="language-pug" tab="pug">sticky-note(float="right").blue This <strong>is</strong> a sample sticky.
<pre class="language-pug" tab="pug">sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.</pre>
<pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
sticky-note-wrapper {

10
public/patterns/core/tabs/index.html
View File

@@ -22,6 +22,10 @@
<div data-tab="[tab title]"></div>
<div data-tab="[tab title]"></div>
</div></pre>
<pre class="language-pug" tab="pug">div#uniqueID.tab-group
div(data-tab="[tab title]")
div(data-tab="[tab title]")
</pre>
<pre class="language-css" tab="css">tabset, .tab-group {
margin: 2rem 0 1rem 0;
}
@@ -77,9 +81,9 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
<pre class="language-css" tab="scss">// DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0
$tab-border: var(--colour-grey) !default;
$tab-selected: var(--colour-white) !default;
$tab-notselected: var(--colour-grey-xxl) !default;
$tab-border: #7f7f7f !default;
$tab-selected: #FFF !default;
$tab-notselected: #f0f0f0 !default;
@mixin tabs {
tabset, .tab-group {