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

Update patterns use paths to match what download.php gives

Browse Source
This commit is contained in:
A McIlwraith
2024-07-29 19:12:22 -04:00
parent 3292729d53
commit ea92f5e7ac
16 changed files with 54 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,11 +9,9 @@
<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">
<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 <code class="inline language-js">core: true </code> and create your own pattern in the location you wish it in your design system. </p>
<tabset id="header">
<pre class="language-html" tab="html">
<!-- create temp variables and store the design system values-->
<header>
<!-- The headline banner area -->
@@ -27,20 +25,7 @@
<!-- 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
<pre class="language-pug" tab="pug">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
//- required variables
@@ -57,8 +42,11 @@ header
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
<pre class="language-css" 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 class="language-sass" tab="scss">
<pre class="language-sass">@import "scss/core/header/header;
</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$header-bg-color: var(--colour-grey-xxl) !default;
@@ -112,6 +100,7 @@ $font-weight: 700 !default;
}
}
}</pre>
</div>
</div>
</tabset>
</body>
</html>