Fixes #34 some issues with breakpoints

2025-06-10 16:20:24 -04:00 · 2025-06-10 16:20:24 -04:00 · b44b17d830
commit b44b17d830
parent 8fe6e39440
16 changed files with 107 additions and 52 deletions
--- a/public/index.html
+++ b/public/index.html
@ -76,8 +76,8 @@
          <h1 class="status-complete"><span>Header
              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
        </article>
-        <article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints" style="height: 100vh">
-          <h1 class="status-complete"><span>Breakpoints
+        <article id="layouts-breakpoint" data-name="breakpoint" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoint" style="height: 100vh">
+          <h1 class="status-complete"><span>Breakpoint
              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
        </article>
        <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh">
--- a/public/patterns/core/breakpoints/index.html
+++ b/public/patterns/core/breakpoints/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <h2>What is it</h2>
@ -14,8 +21,8 @@
    <p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
    <tabset id="breakpoints">
      <div tab="scss">
-        <pre class="language-sass">@import "[path-to]/breakpoints";
-@include break([breakpoint]) {
+        <pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
+@include breapoint.break([breakpoint]) {
 	// css here
 }</pre>
        <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
@ -24,12 +31,13 @@
 // default breakpoints match bootstrap 5 breakpoints.
 $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;

-@mixin breakpoint-debug {
+@mixin debug {
 	body::before, body::after {
 		background-color: #555;	
 		color: white;	
 		content: "bigger than extra large";
 		display: grid;
+		font-family: sans-serif;
 		font-size: 25px;
 		grid-template-columns: auto;
 		padding: 25px;
--- a/public/patterns/core/colours/index.html
+++ b/public/patterns/core/colours/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <h2>What is it</h2>
--- a/public/patterns/core/header/index.html
+++ b/public/patterns/core/header/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <h2>What is it</h2>
@ -44,7 +51,7 @@ header
 </pre>
      <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 class="language-sass">@use "scss/core/header/header;
 </pre>
        <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
--- a/public/patterns/core/status/index.html
+++ b/public/patterns/core/status/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <div class="tab-group" id="status-report">
@ -52,7 +59,7 @@
                <td><span class="status-complete">Complete</span></td>
              </tr>
              <tr>
-                <td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td>
+                <td><a href="./?p=layouts/breakpoint"> Breakpoint</a></td>
                <td><span class="status-complete">Complete</span></td>
              </tr>
              <tr>
@ -83,7 +90,7 @@
              <td colspan="2"><span class="status-complete">Complete (10)</span></td>
            </tr>
            <tr> 
-              <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
+              <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
              <td>Layouts</td>
            </tr>
            <tr> 
@ -136,7 +143,7 @@
        <table role="presentation">
          <tbody> 
            <tr> 
-              <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
+              <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
              <td><span><span class="status-complete">Complete</span></span></td>
              <td>Layouts</td>
            </tr>
--- a/public/patterns/core/sticky-note/index.html
+++ b/public/patterns/core/sticky-note/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <h2>What is it</h2>
@ -22,7 +29,7 @@
      <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{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}</pre>
      <div tab="scss"> 
        <pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] );
-@import "scss/core/switch/_sticky-note";
+@use "scss/core/switch/_sticky-note";
@include sticky-note;
 </pre>
        <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
@ -279,7 +286,8 @@ const calculateStickyPosition = (s) => {
 	}
 }

-export function init(p = document){
+module.exports = {
+	init: (p = document) => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));

 		p.querySelectorAll("sticky-note").forEach((s) => {
@ -312,6 +320,7 @@ export function init(p = document){
 				calculateStickyPosition(s);
 			});
 		}
+	}
 }</pre>
      </div>
    </tabset>
--- a/public/patterns/core/switch/index.html
+++ b/public/patterns/core/switch/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <h2>What is it</h2>
@ -20,7 +27,7 @@
      <pre class="language-pug" tab="pug">span#example-id(role="switch")</pre>
      <pre class="language-css" tab="css">[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}</pre>
      <div tab="scss">
-        <pre class="language-sass">@import "scss/core/switch/_switch"; 
+        <pre class="language-sass">@use "scss/core/switch/_switch"; 
@include switch;
 </pre>
        <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@ -44,7 +44,7 @@
 		</pre>
      <pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre>
      <div tab="scss">
-        <pre class="language-sass">@import "scss/core/tabs/_tabs";
+        <pre class="language-sass">@use "scss/core/tabs/_tabs";
@include tabs{ 
 	// optional content block
 };
--- a/public/patterns/core/tooltip/index.html
+++ b/public/patterns/core/tooltip/index.html
@ -2,6 +2,13 @@
 <html> 
  <head>
    <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
  </head>
  <body data-prismjs-copy-timeout="1500">
    <h2>What is it</h2>
@ -182,11 +189,12 @@
 	}
 }</pre>
      <div tab="scss">
-        <pre class="language-sass">@import "scss/core/tooltip/_tooltip";
+        <pre class="language-sass">@use "scss/core/tooltip/_tooltip";
@include tooltip;</pre>
        <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 

+$font-body: sans-serif !default;
 $tooltip-border-radius: .5rem !default;
 $tooltip-dark-allow: true !default;
 $tooltip-dark-background: #1f2127 !default;
@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
 		border-radius: $tooltip-border-radius;
 		color: $tooltip-light-foreground;
 		filter: $tooltip-light-drop-shadow;
+		$font-family: $font-body;
 		font-size: 1rem;
 		font-weight: 400;
 		inline-size: max-content;
--- a/src/pg/_config.pug
+++ b/src/pg/_config.pug
@ -2,6 +2,7 @@
 - var lang = "en-uk"
 - var colorpfx =  "colour"
 - var headings = ["What is it", "When to use it", "How to use it"]
+- var downloadExtensions = ["js", "pug", "scss"]
 - var generateColourToken = ["colours"]

 - 
@ -49,7 +50,7 @@
 					core: true,
 				}, 
 				{
-					name: "breakpoints",
+					name: "breakpoint",
 					status: "complete",
 					core: true,
 				},
--- a/src/pg/patterns/core/breakpoint/index.pug
+++ b/src/pg/patterns/core/breakpoint/index.pug
@ -21,10 +21,10 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/breakpoints/breakpoints";
-				@include break([breakpoint]) {
+				@use "scss/core/breakpoint/breakpoint";
+				@include breapoint.break([breakpoint]) {
 					// css here
 				}
 			+h(4)
 			pre.language-sass
-				include _breakpoints.scss
+				include _breakpoint.scss
--- a/src/pg/patterns/core/header/index.pug
+++ b/src/pg/patterns/core/header/index.pug
@ -32,7 +32,7 @@ block content
 		div.language-sass(tab="scss")
 			
 			pre.language-sass.
-				@import "scss/core/header/header;
+				@use "scss/core/header/header;

 			pre.language-sass
 				include _header.scss
--- a/src/pg/patterns/core/sticky-note/index.pug
+++ b/src/pg/patterns/core/sticky-note/index.pug
@ -26,7 +26,7 @@ block content
 			+h(3)
 			pre.language-sass.
 				$sticky-colors: ( [sass map with your own defined colours] );
-				@import "scss/core/switch/_sticky-note";
+				@use "scss/core/switch/_sticky-note";
 				@include sticky-note;

 			+h(4)
--- a/src/pg/patterns/core/switch/index.pug
+++ b/src/pg/patterns/core/switch/index.pug
@ -30,7 +30,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/switch/_switch"; 
+				@use "scss/core/switch/_switch"; 
 				@include switch;
 				
 			+h(4)
--- a/src/pg/patterns/core/tabs/index.pug
+++ b/src/pg/patterns/core/tabs/index.pug
@ -42,7 +42,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/tabs/_tabs";
+				@use "scss/core/tabs/_tabs";
 				@include tabs{ 
 					// optional content block
 				};
--- a/src/pg/patterns/core/tooltip/index.pug
+++ b/src/pg/patterns/core/tooltip/index.pug
@ -43,7 +43,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/tooltip/_tooltip";
+				@use "scss/core/tooltip/_tooltip";
 				@include tooltip;
 			+h(4)
 			pre.language-sass