move patterns and javascript to core directories

2024-07-13 10:16:32 -04:00
parent 426f92cfd0
commit 4532389e3d
50 changed files with 55 additions and 1006 deletions
--- a/public/patterns/core/layouts/header/index.html
+++ b/public/patterns/core/layouts/header/index.html
@@ -0,0 +1,131 @@
+
+<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(--colour-grey-xxl) !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(--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>
+</html>