diff --git a/docs/mini.css b/docs/mini.css deleted file mode 100644 index 1fcd44898..000000000 --- a/docs/mini.css +++ /dev/null @@ -1 +0,0 @@ -:root{--f-col:#111;--f-col2:#444;--b-col:#f8f8f8;--b-col2:#f0f0f0;--blq-col:#f57c00;--pre-col:#1565c0;--br-col:#aaa;--br-col2:#ddd;--h-ratio:1.19;--u-m:.5rem;--u-p:.5rem;--u-br-r:.125rem;--a-l-col:#0277bd;--a-v-col:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--f-col);background:var(--b-col)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--u-m)) var(--u-m);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--f-col2);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio) * var(--h-ratio) * var(--h-ratio))}h2{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio) * var(--h-ratio))}h3{font-size:calc(1rem * var(--h-ratio) * var(--h-ratio))}h4{font-size:calc(1rem * var(--h-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--h-ratio))}p{margin:var(--u-m)}ol,ul{margin:var(--u-m);padding-left:calc(2 * var(--u-m))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--u-m);height:.0625rem;background:linear-gradient(to right, transparent, var(--br-col) 20%, var(--br-col) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--f-col2);margin:var(--u-m);padding:calc(3 * var(--u-p));border:.0625rem solid var(--br-col2);border-left:.375rem solid var(--blq-col);border-radius:0 var(--u-br-r) var(--u-br-r) 0}blockquote:before{position:absolute;top:calc(0rem - var(--u-p));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blq-col)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--b-col2);border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}kbd{background:var(--f-col);color:var(--b-col);border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}pre{overflow:auto;background:var(--b-col2);padding:calc(1.5 * var(--u-p));margin:var(--u-m);border:.0625rem solid var(--br-col2);border-left:.25rem solid var(--pre-col);border-radius:0 var(--u-br-r) var(--u-br-r) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--u-m)}figcaption{color:var(--f-col2)}a{text-decoration:none}a:link{color:var(--a-l-col)}a:visited{color:var(--a-v-col)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--u-p))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-sm{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1{max-width:8.33333%;flex-basis:8.33333%}.col-sm-o-0{margin-left:0}.col-sm-2{max-width:16.66667%;flex-basis:16.66667%}.col-sm-o-1{margin-left:8.33333%}.col-sm-3{max-width:25%;flex-basis:25%}.col-sm-o-2{margin-left:16.66667%}.col-sm-4{max-width:33.33333%;flex-basis:33.33333%}.col-sm-o-3{margin-left:25%}.col-sm-5{max-width:41.66667%;flex-basis:41.66667%}.col-sm-o-4{margin-left:33.33333%}.col-sm-6{max-width:50%;flex-basis:50%}.col-sm-o-5{margin-left:41.66667%}.col-sm-7{max-width:58.33333%;flex-basis:58.33333%}.col-sm-o-6{margin-left:50%}.col-sm-8{max-width:66.66667%;flex-basis:66.66667%}.col-sm-o-7{margin-left:58.33333%}.col-sm-9{max-width:75%;flex-basis:75%}.col-sm-o-8{margin-left:66.66667%}.col-sm-10{max-width:83.33333%;flex-basis:83.33333%}.col-sm-o-9{margin-left:75%}.col-sm-11{max-width:91.66667%;flex-basis:91.66667%}.col-sm-o-10{margin-left:83.33333%}.col-sm-12{max-width:100%;flex-basis:100%}.col-sm-o-11{margin-left:91.66667%}.col-sm-n{order:initial}.col-sm-f{order:-999}.col-sm-l{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-md{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1{max-width:8.33333%;flex-basis:8.33333%}.col-md-o-0{margin-left:0}.col-md-2{max-width:16.66667%;flex-basis:16.66667%}.col-md-o-1{margin-left:8.33333%}.col-md-3{max-width:25%;flex-basis:25%}.col-md-o-2{margin-left:16.66667%}.col-md-4{max-width:33.33333%;flex-basis:33.33333%}.col-md-o-3{margin-left:25%}.col-md-5{max-width:41.66667%;flex-basis:41.66667%}.col-md-o-4{margin-left:33.33333%}.col-md-6{max-width:50%;flex-basis:50%}.col-md-o-5{margin-left:41.66667%}.col-md-7{max-width:58.33333%;flex-basis:58.33333%}.col-md-o-6{margin-left:50%}.col-md-8{max-width:66.66667%;flex-basis:66.66667%}.col-md-o-7{margin-left:58.33333%}.col-md-9{max-width:75%;flex-basis:75%}.col-md-o-8{margin-left:66.66667%}.col-md-10{max-width:83.33333%;flex-basis:83.33333%}.col-md-o-9{margin-left:75%}.col-md-11{max-width:91.66667%;flex-basis:91.66667%}.col-md-o-10{margin-left:83.33333%}.col-md-12{max-width:100%;flex-basis:100%}.col-md-o-11{margin-left:91.66667%}.col-md-n{order:initial}.col-md-f{order:-999}.col-md-l{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-o-']{flex:0 0 auto;padding:0 calc(var(--u-p) / 2)}.col-lg{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1{max-width:8.33333%;flex-basis:8.33333%}.col-lg-o-0{margin-left:0}.col-lg-2{max-width:16.66667%;flex-basis:16.66667%}.col-lg-o-1{margin-left:8.33333%}.col-lg-3{max-width:25%;flex-basis:25%}.col-lg-o-2{margin-left:16.66667%}.col-lg-4{max-width:33.33333%;flex-basis:33.33333%}.col-lg-o-3{margin-left:25%}.col-lg-5{max-width:41.66667%;flex-basis:41.66667%}.col-lg-o-4{margin-left:33.33333%}.col-lg-6{max-width:50%;flex-basis:50%}.col-lg-o-5{margin-left:41.66667%}.col-lg-7{max-width:58.33333%;flex-basis:58.33333%}.col-lg-o-6{margin-left:50%}.col-lg-8{max-width:66.66667%;flex-basis:66.66667%}.col-lg-o-7{margin-left:58.33333%}.col-lg-9{max-width:75%;flex-basis:75%}.col-lg-o-8{margin-left:66.66667%}.col-lg-10{max-width:83.33333%;flex-basis:83.33333%}.col-lg-o-9{margin-left:75%}.col-lg-11{max-width:91.66667%;flex-basis:91.66667%}.col-lg-o-10{margin-left:83.33333%}.col-lg-12{max-width:100%;flex-basis:100%}.col-lg-o-11{margin-left:91.66667%}.col-lg-n{order:initial}.col-lg-f{order:-999}.col-lg-l{order:999}}:root{--cd-b-col:#f8f8f8;--cd-f-col:#111;--cd-br-col:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--cd-b-col);color:var(--cd-f-col);border:.0625rem solid var(--cd-br-col);border-radius:var(--u-br-r);margin:var(--u-m);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--cd-b-col);color:var(--cd-f-col);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--cd-br-col);padding:var(--u-p);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}.card.fluid{max-width:100%;width:auto}.card>.section.double-padded{padding:calc(1.5 * var(--u-p))}.card{box-shadow:0 1.25rem 2.5rem -0.625rem rgba(0,32,64,0.1)}.card>h3.section.double-padded{padding:calc(3 * var(--u-p))}.card>.section.double-padded>p{margin:var(--u-m) calc(var(--u-m) / 2)}.card+.card{margin-top:calc(5 * var(--u-m))}:root{--frm-b-col:#f0f0f0;--frm-f-col:#111;--frm-br-col:#ddd;--in-b-col:#f8f8f8;--in-f-col:#111;--in-br-col:#ddd;--in-fc-col:#0288d1;--in-inv-col:#d32f2f;--btn-b-col:#e2e2e2;--btn-h-b-col:#dcdcdc;--btn-f-col:#212121;--btn-br-col:rgba(0,0,0,0);--btn-h-br-col:rgba(0,0,0,0);--btn-grp-br-col:rgba(124,124,124,0.54)}form{background:var(--frm-b-col);color:var(--frm-f-col);border:.0625rem solid var(--frm-br-col);border-radius:var(--u-br-r);margin:var(--u-m);padding:calc(2 * var(--u-p)) var(--u-p)}fieldset{border:.0625rem solid var(--frm-br-col);border-radius:var(--u-br-r);margin:calc(var(--u-m) / 4);padding:var(--u-p)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--u-p) / 2)}label{padding:calc(var(--u-p) / 2) var(--u-p)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--in-b-col);color:var(--in-f-col);border:.0625rem solid var(--in-br-col);border-radius:var(--u-br-r);margin:calc(var(--u-m) / 2);padding:var(--u-p) calc(1.5 * var(--u-p))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--in-fc-col);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--in-inv-col);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--b-col2)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--u-p) / 2);width:calc(1rem + var(--u-p) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--u-p) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--u-p) / 2);top:calc(0rem - var(--u-p));left:calc(var(--u-p) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--u-p) / 2);left:calc(.0625rem + var(--u-p) / 2);background:var(--in-f-col);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--in-f-col)}::-ms-placeholder{color:var(--in-f-col);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--btn-b-col);color:var(--btn-f-col);border:.0625rem solid var(--btn-br-col);border-radius:var(--u-br-r);padding:var(--u-p) calc(1.5 * var(--u-p));margin:var(--u-m);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--btn-h-b-col);border-color:var(--btn-h-br-col)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--btn-grp-br-col);border-radius:var(--u-br-r);margin:var(--u-m)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--btn-grp-br-col)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--btn-grp-br-col)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--btn-b-col:#1976d2;--btn-f-col:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--btn-h-b-col:#1565c0}:root{--hd-b-col:#f8f8f8;--hd-hv-b-col:#f0f0f0;--hd-f-col:#444;--hd-br-col:#ddd;--nv-b-col:#f8f8f8;--nv-hv-b-col:#f0f0f0;--nv-f-col:#444;--nv-br-col:#ddd;--nv-ln-col:#0277bd;--ft-f-col:#444;--ft-b-col:#f8f8f8;--ft-br-col:#ddd;--ft-ln-col:#0277bd;--dr-b-col:#f8f8f8;--dr-hv-b-col:#f0f0f0;--dr-br-col:#ddd;--dr-cl-col:#444}header{height:3.1875rem;background:var(--hd-b-col);color:var(--hd-f-col);border-bottom:.0625rem solid var(--hd-br-col);padding:calc(var(--u-p) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--hd-f-col);font-size:1.75rem;padding:var(--u-p) calc(2 * var(--u-p));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--u-p) / 4);height:calc(3.1875rem + var(--u-p) / 2);background:var(--hd-b-col);line-height:calc(3.1875rem - var(--u-p) * 1.5);text-align:center;color:var(--hd-f-col);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--hd-hv-b-col)}nav{background:var(--nv-b-col);color:var(--nv-f-col);border:.0625rem solid var(--nv-br-col);border-radius:var(--u-br-r);margin:var(--u-m)}nav *{padding:var(--u-p) calc(1.5 * var(--u-p))}nav a,nav a:visited{display:block;color:var(--nv-ln-col);border-radius:var(--u-br-r);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nv-hv-b-col)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--u-p))}nav .sublink-1:before{position:absolute;left:calc(var(--u-p) - 1 * var(--u-p));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nv-br-col);border-left:0}footer{background:var(--ft-b-col);color:var(--ft-f-col);border-top:.0625rem solid var(--ft-br-col);padding:calc(2 * var(--u-p)) var(--u-p);font-size:.875rem}footer a,footer a:visited{color:var(--ft-ln-col)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--dr-b-col);border:.0625rem solid var(--dr-br-col);border-radius:0;margin:0;z-index:1110;left:-320px;transition:left 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--u-m);right:var(--u-m);z-index:1111;width:2rem;height:2rem;border-radius:var(--u-br-r);padding:var(--u-p);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--dr-cl-col);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--dr-hv-b-col)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{left:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--mrk-b-col:#424242;--mrk-f-col:#fafafa}mark{background:var(--mrk-b-col);color:var(--mrk-f-col);font-size:.5em;line-height:1em;border-radius:var(--u-br-r);padding:calc(var(--u-p) / 4) calc(var(--u-p) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--u-p) / 2) var(--u-p)}:root{--tst-b-col:#212121;--tst-f-col:#fafafa}.toast{position:fixed;bottom:calc(var(--u-m) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--tst-f-col);background:var(--tst-b-col);border-radius:calc(var(--u-br-r) * 16);padding:var(--u-p) calc(var(--u-p) * 3)}div,main,nav{-webkit-overflow-scrolling:touch}.toast{bottom:calc(var(--u-m) / 2);opacity:1;transition:opacity 0.3s ease-in-out}mark{position:relative;top:-0.25rem;left:0.25rem}mark.secondary{--mrk-b-col:#d32f2f}mark.tertiary{--mrk-b-col:#308732}mark.tag{padding:calc(var(--u-p)/2) var(--u-p);border-radius:1em}code,pre,kbd,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Menlo, Consolas, monospace !important}pre{border:0.0625rem solid var(--br-col2);border-radius:var(--u-br-r)}.search{font-size:0.875rem}header h1.logo{margin-top:-0.8rem;text-align:center;position:relative;top:0;transition:top 0.3s;color:#111}h1 a,h1 a:link,h1 a:visited{text-decoration:none;color:#111}h1 a:hover,h1 a:focus,h1 a:link:hover,h1 a:link:focus,h1 a:visited:hover,h1 a:visited:focus{text-decoration:none;color:#111}header #title{position:relative;top:-1rem}@media screen and (max-width: 768px){header #title{display:none}}header{background:linear-gradient(135deg, #ffae27 0%, #de496d 100%)}header h1 small{display:block;font-size:0.875rem;color:#888;margin-top:0.75rem}label#menu-toggle{position:absolute;left:0rem;top:0rem;width:3.4375rem}main{padding:0}:root{--clps-lbl-b-col:#e8e8e8;--clps-lbl-f-col:#212121;--clps-lbl-h-b-col:#f0f0f0;--clps-sel-lbl-b-col:#ececec;--clps-br-col:#ddd;--clps-cnt-b-col:#fafafa;--clps-sel-lbl-br-col:#0277bd}label.collapse{width:100%;display:inline-block;cursor:pointer;box-sizing:border-box;transition:background 0.3s;color:var(--clps-lbl-f-col);background:var(--clps-lbl-b-col);border:.0625rem solid var(--clps-br-col);padding:calc(1.5 * var(--u-p));border-radius:var(--u-br-r)}label.collapse:hover,label.collapse:focus{background:var(--clps-lbl-h-b-col)}label.collapse+pre{box-sizing:border-box;height:0;max-height:1px;overflow:auto;margin:0;border:0;padding:0;transition:max-height 0.3s}label.collapse.toggled{background:var(--clps-sel-lbl-b-col);border-bottom-color:var(--clps-sel-lbl-br-col);border-bottom-left-radius:0;border-bottom-right-radius:0}label.collapse.toggled+pre{border-top-left-radius:0;border-top-right-radius:0;position:relative;width:100%;height:auto;border:.0625rem solid var(--clps-br-col);border-top:0;padding:calc(2 * var(--u-p));max-height:400px}button.primary.clipboard-copy{width:100%;margin-left:0}button.primary.clipboard-copy>img{vertical-align:bottom}code[class*="language-"],pre[class*="language-"]{color:#222;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--u-p));overflow:auto;margin:var(--u-m) 0}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:#b3d4fc}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#7a8490}.token.punctuation{color:#666}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:#005cc5}.token.number,.token.class-name{color:#832ed2}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#067e36}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.atrule,.token.attr-value,.token.keyword{color:#d73a49}.token.regex{color:#097cab}.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}button.scroll-to-top{border-radius:100%;font-size:1.5rem;line-height:1;box-sizing:border-box;width:2.75rem;height:2.75rem;position:fixed;bottom:1rem;right:2rem;background:var(--b-col);box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.125),0 0.125rem 0.125rem -0.125rem rgba(0,0,0,0.25)}button.scroll-to-top:hover,button.scroll-to-top:focus{background:var(--b-col2)}.card#disclaimer{position:fixed;bottom:0;z-index:1100;max-width:100vw;width:100vw;left:0;text-align:center;font-size:1.5rem;margin:0}@media screen and (min-width: 768px){.card#disclaimer{width:60vw;left:20vw;bottom:1rem}}@media screen and (min-width: 1280px){.card#disclaimer{width:40vw;left:30vw;bottom:1.5rem}}button#disclaimer-close{position:absolute;top:-0.5rem;right:-0.5rem;font-size:0.85rem;background:0}#splash{height:auto;padding-bottom:1.5rem;background:linear-gradient(135deg, #ffae27 0%, #de496d 100%)}#splash #logo{margin-top:0;margin-left:-0.5rem;padding-top:2rem;text-align:center;font-size:2.25rem;line-height:2}#splash #logo img{vertical-align:top;height:4.5rem}#splash #tagline{text-align:center;padding:0.5rem 25%}#splash #doc-link{text-align:center;margin-left:-0.5rem}#splash #doc-link>a{background:transparent;border:0.0625rem solid rgba(17,17,17,0.95);transition:all 0.3s}#splash #doc-link>a:hover,#splash #doc-link>a:focus{background:rgba(17,17,17,0.95);color:#e86957}@media screen and (max-width: 767px){#splash #logo{font-size:1.75rem}#splash #logo img{height:3.5rem}#splash #tagline{padding:0.25rem 17.5%;font-size:0.875rem}#splash #doc-link{font-size:0.875rem}}@media screen and (max-width: 383px){#splash #logo{font-size:1.5rem}#splash #logo img{height:3rem}#splash #tagline{padding:0.125rem 5%}}@media screen and (max-width: 479px){#splash #tagline #tagline-lg{display:none}}@media screen and (min-width: 768px){.col-md-offset-1{margin-left:8.33333%}}@media screen and (min-width: 1280px){.col-lg-offset-2{margin-left:16.66667%}}h2.index-section{border-left:0.3125rem solid #de4a6d;padding-left:0.625rem;margin-top:2rem}#license-icon{text-align:center}@media screen and (min-width: 768px){#license-icon{position:relative;top:calc(50% - 40px)}}#license-icon>svg{border:0.03125rem solid #444;border-radius:100%;padding:0.5rem;fill:#444}#license{vertical-align:middle}.no-padding{padding:0}#in-numbers{background:#111;padding-top:0.75rem;padding-bottom:0.75rem;color:#fff}#in-numbers svg{fill:#fff}@media screen and (min-width: 768px){#in-numbers svg{position:relative;top:20px;left:-34px;width:32px;height:32px}}#in-numbers p{overflow-wrap:break-word;margin-top:0;font-size:0.625rem;margin-bottom:0}@media screen and (min-width: 768px){#in-numbers p{position:relative;top:-24px;left:22px;font-size:0.75rem}}#snippet-count,#contrib-count,#commit-count,#star-count{font-size:1rem}@media screen and (min-width: 768px){#snippet-count,#contrib-count,#commit-count,#star-count{font-size:1.25rem}}ul#links{list-style:none;padding-left:0}ul#links li+li{padding-top:0.625rem}.pick:not(.selected){display:none}.card.pick{transition:all 0.6s;left:0}.card.pick+.card.pick{margin-top:0.5rem}.pick.selected{overflow:visible}.pick.selected button.next{position:absolute;top:50%;right:-1rem}.pick.selected button.next>svg{margin-right:-0.0625rem}#pick-slider{position:relative}button.previous{left:-1%}button.previous>svg{margin-left:-0.125rem}button.next{right:-1%}button.next>svg{margin-left:0.0625rem}button.previous,button.next{position:absolute;top:50%;border-radius:100%;background:#f8f8f8;border:0.03125rem solid #ddd;width:1.5rem;height:1.5rem;padding:0;margin:0;transition:all 0.3s;z-index:2000}button.previous>svg,button.next>svg{fill:#888;transition:all 0.3s}button.previous:hover,button.previous:focus,button.next:hover,button.next:focus{border-color:#aaa}button.previous:hover>svg,button.previous:focus>svg,button.next:hover>svg,button.next:focus>svg{fill:#444}.card.contributor{height:calc(100% - 1rem);justify-content:left}.card.contributor>.section.media{height:auto}.card.contributor>.section.button{font-size:0.75rem;font-weight:700;text-align:center;transition:color 0.3s}.card.contributor>.section.button:hover,.card.contributor>.section.button:focus{color:var(--a-l-col);background:#f8f8f8}.card.fluid.contribution-guideline{overflow:visible;margin-top:3rem;padding-bottom:0.25rem}.card.fluid.contribution-guideline h3{padding-top:0.5rem;text-align:center}.contribution-guideline+.contribution-guideline:before,.contribution-guideline+.contribution-guideline:after{content:"";position:relative;top:-2.75rem;width:0.375rem;height:0.375rem;background:#ddd;border:0.03125rem solid #d0d0d0;border-radius:100%;left:calc(50% - 0.1875rem);box-shadow:inset -0.03125rem -0.03125rem 0.03125rem rgba(0,0,0,0.05)}.contribution-guideline+.contribution-guideline:after{position:absolute;top:-1.875rem}.contribution-number{position:absolute;top:-1.125rem;left:calc(50% - 1.125rem);font-size:1.5rem;background:linear-gradient(135deg, #ffae27 0%, #de496d 100%);border:0.03125 solid #ddd;width:2.25rem;text-align:center;height:2.25rem;border-radius:100%;font-weight:700;color:#fff}body{overflow-x:hidden}label.button.drawer-toggle{background:transparent;color:#111}label.button.drawer-toggle:hover,label.button.drawer-toggle:focus{background:transparent}nav .input-group.vertical{position:sticky;top:0;z-index:10;background:#f8f8f8;border-bottom:0.0625rem solid var(--nv-br-col)} diff --git a/docs/mini/_contextual.scss b/docs/mini/_contextual.scss deleted file mode 100644 index 1dc2e66c9..000000000 --- a/docs/mini/_contextual.scss +++ /dev/null @@ -1,354 +0,0 @@ -/* - Definitions for contextual background elements, toasts and tooltips. -*/ -$mark-back-color: #0277bd !default; // Background color for -$mark-fore-color: #fafafa !default; // Text color for -$mark-font-size: 0.95em !default; // Font size for -$mark-line-height: 1em !default; // Line height for -$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block -$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean) -$toast-name: 'toast' !default; // Class name for toast component -$toast-back-color: #424242 !default; // Background color for toast component -$toast-fore-color: #fafafa !default; // Text color for toast component -$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean) -$tooltip-name: 'tooltip' !default; // Class name for tooltip component -$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name -$tooltip-back-color: #212121 !default; // Background color for tooltip component -$tooltip-fore-color: #fafafa !default; // Text color for tooltip component -$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean) -$modal-name: 'modal' !default; // Class name for modal dialog component -$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component -$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button -$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component -$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus) -$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component -$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean) -$collapse-name: 'collapse' !default; // Class name for collapse component -$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component -$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component -$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component -$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component -$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover) -$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component -$collapse-border-color: #ddd !default; // Border color for collapse component -$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels -$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes -// CSS variable name definitions [exercise caution if modifying these] -$mark-back-color-var: '--mark-back-color' !default; -$mark-fore-color-var: '--mark-fore-color' !default; -$toast-back-color-var: '--toast-back-color' !default; -$toast-fore-color-var: '--toast-fore-color' !default; -$tooltip-back-color-var: '--tooltip-back-color' !default; -$tooltip-fore-color-var: '--tooltip-fore-color' !default; -$modal-overlay-color-var: '--modal-overlay-color' !default; -$modal-close-color-var: '--modal-close-color' !default; -$modal-close-hover-back-color-var: '--modal-close-hover-color' !default; -$collapse-label-back-color-var: '--collapse-label-back-color' !default; -$collapse-label-fore-color-var: '--collapse-label-fore-color' !default; -$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default; -$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default; -$collapse-border-color-var: '--collapse-border-color' !default; -$collapse-content-back-color-var: '--collapse-content-back-color' !default; -$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default; -// == Uncomment below code if this module is used on its own == -// -// $base-line-height: 1.5 !default; // Line height for most elements -// $universal-margin: 0.5rem !default; // Universal margin for the most elements -// $universal-padding: 0.5rem !default; // Universal padding for the most elements -// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements -// $universal-box-shadow: none !default; // Universal box-shadow for most elements -// $universal-margin-var: '--universal-margin' !default; -// $universal-padding-var: '--universal-padding' !default; -// $universal-border-radius-var: '--universal-border-radius' !default; -// $universal-box-shadow-var: '--universal-box-shadow' !default; -// :root { -// #{$universal-margin-var}: $universal-margin; -// #{$universal-padding-var}: $universal-padding; -// #{$universal-border-radius-var}: $universal-border-radius; -// @if $universal-box-shadow != none { -// #{$universal-box-shadow-var}: $universal-box-shadow; -// } -// } -// -// ============================================================ -// Check the `_contextual_mixins.scss` file to find this module's mixins. -@import '_contextual_mixins'; -/* Contextual module CSS variable definitions */ -:root { - #{$mark-back-color-var}: $mark-back-color; - #{$mark-fore-color-var}: $mark-fore-color; -} -// Default styling for mark. Use mixins for alternate styles. -mark { - background: var(#{$mark-back-color-var}); - color: var(#{$mark-fore-color-var}); - font-size: $mark-font-size; - line-height: $mark-line-height; - border-radius: var(#{$universal-border-radius-var}); - padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2); - @if $universal-box-shadow != none { - box-shadow: var(#{$universal-box-shadow-var}); - } - &.#{$mark-inline-block-name} { - display: inline-block; - // This is hardcoded, as we want inline-block elements to be styled as normal pieces of text, instead of look small and weird. - font-size: 1em; - // Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons. - line-height: $base-line-height; - padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var}); - } -} -// Styling for toasts. - No border styling, I think it's unnecessary anyways. -@if $_include-toast { - :root { - #{$toast-back-color-var}: $toast-back-color; - #{$toast-fore-color-var}: $toast-fore-color; - } - .#{$toast-name} { - position: fixed; - bottom: calc(var(#{$universal-margin-var}) * 3); - left: 50%; - transform: translate(-50%, -50%); - z-index: 1111; - color: var(#{$toast-fore-color-var}); - background: var(#{$toast-back-color-var}); - border-radius: calc(var(#{$universal-border-radius-var}) * 16); - padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3); - @if $universal-box-shadow != none { - box-shadow: var(#{$universal-box-shadow-var}); - } - } -} -// Styling for tooltips. -@if $_include-tooltip { - :root { - #{$tooltip-back-color-var}: $tooltip-back-color; - #{$tooltip-fore-color-var}: $tooltip-fore-color; - } - .#{$tooltip-name} { - position: relative; - display: inline-block; - &:before, &:after { - position: absolute; - opacity: 0; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - transition: all 0.3s; - // Remember to keep this index a lower value than the one used for stickies. - z-index: 1010; // Deals with certain problems when combined with cards and tables. - left: 50%; - } - &:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling - bottom: 75%; - } - &.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling - top: 75%; - } - &:hover, &:focus { - &:before, &:after { - opacity: 1; - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); - } - } - &:before { // This is the little tooltip triangle - content: ''; - background: transparent; - border: var(#{$universal-margin-var}) solid transparent; - // Newer browsers will center the tail properly - left: calc(50% - var(#{$universal-margin-var})); - } - &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling - border-top-color: $tooltip-back-color; - } - &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling - border-bottom-color: $tooltip-back-color; - } - &:after { // This is the actual tooltip's text block - content: attr(aria-label); - color: var(#{$tooltip-fore-color-var}); - background: var(#{$tooltip-back-color-var}); - border-radius: var(#{$universal-border-radius-var}); - padding: var(#{$universal-padding-var}); - @if $universal-box-shadow != none { - box-shadow: var(#{$universal-box-shadow-var}); - } - white-space: nowrap; - transform: translateX(-50%); - } - &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling - margin-bottom: calc(2 * var(#{$universal-margin-var})); - } - &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling - margin-top: calc(2 * var(#{$universal-margin-var})); - } - } -} -// Styling for modal dialogs. -@if $_include-modal { - :root { - #{$modal-overlay-color-var}: $modal-overlay-color; - #{$modal-close-color-var}: $modal-close-color; - #{$modal-close-hover-back-color-var}: $modal-close-hover-back-color; - } - [type="checkbox"].#{$modal-name} { - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - & + div { - position: fixed; - top: 0; - left: 0; - display: none; - width: 100vw; - height: 100vh; - background: var(#{$modal-overlay-color-var}); - & .card { - margin: 0 auto; - max-height: 50vh; - overflow: auto; - & .#{$modal-close-name} { - position: absolute; - top: 0; - right: 0; - width: $modal-close-size; - height: $modal-close-size; - border-radius: var(#{$universal-border-radius-var}); - padding: var(#{$universal-padding-var}); - margin: 0; - cursor: pointer; - transition: background 0.3s; - &:before { - display: block; - content: '\00D7'; - color: var(#{$modal-close-color-var}); - position: relative; - font-family: sans-serif; - font-size: $modal-close-size; - line-height: 1; - text-align: center; - } - &:hover, &:focus { - background: var(#{$modal-close-hover-back-color-var}); - } - } - } - } - &:checked + div { - display: flex; - flex: 0 1 auto; - z-index: 1200; - & .card { - & .#{$modal-close-name} { - z-index: 1211; - } - } - } - } -} -// Styling for collapse. -@if $_include-collapse { - :root { - #{$collapse-label-back-color-var}: $collapse-label-back-color; - #{$collapse-label-fore-color-var}: $collapse-label-fore-color; - #{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color; - #{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color; - #{$collapse-border-color-var}: $collapse-border-color; - #{$collapse-content-back-color-var} : $collapse-content-back-color; - #{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color; - } - .#{$collapse-name} { - width: calc(100% - 2 * var(#{$universal-margin-var})); - opacity: 1; - display: flex; - flex-direction: column; - margin: var(#{$universal-margin-var}); - border-radius: var(#{$universal-border-radius-var}); - @if $universal-box-shadow != none { - box-shadow: var(#{$universal-box-shadow-var}); - } - & > [type="radio"], & > [type="checkbox"] { - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - } - & > label { - flex-grow: 1; - display: inline-block; - height: $collapse-label-height; - cursor: pointer; - transition: background 0.3s; - color: var(#{$collapse-label-fore-color-var}); - background: var(#{$collapse-label-back-color-var}); - border: $__1px solid var(#{$collapse-border-color-var}); - padding: calc(1.5 * var(#{$universal-padding-var})); - &:hover, &:focus { - background: var(#{$collapse-label-hover-back-color-var}); - } - + div { - flex-basis: auto; - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - transition: max-height 0.3s; - max-height: 1px; // for transition - } - } - > :checked + label { - background: var(#{$collapse-selected-label-back-color-var}); - // border: 0.0625rem solid #bdbdbd; // var it - border-bottom-color: var(#{$collapse-selected-label-border-color-var}); - & + div { - box-sizing: border-box; - position: relative; - width: 100%; - height: auto; - overflow: auto; - margin: 0; - background: var(#{$collapse-content-back-color-var}); - border: $__1px solid var(#{$collapse-border-color-var}); - border-top: 0; - padding: var(#{$universal-padding-var}); - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); - max-height: $collapse-content-max-height; - } - } - & > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles. - border-top: 0; - } - & > label:first-of-type { - border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; - } - & > label:last-of-type:not(:first-of-type) { - border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); - } - & > label:last-of-type:first-of-type { - border-radius: var(#{$universal-border-radius-var}); - } - & > :checked:last-of-type:not(:first-of-type) + label { - border-radius: 0; - } - & > :checked:last-of-type + label + div { - border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); - } - } -} diff --git a/docs/mini/_contextual_mixins.scss b/docs/mini/_contextual_mixins.scss deleted file mode 100644 index 8b004b9b5..000000000 --- a/docs/mini/_contextual_mixins.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Contextual module's mixin definitions are here. For the module itself -// check `_contextual.scss`. -// Mark color variant mixin: -// $mark-alt-name: The name of the class used for the variant. -// $mark-alt-back-color: Background color for variant. -// $mark-alt-fore-color: Text color for variant. -@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color, - $mark-alt-fore-color : $mark-fore-color) { - mark.#{$mark-alt-name} { - @if $mark-alt-back-color != $mark-back-color { - #{$mark-back-color-var}: $mark-alt-back-color; - } - @if $mark-alt-fore-color != $mark-fore-color{ - #{$mark-fore-color-var}: $mark-alt-fore-color; - } - } -} -// Mark size variant mixin: -// $mark-alt-name: The name of the class used for the variant. -// $mark-alt-padding: The padding of the variant. -// $mark-alt-border-radius: The border radius of the variant. -@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) { - mark.#{$mark-alt-name} { - padding: $mark-alt-padding; - border-radius: $mark-alt-border-radius; - } -} diff --git a/docs/mini/_core.scss b/docs/mini/_core.scss deleted file mode 100644 index ccbc37661..000000000 --- a/docs/mini/_core.scss +++ /dev/null @@ -1,304 +0,0 @@ -/* - Browsers resets and base typography. -*/ - -// TODO: Add fluid type and test thoroughly -$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only) -$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean) -$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px` -$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements -$base-line-height: 1.5 !default; // Line height for most elements -$base-font-size: 1rem !default; // Font sizing for all elements -$_body-margin: 0 !default; // [Hidden] Margin for body -$fore-color: #111 !default; // Text & foreground color -$secondary-fore-color: #444 !default; // Secondary text & foreground color -$back-color: #f8f8f8 !default; // Background color -$secondary-back-color: #f0f0f0 !default; // Secondary background color -$blockquote-color: #f57c00 !default; //
sidebar and quotation color -$pre-color: #1565c0 !default; // 
 sidebar color
-$border-color:            #aaa !default;        // Border color
-$secondary-border-color:  #ddd !default;        // Secondary border color
-$heading-line-height:     1.2 !default;         // Line height for headings
-$heading-ratio:           1.19 !default;        // Ratio for headings (strictly unitless)
-$subheading-font-size:    0.75em !default;      // Font sizing for  elements in headings
-$subheading-top-margin:   -0.25rem !default;    // Top margin of  elements in headings
-$universal-margin:        0.5rem !default;      // Universal margin for the most elements
-$universal-padding:       0.5rem !default;      // Universal padding for the most elements
-$universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
-$universal-box-shadow:    none !default;        // Universal box-shadow for most elements
-$small-font-size:         0.75em !default;      // Font sizing for  elements
-$heading-font-weight:     500 !default;         // Font weight for headings
-$bold-font-weight:        700 !default;         // Font weight for  and 
-$horizontal-rule-line-height:  1.25em !default; // 
 line height
-$blockquote-quotation-size:    3rem !default;   // Font size for the quotation of 

-$blockquote-cite-size:         0.75em !default; // Font size for the [cite] of 

-$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
-$code-font-size:           0.85em;              // Font size for , 
-$small-element-font-size:     0.75em !default;  // Font size for , , 
-$sup-top:                  -0.5em !default;     //  top
-$sub-bottom:               -0.25em !default;    //  bottom
-$a-link-color:             #0277bd !default;    // Color for :link
-$a-visited-color:          #01579b !default;    // Color for :visited
-// CSS variable name definitions [exercise caution if modifying these]
-$fore-color-var:                '--fore-color' !default;
-$secondary-fore-color-var:      '--secondary-fore-color' !default;
-$back-color-var:                '--back-color' !default;
-$secondary-back-color-var:      '--secondary-back-color' !default;
-$blockquote-color-var:          '--blockquote-color' !default;
-$pre-color-var:                 '--pre-color' !default;
-$border-color-var:              '--border-color' !default;
-$secondary-border-color-var:    '--secondary-border-color' !default;
-$heading-ratio-var:             '--heading-ratio' !default;
-$universal-margin-var:          '--universal-margin' !default;
-$universal-padding-var:         '--universal-padding' !default;
-$universal-border-radius-var:   '--universal-border-radius' !default;
-$universal-box-shadow-var:      '--universal-box-shadow' !default;
-$a-link-color-var:              '--a-link-color' !default;
-$a-visited-color-var:           '--a-visited-color' !default;
-/* Core module CSS variable definitions */
-:root {
-  #{$fore-color-var}: $fore-color;
-  #{$secondary-fore-color-var}: $secondary-fore-color;
-  #{$back-color-var}: $back-color;
-  #{$secondary-back-color-var}: $secondary-back-color;
-  #{$blockquote-color-var}: $blockquote-color;
-  #{$pre-color-var}: $pre-color;
-  #{$border-color-var}: $border-color;
-  #{$secondary-border-color-var}: $secondary-border-color;
-  #{$heading-ratio-var}: $heading-ratio;
-  #{$universal-margin-var}: $universal-margin;
-  #{$universal-padding-var}: $universal-padding;
-  #{$universal-border-radius-var}: $universal-border-radius;
-  #{$a-link-color-var} : $a-link-color;
-  #{$a-visited-color-var} : $a-visited-color;
-  @if $universal-box-shadow != none {
-    #{$universal-box-shadow-var}: $universal-box-shadow;
-  }
-}
-html {
-  font-size: $base-root-font-size;  // Set root's font sizing.
-}
-a, b, del, em, i, ins, q, span, strong, u {
-  font-size: 1em; // Fix for elements inside headings not displaying properly.
-}
-
-@if $_apply-defaults-to-all {
-  html, * {
-    font-family: #{$base-font-family};
-    line-height: $base-line-height;
-    // Prevent adjustments of font size after orientation changes in mobile.
-    -webkit-text-size-adjust: 100%;
-  }
-  * {
-    font-size: $base-font-size;
-  }
-}
-@else {
-  html {
-    font-family:  #{$base-font-family};
-    line-height: $base-line-height;
-    // Prevent adjustments of font size after orientation changes in mobile.
-    -webkit-text-size-adjust: 100%;
-  }
-}
-
-body {
-  margin: $_body-margin;
-  color: var(#{$fore-color-var});
-  background: var(#{$back-color-var});
-}
-
-// Correct display for Edge & Firefox.
-details {
-  display: block;
-}
-
-// Correct display in all browsers.
-summary {
-  display: list-item;
-}
-
-// Abbreviations
-abbr[title] {
-  border-bottom: none;           // Remove bottom border in Firefox 39-.
-  text-decoration: underline dotted;  // Opinionated style-fix for all browsers.
-}
-
-// Show overflow in Edge.
-input {
-  overflow: visible;
-}
-
-// Make images responsive by default.
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  line-height: $heading-line-height;
-  margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
-  font-weight: $heading-font-weight;
-  small {
-    color: var(#{$secondary-fore-color-var});
-    display: block;
-    @if $subheading-top-margin != 0 {
-      margin-top: $subheading-top-margin;
-    }
-    @if $subheading-font-size != $small-font-size {
-      font-size: $subheading-font-size;
-    }
-  }
-}
-
-h1 {
-  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
-}
-h2 {
-  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
-}
-h3 {
-  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
-}
-h4 {
-  font-size: calc(1rem * var(#{$heading-ratio-var}));
-}
-h5 {
-  font-size: 1rem;
-}
-h6 {
-  font-size: calc(1rem / var(#{$heading-ratio-var}));
-}
-
-p {
-  margin: var(#{$universal-margin-var});
-}
-
-ol, ul {
-  margin: var(#{$universal-margin-var});
-  padding-left: calc(2 * var(#{$universal-margin-var}));
-}
-
-b, strong {
-  font-weight: $bold-font-weight;
-}
-
-hr {
-  // Fixes and defaults for styling
-  box-sizing: content-box;
-  border: 0;
-  // Actual styling using variables
-  line-height: $horizontal-rule-line-height;
-  margin: var(#{$universal-margin-var});
-  height: $__1px;
-  background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
-}
-
-blockquote {  // Doesn't have a back color by default, can be added manually.
-  display: block;
-  position: relative;
-  font-style: italic;
-  color: var(#{$secondary-fore-color-var});
-  margin: var(#{$universal-margin-var});
-  padding: calc(3 * var(#{$universal-padding-var}));
-  border: $__1px solid var(#{$secondary-border-color-var});
-  border-left: 6*$__1px solid var(#{$blockquote-color-var});
-  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-  &:before {
-    position: absolute;
-    top: calc(0rem - var(#{$universal-padding-var}));
-    left: 0;
-    font-family: sans-serif;
-    font-size: $blockquote-quotation-size;
-    font-weight: 700;
-    content: "\201c";
-    color: var(#{$blockquote-color-var});
-  }
-  &[cite]:after{
-    font-style: normal;
-    font-size: $blockquote-cite-size;
-    font-weight: 700;
-    content: "\a—  " attr(cite);
-    white-space: pre;
-  }
-}
-
-code, kbd, pre, samp {
-  font-family: #{$code-font-family};     // Display fix should be applied manually!
-  font-size: $code-font-size;
-}
-
-code { // No border color by default and fore color is the default for text, can be altered manually.
-  background: var(#{$secondary-back-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
-  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-}
-
-kbd { // No border color by default, can be altered manually.
-  background: var(#{$fore-color-var});
-  color: var(#{$back-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
-  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-}
-
-pre { // Fore color is the default, can be altered manually.
-  overflow: auto; // Responsiveness
-  background: var(#{$secondary-back-color-var});
-  padding: calc(1.5 * var(#{$universal-padding-var}));
-  margin: var(#{$universal-margin-var});
-  border: $__1px solid var(#{$secondary-border-color-var});
-  border-left: 4*$__1px solid var(#{$pre-color-var});
-  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-}
-
-// Prevent elements from affecting the line height in all browsers.
-sup, sub, code, kbd {
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-small, sup, sub, figcaption {
-  font-size: $small-element-font-size;
-}
-
-sup {
-  top: $sup-top;
-}
-sub {
-  bottom: $sub-bottom;
-}
-
-figure {
-  margin: var(#{$universal-margin-var});
-}
-figcaption {
-    color: var(#{$secondary-fore-color-var});
-}
-
-a {
-  text-decoration: none;
-  &:link{
-    color: var(#{$a-link-color-var});
-  }
-  &:visited {
-    color: var(#{$a-visited-color-var});
-  }
-  &:hover, &:focus {
-    text-decoration: underline;
-  }
-}
diff --git a/docs/mini/_input_control.scss b/docs/mini/_input_control.scss
deleted file mode 100644
index 04635bac2..000000000
--- a/docs/mini/_input_control.scss
+++ /dev/null
@@ -1,317 +0,0 @@
-/*
-  Definitions for forms and input elements.
-*/
-// Different elements are styled based on the same set of rules.
-$input-group-name:           'input-group' !default;  // Class name for input groups.
-$_include-fluid-input-group: true !default;           // [Hidden] Should fluid input groups be included? (boolean)
-$input-group-fluid-name:     'fluid' !default;        // Class name for fluid input groups.
-$input-group-vertical-name:  'vertical' !default;     // Class name for vertical input groups.
-$input-group-mobile-breakpoint:   767px !default;     // Breakpoint for fluid input group mobile view.
-$button-class-name:           'button' !default;      // Class name for elements styled as buttons.
-$input-disabled-opacity:      0.75 !default;          // Opacity for input elements when disabled.
-$button-group-name:         'button-group' !default;  // Class name for button groups.
-$button-group-mobile-breakpoint: 767px !default;      // Mobile breakpoint for button groups.
-$form-back-color:             #f0f0f0 !default;       // Background color for forms.
-$form-fore-color:             #111 !default;          // Text color for forms.
-$form-border-color:           #ddd !default;          // Border color for forms.
-$input-back-color:            #f8f8f8 !default;       // Background color for input elements.
-$input-fore-color:            #111 !default;          // Text color for input elements.
-$input-border-color:          #ddd !default;          // Border color for input elements.
-$input-focus-color:           #0288d1 !default;       // Border color for focused input elements.
-$input-invalid-color:         #d32f2f !default;       // Border color for invalid input elements.
-$button-back-color:           #e2e2e2 !default;       // Background color for buttons.
-$button-hover-back-color:     #dcdcdc !default;       // Background color for buttons (hover).
-$button-fore-color:           #212121 !default;       // Text color for buttons.
-$button-border-color:         transparent !default;   // Border color for buttons.
-$button-hover-border-color:   transparent !default;   // Border color for buttons (hover).
-$button-group-border-color:  rgba(124,124,124, 0.54) !default;  // Border color for button groups.
-// CSS variable name definitions [exercise caution if modifying these]
-$form-back-color-var:         '--form-back-color' !default;
-$form-fore-color-var:         '--form-fore-color' !default;
-$form-border-color-var:       '--form-border-color' !default;
-$input-back-color-var:        '--input-back-color' !default;
-$input-fore-color-var:        '--input-fore-color' !default;
-$input-border-color-var:      '--input-border-color' !default;
-$input-focus-color-var:       '--input-focus-color' !default;
-$input-invalid-color-var:     '--input-invalid-color' !default;
-$button-back-color-var:       '--button-back-color' !default;
-$button-hover-back-color-var: '--button-hover-back-color' !default;
-$button-fore-color-var:       '--button-fore-color' !default;
-$button-border-color-var:       '--button-border-color' !default;
-$button-hover-border-color-var: '--button-hover-border-color' !default;
-$button-group-border-color-var: '--button-group-border-color' !default;
-// == Uncomment below code if this module is used on its own ==
-//
-// $base-font-size:          1rem !default;        // Font sizing for all elements
-// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
-// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
-// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
-// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
-// $universal-margin-var:          '--universal-margin' !default;
-// $universal-padding-var:         '--universal-padding' !default;
-// $universal-border-radius-var:   '--universal-border-radius' !default;
-// $universal-box-shadow-var:      '--universal-box-shadow' !default;
-// :root {
-//  #{$universal-margin-var}: $universal-margin;
-//  #{$universal-padding-var}: $universal-padding;
-//  #{$universal-border-radius-var}: $universal-border-radius;
-//  @if $universal-box-shadow != none {
-//   #{$universal-box-shadow-var}: $universal-box-shadow;
-//  }
-// }
-//
-// ============================================================
-// Check the `_input_control_mixins.scss` file to find this module's mixins.
-@import 'input_control_mixins';
-/* Input_control module CSS variable definitions */
-:root {
-  #{$form-back-color-var}: $form-back-color;
-  #{$form-fore-color-var}: $form-fore-color;
-  #{$form-border-color-var}: $form-border-color;
-  #{$input-back-color-var}: $input-back-color;
-  #{$input-fore-color-var}: $input-fore-color;
-  #{$input-border-color-var}: $input-border-color;
-  #{$input-focus-color-var}: $input-focus-color;
-  #{$input-invalid-color-var}: $input-invalid-color;
-  #{$button-back-color-var}: $button-back-color;
-  #{$button-hover-back-color-var}: $button-hover-back-color;
-  #{$button-fore-color-var}: $button-fore-color;
-  #{$button-border-color-var}: $button-border-color;
-  #{$button-hover-border-color-var}: $button-hover-border-color;
-  #{$button-group-border-color-var}: $button-group-border-color;
-}
-// Base form styling
-form {  // Text color is the default, this can be changed manually.
-  background: var(#{$form-back-color-var});
-  color: var(#{$form-fore-color-var});
-  border: $__1px solid var(#{$form-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  margin: var(#{$universal-margin-var});
-  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-}
-// Fieldset styling
-fieldset {
-  // Apply always to overwrite defaults for all of the below.
-  border: $__1px solid var(#{$form-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  margin: calc(var(#{$universal-margin-var}) / 4);
-  padding: var(#{$universal-padding-var});
-}
-// Legend styling.
-legend {
-  // Edge fixes.
-  box-sizing: border-box;
-  display: table;
-  max-width: 100%;
-  white-space: normal;
-  // Actual styling.
-  font-weight: $bold-font-weight;
-  padding: calc(var(#{$universal-padding-var}) / 2);
-}
-// Label syling. - Basically just padding, but there might be more in the future.
-label {
-  padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
-}
-// Input group styling.
-.#{$input-group-name} {
-  display: inline-block;
-  // Fluid input groups
-  @if $_include-fluid-input-group {
-    &.#{$input-group-fluid-name} {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      & > input {
-        max-width: 100%;
-        flex-grow: 1;
-        flex-basis: 0px;
-      }
-      // On mobile
-      @media screen and (max-width: #{$input-group-mobile-breakpoint}) {
-        align-items: stretch;
-        flex-direction: column;
-      }
-    }
-    // Vertical input groups
-    &.#{$input-group-vertical-name} {
-      display: flex;
-      align-items: stretch;
-      flex-direction: column;
-      & > input {
-        max-width: 100%;
-        flex-grow: 1;
-        flex-basis: 0px;
-      }
-    }
-  }
-}
-// Correct the cursor style of increment and decrement buttons in Chrome.
-[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-// Correct style in Chrome and Safari.
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-// Correct style in Chrome and Safari.
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-// Common textual input styling. - Avoid using box-shadow with these.
-input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
-[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
-  box-sizing: border-box;
-  // Background, color and border should not be unassigned, as the browser defaults will apply.
-  background: var(#{$input-back-color-var});
-  color: var(#{$input-fore-color-var});
-  border: $__1px solid var(#{$input-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  margin: calc(var(#{$universal-margin-var}) / 2);
-  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
-}
-// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
-input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
-  &:hover, &:focus {
-    border-color: var(#{$input-focus-color-var});
-    box-shadow: none;
-  }
-  &:invalid, &:focus:invalid{
-    border-color: var(#{$input-invalid-color-var});
-    box-shadow: none;
-  }
-  &[readonly]{
-    background: var(#{$secondary-back-color-var});
-  }
-}
-// Fix for select and option elements overflowing their parent container.
-select {
-  max-width: 100%;
-}
-option {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-// Styling for checkboxes and radio buttons.
-[type="checkbox"], [type="radio"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  position: relative;
-  height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
-  width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
-  vertical-align: text-bottom;
-  padding: 0; // Remove padding added from previous styles.
-  flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
-  flex-grow: 0 !important;  // Using with fluid input-groups is not recommended.
-  &:checked:before {
-    position: absolute;
-  }
-}
-[type="checkbox"] {
-  &:checked:before {
-    content: '\2713';
-    font-family: sans-serif;
-    font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
-    top: calc(0rem - var(#{$universal-padding-var}));
-    left: calc(var(#{$universal-padding-var}) / 4);
-  }
-}
-[type="radio"] {
-  border-radius: 100%;
-  &:checked:before {
-    border-radius: 100%;
-    content: '';
-    top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
-    left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
-    background: var(#{$input-fore-color-var});
-    width: 0.5rem;
-    height: 0.5rem;
-  }
-}
-// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
-:placeholder-shown {
-  color: var(#{$input-fore-color-var});
-}
-::-ms-placeholder {
-  color: var(#{$input-fore-color-var});
-  opacity: 0.54;
-}
-// Definitions for the button and button-like elements.
-// Different elements are styled based on the same set of rules.
-// Reset for Firefox focusing on button elements.
-button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-// Fixes for Android 4, iOS and Safari.
-button, html [type="button"], [type="reset"], [type="submit"] {
-  -webkit-appearance: button;
-}
-// Other fixes.
-button {
-  overflow: visible;      // Show the overflow in IE.
-  text-transform: none;    // Remove inheritance of text-transform in Edge, Firefox, and IE.
-}
-// Default styling
-button, [type="button"], [type="submit"], [type="reset"],
-a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
-a[role="button"], label[role="button"], [role="button"] {
-  display: inline-block;
-  background: var(#{$button-back-color-var});
-  color: var(#{$button-fore-color-var});
-  border: $__1px solid var(#{$button-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
-  margin: var(#{$universal-margin-var});
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.3s;
-  &:hover, &:focus {
-    background: var(#{$button-hover-back-color-var});
-    border-color: var(#{$button-hover-border-color-var});
-  }
-}
-// Disabled styling for input and button elements.
-input, textarea, select, button, .#{$button-class-name}, [role="button"] {
-  // .button[disabled] is actually higher specificity than a.button, so no need for more than that
-  &:disabled, &[disabled] {
-    cursor: not-allowed;
-    opacity: $input-disabled-opacity;
-  }
-}
-// Button group styling.
-.#{$button-group-name} {
-  display: flex;
-  border: $__1px solid var(#{$button-group-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  margin: var(#{$universal-margin-var});
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-  & > button, [type="button"], & > [type="submit"], & > [type="reset"],
-  & > .#{$button-class-name}, & > [role="button"] {
-    margin: 0;
-    max-width: 100%;
-    flex: 1 1 auto;
-    text-align: center;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-  & > :not(:first-child) {
-    border-left: $__1px solid var(#{$button-group-border-color-var});
-  }
-  // Responsiveness for button groups
-  @media screen and (max-width: #{$button-group-mobile-breakpoint}) {
-    flex-direction: column;
-    & > :not(:first-child) {
-      border: 0;    // Reapply to remove the left border from elements.
-      border-top: $__1px solid var(#{$button-group-border-color-var});
-    }
-  }
-}
diff --git a/docs/mini/_input_control_mixins.scss b/docs/mini/_input_control_mixins.scss
deleted file mode 100644
index 4afba1cb8..000000000
--- a/docs/mini/_input_control_mixins.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-// Input_control module's mixin definitions are here. For the module itself
-// check `_input_control.scss`.
-// Button color variant mixin:
-//  $button-alt-name: The name of the class used for the button variant.
-//  $button-alt-back-color: Background color for button variant.
-//  $button-alt-hover-back-color: Background color for button variant (hover).
-//  $button-alt-fore-color: Text color for button variant.
-//  $button-alt-border-color: Border color for button variant.
-//  $button-alt-hover-border-color: Border color for button variant (hover).
-@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
-  $button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
-  $button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
-    button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
-      &.#{$button-alt-name} {
-        @if $button-alt-back-color != $button-back-color {
-          #{$button-back-color-var}: $button-alt-back-color;
-        }
-        @if $button-alt-fore-color != $button-fore-color{
-          #{$button-fore-color-var}: $button-alt-fore-color;
-        }
-        @if $button-alt-border-color != $button-border-color{
-          #{$button-border-color-var}: $button-alt-border-color;
-        }
-        &:hover, &:focus {
-          @if $button-alt-hover-back-color != $button-hover-back-color{
-            #{$button-hover-back-color-var}: $button-alt-hover-back-color;
-          }
-          @if $button-alt-hover-border-color != $button-hover-border-color{
-            #{$button-hover-border-color-var}: $button-alt-hover-border-color;
-          }
-        }
-      }
-    }
-}
-// Button size variant mixin:
-//  $button-alt-name: The name of the class used for the button variant.
-//  $button-alt-padding: The padding of the button variant.
-//  $button-alt-margin The margin of the button variant.
-@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
-  button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
-    &.#{$button-alt-name} {
-      padding: $button-alt-padding;
-      margin: $button-alt-margin;
-    }
-  }
-}
diff --git a/docs/mini/_layout.scss b/docs/mini/_layout.scss
deleted file mode 100644
index df2dc8bad..000000000
--- a/docs/mini/_layout.scss
+++ /dev/null
@@ -1,199 +0,0 @@
-/*
-  Definitions for the grid system, cards and containers.
-*/
-// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
-$_include-parent-layout:        true !default;        // [Hidden] Flag for rows defining column layouts (`true`/`false`).
-$grid-column-count:            12 !default;           // Number of columns in the grid (integer value only).
-$grid-container-name:          'container' !default;  // Class name for the grid system container.
-$grid-row-name:                'row' !default;        // Class name for the grid system rows.
-$grid-row-parent-layout-prefix:'cols' !default;       // Class name prefix for the grid's row parents.
-$grid-column-prefix:           'col' !default;        // Class name prefix for the grid's columns.
-$grid-column-offset-suffix:    'offset' !default;     // Class name suffix for the grid's offsets.
-$grid-order-normal-suffix:     'normal' !default;     // Class name suffix for grid columns with normal priority.
-$grid-order-first-suffix:      'first' !default;      // Class name suffix for grid columns with highest priority.
-$grid-order-last-suffix:       'last' !default;       // Class name suffix for grid columns with lowest priorty.
-$grid-small-prefix:            'sm' !default;         // Small screen class prefix for grid.
-$grid-medium-prefix:           'md' !default;         // Medium screen class prefix for grid.
-$grid-large-prefix:            'lg' !default;         // Large screen class prefix for grid.
-$grid-medium-breakpoint:       768px !default;        // Medium screen breakpoint for grid.
-$grid-large-breakpoint:        1280px !default;       // Large screen breakpoint for grid.
-$card-name:                    'card' !default;       // Class name for the cards.
-$card-section-name:            'section' !default;    // Class name for the cards' sections.
-$card-section-media-name:      'media' !default;      // Class name for the cards' sections (media cotent).
-$card-normal-width:            320px !default;        // Width for normal cards.
-$card-section-media-height:    200px !default;        // Height for cards' media sections.
-$card-fore-color:              #111 !default;         // Text color for the cards.
-$card-back-color:              #f8f8f8 !default;      // Background color for the cards.
-$card-border-color:            #ddd !default;         // Border color for the cards.
-// CSS variable name definitions [exercise caution if modifying these]
-$card-fore-color-var:          '--card-fore-color' !default;
-$card-back-color-var:          '--card-back-color' !default;
-$card-border-color-var:        '--card-border-color' !default;
-// == Uncomment below code if this module is used on its own ==
-//
-// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
-// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
-// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
-// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
-// $universal-margin-var:          '--universal-margin' !default;
-// $universal-padding-var:         '--universal-padding' !default;
-// $universal-border-radius-var:   '--universal-border-radius' !default;
-// $universal-box-shadow-var:      '--universal-box-shadow' !default;
-// :root {
-//  #{$universal-margin-var}: $universal-margin;
-//  #{$universal-padding-var}: $universal-padding;
-//  #{$universal-border-radius-var}: $universal-border-radius;
-//  @if $universal-box-shadow != none {
-//   #{$universal-box-shadow-var}: $universal-box-shadow;
-//  }
-// }
-//
-// ============================================================
-// Check the `_layout_mixins.scss` file to find this module's mixins.
-@import 'layout_mixins';
-// Fluid grid system container definition.
-.#{$grid-container-name} {
-  margin: 0 auto;
-  padding: 0 calc(1.5 * var(#{$universal-padding-var}));
-}
-// Grid row definition.
-.#{$grid-row-name} {
-  box-sizing: border-box;
-  display: flex;
-  flex: 0 1 auto;
-  flex-flow: row wrap;
-}
-// Inline mixin, used to generate class definitions for each grid step.
-@mixin generate-grid-size ($size-prefix){
-  @if $_include-parent-layout {
-    .#{$grid-column-prefix}-#{$size-prefix},
-    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
-    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
-    .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
-      box-sizing: border-box;
-      flex: 0 0 auto;
-      padding: 0 calc(var(#{$universal-padding-var}) / 2);
-    }
-    // Grid column specific definition for flexible column.
-    .#{$grid-column-prefix}-#{$size-prefix},
-    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > *  {
-      max-width: 100%;
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-  @else {
-    // Grid column generic definitions.
-    .#{$grid-column-prefix}-#{$size-prefix},
-    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
-    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
-      flex: 0 0 auto;
-      padding: 0 calc(var(#{$universal-padding-var}) / 2);
-    }
-    // Grid column specific definition for flexible column.
-    .#{$grid-column-prefix}-#{$size-prefix} {
-      max-width: 100%;
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-  // Grid column specific definitions for predefined columns.
-  @for $i from 1 through $grid-column-count {
-    @if $_include-parent-layout {
-      .#{$grid-column-prefix}-#{$size-prefix}-#{$i},
-      .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
-        max-width: #{($i * 100% / $grid-column-count)};
-        flex-basis: #{($i * 100% / $grid-column-count)};
-      }
-    }
-    @else {
-      .#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
-        max-width: #{($i * 100% / $grid-column-count)};
-        flex-basis: #{($i * 100% / $grid-column-count)};
-      }
-    }
-    // Offest definitions.
-    .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
-      @if ($i - 1) == 0 {
-        margin-left: 0;
-      }
-      @else {
-        margin-left: #{(($i - 1) * 100% / $grid-column-count)};
-      }
-    }
-  }
-  // Reordering definitions.
-  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
-    order: initial;
-  }
-  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix}  {
-    order: -999;
-  }
-  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
-    order: 999;
-  }
-}
-// Definitions for smaller screens.
-@include generate-grid-size($grid-small-prefix);
-// Definitions for medium screens.
-@media screen and (min-width: #{$grid-medium-breakpoint}){
-  @include generate-grid-size($grid-medium-prefix);
-}
-// Definitions for large screens.
-@media screen and (min-width: #{$grid-large-breakpoint}){
-  @include generate-grid-size($grid-large-prefix);
-}
-/* Card component CSS variable definitions */
-:root {
-  #{$card-back-color-var}: $card-back-color;
-  #{$card-fore-color-var}: $card-fore-color;
-  #{$card-border-color-var}: $card-border-color;
-}
-// Card styling
-.#{$card-name} {
-  // New syntax
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-self: center;
-  position: relative;
-  width: 100%;
-  // Actual styling for the cards
-  background: var(#{$card-back-color-var});
-  color: var(#{$card-fore-color-var});
-  border: $__1px solid var(#{$card-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  margin: var(#{$universal-margin-var});
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-  overflow: hidden;   // Hide overflow from section borders
-  // Responsiveness (if the screen is larger than card, set max-width)
-  @media screen and (min-width: #{$card-normal-width}) {
-    max-width: $card-normal-width;
-  }
-  // Card sections
-  & > .#{$card-section-name} {
-    // Reapply background and foreground colors, so that mixins can be applied properly.
-    background: var(#{$card-back-color-var});
-    color: var(#{$card-fore-color-var});
-    box-sizing: border-box;
-    margin: 0;
-    border: 0;        // Clean borders and radiuses for any element-based sections
-    border-radius: 0; // Clean borders and radiuses for any element-based sections
-    border-bottom: $__1px solid var(#{$card-border-color-var});
-    padding: var(#{$universal-padding-var});
-    width: 100%;
-    // Card media sections
-    &.#{$card-section-media-name} {
-      height: $card-section-media-height;
-      padding: 0;
-      -o-object-fit: cover;
-         object-fit: cover;
-    }
-  }
-  // Card sections - last
-  & > .#{$card-section-name}:last-child {
-    border-bottom: 0;  // Clean the extra border for last section
-  }
-}
diff --git a/docs/mini/_layout_mixins.scss b/docs/mini/_layout_mixins.scss
deleted file mode 100644
index b8eac1ba0..000000000
--- a/docs/mini/_layout_mixins.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// Layout (card) module's mixin definitions are here. For the module itself
-// check `_layout.scss`.
-// Mixin for alternate card sizes:
-//  $card-alt-size-name: The name of the class used for the alternate size card.
-//  $card-alt-size-width: The width of the alternate size card.
-@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
-  @if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
-    .#{$card-name}.#{$card-alt-size-name} {
-      max-width: $card-alt-size-width;
-      width: auto;
-    }
-  }
-  @else {
-    @media screen and (min-width: #{$card-alt-size-width}) {
-      .#{$card-name}.#{$card-alt-size-name} {
-        max-width: $card-alt-size-width;
-      }
-    }
-  }
-}
-// Mixin for alternate cards (card color variants):
-//  $card-alt-name: The name of the class used for the alternate card.
-//  $card-alt-back-color: The background color of the alternate card.
-//  $card-alt-fore-color: The text color of the alternate card.
-//  $card-alt-border-color: The border style of the alternate card.
-@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
-  $card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
-  .#{$card-name}.#{$card-alt-name} {
-    @if $card-alt-back-color != $card-back-color {
-      #{$card-back-color-var}: $card-alt-back-color;
-    }
-    @if $card-alt-fore-color != $card-fore-color {
-      #{$card-fore-color-var}: $card-alt-fore-color;
-    }
-    @if $card-alt-border-color != $card-border-color {
-      #{$card-border-color-var}: $card-alt-border-color;
-    }
-  }
-}
-// Mixin for alternate card sections (card section color variants):
-//  $card-section-alt-name: The name of the class used for the alternate card section.
-//  $card-section-alt-back-color: The background color of the alternate card section.
-//  $card-section-alt-fore-color: The text color of the alternate card section.
-@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
-  $card-section-alt-fore-color : $card-fore-color) {
-  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
-    @if $card-section-alt-back-color != $card-back-color {
-      #{$card-back-color-var}: $card-section-alt-back-color;
-    }
-    @if $card-section-alt-fore-color != $card-fore-color {
-      #{$card-fore-color-var}: $card-section-alt-fore-color;
-    }
-  }
-}
-// Mixin for alternate card sections (card section padding variants):
-//  $card-section-alt-name: The name of the class used for the alternate card section.
-//  $card-section-alt-padding: The padding of the alternate card section.
-@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
-  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
-    padding: $card-section-alt-padding;
-  }
-}
diff --git a/docs/mini/_navigation.scss b/docs/mini/_navigation.scss
deleted file mode 100644
index 6c905bf7d..000000000
--- a/docs/mini/_navigation.scss
+++ /dev/null
@@ -1,315 +0,0 @@
-/*
-  Definitions for navigation elements.
-*/
-// Different elements are styled based on the same set of rules.
-$header-height:     3.1875rem !default;      // Height of the header element.
-$header-back-color: #f8f8f8 !default;        // Background color for the header element.
-$header-hover-back-color: #f0f0f0 !default;  // Background color for the header element (hover).
-$header-fore-color:   #444 !default;         // Text color for the header element.
-$header-border-color: #ddd !default;         // Border color for the header element.
-$nav-back-color:      #f8f8f8 !default;      // Background color for the nav element.
-$nav-hover-back-color: #f0f0f0 !default;     // Background color for the nav element (hover).
-$nav-fore-color:      #444 !default;         // Text color for the nav element.
-$nav-border-color:    #ddd !default;         // Border color for the nav element.
-$nav-link-color:      #0277bd !default;      // Color for link in the nav element.
-$footer-fore-color:   #444 !default;         // Text color for the footer element.
-$footer-back-color:   #f8f8f8 !default;      // Background color for footer nav element.
-$footer-border-color: #ddd !default;         // Border color for the footer element.
-$footer-link-color:   #0277bd !default;      // Color for link in the footer element.
-$drawer-back-color:   #f8f8f8 !default;      // Background color for the drawer component.
-$drawer-border-color: #ddd !default;         // Border color for the drawer component.
-$drawer-hover-back-color: #f0f0f0 !default;  // Background color for the drawer component's close (hover).
-$drawer-close-color:  #444 !default;         // Color of the close element for the drawer component.
-$_header-only-bottom-border:  true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
-$_header-links-uppercase:     true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
-$header-logo-name:    'logo' !default;       // Class name for the header logo element.
-$header-logo-font-size: 1.75rem !default;    // Font ize for the header logo element.
-$nav-sublink-prefix:   'sublink' !default;   // Prefix for the subcategory tabs in nav.
-$nav-sublink-depth:    2 !default;           // Amount of subcategory classes to add.
-$_footer-only-top-border:  true !default;    // [Hidden] Apply styling only to the top border of footer? (boolean)
-$footer-font-size:    0.875rem !default;     // Font size for text in footer element.
-$sticky-name:         'sticky' !default;     // Class name for sticky headers and footers.
-$drawer-name:         'drawer' !default;     // Class name for the drawer component.
-$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
-$drawer-toggle-font-size: 1.5em !default;    // Font size for the drawer component's toggle. (prefer em units)
-$drawer-mobile-breakpoint: 768px !default;   // Mobile breakpoint for the drawer component.
-$_drawer-right:     true !default;           // [Hidden] Should the drawer appear on the right side of the screen?
-$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
-$drawer-width:      320px !default;          // Width of the drawer component.
-$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
-$drawer-close-size: 2rem !default;           // Size of the close element for the drawer component.
-$drawer-icons-color:  #212121 !default;      // Color for the icons used in the drawer component.
-// CSS variable name definitions [exercise caution if modifying these]
-$header-fore-color-var:          '--header-fore-color' !default;
-$header-back-color-var:          '--header-back-color' !default;
-$header-hover-back-color-var:    '--header-hover-back-color' !default;
-$header-border-color-var:        '--header-border-color' !default;
-$nav-fore-color-var:             '--nav-fore-color' !default;
-$nav-back-color-var:             '--nav-back-color' !default;
-$nav-hover-back-color-var:       '--nav-hover-back-color' !default;
-$nav-border-color-var:           '--nav-border-color' !default;
-$nav-link-color-var:             '--nav-link-color' !default;
-$footer-fore-color-var:          '--footer-fore-color' !default;
-$footer-back-color-var:          '--footer-back-color' !default;
-$footer-border-color-var:        '--footer-border-color' !default;
-$footer-link-color-var:          '--footer-link-color' !default;
-$drawer-back-color-var:          '--drawer-back-color' !default;
-$drawer-border-color-var:        '--drawer-border-color' !default;
-$drawer-hover-back-color-var:    '--drawer-hover-back-color' !default;
-$drawer-close-color-var:         '--drawer-close-color' !default;
-// == Uncomment below code if this module is used on its own ==
-//
-// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
-// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
-// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
-// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
-// $universal-margin-var:          '--universal-margin' !default;
-// $universal-padding-var:         '--universal-padding' !default;
-// $universal-border-radius-var:   '--universal-border-radius' !default;
-// $universal-box-shadow-var:      '--universal-box-shadow' !default;
-// :root {
-//  #{$universal-margin-var}: $universal-margin;
-//  #{$universal-padding-var}: $universal-padding;
-//  #{$universal-border-radius-var}: $universal-border-radius;
-//  @if $universal-box-shadow != none {
-//   #{$universal-box-shadow-var}: $universal-box-shadow;
-//  }
-// }
-//
-// ============================================================
-/* Navigation module CSS variable definitions */
-:root {
-  #{$header-back-color-var}: $header-back-color;
-  #{$header-hover-back-color-var}: $header-hover-back-color;
-  #{$header-fore-color-var}: $header-fore-color;
-  #{$header-border-color-var}: $header-border-color;
-  #{$nav-back-color-var}: $nav-back-color;
-  #{$nav-hover-back-color-var}: $nav-hover-back-color;
-  #{$nav-fore-color-var}: $nav-fore-color;
-  #{$nav-border-color-var}: $nav-border-color;
-  #{$nav-link-color-var}: $nav-link-color;
-  #{$footer-fore-color-var}: $footer-fore-color;
-  #{$footer-back-color-var}: $footer-back-color;
-  #{$footer-border-color-var}: $footer-border-color;
-  #{$footer-link-color-var}: $footer-link-color;
-  #{$drawer-back-color-var}: $drawer-back-color;
-  #{$drawer-hover-back-color-var}: $drawer-hover-back-color;
-  #{$drawer-border-color-var}: $drawer-border-color;
-  #{$drawer-close-color-var}: $drawer-close-color;
-}
-// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
-header {
-  height: $header-height;
-  background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
-  color: var(#{$header-fore-color-var});
-  @if $_header-only-bottom-border {
-    border-bottom: $__1px solid var(#{$header-border-color-var});
-  }
-  @else {
-    border: $__1px solid var(#{$header-border-color-var});
-  }
-  padding: calc(var(#{$universal-padding-var}) / 4) 0;
-  // Responsiveness for smaller displays, scrolls horizontally.
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  // Fix for responsive header, using the grid system's row and column alignment.
-  &.#{$grid-row-name} {
-    box-sizing: content-box;
-  }
-  // Header logo styling.
-  .#{$header-logo-name} {
-    color: var(#{$header-fore-color-var});
-    font-size: $header-logo-font-size;
-    padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
-    text-decoration: none;
-  }
-  // Link styling.
-  button, [type="button"], .#{$button-class-name}, [role="button"] {
-    box-sizing: border-box;
-    position: relative;
-    top: calc(0rem - var(#{$universal-padding-var}) / 4);  // Use universal-padding to offset the padding of the header.
-    height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2);  // Fill header.
-    background: var(#{$header-back-color-var});        // Apply color regardless to override styling from other things.
-    line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
-    text-align: center;
-    color: var(#{$header-fore-color-var});
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-    @if $_header-links-uppercase {
-      text-transform: uppercase;
-    }
-    &:hover, &:focus {
-      background: var(#{$header-hover-back-color-var});
-    }
-  }
-}
-// Navigation sidebar styling.
-nav {
-  background: var(#{$nav-back-color-var});
-  color: var(#{$nav-fore-color-var});
-  border: $__1px solid var(#{$nav-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-  margin: var(#{$universal-margin-var});
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-  * {
-    padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
-  }
-  a, a:visited {
-    display: block;
-    color: var(#{$nav-link-color-var});    // Apply regardless to de-stylize visited links.
-    border-radius: var(#{$universal-border-radius-var});
-    transition: background 0.3s;
-    &:hover, &:focus {
-      text-decoration: none;
-      background: var(#{$nav-hover-back-color-var});
-    }
-  }
-  // Subcategories in navigation.
-  @for $i from 1 through $nav-sublink-depth {
-    .#{$nav-sublink-prefix}-#{$i} {
-      position: relative;
-      margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
-      &:before {
-        position: absolute;
-        left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
-        top: -#{$__1px};
-        content: '';
-        height: 100%;
-        border: $__1px solid var(#{$nav-border-color-var});
-        border-left: 0;
-      }
-    }
-  }
-}
-// Footer styling.
-footer {
-  background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
-  color: var(#{$footer-fore-color-var});
-  @if $_footer-only-top-border {
-    border-top: $__1px solid var(#{$footer-border-color-var});
-  }
-  @else {
-    border: $__1px solid var(#{$footer-border-color-var});
-  }
-  // margin: $footer-margin;
-  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
-  font-size: $footer-font-size;
-  a, a:visited {
-    color: var(#{$footer-link-color-var});
-  }
-}
-// Definitions for sticky headers and footers.
-header.#{$sticky-name} {
-  position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
-  position: sticky;
-  z-index: 1101;  // Deals with certain problems when combined with cards and tables.
-  top: 0;
-}
-footer.#{$sticky-name} {
-  position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
-  position: sticky;
-  z-index: 1101;  // Deals with certain problems when combined with cards and tables.
-  bottom: 0;
-}
-// Responsive drawer component.
-.#{$drawer-toggle-name} {
-  &:before {  // No color specified, should use the color of its surroundings!
-    display: inline-block;
-    position: relative;
-    vertical-align: bottom;
-    content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
-    font-family: sans-serif;
-    font-size: $drawer-toggle-font-size;   // Almost hardcoded, should be fully compatible with its surroundings.
-  }
-  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
-    &:not(.#{$drawer-persistent-name}) {
-      display: none;
-    }
-  }
-}
-[type="checkbox"].#{$drawer-name} {
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  + * {
-    display: block;
-    box-sizing: border-box;
-    position: fixed;
-    top: 0;
-    width: $drawer-width;
-    height: 100vh;
-    overflow-y: auto;
-    background: var(#{$drawer-back-color-var});
-    border: $__1px solid var(#{$drawer-border-color-var});
-    border-radius: 0; // Set to 0 to override the value from `nav`.
-    margin: 0;        // Set to 0 to override the value from `nav`.
-    @if $universal-box-shadow != none {
-      box-shadow: var(#{$universal-box-shadow-var});
-    }
-    z-index: 1110;
-    @if $_drawer-right {
-      right: -$drawer-width;
-      transition: right 0.3s;
-    }
-    @else {
-      left: -$drawer-width;
-      transition: left 0.3s;
-    }
-    & .#{$drawer-close-name} {
-      position: absolute;
-      top: var(#{$universal-margin-var});
-      right: var(#{$universal-margin-var});
-      z-index: 1111;
-      width: $drawer-close-size;
-      height: $drawer-close-size;
-      border-radius: var(#{$universal-border-radius-var});
-      padding: var(#{$universal-padding-var});
-      margin: 0; // Fixes the offset from label
-      cursor: pointer;
-      transition: background 0.3s;
-      &:before {    // Transparent background unless hovered over. Does not block text behind it.
-        display: block;
-        content: '\00D7';
-        color: var(#{$drawer-close-color-var});
-        position: relative;
-        font-family: sans-serif;
-        font-size: $drawer-close-size;
-        line-height: 1;   // Setting to 1 seems to center the 'X' properly.
-        text-align: center;
-      }
-      &:hover, &:focus {
-        background: var(#{$drawer-hover-back-color-var});
-      }
-    }
-    @media screen and (max-width: #{$drawer-width}) {
-      width: 100%;
-    }
-  }
-  &:checked + * {
-    @if $_drawer-right {
-      right: 0;
-    }
-    @else {
-      left: 0;
-    }
-  }
-  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
-    &:not(.#{$drawer-persistent-name}) + * {
-      position: static;
-      height: 100%;
-      z-index: 1100;
-      & .#{$drawer-close-name} {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/docs/mini/_progress.scss b/docs/mini/_progress.scss
deleted file mode 100644
index acbc87516..000000000
--- a/docs/mini/_progress.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
-  Definitions for progress elements and spinners.
-*/
-$progress-back-color:     #ddd !default;           // Background color of .
-$progress-fore-color:     #555 !default;           // Foreground color of .
-$progress-height:         0.75rem !default;        // Height of .
-$progress-max-value:      1000 !default;           // Arithmetic max value of  - use integer values.
-$progress-inline-name:    'inline' !default;       // Class name for inline  elements.
-$progress-inline-width:   60% !default;            // Width of inline  elements.
-$_include-spinner-donut:  true !default;           // [Hidden] Should spinner donuts be included? (boolean)
-$spinner-donut-name:      'spinner' !default;      // Class name for spinner donuts
-$spinner-donut-size:      1.25rem !default;        // Size of the spinner donuts
-$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
-$spinner-donut-back-color:     #ddd !default;      // Background color for spinner donuts
-$spinner-donut-fore-color:     #555 !default;      // Foreground color for spinner donuts
-// CSS variable name definitions [exercise caution if modifying these]
-$progress-back-color-var: '--progress-back-color' !default;
-$progress-fore-color-var: '--progress-fore-color' !default;
-$spinner-donut-back-color-var: '--spinner-back-color' !default;
-$spinner-donut-fore-color-var: '--spinner-fore-color' !default;
-// == Uncomment below code if this module is used on its own ==
-//
-// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
-// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
-// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
-// $universal-margin-var:          '--universal-margin' !default;
-// $universal-border-radius-var:   '--universal-border-radius' !default;
-// $universal-box-shadow-var:      '--universal-box-shadow' !default;
-// :root {
-//  #{$universal-margin-var}: $universal-margin;
-//  #{$universal-border-radius-var}: $universal-border-radius;
-//  @if $universal-box-shadow != none {
-//   #{$universal-box-shadow-var}: $universal-box-shadow;
-//  }
-// }
-//
-// ============================================================
-// Check the `_progress_mixins.scss` file to find this module's mixins.
-@import '_progress_mixins';
-/* Progess module CSS variable definitions */
-:root {
-  #{$progress-back-color-var}: $progress-back-color;
-  #{$progress-fore-color-var}: $progress-fore-color;
-}
-// Default styling for progress. Use mixins for alternate styles
-progress {
-  display: block;
-  vertical-align: baseline; // Correct vertical alignment in some browsers.
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  height: $progress-height;
-  width: calc(100% - 2 * var(#{$universal-margin-var}));
-  margin: var(#{$universal-margin-var});
-  border: 0; // Removes default border
-  border-radius: calc(2 * var(#{$universal-border-radius-var}));
-  @if $universal-box-shadow != none {
-    box-shadow: var(#{$universal-box-shadow-var});
-  }
-  background: var(#{$progress-back-color-var});
-  color: var(#{$progress-fore-color-var});
-  // Foreground color on webkit browsers
-  &::-webkit-progress-value {
-    background: var(#{$progress-fore-color-var});
-    border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
-    border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
-  }
-  // Background color on webkit browser
-  &::-webkit-progress-bar {
-    background: var(#{$progress-back-color});
-  }
-  // Foreground color on Firefox
-  &::-moz-progress-bar {
-    background: var(#{$progress-fore-color-var});
-    border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
-    border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
-  }
-  &[value="#{$progress-max-value}"] {
-    &::-webkit-progress-value {
-      border-radius: calc(2 * var(#{$universal-border-radius-var}));
-    }
-    &::-moz-progress-bar {
-      border-radius: calc(2 * var(#{$universal-border-radius-var}));
-    }
-  }
-  &.#{$progress-inline-name} {
-    display: inline-block;
-    vertical-align: middle;   // Align progress bar vertically to look better with text next to it.
-    width: $progress-inline-width;
-  }
-}
-// Style for donut spinner
-@if $_include-spinner-donut {
-  :root {
-    #{$spinner-donut-back-color-var}: $spinner-donut-back-color;
-    #{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
-  }
-  // Donut spinner animation
-  @keyframes spinner-donut-anim {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg);}
-  }
-  .#{$spinner-donut-name} {
-    display: inline-block;
-    margin: var(#{$universal-margin-var});
-    border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
-    border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
-    border-radius: 50%;
-    width: $spinner-donut-size;
-    height: $spinner-donut-size;
-    animation: spinner-donut-anim 1.2s linear infinite;
-  }
-}
diff --git a/docs/mini/_progress_mixins.scss b/docs/mini/_progress_mixins.scss
deleted file mode 100644
index 212344389..000000000
--- a/docs/mini/_progress_mixins.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// Progress module's mixin definitions are here. For the module itself
-// check `progress.scss`.
-// Progress color variant mixin:
-//  $progress-alt-name: The name of the class used for the  variant.
-//  $progress-alt-fore-color: Foregound color for  variant.
-//  $progress-alt-back-color: Background color for  variant.
-@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
-  $progress-alt-back-color : $progress-back-color) {
-  progress.#{$progress-alt-name} {
-    @if $progress-alt-fore-color != $progress-fore-color{
-      #{$progress-fore-color-var}: $progress-alt-fore-color;
-    }
-    @if $progress-alt-back-color != $progress-back-color {
-      #{$progress-back-color-var}: $progress-alt-back-color;
-    }
-  }
-}
-// Spinner donut color variant mixin:
-//  $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
-//  $spinner-donut-alt-fore-color: Text color for spinner donut variant.
-//  $spinner-donut-alt-back-color: Background color for spinner donut variant.
-@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
-  $spinner-donut-alt-back-color : $spinner-donut-back-color) {
-  .#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
-    @if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
-      #{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
-    }
-    @if $spinner-donut-alt-back-color != $spinner-donut-back-color {
-      #{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
-    }
-  }
-}
diff --git a/docs/mini/_table.scss b/docs/mini/_table.scss
deleted file mode 100644
index 3f8a27d3d..000000000
--- a/docs/mini/_table.scss
+++ /dev/null
@@ -1,321 +0,0 @@
-/*
-  Definitions for the responsive table component.
-*/
-// The tables use the common table elements and syntax.
-/*
-$table-mobile-breakpoint:     767px !default;       // Breakpoint for table mobile view.
-$table-mobile-card-spacing:   10px !default;        // Space between  cards - mobile view.
-$table-mobile-card-label:     'data-label' !default;// Attribute used to replace column headers in mobile view.
-$table-not-responsive-name:   'preset' !default;    // Class name for table non-responsive view.
-$include-horizontal-table:    true !default;        // Should horizontal tables be included? (`true`/`false`)
-$table-horizontal-name:       'horizontal' !default;// Class name for table horizontal view.
-$include-scrollable-table:    true !default;        // Should scrollable tables be included? (`true`/`false`)
-$table-scrollable-name:       'scrollable' !default;// Class name for table scrollable view.
-$table-scrollable-height:     400px !default;       // Height for table scrollable view.
-$include-striped-table:       true !default;        // [Hidden flag] Should striped tables be included? (`true`/`false`)
-$table-striped-name:         'striped' !default;    // Class name for striped table.
-// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:              white !default;           // [External variable - core] Background color for everything.
-$fore-color:              black !default;           // [External variable - core] Foreground color for everything.
-*/
-$table-mobile-breakpoint:     768px !default;
-$table-max-height: 400px !default;
-$table-caption-font-size: 1.5rem !default;
-$table-mobile-card-label: 'data-label' !default;
-$table-mobile-label-font-weight: 600 !default;
-
-$table-border-color: #aaa !default;
-$table-border-separator-color: #666 !default;
-
-$_include-horizontal-table: true !default;
-$table-horizontal-name: 'horizontal' !default;
-
-// CSS variable name definitions [exercise caution if modifying these]
-$table-border-color-var: '--table-border-color' !default;
-$table-border-separator-color-var: '--table-border-separator-color' !default;
-// == Uncomment below code if this module is used on its own ==
-//
-// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
-// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
-// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
-// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
-// $universal-margin-var:          '--universal-margin' !default;
-// $universal-padding-var:         '--universal-padding' !default;
-// $universal-border-radius-var:   '--universal-border-radius' !default;
-// $universal-box-shadow-var:      '--universal-box-shadow' !default;
-// :root {
-//  #{$universal-margin-var}: $universal-margin;
-//  #{$universal-padding-var}: $universal-padding;
-//  #{$universal-border-radius-var}: $universal-border-radius;
-//  @if $universal-box-shadow != none {
-//   #{$universal-box-shadow-var}: $universal-box-shadow;
-//  }
-// }
-//
-// ============================================================
-/* Table module CSS variable definitions. */
-:root {
-  #{$table-border-color-var}: $table-border-color;
-  #{$table-border-separator-color-var}: $table-border-separator-color;
-}
-// Desktop view.
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  margin: 0;
-  display: flex;
-  flex: 0 1 auto;
-  flex-flow: row wrap;
-  padding: var(#{$universal-padding-var});
-  padding-top: 0;
-  @if not($_include-horizontal-table) {
-    overflow: auto;
-    max-height: $table-max-height;
-  }
-  caption {
-    font-size: $table-caption-font-size;
-    margin: calc(2 * var(#{$universal-margin-var})) 0;
-    max-width: 100%;
-    flex: 0 0 100%;
-  }
-  thead, tbody {
-    display: flex;
-    flex-flow: row wrap;
-    border: $__1px solid var(#{$table-border-color-var});
-    @if not($_include-horizontal-table) {
-      max-width: 100%;
-      flex: 0 0 100%;
-    }
-  }
-  thead {
-    z-index: 999;  // Fixes the visibility of the element.
-    border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
-    border-bottom: $__1px solid var(#{$table-border-separator-color-var}); // var This
-    @if not($_include-horizontal-table) {
-      position: sticky;
-      top: 0;
-    }
-  }
-  tbody {
-    border-top: 0;
-    margin-top: calc(0 - var(#{$universal-margin-var})); // might be useless
-    border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
-  }
-  tr {
-    display: flex;
-    padding: 0; // Apply always to overwrite default.
-    @if not($_include-horizontal-table) {
-      flex-flow: row wrap;
-      flex: 0 0 100%;
-    }
-  }
-  th, td {
-    padding: calc(2 * var(#{$universal-padding-var}));    // Apply always to overwrite default.
-    @if not($_include-horizontal-table) {
-      flex: 1 0 0%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  th {
-    text-align: left;
-    background: #e6e6e6;        // use vars
-    color: #111;          // vars
-  }
-  td {
-    background: #fafafa;     // use variables, this is a test (body)
-    border-top: $__1px solid var(#{$table-border-color-var});
-  }
-  @if not($_include-horizontal-table) {
-    tbody tr:first-child td {
-      border-top: 0;
-    }
-  }
-}
-// Styling for horizntal tables
-@if $_include-horizontal-table {
-  table:not(.#{$table-horizontal-name}) {
-    overflow: auto;
-    max-height: $table-max-height;
-    thead, tbody {
-      max-width: 100%;
-      flex: 0 0 100%;
-    }
-    tr {
-      flex-flow: row wrap;
-      flex: 0 0 100%;
-    }
-    th, td {
-      flex: 1 0 0%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    thead {
-      position: sticky;
-      top: 0;
-    }
-    tbody tr:first-child td {
-      border-top: 0;
-    }
-  }
-  table.#{$table-horizontal-name} {
-    border: 0;
-    thead, tbody {
-      border: 0;
-      flex-flow: row nowrap;
-    }
-    tbody {
-      overflow: auto;
-      justify-content: space-between;
-      flex: 1 0 0;
-      margin-left: calc( 4 * var(#{$universal-margin-var}));
-      padding-bottom: calc(var(#{$universal-padding-var}) / 4);
-    }
-    tr {
-      flex-direction: column;
-      flex: 1 0 auto;
-    }
-    th, td {
-      width: 100%;
-      border: 0;
-      border-bottom: $__1px solid var(#{$table-border-color-var});
-      &:not(:first-child){
-        border-top: 0;
-      }
-    }
-    th {
-      text-align: right;
-      border-left: $__1px solid var(#{$table-border-color-var});
-      border-right: $__1px solid var(#{$table-border-separator-color-var});
-    }
-    thead {
-      tr:first-child {
-        padding-left: 0;
-      }
-    }
-    th:first-child, td:first-child {
-      border-top: $__1px solid var(#{$table-border-color-var});
-    }
-    tbody tr:last-child td {
-      border-right: 1px solid #aaa;
-      &:first-child{
-        border-top-right-radius: 0.25rem;
-      }
-      &:last-child{
-        border-bottom-right-radius: 0.25rem;
-      }
-    }
-    thead tr:first-child th {
-      &:first-child{
-        border-top-left-radius: 0.25rem;
-      }
-      &:last-child{
-        border-bottom-left-radius: 0.25rem;
-      }
-    }
-  }
-}
-// Mobile
-@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
-  @if $_include-horizontal-table {
-    table, table.#{$table-horizontal-name} {
-      border-collapse: collapse;
-      border: 0;
-      width: 100%;
-      display: table;
-      // Accessibility (element is not visible, but screen readers read it normally)
-      thead, th {
-        border: 0;
-        height: 1px;
-        width: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        clip: rect(0 0 0 0);
-        -webkit-clip-path: inset(100%);
-        clip-path: inset(100%);
-      }
-      tbody {
-        display: table-row-group;
-      }
-      tr {
-        display: block;
-        border: $__1px solid var(#{$table-border-color-var});
-        border-radius: var(#{$universal-border-radius-var});
-        @if $universal-box-shadow != none {
-          box-shadow: var(#{$universal-box-shadow-var});
-        }
-        background: #fafafa;     // use variables, this is a test (body)
-        padding: var(#{$universal-padding-var});
-        margin: var(#{$universal-margin-var});
-        margin-bottom: calc(2 * var(#{$universal-margin-var}));
-      }
-      th, td {
-        width: auto;
-      }
-      td {
-        display: block;
-        border: 0;
-        text-align: right;
-      }
-      td:before {
-        content: attr(#{$table-mobile-card-label});
-        float: left;
-        font-weight: $table-mobile-label-font-weight;
-      }
-      th:first-child, td:first-child {
-        border-top: 0;
-      }
-      tbody tr:last-child td {
-        border-right: 0;
-      }
-    }
-  }
-  @else {
-    table {
-      border-collapse: collapse;
-      border: 0;
-      width: 100%;
-      display: table;
-      // Accessibility (element is not visible, but screen readers read it normally)
-      thead, th {
-        border: 0;
-        height: 1px;
-        width: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        clip: rect(0 0 0 0);
-        -webkit-clip-path: inset(100%);
-        clip-path: inset(100%);
-      }
-      tbody {
-        display: table-row-group;
-      }
-      tr {
-        display: block;
-        border: $__1px solid var(#{$table-border-color-var});
-        border-radius: var(#{$universal-border-radius-var});
-        @if $universal-box-shadow != none {
-          box-shadow: var(#{$universal-box-shadow-var});
-        }
-        background: #fafafa;     // use variables, this is a test (body)
-        padding: var(#{$universal-padding-var});
-        margin: var(#{$universal-margin-var});
-        margin-bottom: calc(2 * var(#{$universal-margin-var}));
-      }
-      td {
-        display: block;
-        border: 0;
-        text-align: right;
-      }
-      td:before {
-        content: attr(#{$table-mobile-card-label});
-        float: left;
-        font-weight: $table-mobile-label-font-weight;
-      }
-    }
-  }
-}
diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
deleted file mode 100644
index eedca2286..000000000
--- a/docs/mini/flavor.scss
+++ /dev/null
@@ -1,791 +0,0 @@
-//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
-//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
-//  structured like the flavor description below, will be included in your final CSS file.
-/*
-  Flavor name: Default (mini-default)
-  Author: Angelos Chalaris (chalarangelo@gmail.com)
-  Maintainers: Angelos Chalaris
-  mini.css version: v3.0.0-alpha.2
-*/
-
-$fore-color-var:                '--f-col';
-$secondary-fore-color-var:      '--f-col2';
-$back-color-var:                '--b-col';
-$secondary-back-color-var:      '--b-col2';
-$blockquote-color-var:          '--blq-col';
-$pre-color-var:                 '--pre-col';
-$border-color-var:              '--br-col';
-$secondary-border-color-var:    '--br-col2';
-$heading-ratio-var:             '--h-ratio';
-$universal-margin-var:          '--u-m';
-$universal-padding-var:         '--u-p';
-$universal-border-radius-var:   '--u-br-r';
-$universal-box-shadow-var:      '--u-bx-shd';
-$a-link-color-var:              '--a-l-col';
-$a-visited-color-var:           '--a-v-col';
-
-$code-font-size:  0.8125em;
-
-@import 'core';
-
-$grid-container-name:          'container';
-$grid-row-name:                'row';
-$grid-row-parent-layout-prefix:'cols';
-$grid-column-prefix:           'col';
-$grid-column-offset-suffix:    'o';
-$grid-order-normal-suffix:     'n';
-$grid-order-first-suffix:      'f';
-$grid-order-last-suffix:       'l';
-$grid-small-prefix:            'sm';
-$grid-medium-prefix:           'md';
-$grid-large-prefix:            'lg';
-
-$card-fore-color-var:          '--cd-f-col';
-$card-back-color-var:          '--cd-b-col';
-$card-border-color-var:        '--cd-br-col';
-
-$_include-parent-layout: false;
-
-@import 'layout';
-
-/*
-  Custom elements for card elements.
-*/
-
-$card-fluid-name:              'fluid';            // Class name for fluid cards.
-$card-fluid-width:             100%;               // Width for fluid cards.
-@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
-
-$card-section-double-padded-name:    'double-padded';   // Class name for card double-padded section variant.
-$card-section-double-padded-padding:  calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
-@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
-
-.#{$card-name} {
-  box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 32, 64, 0.1);
-}
-
-.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
-  padding: calc(3 * var(#{$universal-padding-var}));
-}
-
-.#{$card-name} > .#{$card-section-name}.#{$card-section-double-padded-name} > p {
-  margin: var(#{$universal-margin-var}) calc(var(#{$universal-margin-var}) / 2);
-}
-
-.#{$card-name} + .#{$card-name} {
-  margin-top: calc(5 * var(#{$universal-margin-var}));
-}
-
-$form-back-color-var:         '--frm-b-col';
-$form-fore-color-var:         '--frm-f-col';
-$form-border-color-var:       '--frm-br-col';
-$input-back-color-var:        '--in-b-col';
-$input-fore-color-var:        '--in-f-col';
-$input-border-color-var:      '--in-br-col';
-$input-focus-color-var:       '--in-fc-col';
-$input-invalid-color-var:     '--in-inv-col';
-$button-back-color-var:       '--btn-b-col';
-$button-hover-back-color-var: '--btn-h-b-col';
-$button-fore-color-var:       '--btn-f-col';
-$button-border-color-var:       '--btn-br-col';
-$button-hover-border-color-var: '--btn-h-br-col';
-$button-group-border-color-var: '--btn-grp-br-col';
-
-
-$_include-fluid-input-group: true;
-
-@import 'input_control';
-
-/*
-  Custom elements for forms and input elements.
-*/
-$button-primary-name:            'primary';   // Class name for primary button color variant.
-$button-primary-back-color:      #1976d2;     // Background color for primary button color variant.
-$button-primary-hover-back-color:#1565c0;     // Background color for primary button color variant (hover).
-$button-primary-fore-color:      #f8f8f8;     // Text color for primary button color variant.
-@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
-
-
-$header-fore-color-var:          '--hd-f-col';
-$header-back-color-var:          '--hd-b-col';
-$header-hover-back-color-var:    '--hd-hv-b-col';
-$header-border-color-var:        '--hd-br-col';
-$nav-fore-color-var:             '--nv-f-col';
-$nav-back-color-var:             '--nv-b-col';
-$nav-hover-back-color-var:       '--nv-hv-b-col';
-$nav-border-color-var:           '--nv-br-col';
-$nav-link-color-var:             '--nv-ln-col';
-$footer-fore-color-var:          '--ft-f-col';
-$footer-back-color-var:          '--ft-b-col';
-$footer-border-color-var:        '--ft-br-col';
-$footer-link-color-var:          '--ft-ln-col';
-$drawer-back-color-var:          '--dr-b-col';
-$drawer-border-color-var:        '--dr-br-col';
-$drawer-hover-back-color-var:    '--dr-hv-b-col';
-$drawer-close-color-var:         '--dr-cl-col';
-
-
-$nav-sublink-depth:    1;
-
-$_drawer-right: false;
-
-@import 'navigation';
-
-$mark-back-color: #424242;
-$mark-font-size: 0.5em;
-
-$toast-back-color:       #212121;
-
-$mark-back-color-var:         '--mrk-b-col';
-$mark-fore-color-var:         '--mrk-f-col';
-$toast-back-color-var:        '--tst-b-col';
-$toast-fore-color-var:        '--tst-f-col';
-$tooltip-back-color-var:      '--tltp-b-col';
-$tooltip-fore-color-var:      '--tltp-f-col';
-$modal-overlay-color-var:     '--mdl-ov-col';
-$modal-close-color-var:       '--mdl-cl-col';
-$modal-close-hover-back-color-var: '--mdl-cl-h-col';
-$collapse-label-back-color-var:    '--clps-lbl-b-col';
-$collapse-label-fore-color-var:    '--clps-lbl-f-col';
-$collapse-label-hover-back-color-var:    '--clps-lbl-h-b-col';
-$collapse-selected-label-back-color-var: '--clps-sel-lbl-b-col';
-$collapse-border-color-var:        '--clps-br-col';
-$collapse-content-back-color-var:  '--clps-cnt-b-col';
-$collapse-selected-label-border-color-var: '--clps-sel-lbl-br-col';
-
-$_include-modal: false;
-$_include-tooltip: false;
-$_include-collapse: false;
-
-@import 'contextual';
-
-div,main,nav{
-  -webkit-overflow-scrolling: touch;
-}
-.#{$toast-name} {
-  bottom: calc(var(#{$universal-margin-var}) / 2);
-  opacity: 1;
-  transition: opacity 0.3s ease-in-out;
-}
-
-mark {
-  position: relative;
-  top: -0.25rem;
-  left: 0.25rem;
-}
-
-/*
-  Custom elements for contextual background elements, toasts and tooltips.
-*/
-$mark-secondary-name:            'secondary'; // Class name for secondary  color variant.
-$mark-secondary-back-color:      #d32f2f;     // Background color for secondary  color variant.
-@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
-
-$mark-tertiary-name:            'tertiary';  // Class name for tertiary  color variant.
-$mark-tertiary-back-color:      #308732;     // Background color for tertiary  color variant.
-@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
-
-$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag  size variant.
-$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
-$mark-tag-border-radius:        1em;
-@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
-
-// Website-specific styles
-code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
-  font-family: Menlo, Consolas, monospace !important;
-}
-pre {
-  border: 0.0625rem solid var(#{$secondary-border-color-var});
-  border-radius: var(#{$universal-border-radius-var});
-}
-
-.search {
-  font-size: 0.875rem;
-}
-
-header h1.logo {
-  margin-top: -0.8rem;
-  text-align:center;
-  position: relative;
-  top: 0;
-  transition: top 0.3s;
-  color: #111;
-}
-
-h1 a, h1 a:link, h1 a:visited {
-  text-decoration:none;
-  color: #111;
-  &:hover, &:focus {
-    text-decoration:none;
-    color: #111;
-  }
-}
-
-header #title {
-  position:relative;
-  top: -1rem;
-  @media screen and (max-width: 768px) { display: none; }
-}
-
-header {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 174, 39, 1) 0%,
-    rgba(222, 73, 109, 1) 100%
-  );
-}
-
-header h1 small {
-  display:block;
-  font-size: 0.875rem;
-  color: #888;
-  margin-top: 0.75rem;
-}
-
-label#menu-toggle {
-  position: absolute;
-  left: 0rem;
-  top: 0rem;
-  width: 3.4375rem;
-}
-
-main {
-  padding: 0;
-}
-
-:root {
-  #{$collapse-label-back-color-var}:  $collapse-label-back-color;
-  #{$collapse-label-fore-color-var}:  $collapse-label-fore-color;
-  #{$collapse-label-hover-back-color-var}:  $collapse-label-hover-back-color;
-  #{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
-  #{$collapse-border-color-var}: $collapse-border-color;
-  #{$collapse-content-back-color-var} : $collapse-content-back-color;
-  #{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
-}
-label.#{$collapse-name} {
-  width: 100%;
-  display: inline-block;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition: background 0.3s;
-  color: var(#{$collapse-label-fore-color-var});
-  background: var(#{$collapse-label-back-color-var});
-  border: $__1px solid var(#{$collapse-border-color-var});
-  padding: calc(1.5 * var(#{$universal-padding-var}));
-  border-radius: var(#{$universal-border-radius-var});
-  &:hover, &:focus {
-    background: var(#{$collapse-label-hover-back-color-var});
-  }
-  + pre {
-    box-sizing: border-box;
-    height: 0;
-    max-height: 1px;
-    overflow: auto;
-    margin: 0;
-    border: 0;
-    padding: 0;
-    transition: max-height 0.3s;
-  }
-  &.toggled {
-    background: var(#{$collapse-selected-label-back-color-var});
-    border-bottom-color: var(#{$collapse-selected-label-border-color-var});
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    + pre {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      position: relative;
-      width: 100%;
-      height: auto;
-      border: $__1px solid var(#{$collapse-border-color-var});
-      border-top: 0;
-      padding: calc(2 * var(#{$universal-padding-var}));
-      max-height: $collapse-content-max-height;
-    }
-  }
-}
-
-button.primary.clipboard-copy {
-  width: 100%;
-  margin-left: 0;
-  > img {
-    vertical-align: bottom;
-  }
-}
-
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #222;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.8;
-
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-
-  -webkit-hypens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"] {
-  padding: calc(2 * var(#{$universal-padding-var}));
-  overflow: auto;
-  margin: var(#{$universal-margin-var}) 0;
-}
-
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  background: #b3d4fc;
-}
-
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #7a8490;
-}
-
-.token.punctuation {
-  color: #666;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.constant,
-.token.symbol,
-.token.deleted,
-.token.function {
-  color: #005cc5;
-}
-
-
-.token.number,
-.token.class-name {
-  color: #832ed2;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #067e36;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #d73a49;
-}
-
-.token.regex {
-  color: #097cab;
-}
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-button.scroll-to-top {
-  border-radius: 100%;
-  font-size: 1.5rem;
-  line-height: 1;
-  box-sizing: border-box;
-  width: 2.75rem;
-  height: 2.75rem;
-  position: fixed;
-  bottom: 1rem;
-  right: 2rem;
-  background: var(#{$back-color-var});
-  box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
-  &:hover, &:focus {
-    background: var(#{$secondary-back-color-var});
-  }
-}
-
-.#{$card-name}#disclaimer {
-  position: fixed;
-  bottom: 0;
-  z-index: 1100;
-  max-width: 100vw;
-  width: 100vw;
-  left: 0;
-  text-align: center;
-  font-size: 1.5rem;
-  margin: 0;
-  @media screen and (min-width: 768px){
-    width: 60vw;
-    left: 20vw;
-    bottom: 1rem;
-  }
-  @media screen and (min-width: 1280px){
-    width: 40vw;
-    left: 30vw;
-    bottom: 1.5rem;
-  }
-}
-
-button#disclaimer-close{
-  position: absolute;
-  top: -0.5rem;
-  right: -0.5rem;
-  font-size: 0.85rem;
-  background: 0;
-}
-
-// New styles for landing page
-
-#splash {
-  height: auto;
-  padding-bottom: 1.5rem;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 174, 39, 1) 0%,
-    rgba(222, 73, 109, 1) 100%
-  );
-  #logo {
-    margin-top: 0;
-    margin-left: -0.5rem;
-    padding-top: 2rem;
-    text-align: center;
-    font-size: 2.25rem;
-    line-height: 2;
-    img {
-      vertical-align: top;
-      height: 4.5rem;
-    }
-  }
-  #tagline {
-    text-align: center;
-    padding: 0.5rem 25%;
-  }
-  #doc-link {
-    text-align: center;
-    margin-left: -0.5rem;
-    > a {
-      background: transparent;
-      border: 0.0625rem solid rgba(17, 17, 17, 0.95);
-      transition: all 0.3s;
-      &:hover,
-      &:focus {
-        background: rgba(17, 17, 17, 0.95);
-        color: #e86957;
-      }
-    }
-  }
-  @media screen and (max-width: 767px) {
-    #logo {
-      font-size: 1.75rem;
-      img {
-        height: 3.5rem;
-      }
-    }
-    #tagline {
-      padding: 0.25rem 17.5%;
-      font-size: 0.875rem;
-    }
-    #doc-link {
-      font-size: 0.875rem;
-    }
-  }
-  @media screen and (max-width: 383px) {
-    #logo {
-      font-size: 1.5rem;
-      img {
-        height: 3rem;
-      }
-    }
-    #tagline {
-      padding: 0.125rem 5%;
-    }
-  }
-  @media screen and (max-width: 479px) {
-    #tagline #tagline-lg {
-      display: none;
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .col-md-offset-1 {
-    margin-left: 8.33333%;
-  }
-}
-
-@media screen and (min-width: 1280px) {
-  .col-lg-offset-2 {
-    margin-left: 16.66667%;
-  }
-}
-
-h2.index-section {
-  border-left: 0.3125rem solid #de4a6d;
-  padding-left: 0.625rem;
-  margin-top: 2rem;
-}
-
-#license-icon {
-  text-align: center;
-  @media screen and (min-width: 768px) {
-    position: relative;
-    top: calc(50% - 40px);
-  }
-  > svg {
-    border: 0.03125rem solid #444;
-    border-radius: 100%;
-    padding: 0.5rem;
-    fill: #444;
-  }
-}
-
-#license {
-  vertical-align: middle;
-}
-
-.no-padding {
-  padding: 0;
-}
-
-#in-numbers {
-  background: #111; //#3f88c5; //#e15554;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  color: #fff;
-  svg {
-    fill: #fff;
-    @media screen and (min-width: 768px) {
-      position: relative;
-      top: 20px;
-      left: -34px;
-      width: 32px;
-      height: 32px;
-    }
-  }
-  p {
-    overflow-wrap: break-word;
-    @media screen and (min-width: 768px) {
-      position: relative;
-      top: -24px;
-      left: 22px;
-      font-size: 0.75rem;
-    }
-    margin-top: 0;
-    font-size: 0.625rem;
-    margin-bottom: 0;
-  }
-}
-
-#snippet-count,
-#contrib-count,
-#commit-count,
-#star-count {
-  font-size: 1rem;
-  @media screen and (min-width: 768px) {
-    font-size: 1.25rem;
-  }
-}
-
-ul#links {
-  list-style: none;
-  padding-left: 0;
-  li + li {
-    padding-top: 0.625rem;
-  }
-}
-
-.pick:not(.selected) {
-  display: none;
-}
-
-.card.pick {
-  transition: all 0.6s;
-  left: 0;
-}
-
-.card.pick + .card.pick {
-  margin-top: 0.5rem;
-}
-
-.pick.selected {
-  overflow: visible;
-  button.next {
-    position: absolute;
-    top: 50%;
-    right: -1rem;
-    > svg {
-      margin-right: -0.0625rem;
-    }
-  }
-}
-
-#pick-slider {
-  position: relative;
-}
-
-button.previous {
-  left: -1%;
-  > svg {
-    margin-left: -0.125rem;
-  }
-}
-button.next {
-  right: -1%;
-  > svg {
-    margin-left: 0.0625rem;
-  }
-}
-
-button.previous,
-button.next {
-  position: absolute;
-  top: 50%;
-  border-radius: 100%;
-  background: #f8f8f8;
-  border: 0.03125rem solid #ddd;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  margin: 0;
-  transition: all 0.3s;
-  z-index: 2000;
-  > svg {
-    fill: #888;
-    transition: all 0.3s;
-  }
-  &:hover,
-  &:focus {
-    border-color: #aaa;
-    > svg {
-      fill: #444;
-    }
-  }
-}
-
-.card.contributor {
-  height: calc(100% - 1rem);
-  justify-content: left;
-  > .section.media {
-    height: auto;
-  }
-  > .section.button {
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-align: center;
-    transition: color 0.3s;
-    &:hover,
-    &:focus {
-      color: var(--a-l-col);
-      background: #f8f8f8;
-    }
-  }
-}
-
-.card.fluid.contribution-guideline {
-  overflow: visible;
-  margin-top: 3rem;
-  padding-bottom: 0.25rem;
-  h3 {
-    padding-top: 0.5rem;
-    text-align: center;
-  }
-}
-
-.contribution-guideline + .contribution-guideline {
-  &:before,
-  &:after {
-    content: "";
-    position: relative;
-    top: -2.75rem;
-    width: 0.375rem;
-    height: 0.375rem;
-    background: #ddd;
-    border: 0.03125rem solid #d0d0d0;
-    border-radius: 100%;
-    left: calc(50% - 0.1875rem);
-    box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
-  }
-  &:after {
-    position: absolute;
-    top: - 1.875rem;
-  }
-}
-
-.contribution-number {
-  position: absolute;
-  top: -1.125rem;
-  left: calc(50% - 1.125rem);
-  font-size: 1.5rem;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 174, 39, 1) 0%,
-    rgba(222, 73, 109, 1) 100%
-  );
-  border: 0.03125 solid #ddd;
-  width: 2.25rem;
-  text-align: center;
-  height: 2.25rem;
-  border-radius: 100%;
-  font-weight: 700;
-  color: #fff;
-}
-
-body {
-  overflow-x: hidden;
-}
-
-label.button.drawer-toggle {
-  background: transparent;
-  color: #111;
-  &:hover, &:focus {
-    background: transparent;
-  }
-}
-
-nav .input-group.vertical {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #f8f8f8;
-  border-bottom: 0.0625rem solid var(--nv-br-col);
-}
diff --git a/docs/scss/style.scss b/docs/scss/style.scss
index b8471f1cd..c168ce3ce 100644
--- a/docs/scss/style.scss
+++ b/docs/scss/style.scss
@@ -491,6 +491,9 @@ $grid-large-breakpoint: 1280px;
 // ===================================================
 // Cards
 // ===================================================
+h2.category-name {
+  text-align: center;
+}
 .card {
   overflow: hidden;
   position: relative;
diff --git a/docs/style.css b/docs/style.css
new file mode 100644
index 000000000..147c955d9
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1 @@
+@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--border-color:#eee;--secondary-fore-color:#444;--tertiary-fore-color:#222;--secondary-back-color:#f0f0f0;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-border-color:#e0e0e0;--nav-back-color:#fafafa;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-border-color:#e5e5e5;--nav-link-hover-color:#f0f0f0;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*="language-"],pre[class*="language-"]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:var(--code-selected-color)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:var(--code-selected-color)}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color)}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:0.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:0.25rem 0.9375rem;background-repeat:no-repeat}.card.code-card .collapse+pre.card-examples{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled+pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:'';display:block;position:absolute;top:0;left:0.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:'';display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:6.5rem;height:3.25rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:0.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:0.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:5;background:var(--header-back-color);transition:top 0.3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:0.875rem;color:var(--header-back-color);margin-top:0.75rem}header img{height:3.5rem;padding:0.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:0;left:-320px;width:320px;transition:left 0.3s ease;z-index:1100;height:100vh;box-sizing:border-box;display:block;background:var(--nav-back-color);border-right:.0625rem solid var(--nav-border-color);overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{top:3.5rem;height:calc(100vh - 3.5rem);width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){nav.col-nav+main.col-centered,nav.col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}nav h4{margin:var(--universal-margin);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));padding-left:0}nav a{display:block;margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding));border-left:.0625rem solid var(--nav-link-border-color)}nav a:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav a+a{margin-top:0}[type="search"]{outline:none;box-sizing:border-box;background:transparent;border:none;border-bottom:.0625rem solid var(--search-border-color);width:calc(100% - 1rem);margin:var(--universal-margin);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all 0.3s ease}[type="search"]:hover,[type="search"]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type="search"]:focus{box-shadow:0 .0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0.875rem 0.875rem;cursor:pointer;transition:all 0.3s ease}.menu-button:hover{background-color:rgba(255,255,255,0.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:0.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.3125rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}
diff --git a/scripts/web.js b/scripts/web.js
index 35540fe0a..531613be2 100644
--- a/scripts/web.js
+++ b/scripts/web.js
@@ -34,22 +34,22 @@ if (
   );
   process.exit(0);
 }
-// Compile the mini.css framework and custom CSS styles, using `node-sass`.
+// Compile the SCSS file, using `node-sass`.
 const sass = require('node-sass');
 sass.render(
   {
-    file: path.join('docs', 'mini', 'flavor.scss'),
-    outFile: path.join('docs', 'mini.css'),
+    file: path.join('docs', 'scss', 'style.scss'),
+    outFile: path.join('docs', 'style.css'),
     outputStyle: 'compressed'
   },
   function(err, result) {
     if (!err) {
-      fs.writeFile(path.join('docs', 'mini.css'), result.css, function(err2) {
-        if (!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
-        else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
+      fs.writeFile(path.join('docs', 'style.css'), result.css, function(err2) {
+        if (!err2) console.log(`${chalk.green('SUCCESS!')} style.css file generated!`);
+        else console.log(`${chalk.red('ERROR!')} During style.css file generation: ${err}`);
       });
     } else {
-      console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
+      console.log(`${chalk.red('ERROR!')} During style.css file generation: ${err}`);
     }
   }
 );
@@ -131,6 +131,7 @@ try {
 }
 // Load tag data from the database
 tagDbData = util.readTags();
+/*
 // Create the output for the index.html file (only locally or on Travis CRON or custom job)
 if (
   !util.isTravisCI() ||
@@ -273,7 +274,7 @@ if (
     process.exit(1);
   }
 }
-
+*/
 // Create the output for individual category pages
 try {
   // Add the start static part
@@ -290,22 +291,22 @@ try {
             : a.localeCompare(b)
     )) {
     output +=
-      '
' +
+      '
' +
       md
         .render(`${util.capitalize(tag, true)}\n`)
         .replace(/
/g, '')
         .replace(/<\/p>/g, '') +
-      '
';
+      '';
     for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
       output += md
         .render(`[${taggedSnippet[0]}](./${tag}#${taggedSnippet[0].toLowerCase()})\n`)
         .replace(/
/g, '')
         .replace(/<\/p>/g, '')
-        .replace(/
';
+    '
';
   output += ' ';
   // Loop over tags and snippets to create the list of snippets
   for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))]
@@ -323,23 +324,25 @@ try {
       .replace(new RegExp(`./${tag}#`, 'g'), '#');
     localOutput += md
       .render(`## ${util.capitalize(tag, true)}\n`)
-      .replace(/
/g, '
');
+      .replace(/
/g, '
');
     for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
       localOutput +=
-        '
' +
+        '
' +
+       `
${taggedSnippet[1].includes('advanced') ? 'advanced' : taggedSnippet[1].includes('beginner') ? 'beginner' : 'intermediate'}
` +
         md
           .render(`\n${snippets[taggedSnippet[0] + '.md']}`)
           .replace(
             /
/g,
-            `${
-              taggedSnippet[1].includes('advanced') ? 'advanced' : ''
-            }
`
+            '
'
+          )
+          .replace(
+            /
/m,
+            '
'
           )
-          .replace(/<\/h3>/g, '
')
           .replace(
             /
([^\0]*?)<\/code><\/pre>/gm,
             (match, p1) =>
@@ -348,9 +351,9 @@ try {
                 Prism.languages.javascript
               )}
`
           )
-          .replace(/<\/pre>\s+
📋 Copy to clipboard' +
-        '
';
+          .replace(/<\/div>\s*
\s+
examples
+    
     Snippets Archive - 30 seconds of code
     
     
diff --git a/static-parts/beginner-page-start.html b/static-parts/beginner-page-start.html
index 4ab08e6a0..5868bf6bf 100644
--- a/static-parts/beginner-page-start.html
+++ b/static-parts/beginner-page-start.html
@@ -9,7 +9,7 @@
       gtag('js', new Date());
       gtag('config', 'UA-117141635-1');
     
-    
+    
     Snippets for Beginners - 30 seconds of code
     
     
diff --git a/static-parts/index.html b/static-parts/index.html
index 54101f38a..a41cedfa6 100644
--- a/static-parts/index.html
+++ b/static-parts/index.html
@@ -9,7 +9,7 @@
       gtag('js', new Date());
       gtag('config', 'UA-117141635-1');
     
-    
+    
     30 seconds of code
     
     
diff --git a/static-parts/page-end.html b/static-parts/page-end.html
index 9871cd7c4..b0daea88c 100644
--- a/static-parts/page-end.html
+++ b/static-parts/page-end.html
@@ -1,8 +1,14 @@
-        
-        
       

+      

+        

+          
30 seconds of code is licensed under the CC0-1.0
+            license. 
Sponsored by DigitalOcean.
Ribbon
+            made by Tim Holman is licensed under the MIT
+            license.

+        

+      

+      
     
   
-
+
\ No newline at end of file
diff --git a/static-parts/page-start.html b/static-parts/page-start.html
index 88a8c8d0c..c30d5f9eb 100644
--- a/static-parts/page-start.html
+++ b/static-parts/page-start.html
@@ -9,7 +9,7 @@
       gtag('js', new Date());
       gtag('config', 'UA-117141635-1');
     
-    
+    
     $tag - 30 seconds of code
     
     
@@ -24,7 +24,7 @@
     
   
   
-    
-    

-      
logo 30 seconds of code
+    
+    
+    

+      
logo 30 seconds of code
         Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
       

-      
     

-    

-      
-