diff --git a/public/assets/scaffolding-min.js b/public/assets/scaffolding-min.js index d502e3c..ff9a61f 100644 --- a/public/assets/scaffolding-min.js +++ b/public/assets/scaffolding-min.js @@ -187,96 +187,110 @@ module.exports = { } } - if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad(a); + if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad(); document.querySelectorAll("article").forEach((a) => { if ( a.getAttribute("data-template") != "none" ) { - let path = a.getAttribute("data-path"); - path = "patterns/" + - (a.getAttribute("data-core") == "true" ? - "core/" + path.substring(path.lastIndexOf("/") + 1) : - a.getAttribute("data-path")) - + "/index.html"; - const ASYNC = true; - let ajx = new XMLHttpRequest(); - ajx.onreadystatechange = () => { - if (ajx.readyState == 4) { - - switch (ajx.status) { - case 200: - a.innerHTML = a.innerHTML + ajx.responseText; - - switch (a.getAttribute("data-template")) { - case "pug": - a.querySelectorAll("pre").forEach((aa) => { - aa.innerHTML = `${aa.innerHTML}`; - }) - break; - case "md": - a.querySelectorAll("code").forEach((aa) => { - aa.classList.add("language-html"); - }) - break; - } + const observer = new IntersectionObserver(articles => { + articles.forEach(article => { + let a = article.target; - a.querySelectorAll("code").forEach((c)=> { - c.classList.add("line-numbers"); - c.innerHTML = c.innerHTML.replace(/ { + if (ajx.readyState == 4) { - a.querySelectorAll("code").forEach((c)=> { - c.onclick = (e) => { - oneClickSelect(e); + observer.unobserve(article.target); + switch (ajx.status) { + case 200: + a.innerHTML = a.innerHTML + ajx.responseText; + + switch (a.getAttribute("data-template")) { + case "pug": + a.querySelectorAll("pre").forEach((aa) => { + aa.innerHTML = `${aa.innerHTML}`; + }) + break; + case "md": + a.querySelectorAll("code").forEach((aa) => { + aa.classList.add("language-html"); + }) + break; + } + + a.querySelectorAll("code").forEach((c)=> { + c.classList.add("line-numbers"); + c.innerHTML = c.innerHTML.replace(/ { + c.onclick = (e) => { + oneClickSelect(e); + } + }) + + + module.exports.colour.positionTooltip(); + window.onresize = () => { + module.exports.colour.positionTooltip(); + } + + a.querySelectorAll("name > span, color-pill > span").forEach((pill) => { + pill.onclick = (e) => { + e.preventDefault(); + let w = ""; + if (e.metaKey || e.ctrlKey || e.keyCode == 91 || e.keyCode == 224) { + w = "var"; + } else if (e.altKey) { + w = "token" + } else if (e.shiftKey) { + w = "rgb"; + } else { + w = "hex"; + } + module.exports.colour.copy(w, pill); + } + }) + break; + + case 404: + + if (typeof args.notFound == "function") args.notFound(a, path); + break; + + default: + console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") }); } - }) + if (typeof args.done == "function") args.done(a); - module.exports.colour.positionTooltip(); - window.onresize = () => { - module.exports.colour.positionTooltip(); } + }; + ajx.open("GET", path, ASYNC); + ajx.send(); - a.querySelectorAll("name > span, color-pill > span").forEach((pill) => { - pill.onclick = (e) => { - e.preventDefault(); - let w = ""; - if (e.metaKey || e.ctrlKey || e.keyCode == 91 || e.keyCode == 224) { - w = "var"; - } else if (e.altKey) { - w = "token" - } else if (e.shiftKey) { - w = "rgb"; - } else { - w = "hex"; - } - module.exports.colour.copy(w, pill); - } - }) - break; - - case 404: - - if (typeof args.notFound == "function") args.notFound(a, path); - break; - - default: - console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") }); } + }) + }, { threshold: 0, rootMargin: (document.body.clientHeight / 2) + "px" }) - if (typeof args.done == "function") args.done(a); + observer.observe(a); - } - }; - ajx.open("GET", path, ASYNC); - ajx.send(); } }) - if (typeof args.afterArticleLoad == "function") args.afterArticleLoad(a); + if (typeof args.afterArticleLoad == "function") args.afterArticleLoad(); } }; @@ -3354,12 +3368,26 @@ _core_core_js__WEBPACK_IMPORTED_MODULE_0__.init({ + // deprecated switch handler -const flipDeprecated = (e, s = e.currentTarget) => { - _core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/"); - document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => { - a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated") - }); +const flipInfoSwitch = (e, s = e.currentTarget) => { + + switch(s.getAttribute("id")) { + + case "deprecated" : + _core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/"); + document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => { + a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated"); + }); + break; + + case "breakpoints" : + console.log("here") + _core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.set("show-breakpoints", s.getAttribute("aria-checked"), 30, "/"); + document.querySelector("html").classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-breakpoints"); + break; + } + } // create a pure JS mouse click event @@ -3370,15 +3398,24 @@ const click = new MouseEvent('click', { }); // get the switch, initialize it and add the handler +let switches = document.querySelector(".info-switches"); +_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__.init(switches); + let deprecated = document.querySelector("#deprecated"); -_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__.init(deprecated.parentNode) -deprecated.onclick = flipDeprecated; -deprecated.keypress = flipDeprecated; +let breakpoints = document.querySelector("#breakpoints"); + +deprecated.onclick = flipInfoSwitch; +deprecated.keypress = flipInfoSwitch; +breakpoints.onclick = flipInfoSwitch; +breakpoints.keypress = flipInfoSwitch; // check a cookie to get the switch's state if (_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.get("show-deprecated") == "true") { deprecated.dispatchEvent(click); } +if (_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.get("show-breakpoints") == "true") { + breakpoints.dispatchEvent(click); +} // just for fun... We'll show deprecated if they match the path // document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated"); diff --git a/public/assets/scaffolding.css b/public/assets/scaffolding.css index 23f2092..c01fdd8 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}}#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.deprecated-switch{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;text-align:right}body .container p.deprecated-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 p.deprecated-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 p.deprecated-switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.deprecated-switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}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-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/src/js/scaffolding.js b/src/js/scaffolding.js index d6a43d7..e903c6a 100644 --- a/src/js/scaffolding.js +++ b/src/js/scaffolding.js @@ -26,12 +26,26 @@ core.init({ + // deprecated switch handler -const flipDeprecated = (e, s = e.currentTarget) => { - core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/"); - document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => { - a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated") - }); +const flipInfoSwitch = (e, s = e.currentTarget) => { + + switch(s.getAttribute("id")) { + + case "deprecated" : + core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/"); + document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => { + a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated"); + }); + break; + + case "breakpoints" : + console.log("here") + core.cookie.set("show-breakpoints", s.getAttribute("aria-checked"), 30, "/"); + document.querySelector("html").classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-breakpoints"); + break; + } + } // create a pure JS mouse click event @@ -42,15 +56,24 @@ const click = new MouseEvent('click', { }); // get the switch, initialize it and add the handler +let switches = document.querySelector(".info-switches"); +swtch.init(switches); + let deprecated = document.querySelector("#deprecated"); -swtch.init(deprecated.parentNode) -deprecated.onclick = flipDeprecated; -deprecated.keypress = flipDeprecated; +let breakpoints = document.querySelector("#breakpoints"); + +deprecated.onclick = flipInfoSwitch; +deprecated.keypress = flipInfoSwitch; +breakpoints.onclick = flipInfoSwitch; +breakpoints.keypress = flipInfoSwitch; // check a cookie to get the switch's state if (core.cookie.get("show-deprecated") == "true") { deprecated.dispatchEvent(click); } +if (core.cookie.get("show-breakpoints") == "true") { + breakpoints.dispatchEvent(click); +} // just for fun... We'll show deprecated if they match the path // document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated"); diff --git a/src/scss/scaffolding.scss b/src/scss/scaffolding.scss index f1cc867..6e05670 100644 --- a/src/scss/scaffolding.scss +++ b/src/scss/scaffolding.scss @@ -35,6 +35,9 @@ html { @include break(-md) { font-size: calc($font-size + 2pt); } + &.show-breakpoints { + @include breakpoint-debug; + } } @include core-colour-samples; @@ -87,11 +90,18 @@ body { } - p.deprecated-switch { + p.info-switches { + align-items: center; + display: grid; + gap: .25rem; grid-column: 2 / 4; grid-row: 3; + grid-template-columns: auto repeat(2, max-content); text-align: right; @include switch; + label { + text-align: left;; + } } main {