From ea92f5e7acd006e5ac355c75e6df4498d8eff8e6 Mon Sep 17 00:00:00 2001 From: "Alexander (M2)" Date: Mon, 29 Jul 2024 19:12:22 -0400 Subject: [PATCH] Update patterns use paths to match what download.php gives --- ds2 core.sublime-workspace | 12 +- public/assets/scaffolding.css | 2 +- public/patterns/core/header/index.html | 33 ++--- public/patterns/core/sticky-note/index.html | 136 +----------------- public/patterns/core/switch/index.html | 31 +--- public/patterns/core/tabs/index.html | 4 +- public/patterns/core/tooltip/index.html | 2 +- .../core/breakpoints/_breakpoints.scss | 1 + src/pg/patterns/core/breakpoints/index.pug | 2 +- src/pg/patterns/core/header/index.pug | 22 +-- src/pg/patterns/core/sticky-note/index.pug | 10 +- .../patterns/core/sticky-note/sticky-note.css | 127 +--------------- src/pg/patterns/core/switch/index.pug | 4 +- src/pg/patterns/core/switch/switch.css | 27 +--- src/pg/patterns/core/tabs/index.pug | 4 +- src/pg/patterns/core/tooltip/index.pug | 2 +- 16 files changed, 54 insertions(+), 365 deletions(-) diff --git a/ds2 core.sublime-workspace b/ds2 core.sublime-workspace index df78aed..662a4f9 100644 --- a/ds2 core.sublime-workspace +++ b/ds2 core.sublime-workspace @@ -284,11 +284,7 @@ "/Users/am/Desktop/ds2-core/src", "/Users/am/Desktop/ds2-core/src/pg", "/Users/am/Desktop/ds2-core/src/pg/patterns", - "/Users/am/Desktop/ds2-core/src/pg/patterns/core", - "/Users/am/Desktop/ds2-core/src/pg/patterns/core/components", - "/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/sticky-note", - "/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/switch", - "/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/tooltip" + "/Users/am/Desktop/ds2-core/src/pg/patterns/core" ], "file_history": [ @@ -423,7 +419,7 @@ ], "find": { - "height": 26.0 + "height": 24.0 }, "find_in_files": { @@ -511,7 +507,7 @@ ], "incremental_find": { - "height": 26.0 + "height": 24.0 }, "input": { @@ -556,7 +552,7 @@ "project": "ds2 core.sublime-project", "replace": { - "height": 68.0 + "height": 44.0 }, "save_all_on_build": false, "select_file": diff --git a/public/assets/scaffolding.css b/public/assets/scaffolding.css index c01fdd8..9cf2a73 100644 --- a/public/assets/scaffolding.css +++ b/public/assets/scaffolding.css @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");:root{--colour-blue:#2e51a1;--colour-blue-l:#5c7abf;--colour-blue-xl:#b2c3ec;--colour-blue-d:#133176;--colour-blue-xd:#031235;--colour-grey:#7f7f7f;--colour-grey-l:#b2b2b2;--colour-grey-xl:#d8d8d8;--colour-grey-xxl:#f0f0f0;--colour-white:#fff;--colour-page:#fff;--colour-light:#fff;--colour-grey-d:#4c4c4c;--colour-grey-xd:#4c4c4c;--colour-black:#000;--colour-dark:#000}h1[class^=status]:after,h2[class^=status]:after,span[class^=status]:after{border-radius:50%;border:1px solid #CCC;content:" ";display:inline-block;height:1.5rem;margin-left:0.5rem;position:relative;top:2px;width:1.5rem}.status-not-started:after{background-color:transparent}.status-in-progress:after{background-color:#f0b031}.status-complete:after{background-color:#2e51a1}.status-deprecated:after{background-color:#da2c5b}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:Helvetica,Arial,sans-serif;font-size:14pt}@media (max-width:768px){html{font-size:16pt}}html.show-breakpoints body:after,html.show-breakpoints body:before{background-color:#555;color:white;content:"bigger than extra large";display:-ms-grid;display:grid;font-size:25px;-ms-grid-columns:auto;grid-template-columns:auto;padding:25px;place-content:center}@media (max-width:1200px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"extra large"}}@media (max-width:992px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"large"}}@media (max-width:768px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"medium"}}@media (max-width:576px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"small"}}#copystatus{left:50%;position:absolute;z-index:100}#copystatus div{border-radius:1rem;border:1px solid green;left:-50%;padding:1rem;position:relative;white-space:nowrap}#copystatus div:after{clear:both;content:" ";display:block}#copystatus div.succeeded{background-color:white;border-color:black;color:black}#copystatus div.failed{background-color:white;border-color:#f00;color:#f00}color-samples{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}@media (max-width:992px){color-samples{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);max-width:100%;width:100%}}@media (max-width:576px){color-samples{-ms-grid-columns:auto;grid-template-columns:auto;width:100%;max-width:100%}}color-samples color-sample{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;border:1px solid #CCC;display:-ms-grid;display:grid;font-family:inherit;gap:0.5rem;grid-template-areas:"name name name hex hex hex" "name name name rgb rgb rgb" "acc acc acc acc acc acc" "lighter lighter lighter darker darker darker" "notes notes notes notes notes notes";-ms-grid-columns:1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;grid-template-columns:repeat(6,1fr);-ms-grid-rows:1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,-webkit-max-content);grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,max-content);padding:1rem;width:20rem;max-width:318px}@media (max-width:992px){color-samples color-sample{width:100%;max-width:100%}}color-samples color-sample name{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:5;-ms-grid-row-align:start;align-self:start;font-size:1.25rem;grid-area:name}color-samples color-sample name span{cursor:pointer}color-samples color-sample rgb{-ms-grid-row:3;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:rgb;white-space:nowrap}color-samples color-sample hex{-ms-grid-row:1;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:hex;white-space:nowrap}color-samples color-sample>accessibility{border-bottom:1px solid #ccc;border-top:1px solid #ccc}color-samples color-sample accessibility{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:11;grid-area:acc;-ms-grid-row:3;grid-row:3;padding:0.5rem 0;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:2.5rem (-webkit-max-content)[2];-ms-grid-rows:2.5rem (max-content)[2];grid-template-rows:2.5rem repeat(2,-webkit-max-content);grid-template-rows:2.5rem repeat(2,max-content)}color-samples color-sample accessibility .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample accessibility .result.accwaa,color-samples color-sample accessibility .result.accwaaa{background-color:white;color:black}color-samples color-sample accessibility .result.accbaa,color-samples color-sample accessibility .result.accbaaa{background-color:black;color:white}color-samples color-sample accessibility .result span:nth-child(2){font-size:2rem}color-samples color-sample accessibility .aa,color-samples color-sample accessibility .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample accessibility .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample accessibility .acchb,color-samples color-sample accessibility .acchw{display:-ms-grid;display:grid;grid-tempate-columns:auto;-ms-grid-rows:(-webkit-max-content)[2];-ms-grid-rows:(max-content)[2];grid-template-rows:repeat(2,-webkit-max-content);grid-template-rows:repeat(2,max-content);-ms-grid-row-align:start;align-self:start;text-align:center;padding:0}color-samples color-sample accessibility .acchb span,color-samples color-sample accessibility .acchw span{-ms-grid-row:1;grid-row:1;grid-column:1/-1;font-size:0.9rem}color-samples color-sample accessibility .acchb small,color-samples color-sample accessibility .acchw small{text-align:center;-ms-grid-row:2;grid-row:2;grid-column:1/-1;font-size:0.75rem}color-samples color-sample sample-block{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:3;grid-column:span 3;-ms-grid-row:4;grid-row:4}color-samples color-sample sample-block color-pill{display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:20px -webkit-max-content auto;-ms-grid-columns:20px max-content auto;grid-template-columns:20px -webkit-max-content auto;grid-template-columns:20px max-content auto}color-samples color-sample sample-block color-pill :first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-radius:5px;border:1px solid #CCC;display:inline-block;height:10px;width:20px}color-samples color-sample sample-block color-pill span{cursor:pointer}color-samples color-sample sample-block color-pill span .tooltip-tc{padding:0.5rem;width:20rem;max-width:318px;height:10.5rem;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample sample-block color-pill span .tooltip-tc .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa{background-color:white;color:black}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa{background-color:black;color:white}color-samples color-sample sample-block color-pill span .tooltip-tc .result span{border:none}color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2){font-size:2rem}color-samples color-sample sample-block color-pill span .tooltip-tc .aa,color-samples color-sample sample-block color-pill span .tooltip-tc .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw{border:none;display:block;width:100%;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span{border:none;font-size:0.9rem;width:100%}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:before,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:before{display:none}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small{font-size:0.75rem;text-align:center}color-samples color-sample notes{border-top:1px solid #ccc;grid-column:1/-1;padding-top:0.5rem}[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}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}div.status-report p.heading,div.status-report td[colspan="2"]{font-size:1.125rem;font-weight:bolder!important;grid-column:1/-1;margin:2rem 0 0.5rem 0;padding-top:1.5rem!important}div.status-report td:not([colspan="2"]) span{display:-ms-grid;display:grid;-ms-grid-columns:auto 1rem;grid-template-columns:auto 1rem;margin:0 1rem 0 0}div.status-report td:not([colspan="2"]) span span[class^=status]:after{height:1rem!important;width:1rem!important;margin-right:1rem}div.status-report td:not([colspan="2"]) a{margin:0 1rem 0 0}div.status-report td:not([colspan="2"]).indent a{margin:0 1rem 0 1.5rem}article[data-status=deprecated]:not(.show-deprecated){display:none}body{margin:0;padding:0}body a.skip{position:absolute;left:-9999px}body .container{display:-ms-grid;display:grid;-ms-grid-columns:auto (22rem)[2] auto;grid-template-columns:auto repeat(2,22rem) auto;margin:0 auto;width:100vw}body .container 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}body .container header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}body .container 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:elvetica,Arial,sans-serif;fill:var(--colour-grey-xxl)}body .container 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}body .container header>div .header-title h1{margin:0;padding:0 1rem}body .container header>div .header-title h1 a,body .container header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:elvetica,Arial,sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}body .container nav{background-color:var(--colour-blue);-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;display:none}body .container nav ul{margin:1rem 0}body .container nav ul li{display:inline-block;margin-right:1rem}body .container nav a{color:var(--colour-white);text-decoration:none}@media (min-width:768px){body .container nav{display:initial}}body .container p.info-switches{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;gap:0.25rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;-ms-grid-columns:auto (-webkit-max-content)[2];-ms-grid-columns:auto (max-content)[2];grid-template-columns:auto repeat(2,-webkit-max-content);grid-template-columns:auto repeat(2,max-content);text-align:right}body .container p.info-switches [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}body .container p.info-switches [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}body .container p.info-switches [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.info-switches [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}body .container p.info-switches label{text-align:left}body .container main{display:block;grid-column:1/-1;-ms-grid-row:4;grid-row:4}@media (max-width:768px){body .container main{-ms-grid-row:3;grid-row:3;padding:0}}@supports (grid-area:auto){body .container main{display:grid;grid-template-columns:1rem repeat(2,auto) 1rem}@media (min-width:768px){body .container main{grid-template-columns:auto repeat(2,22rem) auto}}}body .container main h1,body .container main h2,body .container main h3,body .container main h4,body .container main h5,body .container main h6{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4}body .container main article{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;margin-top:2rem;min-width:0}body .container main article.status-deprecated{display:none}body .container main article .tab-group,body .container main article tabset{margin:2rem 0 1rem 0}body .container main article .tab-group>ul,body .container main article tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}body .container main article .tab-group>ul li.separator,body .container main article 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%}body .container main article .tab-group .tab-hidden,body .container main article tabset .tab-hidden{display:none}body .container main article .tab-group [role=tab],body .container main article 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}body .container main article .tab-group [role=tab]:last-of-type,body .container main article tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}body .container main article .tab-group [role=tab]:not(.selected),body .container main article tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}body .container main article .tab-group [role=tab] span,body .container main article tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}body .container main article .tab-group [role=tabpanel],body .container main article tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}body .container main article .tab-group [role=tabpanel]:not(.open),body .container main article tabset [role=tabpanel]:not(.open){display:none}body .container main article .tab-group [role=tabpanel] pre,body .container main article tabset [role=tabpanel] pre{background-color:var(--colour-black-5);font-size:0.8rem}body .container main article .tab-group [role=tabpanel] pre code:not(.inline),body .container main article tabset [role=tabpanel] pre code:not(.inline){display:block;width:100%}body .container main article p.switch{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:-webkit-max-content auto;-ms-grid-columns:max-content auto;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto}body .container main article p.switch [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}body .container main article p.switch [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}body .container main article p.switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container main article p.switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}code[class*=language-],pre[class*=language-]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:0.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:slategray}.token.punctuation{color:#999}.token.namespace{opacity:0.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:0.8em;padding:0 0.5em;background:#f5f2f0;background:rgba(224,224,224,0.2);-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:0.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right} \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");:root{--colour-blue:#2e51a1;--colour-blue-l:#5c7abf;--colour-blue-xl:#b2c3ec;--colour-blue-d:#133176;--colour-blue-xd:#031235;--colour-grey:#7f7f7f;--colour-grey-l:#b2b2b2;--colour-grey-xl:#d8d8d8;--colour-grey-xxl:#f0f0f0;--colour-white:#fff;--colour-page:#fff;--colour-light:#fff;--colour-grey-d:#4c4c4c;--colour-grey-xd:#4c4c4c;--colour-black:#000;--colour-dark:#000}h1[class^=status]:after,h2[class^=status]:after,span[class^=status]:after{border-radius:50%;border:1px solid #CCC;content:" ";display:inline-block;height:1.5rem;margin-left:0.5rem;position:relative;top:2px;width:1.5rem}.status-not-started:after{background-color:transparent}.status-in-progress:after{background-color:#f0b031}.status-complete:after{background-color:#2e51a1}.status-deprecated:after{background-color:#da2c5b}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:Helvetica,Arial,sans-serif;font-size:14pt}@media (max-width:768px){html{font-size:16pt}}html.show-breakpoints body:after,html.show-breakpoints body:before{background-color:#555;color:white;content:"bigger than extra large";display:-ms-grid;display:grid;font-family:sans-serif;font-size:25px;-ms-grid-columns:auto;grid-template-columns:auto;padding:25px;place-content:center}@media (max-width:1200px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"extra large"}}@media (max-width:992px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"large"}}@media (max-width:768px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"medium"}}@media (max-width:576px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"small"}}#copystatus{left:50%;position:absolute;z-index:100}#copystatus div{border-radius:1rem;border:1px solid green;left:-50%;padding:1rem;position:relative;white-space:nowrap}#copystatus div:after{clear:both;content:" ";display:block}#copystatus div.succeeded{background-color:white;border-color:black;color:black}#copystatus div.failed{background-color:white;border-color:#f00;color:#f00}color-samples{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}@media (max-width:992px){color-samples{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);max-width:100%;width:100%}}@media (max-width:576px){color-samples{-ms-grid-columns:auto;grid-template-columns:auto;width:100%;max-width:100%}}color-samples color-sample{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;border:1px solid #CCC;display:-ms-grid;display:grid;font-family:inherit;gap:0.5rem;grid-template-areas:"name name name hex hex hex" "name name name rgb rgb rgb" "acc acc acc acc acc acc" "lighter lighter lighter darker darker darker" "notes notes notes notes notes notes";-ms-grid-columns:1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;grid-template-columns:repeat(6,1fr);-ms-grid-rows:1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,-webkit-max-content);grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,max-content);padding:1rem;width:20rem;max-width:318px}@media (max-width:992px){color-samples color-sample{width:100%;max-width:100%}}color-samples color-sample name{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:5;-ms-grid-row-align:start;align-self:start;font-size:1.25rem;grid-area:name}color-samples color-sample name span{cursor:pointer}color-samples color-sample rgb{-ms-grid-row:3;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:rgb;white-space:nowrap}color-samples color-sample hex{-ms-grid-row:1;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:hex;white-space:nowrap}color-samples color-sample>accessibility{border-bottom:1px solid #ccc;border-top:1px solid #ccc}color-samples color-sample accessibility{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:11;grid-area:acc;-ms-grid-row:3;grid-row:3;padding:0.5rem 0;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:2.5rem (-webkit-max-content)[2];-ms-grid-rows:2.5rem (max-content)[2];grid-template-rows:2.5rem repeat(2,-webkit-max-content);grid-template-rows:2.5rem repeat(2,max-content)}color-samples color-sample accessibility .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample accessibility .result.accwaa,color-samples color-sample accessibility .result.accwaaa{background-color:white;color:black}color-samples color-sample accessibility .result.accbaa,color-samples color-sample accessibility .result.accbaaa{background-color:black;color:white}color-samples color-sample accessibility .result span:nth-child(2){font-size:2rem}color-samples color-sample accessibility .aa,color-samples color-sample accessibility .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample accessibility .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample accessibility .acchb,color-samples color-sample accessibility .acchw{display:-ms-grid;display:grid;grid-tempate-columns:auto;-ms-grid-rows:(-webkit-max-content)[2];-ms-grid-rows:(max-content)[2];grid-template-rows:repeat(2,-webkit-max-content);grid-template-rows:repeat(2,max-content);-ms-grid-row-align:start;align-self:start;text-align:center;padding:0}color-samples color-sample accessibility .acchb span,color-samples color-sample accessibility .acchw span{-ms-grid-row:1;grid-row:1;grid-column:1/-1;font-size:0.9rem}color-samples color-sample accessibility .acchb small,color-samples color-sample accessibility .acchw small{text-align:center;-ms-grid-row:2;grid-row:2;grid-column:1/-1;font-size:0.75rem}color-samples color-sample sample-block{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:3;grid-column:span 3;-ms-grid-row:4;grid-row:4}color-samples color-sample sample-block color-pill{display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:20px -webkit-max-content auto;-ms-grid-columns:20px max-content auto;grid-template-columns:20px -webkit-max-content auto;grid-template-columns:20px max-content auto}color-samples color-sample sample-block color-pill :first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-radius:5px;border:1px solid #CCC;display:inline-block;height:10px;width:20px}color-samples color-sample sample-block color-pill span{cursor:pointer}color-samples color-sample sample-block color-pill span .tooltip-tc{padding:0.5rem;width:20rem;max-width:318px;height:10.5rem;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample sample-block color-pill span .tooltip-tc .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa{background-color:white;color:black}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa{background-color:black;color:white}color-samples color-sample sample-block color-pill span .tooltip-tc .result span{border:none}color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2){font-size:2rem}color-samples color-sample sample-block color-pill span .tooltip-tc .aa,color-samples color-sample sample-block color-pill span .tooltip-tc .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw{border:none;display:block;width:100%;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span{border:none;font-size:0.9rem;width:100%}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:before,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:before{display:none}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small{font-size:0.75rem;text-align:center}color-samples color-sample notes{border-top:1px solid #ccc;grid-column:1/-1;padding-top:0.5rem}[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}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}div.status-report p.heading,div.status-report td[colspan="2"]{font-size:1.125rem;font-weight:bolder!important;grid-column:1/-1;margin:2rem 0 0.5rem 0;padding-top:1.5rem!important}div.status-report td:not([colspan="2"]) span{display:-ms-grid;display:grid;-ms-grid-columns:auto 1rem;grid-template-columns:auto 1rem;margin:0 1rem 0 0}div.status-report td:not([colspan="2"]) span span[class^=status]:after{height:1rem!important;width:1rem!important;margin-right:1rem}div.status-report td:not([colspan="2"]) a{margin:0 1rem 0 0}div.status-report td:not([colspan="2"]).indent a{margin:0 1rem 0 1.5rem}article[data-status=deprecated]:not(.show-deprecated){display:none}body{margin:0;padding:0}body a.skip{position:absolute;left:-9999px}body .container{display:-ms-grid;display:grid;-ms-grid-columns:auto (22rem)[2] auto;grid-template-columns:auto repeat(2,22rem) auto;margin:0 auto;width:100vw}body .container 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}body .container header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}body .container 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:elvetica,Arial,sans-serif;fill:var(--colour-grey-xxl)}body .container 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}body .container header>div .header-title h1{margin:0;padding:0 1rem}body .container header>div .header-title h1 a,body .container header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:elvetica,Arial,sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}body .container nav{background-color:var(--colour-blue);-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;display:none}body .container nav ul{margin:1rem 0}body .container nav ul li{display:inline-block;margin-right:1rem}body .container nav a{color:var(--colour-white);text-decoration:none}@media (min-width:768px){body .container nav{display:initial}}body .container p.info-switches{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;gap:0.25rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;-ms-grid-columns:auto (-webkit-max-content)[2];-ms-grid-columns:auto (max-content)[2];grid-template-columns:auto repeat(2,-webkit-max-content);grid-template-columns:auto repeat(2,max-content);text-align:right}body .container p.info-switches [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}body .container p.info-switches [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}body .container p.info-switches [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.info-switches [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}body .container p.info-switches label{text-align:left}body .container main{display:block;grid-column:1/-1;-ms-grid-row:4;grid-row:4}@media (max-width:768px){body .container main{-ms-grid-row:3;grid-row:3;padding:0}}@supports (grid-area:auto){body .container main{display:grid;grid-template-columns:1rem repeat(2,auto) 1rem}@media (min-width:768px){body .container main{grid-template-columns:auto repeat(2,22rem) auto}}}body .container main h1,body .container main h2,body .container main h3,body .container main h4,body .container main h5,body .container main h6{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4}body .container main article{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;margin-top:2rem;min-width:0}body .container main article.status-deprecated{display:none}body .container main article .tab-group,body .container main article tabset{margin:2rem 0 1rem 0}body .container main article .tab-group>ul,body .container main article tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}body .container main article .tab-group>ul li.separator,body .container main article 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%}body .container main article .tab-group .tab-hidden,body .container main article tabset .tab-hidden{display:none}body .container main article .tab-group [role=tab],body .container main article 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}body .container main article .tab-group [role=tab]:last-of-type,body .container main article tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}body .container main article .tab-group [role=tab]:not(.selected),body .container main article tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}body .container main article .tab-group [role=tab] span,body .container main article tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}body .container main article .tab-group [role=tabpanel],body .container main article tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}body .container main article .tab-group [role=tabpanel]:not(.open),body .container main article tabset [role=tabpanel]:not(.open){display:none}body .container main article .tab-group [role=tabpanel] pre,body .container main article tabset [role=tabpanel] pre{background-color:var(--colour-black-5);font-size:0.8rem}body .container main article .tab-group [role=tabpanel] pre code:not(.inline),body .container main article tabset [role=tabpanel] pre code:not(.inline){display:block;width:100%}body .container main article p.switch{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:-webkit-max-content auto;-ms-grid-columns:max-content auto;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto}body .container main article p.switch [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}body .container main article p.switch [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}body .container main article p.switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container main article p.switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}code[class*=language-],pre[class*=language-]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:0.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:slategray}.token.punctuation{color:#999}.token.namespace{opacity:0.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:0.8em;padding:0 0.5em;background:#f5f2f0;background:rgba(224,224,224,0.2);-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:0.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right} \ No newline at end of file diff --git a/public/patterns/core/header/index.html b/public/patterns/core/header/index.html index ee11bbe..be21293 100644 --- a/public/patterns/core/header/index.html +++ b/public/patterns/core/header/index.html @@ -9,11 +9,9 @@

When to use it

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.

How to use it

-

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 - 

core: true
and create your own pattern in the location you wish it in your design system. -

- - 
-        

-          
-          
-          

-            

-              
 DS2 core

-            

-            
-          

-
- 
//-		DS2 core (c) 2024 Alexander McIlwraith 
+      
//-		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
 

-      
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}

-      
//-		DS2 core (c) 2024 Alexander McIlwraith 
+      
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}

+      

+        
@import "scss/core/header/header;
+

+        
//-		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;
 		}
 	}
 }

-    

+      
+    
   
 
\ No newline at end of file
diff --git a/public/patterns/core/sticky-note/index.html b/public/patterns/core/sticky-note/index.html
index 4966fa4..4101352 100644
--- a/public/patterns/core/sticky-note/index.html
+++ b/public/patterns/core/sticky-note/index.html
@@ -9,7 +9,7 @@
     
When to use it

     
Use a sticky when you want to make a note without adding it to the content. 

     
How to use it

-    
Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either float="[ right | left ]" or offset="[ top | left ]". Offset will take negative values in any web measurement unit.
+    
Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either float="[ right | left ]" or offset="[ top | left ]". Offset will take negative values in any web measurement unit.
       This is a sample sticky. You can drag it out of the way if you need to see the content under it.
       You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).
     

@@ -19,136 +19,12 @@
         This is a sample sticky. You can drag it out of the way if you need to see the content under it.

       
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.

-      
 @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:nth-child(1) {
-	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;
-}

+      
 @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}

       
 
         
$sticky-colors: ( [sass map with your own defined colours] );
-@import "[path to]/_sticky-note";
-@include sticky-note;

+@import "scss/core/switch/_sticky-note";
+@include sticky-note;
+
//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
 
@@ -303,7 +179,7 @@ $sticky-colors: (
 }
- 
import * as stickynote from "[path to]]/_sticky-note.js";
+        
import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
 stickynote.init()
 

         
//-		DS2 core (c) 2024 Alexander McIlwraith 
diff --git a/public/patterns/core/switch/index.html b/public/patterns/core/switch/index.html
index 851e4b1..7698439 100644
--- a/public/patterns/core/switch/index.html
+++ b/public/patterns/core/switch/index.html
@@ -18,34 +18,9 @@
     

       

       
span#example-id(role="switch")

-      
[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%);
-}

+      
[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%)}

       

-        
@import "[path to]/_switch"; 
+        
@import "scss/core/switch/_switch"; 
 @include switch;
 

         
//-		DS2 core (c) 2024 Alexander McIlwraith 
@@ -87,7 +62,7 @@ $switch-height: 1.5rem !default;
       

       

         
// Note that switch is a reserved word. 
-import * as swtch from "[path to]]/_switch.js";
+import * as swtch from "./js/core/switch/_switch.js";
 swtch.init();
 

         
//-		DS2 core (c) 2024 Alexander McIlwraith 
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index dbe01aa..54abab0 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -80,7 +80,7 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
 	display: none;
 }

       

-        
@import "[path to]/_tabs";
+        
@import "scss/core/tabs/_tabs";
 @include tabs{ 
 	// optional content block
 };
@@ -156,7 +156,7 @@ $tab-notselected: #f0f0f0 !default;
 }

       

       

-        
import * as tabs from "[path to]/_tabs.js";
+        
import * as tabs from "./js/core/tabs/_tabs.js";
 tabs.init();

         
/*  DS2 core (c) 2024 Alexander McIlwraith 
 	import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js";
diff --git a/public/patterns/core/tooltip/index.html b/public/patterns/core/tooltip/index.html
index 402ddc3..b22aa45 100644
--- a/public/patterns/core/tooltip/index.html
+++ b/public/patterns/core/tooltip/index.html
@@ -182,7 +182,7 @@
 	}
 }

       

-        
@import "[path to]/_tooltip";
+        
@import "scss/core/tooltip/_tooltip";
 @include tooltip;

         
//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
diff --git a/src/pg/patterns/core/breakpoints/_breakpoints.scss b/src/pg/patterns/core/breakpoints/_breakpoints.scss
index cf85c04..2a9a567 100644
--- a/src/pg/patterns/core/breakpoints/_breakpoints.scss
+++ b/src/pg/patterns/core/breakpoints/_breakpoints.scss
@@ -10,6 +10,7 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 14
 		color: white;	
 		content: "bigger than extra large";
 		display: grid;
+		font-family: sans-serif;
 		font-size: 25px;
 		grid-template-columns: auto;
 		padding: 25px;
diff --git a/src/pg/patterns/core/breakpoints/index.pug b/src/pg/patterns/core/breakpoints/index.pug
index c9e708b..1ff66ef 100644
--- a/src/pg/patterns/core/breakpoints/index.pug
+++ b/src/pg/patterns/core/breakpoints/index.pug
@@ -21,7 +21,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "[path-to]/breakpoints";
+				@import "scss/core/breakpoints/breakpoints";
 				@include break([breakpoint]) {
 					// css here
 				}
diff --git a/src/pg/patterns/core/header/index.pug b/src/pg/patterns/core/header/index.pug
index b4269a7..9af348f 100644
--- a/src/pg/patterns/core/header/index.pug
+++ b/src/pg/patterns/core/header/index.pug
@@ -10,10 +10,10 @@ block content
 	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. 
 
 	+h(2)
-	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.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system. 
+	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.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system. 
 
-	div.tab-group#header
-		pre.language-html(data-tab="html")
+	tabset#header
+		pre.language-html(tab="html")
 			// create temp variables and store the design system values
 			- var tmpsite= site
 			- var tmproot= root
@@ -25,12 +25,14 @@ block content
 			//- reset variables to original values
 			- site= tmpsite 
 			- root= tmproot 
-
-		pre.language-html(data-tab="html")
-			include _header.pug
-		pre.language-pug(data-tab="pug")
+		pre.language-pug(tab="pug")
 			include _header.pp
-		pre.language-css(data-tab="css")
+		pre.language-css(tab="css")
 			include header.css
-		pre.language-sass(data-tab="scss")
-			include _header.scss
\ No newline at end of file
+		div.language-sass(tab="scss")
+			
+			pre.language-sass.
+				@import "scss/core/header/header;
+
+			pre.language-sass
+				include _header.scss
\ No newline at end of file
diff --git a/src/pg/patterns/core/sticky-note/index.pug b/src/pg/patterns/core/sticky-note/index.pug
index 93c3e66..8aac252 100644
--- a/src/pg/patterns/core/sticky-note/index.pug
+++ b/src/pg/patterns/core/sticky-note/index.pug
@@ -8,9 +8,8 @@ block content
 	+h(1)
 	p Use a sticky when you want to make a note without adding it to the content. 
 	+h(2)
-	p Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either #[code.language-html.inline float="[ right | left ]"] or #[code.language-html.inline offset="[ top | left ]"]. Offset will take negative values in any web measurement unit.
-		sticky-note.blue(offset="-10rem 1rem") This #[strong is] a sample sticky. 
-			| You can drag it out of the way if you need to see the content under it.
+	p Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either #[code.language-html.inline float="[ right | left ]"] or #[code.language-html.inline offset="[ top | left ]"]. Offset will take negative values in any web measurement unit.
+		sticky-note.blue(offset="-10rem 1rem") This #[strong is] a sample sticky. You can drag it out of the way if you need to see the content under it.
 		sticky-note(float="right") You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).
 
 	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	
@@ -27,15 +26,16 @@ block content
 			+h(3)
 			pre.language-sass.
 				$sticky-colors: ( [sass map with your own defined colours] );
-				@import "[path to]/_sticky-note";
+				@import "scss/core/switch/_sticky-note";
 				@include sticky-note;
+
 			+h(4)
 			pre.language-sass
 				include _sticky-note.scss
 		div(tab="js") 
 			+h(3)
 			pre.language-js.
-				import * as stickynote from "[path to]]/_sticky-note.js";
+				import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
 				stickynote.init()
 
 			+h(4)
diff --git a/src/pg/patterns/core/sticky-note/sticky-note.css b/src/pg/patterns/core/sticky-note/sticky-note.css
index d842599..839168a 100644
--- a/src/pg/patterns/core/sticky-note/sticky-note.css
+++ b/src/pg/patterns/core/sticky-note/sticky-note.css
@@ -1,126 +1 @@
-@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:nth-child(1) {
-	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;
-}
\ No newline at end of file
+@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}
\ No newline at end of file
diff --git a/src/pg/patterns/core/switch/index.pug b/src/pg/patterns/core/switch/index.pug
index dd9cd82..680537f 100644
--- 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 "[path to]/_switch"; 
+				@import "scss/core/switch/_switch"; 
 				@include switch;
 				
 			+h(4)
@@ -40,7 +40,7 @@ block content
 			+h(3)
 			pre.language-js.
 				// Note that switch is a reserved word. 
-				import * as swtch from "[path to]]/_switch.js";
+				import * as swtch from "./js/core/switch/_switch.js";
 				swtch.init();
 
 			+h(4)
diff --git a/src/pg/patterns/core/switch/switch.css b/src/pg/patterns/core/switch/switch.css
index f71e867..71109dd 100644
--- a/src/pg/patterns/core/switch/switch.css
+++ b/src/pg/patterns/core/switch/switch.css
@@ -1,26 +1 @@
-[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%);
-}
\ No newline at end of file
+[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%)}
\ No newline at end of file
diff --git a/src/pg/patterns/core/tabs/index.pug b/src/pg/patterns/core/tabs/index.pug
index 3e4f8fc..16df388 100644
--- a/src/pg/patterns/core/tabs/index.pug
+++ b/src/pg/patterns/core/tabs/index.pug
@@ -33,7 +33,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "[path to]/_tabs";
+				@import "scss/core/tabs/_tabs";
 				@include tabs{ 
 					// optional content block
 				};
@@ -44,7 +44,7 @@ block content
 		div(tab="js")
 			+h(3)
 			pre.language-js.
-				import * as tabs from "[path to]/_tabs.js";
+				import * as tabs from "./js/core/tabs/_tabs.js";
 				tabs.init();
 			+h(4)
 			pre.language-js
diff --git a/src/pg/patterns/core/tooltip/index.pug b/src/pg/patterns/core/tooltip/index.pug
index 0bc9610..5459bb2 100644
--- 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 "[path to]/_tooltip";
+				@import "scss/core/tooltip/_tooltip";
 				@include tooltip;
 			+h(4)
 			pre.language-sass