From 1093f4d76ca6e281efcca21b2c3754eb2a53dca9 Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Mon, 16 Sep 2024 15:15:09 +0100 Subject: [PATCH] Auto-increment FIGUREs --- _includes/css/csswizardry.min.css | 2 +- css/_base.type.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/_includes/css/csswizardry.min.css b/_includes/css/csswizardry.min.css index f1086fb6..b507d1cb 100644 --- a/_includes/css/csswizardry.min.css +++ b/_includes/css/csswizardry.min.css @@ -2,4 +2,4 @@ * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com - *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,figure,table,th,td,caption,hr{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}u,ins{text-decoration:none}ins{border-bottom:1px solid}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,p,address,hr,table,fieldset,figure,pre,details,[open]>summary,.page-head,.promo__block{margin-bottom:24px;margin-bottom:1.5rem}ul,ol,dd{margin-left:48px;margin-left:3rem}html{font-size:1em;line-height:1.5;background-color:#f9f9f9;color:#333;overflow-y:scroll;min-height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@view-transition{navigation:auto}html{font-family:system-ui,sans-serif;font-weight:400;scroll-behavior:smooth}h1,.alpha{font-size:36px;font-size:2.25rem;line-height:1.333333333}h2,.beta{font-size:30px;font-size:1.875rem;line-height:1.6}h3,.gamma{font-size:24px;font-size:1.5rem;line-height:1}h4,.delta{font-size:20px;font-size:1.25rem;line-height:1.2}h5,.epsilon{font-size:16px;font-size:1rem;line-height:1.5}h6,.zeta{font-size:14px;font-size:.875rem;line-height:1.714285714}h1,h2,h3,h4,h5,h6{font-weight:300;color:#f43059;text-wrap:balance}@media screen and (min-width: 45em){h1{font-size:72px;font-size:4.5rem;line-height:1;font-weight:900;border-left:24px solid #f43059;border-radius:3px;margin-left:-36px;padding-left:12px}}h2:has(>img){line-height:1}.heading{display:block;font-size:22px;font-size:1.375rem;line-height:1.090909091;color:#f43059}.heading-sub{display:block;font-size:16px;font-size:1rem;line-height:1.5;font-weight:600;margin-bottom:0;color:#333}a,strong,b,dt{font-weight:600}p{text-wrap:pretty}code,kbd,samp{color:#859900;font-family:"Operator Mono", Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;font-style:normal;word-break:break-word}a:hover code,a:active code,a:focus code,a:hover kbd,a:active kbd,a:focus kbd,a:hover samp,a:active samp,a:focus samp{text-decoration:underline}pre{white-space:pre;word-wrap:normal;overflow:auto;padding:12px;background-color:#333;border-radius:3px}@media screen and (min-width: 45em){pre{margin-right:-12px;margin-left:-12px}}pre,pre code,pre kbd,pre samp{color:#fff;word-break:keep-all}li pre{margin-top:1.5rem}var{font-family:Hoefler Text, Georgia, serif;line-height:1;font-style:italic}@media screen and (min-width: 1380px){figure{margin-left:-128px}}figure>img{border-radius:3px}figcaption{font-size:12px;font-size:.75rem;line-height:2}@media screen and (min-width: 1380px){figcaption{margin-left:128px}}hr{border:none;border-bottom:1px solid #ddd;margin-bottom:23px}pre mark{background:none;border-bottom:1px solid;color:inherit}.text-banner{text-align:center;text-wrap:balance}s,del{opacity:0.75}ins{border-bottom:none;background-color:#ffc}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}ol ul{list-style-type:disc}a{text-decoration:none;color:#f43059;text-decoration-skip:ink}a:hover,a:active,a:focus{text-decoration:underline}.link-secret{color:inherit;font-weight:400}.link-secret:hover,.link-secret:active,.link-secret:focus{color:#f43059;text-decoration:none}@supports (position: sticky){@media screen and (min-height: 75em){:target{scroll-margin-top:120px}}}li>ul,li>ol{margin-bottom:0}img{max-width:100%;font-style:italic;vertical-align:middle;height:auto;background-repeat:no-repeat;background-size:cover;shape-margin:0.75rem}video{max-width:100%;vertical-align:middle}q{font-style:italic;quotes:"‘" "’" "“" "”"}q:before{content:open-quote}q:after{content:close-quote}blockquote{margin-right:48px;margin-left:48px;font-style:italic;quotes:"“" "”"}blockquote p{text-indent:-0.45em}blockquote p:before{content:open-quote}blockquote p:after{content:no-close-quote}blockquote p:last-of-type{margin-bottom:0}blockquote p:last-of-type:after{content:close-quote}blockquote q{quotes:"‘" "’"}blockquote q:before{content:open-quote}blockquote q:after{content:close-quote}label{font-size:12px;font-size:.75rem;line-height:2;font-weight:600;cursor:pointer}table{width:100%;font-size:12px;font-size:.75rem;line-height:2;font-variant-numeric:tabular-nums}@media screen and (min-width: 45em){table{font-size:16px;font-size:1rem;line-height:1.5}}th{font-weight:600;text-align:left}th,td{padding:6px}details+details{padding-top:24px;border-top:1px solid #ddd}summary{color:#f43059;font-weight:600;cursor:pointer;text-decoration:none}summary:hover,summary:focus,[open]>summary{text-decoration:underline}.wrapper{max-width:1100px;margin:0 auto;padding-right:12px;padding-left:12px}@media screen and (min-width: 45em){.wrapper{padding-right:24px;padding-left:24px}}.wrapper--wide{max-width:1280px}.wrapper--unconstrained{max-width:none}.btn{display:inline-block;vertical-align:middle;font:inherit;text-align:center;margin:0;cursor:pointer;overflow:visible;padding:10px 22px;background-color:#f43059;border:2px solid #f43059;border-radius:3px}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding:4px 10px}.btn--full{width:100%}.layout{list-style:none;margin:0;padding:0;margin-left:-24px}.layout__item{display:inline-block;padding-left:24px;vertical-align:top;width:100%}.layout--large{margin-left:-48px}.layout--large>.layout__item{padding-left:48px}.layout--middle>.layout__item{vertical-align:middle}.layout--bottom>.layout__item{vertical-align:bottom}.box{display:block;padding:24px}.box>:last-child{margin-bottom:0}.media{display:block}.media__img{float:left;margin-right:24px}.media__img>img{display:block}.media__body{overflow:hidden;display:block}.media__body,.media__body>:last-child{margin-bottom:0}.flag{display:table;width:100%}.flag__img,.flag__body{display:table-cell;vertical-align:middle}.flag__img{padding-right:24px}.flag__img>img{display:block;max-width:none}.flag__body{width:100%}.flag__body,.flag__body>:last-child{margin-bottom:0}.flag--rev{direction:rtl}.flag--rev>.flag__img,.flag--rev>.flag__body{direction:ltr}.flag--rev>.flag__img{padding-right:0;padding-left:24px}@media screen and (max-width: 479px){.flag--responsive{direction:ltr}.flag--responsive,.flag--responsive>.flag__img,.flag--responsive>.flag__body{display:block}.flag--responsive>.flag__img{padding-right:0;padding-left:0;margin-bottom:24px}}.flag__img{white-space:nowrap}.list-ui,.list-ui__item,.list-ui>li{border:0 solid #ddd}.list-ui{margin:0;padding:0;list-style:none;border-top-width:1px}.list-ui__item,.list-ui>li{padding:24px;border-bottom-width:1px}.list-ui--small>.list-ui__item,.list-ui.list-ui--small>li{padding:12px}.list-ui__title{display:block;font-size:12px;font-size:.75rem;line-height:2;font-weight:600;color:#999;margin-bottom:0}.o-list-inline{margin-left:0}.o-list-inline>li{display:inline-block}.o-list-inline--spaced>li{padding:0.75rem}.page-head{border-style:solid;border-width:6px 0 1px;border-top-color:#f43059;border-bottom-color:#f2f2f2;padding-top:12px;padding-bottom:12px;background-color:#fff}@media screen and (min-width: 45em){.page-head{padding-top:24px;padding-bottom:24px}}@supports (position: sticky){@media screen and (min-height: 75em){.page-head{position:sticky;top:0;background-color:rgba(255,255,255,0.95);z-index:2}}}.band{padding-top:24px;padding-bottom:24px;content-visibility:auto;contain-intrinsic-size:1px 1000px}@media screen and (min-width: 64em){.band{padding-top:48px;padding-bottom:48px}}.band--large{padding:48px}.band--highlight{background-color:#fff}.band--tint{background-color:#f2f2f2}.band--dark{background-color:#333}.band--dark,.band--dark a,.band--dark code{color:#fff}.band--attention{background-color:#f43059;color:#fff}.band__title{text-align:center;font-size:16px;font-size:1rem;line-height:1.5;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);-webkit-font-smoothing:auto}.promo{padding-bottom:0;text-align:center}@media screen and (min-width: 64em){.promo{padding-bottom:24px}}.promo__links{text-align:center}@media screen and (min-width: 45em){.promo__links-spacer{padding-right:1.5em;padding-left:1.5em}}.page-head--masthead .site-nav{position:absolute;top:0;right:12px;left:12px}@media screen and (min-width: 45em){.page-head--masthead .site-nav{top:0;right:24px;left:24px}}.site-nav__home-link{display:block;float:left;position:relative;z-index:3;will-change:transform}@media screen and (min-width: 45em){.site-nav__home-link{position:static}}.site-nav__logo{display:block}.site-nav__logo-fill{fill:#f43059;transition:fill 0.2s}.site-nav.is-open .site-nav__logo-fill{fill:#fff}.page-head--masthead .site-nav__logo-fill{fill:#fff}.site-nav__opener,.site-nav__closer{font-size:12px;font-size:.75rem;line-height:2;line-height:64px;text-transform:uppercase;font-weight:bold;padding:0;background:none;border:none}.site-nav__opener:hover,.site-nav__closer:hover,.site-nav__opener:focus,.site-nav__closer:focus{text-decoration:none}.site-nav__opener{color:#f43059;float:right}.page-head--masthead .site-nav__opener{color:#fff}@media screen and (min-width: 45em){.site-nav__opener{display:none}}.site-nav__list{margin:0;padding:0;list-style:none;position:fixed;top:54px;right:0;bottom:0;left:0;z-index:2;overflow:scroll;transform:translateX(100%);transition:0.2s;will-change:transform;background-color:#333;contain:layout;content-visibility:hidden}@supports (backdrop-filter: blur(5px)){.site-nav__list{background-color:rgba(51,51,51,0.8);backdrop-filter:blur(5px)}}.is-open .site-nav__list{content-visibility:visible;transform:none}@media screen and (min-width: 45em){.site-nav__list{content-visibility:visible;position:relative;top:auto;right:auto;bottom:auto;left:auto;float:right;background-color:transparent;overflow:visible;backdrop-filter:none;transform:none}}.site-nav__item{border-bottom:1px solid rgba(255,255,255,0.1)}.site-nav__item:last-child{border-bottom:none}@media screen and (min-width: 45em){.site-nav__item{position:relative;border-bottom:none;float:left}.site-nav__item.has-sub-menu>a{transition:0.2s}.site-nav__item.has-sub-menu:hover>a{transform:translateY(-2px)}.site-nav__sub-menu .site-nav__item{float:none}.site-nav__sub-menu .site-nav__item+.site-nav__item{border-top:1px solid #ddd}}.site-nav__item--closer{text-align:right}@media screen and (min-width: 45em){.site-nav__item--closer{display:none}}.site-nav__closer{width:100%;text-align:right}.site-nav__closer.site-nav__closer.site-nav__closer:hover,.site-nav__closer.site-nav__closer.site-nav__closer:active,.site-nav__closer.site-nav__closer.site-nav__closer:focus{text-decoration:none}.site-nav__sub-menu{list-style:none;margin-left:0;padding-left:24px}@media screen and (min-width: 45em){.site-nav__sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-10px);z-index:1;padding-left:0;text-align:center;white-space:nowrap;background-color:#fff;border-radius:3px;border:1px solid #ddd;box-shadow:3px 3px 0 rgba(0,0,0,0.1);visibility:hidden;opacity:0;transition:0.333s}.site-nav__item:hover .site-nav__sub-menu{opacity:1;visibility:visible;will-change:opacity;transform:translateX(-50%) translateY(0)}.site-nav__sub-menu:before,.site-nav__sub-menu:after{content:"";position:absolute;bottom:100%;left:50%}.site-nav__sub-menu:before{border:12px solid transparent;border-bottom-color:#ddd;margin-left:-12px}.site-nav__sub-menu:after{border:11px solid transparent;border-bottom-color:#fff;margin-left:-11px}}.site-nav__link{display:block;padding:12px;color:#fff}.site-nav__link:hover,.site-nav__link:active,.site-nav__link:focus{text-decoration:underline;color:#fff}@media screen and (min-width: 45em){.site-nav__link{line-height:64px;color:#333;padding-top:0;padding-bottom:0}.site-nav__link:hover,.site-nav__link:active,.site-nav__link:focus{color:#f43059;text-decoration:none}}.page-head--masthead .site-nav__link,.page-head--masthead .site-nav__link:hover,.page-head--masthead .site-nav__link:active,.page-head--masthead .site-nav__link:focus{color:#fff}.page-head--masthead .site-nav__link:hover,.page-head--masthead .site-nav__link:active,.page-head--masthead .site-nav__link:focus{text-decoration:underline}.page--about .site-nav__about,.page--case-studies .site-nav__case-studies,.page--speaking .site-nav__speaking,.page--services .site-nav__services,.page--contact .site-nav__contact{color:#fff;text-decoration:underline}@media screen and (min-width: 45em){.page--about .site-nav__about,.page--case-studies .site-nav__case-studies,.page--speaking .site-nav__speaking,.page--services .site-nav__services,.page--contact .site-nav__contact{color:#f43059;position:relative;text-decoration:none}.page--about .site-nav__about:before,.page--case-studies .site-nav__case-studies:before,.page--speaking .site-nav__speaking:before,.page--services .site-nav__services:before,.page--contact .site-nav__contact:before,.page--about .site-nav__about:after,.page--case-studies .site-nav__case-studies:after,.page--speaking .site-nav__speaking:after,.page--services .site-nav__services:after,.page--contact .site-nav__contact:after{content:"";position:absolute;left:50%;pointer-events:none;border-style:solid;border-color:transparent}.page--about .site-nav__about:before,.page--case-studies .site-nav__case-studies:before,.page--speaking .site-nav__speaking:before,.page--services .site-nav__services:before,.page--contact .site-nav__contact:before{border-width:12px;border-bottom-color:#f2f2f2;margin-left:-12px;bottom:-24px}.page--about .site-nav__about:after,.page--case-studies .site-nav__case-studies:after,.page--speaking .site-nav__speaking:after,.page--services .site-nav__services:after,.page--contact .site-nav__contact:after{border-width:11px;border-bottom-color:#f9f9f9;margin-left:-11px;bottom:-25px}}.page--workshops .site-nav__workshops,.page--code-reviews .site-nav__code-reviews,.page--consultancy .site-nav__consultancy,.page--downloads .site-nav__downloads,.page--sentinel .site-nav__sentinel,.page--masterclasses .site-nav__masterclasses{text-decoration:underline}@media screen and (min-width: 45em){.page--workshops .site-nav__workshops,.page--code-reviews .site-nav__code-reviews,.page--consultancy .site-nav__consultancy,.page--downloads .site-nav__downloads,.page--sentinel .site-nav__sentinel,.page--masterclasses .site-nav__masterclasses{text-decoration:none;color:#f43059}}.page--home .site-nav__home{text-decoration:underline}.site-nav__sub-link{display:block;padding:12px;color:#fff}.site-nav__sub-link:hover,.site-nav__sub-link:active,.site-nav__sub-link:focus{text-decoration:underline}@media screen and (min-width: 45em){.site-nav__sub-link{font-weight:400;color:#333}.site-nav__sub-link:hover,.site-nav__sub-link:active,.site-nav__sub-link:focus{text-decoration:none;color:#f43059}}.c-nav-secondary{margin-left:0;list-style:none;display:table;table-layout:fixed;width:100%;text-align:center;font-size:12px;font-size:.75rem;line-height:1.833333333;border:1px solid #999;border-radius:3px}.c-nav-secondary__item{display:table-cell}.c-nav-secondary__item+.c-nav-secondary__item{border-left:1px solid #999}.c-nav-secondary__link{display:block;padding-top:12px;padding-bottom:12px;color:#333}.c-nav-secondary__link.is-current{color:#fff;background-color:#999;text-decoration:none;cursor:default;pointer-events:none}.btn{font-weight:600;transition:0.2s;position:relative;will-change:transform;z-index:1}.btn:hover,.btn:active,.btn:focus{background-color:#e50c39;border-color:#e50c39;transform:translateY(-1px)}.btn::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 4px 0 #000;opacity:0;will-change:opacity}.btn:hover::before,.btn:active::before,.btn:focus::before{opacity:0.1}.btn.btn.btn::after{display:none}.btn--secondary{background:none;color:#f43059}.btn--secondary:hover,.btn--secondary:active,.btn--secondary:focus{background:none;color:#e50c39}.btn--positive{font-weight:400}.btn--positive,.btn--positive:hover,.btn--positive:active,.btn--positive:focus{background-color:#3f990f;border-color:#3f990f}.btn--negative{font-weight:400}.btn--negative,.btn--negative:hover,.btn--negative:active,.btn--negative:focus{background-color:#9f102e;border-color:#9f102e}.box{border-radius:3px}.box--highlight{background-color:#fff;border-bottom:1px solid #ddd}.box--tint{background-color:#f2f2f2}.post__date{display:block;color:#999;margin-bottom:0}.post__title{margin-bottom:0}.post__title>a{font-weight:400}.pull-quote{font-size:18px;font-size:1.125rem;line-height:1.333333333;font-style:normal;color:#666;padding-left:12px;border-left:12px solid #f43059;border-radius:3px;margin-right:0;margin-left:0}@media screen and (min-width: 45em){.pull-quote{margin-left:-24px}}.pull-quote__source{font-style:normal}.pull-quote--banner{max-width:27em;padding:0 12px;text-indent:0;border-left:none;margin:0 auto;color:#333;font-style:normal}@media screen and (min-width: 45em){.pull-quote--banner{font-size:32px;font-size:2rem;line-height:1.4}}.pull-quote--context{font-size:20px;font-size:1.25rem;line-height:1.2;font-style:italic}@media screen and (min-width: 45em){.pull-quote--context{width:50%;float:left;margin-right:24px;padding-right:12px;padding-left:0;border-right:12px solid #f43059;border-left:none;text-align:right}}.pull-quote--context-alt{font-size:20px;font-size:1.25rem;line-height:1.2;font-style:italic}@media screen and (min-width: 45em){.pull-quote--context-alt{width:50%;float:right;margin-left:24px}}.annotate{position:relative}.annotate__image{display:block;border-radius:3px}.annotate__list{list-style:none;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.annotate__item{position:absolute;width:5%;height:5%;overflow:hidden;white-space:nowrap;text-indent:100%;cursor:help;border-width:2px;border-style:solid;border-color:transparent;border-radius:3px;transition:0.2s}.annotate:hover .annotate__item{border-color:#ccc;border-color:rgba(255,255,255,0.5)}.annotate:hover .annotate__item:hover{z-index:1;border-color:#fff}.annotate__caption{position:relative;z-index:1}.adpacks{min-height:216px}.carbon-wrap{display:block;text-align:center}.carbon-img{display:block;margin-bottom:6px}.carbon-img>img{border-radius:3px}.carbon-img:hover+.carbon-text{text-decoration:underline}.carbon-text{overflow:hidden;display:block;color:#666;text-wrap:balance}.carbon-poweredby{display:block;text-align:center;font-size:12px;font-size:.75rem;line-height:2;text-transform:uppercase;color:#999;letter-spacing:0.01em}.c-label{display:block}.c-input-text{border:2px solid #ddd;min-width:25ch;outline:none;transition:border-color 0.2s;padding:11px 6px;vertical-align:middle;border-radius:3px}.c-input-text:active,.c-input-text:focus{border-color:#f43059}.c-newsletter{text-align:center}.c-newsletter__title{font-size:16px;font-size:1rem;line-height:1.5;font-weight:600;color:inherit;margin-bottom:0}.c-newsletter__text{font-size:12px;font-size:.75rem;line-height:2}.c-newsletter__email{width:100%;margin-bottom:24px;text-align:center}@media screen and (min-width: 45em){.c-newsletter__email{width:auto;margin-bottom:0;min-width:40ch}}.c-newsletter__submit{width:100%}@media screen and (min-width: 45em){.c-newsletter__submit{width:auto}}.c-video{position:relative;padding-bottom:56.25%}@media screen and (min-width: 1380px){.c-video{padding-bottom:75%}}.c-video__media{position:absolute;top:0;left:0;width:100%;height:100%}.footnotes{font-size:12px;font-size:.75rem;line-height:2}.footnotes p{margin-bottom:0}.twitter-tweet-rendered{margin-top:0 !important;margin-right:auto;margin-bottom:24px !important;margin-left:auto}.c-youtube-embed{max-width:100%}.c-youtube-embed,.c-spotify-embed{display:block;margin-right:auto;margin-bottom:24px;margin-left:auto}.c-highlight{padding:24px;background-color:#ffc}.c-highlight,.c-highlight a{color:#36393a}.c-highlight::selection,.c-highlight ::selection{color:#ffc;background-color:#36393a}.c-highlight a{text-decoration:underline}.c-highlight>:last-child{margin-bottom:0}.c-highlight--small{padding:12px}.c-highlight--ribbon{text-align:center}.s-post p,.s-post li{text-wrap:pretty}.s-post thead{border-bottom:2px solid #ddd}.s-post tbody tr:nth-of-type(even){background-color:rgba(0,0,0,0.05)}.s-post iframe{max-width:100%;width:100%;border:none;margin-bottom:24px}.s-post :target{background-color:#ffc}.s-post>h2:nth-of-type(2) ~ p{content-visibility:auto;contain-intrinsic-size:1px 250px}.s-post a[href^="https://csswizardry.com"]::after,.s-post a[href^="/"]::after{content:"";display:inline-block;width:1ch;height:1ch;background-image:url(/icon.png);background-size:cover;margin-left:0.1ch;vertical-align:super}.s-post a:visited:not(.btn){color:#6a0dad}.clearfix:after,.box:after,.media:after,.site-nav:after{content:"";display:table;clear:both}.one-whole{width:100% !important}.one-half,.two-quarters,.three-sixths,.four-eighths,.five-tenths,.six-twelfths{width:50% !important}.one-third,.two-sixths,.three-ninths,.four-twelfths{width:33.3333333% !important}.two-thirds,.four-sixths,.six-ninths,.eight-twelfths{width:66.6666666% !important}.one-quarter,.two-eighths,.three-twelfths{width:25% !important}.three-quarters,.six-eighths,.nine-twelfths{width:75% !important}.one-fifth,.two-tenths{width:20% !important}.two-fifths,.four-tenths{width:40% !important}.three-fifths,.six-tenths{width:60% !important}.four-fifths,.eight-tenths{width:80% !important}.one-sixth,.two-twelfths{width:16.6666666% !important}.five-sixths,.ten-twelfths{width:83.3333333% !important}.one-eighth{width:12.5% !important}.three-eighths{width:37.5% !important}.five-eighths{width:62.5% !important}.seven-eighths{width:87.5% !important}.one-ninth{width:11.1111111% !important}.two-ninths{width:22.2222222% !important}.four-ninths{width:44.4444444% !important}.five-ninths{width:55.5555555% !important}.seven-ninths{width:77.7777777% !important}.eight-ninths{width:88.8888888% !important}.one-tenth{width:10% !important}.three-tenths{width:30% !important}.seven-tenths{width:70% !important}.nine-tenths{width:90% !important}.one-twelfth{width:8.3333333% !important}.five-twelfths{width:41.6666666% !important}.seven-twelfths{width:58.3333333% !important}.eleven-twelfths{width:91.6666666% !important}@media screen and (min-width: 45em){.lap-and-up-one-half{width:50%}.lap-and-up-one-quarter{width:25%}}@media screen and (min-width: 64em){.desk-one-third{width:33.333333333%}.desk-two-thirds{width:66.666666666%}.desk-three-fifths{width:60%}.desk-three-tenths{width:30%}.desk-push-one-tenth{position:relative;left:10%}}.m{margin:24px !important}.mt{margin-top:24px !important}.mr{margin-right:24px !important}.mb{margin-bottom:24px !important}.ml{margin-left:24px !important}.mh{margin-right:24px !important;margin-left:24px !important}.mv{margin-top:24px !important;margin-bottom:24px !important}.m\+\+{margin:96px !important}.mt\+\+{margin-top:96px !important}.mr\+\+{margin-right:96px !important}.mb\+\+{margin-bottom:96px !important}.ml\+\+{margin-left:96px !important}.mh\+\+{margin-right:96px !important;margin-left:96px !important}.mv\+\+{margin-top:96px !important;margin-bottom:96px !important}.m0{margin:0 !important}.mt0{margin-top:0 !important}.mr0{margin-right:0 !important}.mb0{margin-bottom:0 !important}.ml0{margin-left:0 !important}.mh0{margin-right:0 !important;margin-left:0 !important}.mv0{margin-top:0 !important;margin-bottom:0 !important}.hide{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}@media screen and (max-width: 44.9375em){.hide-palm{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 45em) and (max-width: 63.9375em){.hide-lap{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 45em){.hide-lap-and-up{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (max-width: 63.9375em){.hide-portable{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 64em){.hide-desk{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}::selection{color:#fff;background-color:#f43059}.u-text-prominent{font-size:22px;font-size:1.375rem;line-height:1.090909091;font-weight:600;text-align:center}.u-color-brand{color:#f43059 !important}.u-color-positive{color:#3f990f !important}.u-color-negative{color:#9f102e !important} + *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,figure,table,th,td,caption,hr{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}u,ins{text-decoration:none}ins{border-bottom:1px solid}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,p,address,hr,table,fieldset,figure,pre,details,[open]>summary,.page-head,.promo__block{margin-bottom:24px;margin-bottom:1.5rem}ul,ol,dd{margin-left:48px;margin-left:3rem}html{font-size:1em;line-height:1.5;background-color:#f9f9f9;color:#333;overflow-y:scroll;min-height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@view-transition{navigation:auto}html{font-family:system-ui,sans-serif;font-weight:400;scroll-behavior:smooth}h1,.alpha{font-size:36px;font-size:2.25rem;line-height:1.333333333}h2,.beta{font-size:30px;font-size:1.875rem;line-height:1.6}h3,.gamma{font-size:24px;font-size:1.5rem;line-height:1}h4,.delta{font-size:20px;font-size:1.25rem;line-height:1.2}h5,.epsilon{font-size:16px;font-size:1rem;line-height:1.5}h6,.zeta{font-size:14px;font-size:.875rem;line-height:1.714285714}h1,h2,h3,h4,h5,h6{font-weight:300;color:#f43059;text-wrap:balance}@media screen and (min-width: 45em){h1{font-size:72px;font-size:4.5rem;line-height:1;font-weight:900;border-left:24px solid #f43059;border-radius:3px;margin-left:-36px;padding-left:12px}}h2:has(>img){line-height:1}.heading{display:block;font-size:22px;font-size:1.375rem;line-height:1.090909091;color:#f43059}.heading-sub{display:block;font-size:16px;font-size:1rem;line-height:1.5;font-weight:600;margin-bottom:0;color:#333}a,strong,b,dt{font-weight:600}p{text-wrap:pretty}code,kbd,samp{color:#859900;font-family:"Operator Mono", Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;font-style:normal;word-break:break-word}a:hover code,a:active code,a:focus code,a:hover kbd,a:active kbd,a:focus kbd,a:hover samp,a:active samp,a:focus samp{text-decoration:underline}pre{white-space:pre;word-wrap:normal;overflow:auto;padding:12px;background-color:#333;border-radius:3px}@media screen and (min-width: 45em){pre{margin-right:-12px;margin-left:-12px}}pre,pre code,pre kbd,pre samp{color:#fff;word-break:keep-all}li pre{margin-top:1.5rem}var{font-family:Hoefler Text, Georgia, serif;line-height:1;font-style:italic}figure{counter-increment:figure}@media screen and (min-width: 1380px){figure{margin-left:-128px}}figure>img{border-radius:3px}figcaption{font-size:12px;font-size:.75rem;line-height:2}@media screen and (min-width: 1380px){figcaption{margin-left:128px}}figcaption::before{content:"Fig. " counter(figure) ": ";font-weight:bold}hr{border:none;border-bottom:1px solid #ddd;margin-bottom:23px}pre mark{background:none;border-bottom:1px solid;color:inherit}.text-banner{text-align:center;text-wrap:balance}s,del{opacity:0.75}ins{border-bottom:none;background-color:#ffc}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}ol ul{list-style-type:disc}a{text-decoration:none;color:#f43059;text-decoration-skip:ink}a:hover,a:active,a:focus{text-decoration:underline}.link-secret{color:inherit;font-weight:400}.link-secret:hover,.link-secret:active,.link-secret:focus{color:#f43059;text-decoration:none}@supports (position: sticky){@media screen and (min-height: 75em){:target{scroll-margin-top:120px}}}li>ul,li>ol{margin-bottom:0}img{max-width:100%;font-style:italic;vertical-align:middle;height:auto;background-repeat:no-repeat;background-size:cover;shape-margin:0.75rem}video{max-width:100%;vertical-align:middle}q{font-style:italic;quotes:"‘" "’" "“" "”"}q:before{content:open-quote}q:after{content:close-quote}blockquote{margin-right:48px;margin-left:48px;font-style:italic;quotes:"“" "”"}blockquote p{text-indent:-0.45em}blockquote p:before{content:open-quote}blockquote p:after{content:no-close-quote}blockquote p:last-of-type{margin-bottom:0}blockquote p:last-of-type:after{content:close-quote}blockquote q{quotes:"‘" "’"}blockquote q:before{content:open-quote}blockquote q:after{content:close-quote}label{font-size:12px;font-size:.75rem;line-height:2;font-weight:600;cursor:pointer}table{width:100%;font-size:12px;font-size:.75rem;line-height:2;font-variant-numeric:tabular-nums}@media screen and (min-width: 45em){table{font-size:16px;font-size:1rem;line-height:1.5}}th{font-weight:600;text-align:left}th,td{padding:6px}details+details{padding-top:24px;border-top:1px solid #ddd}summary{color:#f43059;font-weight:600;cursor:pointer;text-decoration:none}summary:hover,summary:focus,[open]>summary{text-decoration:underline}.wrapper{max-width:1100px;margin:0 auto;padding-right:12px;padding-left:12px}@media screen and (min-width: 45em){.wrapper{padding-right:24px;padding-left:24px}}.wrapper--wide{max-width:1280px}.wrapper--unconstrained{max-width:none}.btn{display:inline-block;vertical-align:middle;font:inherit;text-align:center;margin:0;cursor:pointer;overflow:visible;padding:10px 22px;background-color:#f43059;border:2px solid #f43059;border-radius:3px}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding:4px 10px}.btn--full{width:100%}.layout{list-style:none;margin:0;padding:0;margin-left:-24px}.layout__item{display:inline-block;padding-left:24px;vertical-align:top;width:100%}.layout--large{margin-left:-48px}.layout--large>.layout__item{padding-left:48px}.layout--middle>.layout__item{vertical-align:middle}.layout--bottom>.layout__item{vertical-align:bottom}.box{display:block;padding:24px}.box>:last-child{margin-bottom:0}.media{display:block}.media__img{float:left;margin-right:24px}.media__img>img{display:block}.media__body{overflow:hidden;display:block}.media__body,.media__body>:last-child{margin-bottom:0}.flag{display:table;width:100%}.flag__img,.flag__body{display:table-cell;vertical-align:middle}.flag__img{padding-right:24px}.flag__img>img{display:block;max-width:none}.flag__body{width:100%}.flag__body,.flag__body>:last-child{margin-bottom:0}.flag--rev{direction:rtl}.flag--rev>.flag__img,.flag--rev>.flag__body{direction:ltr}.flag--rev>.flag__img{padding-right:0;padding-left:24px}@media screen and (max-width: 479px){.flag--responsive{direction:ltr}.flag--responsive,.flag--responsive>.flag__img,.flag--responsive>.flag__body{display:block}.flag--responsive>.flag__img{padding-right:0;padding-left:0;margin-bottom:24px}}.flag__img{white-space:nowrap}.list-ui,.list-ui__item,.list-ui>li{border:0 solid #ddd}.list-ui{margin:0;padding:0;list-style:none;border-top-width:1px}.list-ui__item,.list-ui>li{padding:24px;border-bottom-width:1px}.list-ui--small>.list-ui__item,.list-ui.list-ui--small>li{padding:12px}.list-ui__title{display:block;font-size:12px;font-size:.75rem;line-height:2;font-weight:600;color:#999;margin-bottom:0}.o-list-inline{margin-left:0}.o-list-inline>li{display:inline-block}.o-list-inline--spaced>li{padding:0.75rem}.page-head{border-style:solid;border-width:6px 0 1px;border-top-color:#f43059;border-bottom-color:#f2f2f2;padding-top:12px;padding-bottom:12px;background-color:#fff}@media screen and (min-width: 45em){.page-head{padding-top:24px;padding-bottom:24px}}@supports (position: sticky){@media screen and (min-height: 75em){.page-head{position:sticky;top:0;background-color:rgba(255,255,255,0.95);z-index:2}}}.band{padding-top:24px;padding-bottom:24px;content-visibility:auto;contain-intrinsic-size:1px 1000px}@media screen and (min-width: 64em){.band{padding-top:48px;padding-bottom:48px}}.band--large{padding:48px}.band--highlight{background-color:#fff}.band--tint{background-color:#f2f2f2}.band--dark{background-color:#333}.band--dark,.band--dark a,.band--dark code{color:#fff}.band--attention{background-color:#f43059;color:#fff}.band__title{text-align:center;font-size:16px;font-size:1rem;line-height:1.5;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);-webkit-font-smoothing:auto}.promo{padding-bottom:0;text-align:center}@media screen and (min-width: 64em){.promo{padding-bottom:24px}}.promo__links{text-align:center}@media screen and (min-width: 45em){.promo__links-spacer{padding-right:1.5em;padding-left:1.5em}}.page-head--masthead .site-nav{position:absolute;top:0;right:12px;left:12px}@media screen and (min-width: 45em){.page-head--masthead .site-nav{top:0;right:24px;left:24px}}.site-nav__home-link{display:block;float:left;position:relative;z-index:3;will-change:transform}@media screen and (min-width: 45em){.site-nav__home-link{position:static}}.site-nav__logo{display:block}.site-nav__logo-fill{fill:#f43059;transition:fill 0.2s}.site-nav.is-open .site-nav__logo-fill{fill:#fff}.page-head--masthead .site-nav__logo-fill{fill:#fff}.site-nav__opener,.site-nav__closer{font-size:12px;font-size:.75rem;line-height:2;line-height:64px;text-transform:uppercase;font-weight:bold;padding:0;background:none;border:none}.site-nav__opener:hover,.site-nav__closer:hover,.site-nav__opener:focus,.site-nav__closer:focus{text-decoration:none}.site-nav__opener{color:#f43059;float:right}.page-head--masthead .site-nav__opener{color:#fff}@media screen and (min-width: 45em){.site-nav__opener{display:none}}.site-nav__list{margin:0;padding:0;list-style:none;position:fixed;top:54px;right:0;bottom:0;left:0;z-index:2;overflow:scroll;transform:translateX(100%);transition:0.2s;will-change:transform;background-color:#333;contain:layout;content-visibility:hidden}@supports (backdrop-filter: blur(5px)){.site-nav__list{background-color:rgba(51,51,51,0.8);backdrop-filter:blur(5px)}}.is-open .site-nav__list{content-visibility:visible;transform:none}@media screen and (min-width: 45em){.site-nav__list{content-visibility:visible;position:relative;top:auto;right:auto;bottom:auto;left:auto;float:right;background-color:transparent;overflow:visible;backdrop-filter:none;transform:none}}.site-nav__item{border-bottom:1px solid rgba(255,255,255,0.1)}.site-nav__item:last-child{border-bottom:none}@media screen and (min-width: 45em){.site-nav__item{position:relative;border-bottom:none;float:left}.site-nav__item.has-sub-menu>a{transition:0.2s}.site-nav__item.has-sub-menu:hover>a{transform:translateY(-2px)}.site-nav__sub-menu .site-nav__item{float:none}.site-nav__sub-menu .site-nav__item+.site-nav__item{border-top:1px solid #ddd}}.site-nav__item--closer{text-align:right}@media screen and (min-width: 45em){.site-nav__item--closer{display:none}}.site-nav__closer{width:100%;text-align:right}.site-nav__closer.site-nav__closer.site-nav__closer:hover,.site-nav__closer.site-nav__closer.site-nav__closer:active,.site-nav__closer.site-nav__closer.site-nav__closer:focus{text-decoration:none}.site-nav__sub-menu{list-style:none;margin-left:0;padding-left:24px}@media screen and (min-width: 45em){.site-nav__sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-10px);z-index:1;padding-left:0;text-align:center;white-space:nowrap;background-color:#fff;border-radius:3px;border:1px solid #ddd;box-shadow:3px 3px 0 rgba(0,0,0,0.1);visibility:hidden;opacity:0;transition:0.333s}.site-nav__item:hover .site-nav__sub-menu{opacity:1;visibility:visible;will-change:opacity;transform:translateX(-50%) translateY(0)}.site-nav__sub-menu:before,.site-nav__sub-menu:after{content:"";position:absolute;bottom:100%;left:50%}.site-nav__sub-menu:before{border:12px solid transparent;border-bottom-color:#ddd;margin-left:-12px}.site-nav__sub-menu:after{border:11px solid transparent;border-bottom-color:#fff;margin-left:-11px}}.site-nav__link{display:block;padding:12px;color:#fff}.site-nav__link:hover,.site-nav__link:active,.site-nav__link:focus{text-decoration:underline;color:#fff}@media screen and (min-width: 45em){.site-nav__link{line-height:64px;color:#333;padding-top:0;padding-bottom:0}.site-nav__link:hover,.site-nav__link:active,.site-nav__link:focus{color:#f43059;text-decoration:none}}.page-head--masthead .site-nav__link,.page-head--masthead .site-nav__link:hover,.page-head--masthead .site-nav__link:active,.page-head--masthead .site-nav__link:focus{color:#fff}.page-head--masthead .site-nav__link:hover,.page-head--masthead .site-nav__link:active,.page-head--masthead .site-nav__link:focus{text-decoration:underline}.page--about .site-nav__about,.page--case-studies .site-nav__case-studies,.page--speaking .site-nav__speaking,.page--services .site-nav__services,.page--contact .site-nav__contact{color:#fff;text-decoration:underline}@media screen and (min-width: 45em){.page--about .site-nav__about,.page--case-studies .site-nav__case-studies,.page--speaking .site-nav__speaking,.page--services .site-nav__services,.page--contact .site-nav__contact{color:#f43059;position:relative;text-decoration:none}.page--about .site-nav__about:before,.page--case-studies .site-nav__case-studies:before,.page--speaking .site-nav__speaking:before,.page--services .site-nav__services:before,.page--contact .site-nav__contact:before,.page--about .site-nav__about:after,.page--case-studies .site-nav__case-studies:after,.page--speaking .site-nav__speaking:after,.page--services .site-nav__services:after,.page--contact .site-nav__contact:after{content:"";position:absolute;left:50%;pointer-events:none;border-style:solid;border-color:transparent}.page--about .site-nav__about:before,.page--case-studies .site-nav__case-studies:before,.page--speaking .site-nav__speaking:before,.page--services .site-nav__services:before,.page--contact .site-nav__contact:before{border-width:12px;border-bottom-color:#f2f2f2;margin-left:-12px;bottom:-24px}.page--about .site-nav__about:after,.page--case-studies .site-nav__case-studies:after,.page--speaking .site-nav__speaking:after,.page--services .site-nav__services:after,.page--contact .site-nav__contact:after{border-width:11px;border-bottom-color:#f9f9f9;margin-left:-11px;bottom:-25px}}.page--workshops .site-nav__workshops,.page--code-reviews .site-nav__code-reviews,.page--consultancy .site-nav__consultancy,.page--downloads .site-nav__downloads,.page--sentinel .site-nav__sentinel,.page--masterclasses .site-nav__masterclasses{text-decoration:underline}@media screen and (min-width: 45em){.page--workshops .site-nav__workshops,.page--code-reviews .site-nav__code-reviews,.page--consultancy .site-nav__consultancy,.page--downloads .site-nav__downloads,.page--sentinel .site-nav__sentinel,.page--masterclasses .site-nav__masterclasses{text-decoration:none;color:#f43059}}.page--home .site-nav__home{text-decoration:underline}.site-nav__sub-link{display:block;padding:12px;color:#fff}.site-nav__sub-link:hover,.site-nav__sub-link:active,.site-nav__sub-link:focus{text-decoration:underline}@media screen and (min-width: 45em){.site-nav__sub-link{font-weight:400;color:#333}.site-nav__sub-link:hover,.site-nav__sub-link:active,.site-nav__sub-link:focus{text-decoration:none;color:#f43059}}.c-nav-secondary{margin-left:0;list-style:none;display:table;table-layout:fixed;width:100%;text-align:center;font-size:12px;font-size:.75rem;line-height:1.833333333;border:1px solid #999;border-radius:3px}.c-nav-secondary__item{display:table-cell}.c-nav-secondary__item+.c-nav-secondary__item{border-left:1px solid #999}.c-nav-secondary__link{display:block;padding-top:12px;padding-bottom:12px;color:#333}.c-nav-secondary__link.is-current{color:#fff;background-color:#999;text-decoration:none;cursor:default;pointer-events:none}.btn{font-weight:600;transition:0.2s;position:relative;will-change:transform;z-index:1}.btn:hover,.btn:active,.btn:focus{background-color:#e50c39;border-color:#e50c39;transform:translateY(-1px)}.btn::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 4px 0 #000;opacity:0;will-change:opacity}.btn:hover::before,.btn:active::before,.btn:focus::before{opacity:0.1}.btn.btn.btn::after{display:none}.btn--secondary{background:none;color:#f43059}.btn--secondary:hover,.btn--secondary:active,.btn--secondary:focus{background:none;color:#e50c39}.btn--positive{font-weight:400}.btn--positive,.btn--positive:hover,.btn--positive:active,.btn--positive:focus{background-color:#3f990f;border-color:#3f990f}.btn--negative{font-weight:400}.btn--negative,.btn--negative:hover,.btn--negative:active,.btn--negative:focus{background-color:#9f102e;border-color:#9f102e}.box{border-radius:3px}.box--highlight{background-color:#fff;border-bottom:1px solid #ddd}.box--tint{background-color:#f2f2f2}.post__date{display:block;color:#999;margin-bottom:0}.post__title{margin-bottom:0}.post__title>a{font-weight:400}.pull-quote{font-size:18px;font-size:1.125rem;line-height:1.333333333;font-style:normal;color:#666;padding-left:12px;border-left:12px solid #f43059;border-radius:3px;margin-right:0;margin-left:0}@media screen and (min-width: 45em){.pull-quote{margin-left:-24px}}.pull-quote__source{font-style:normal}.pull-quote--banner{max-width:27em;padding:0 12px;text-indent:0;border-left:none;margin:0 auto;color:#333;font-style:normal}@media screen and (min-width: 45em){.pull-quote--banner{font-size:32px;font-size:2rem;line-height:1.4}}.pull-quote--context{font-size:20px;font-size:1.25rem;line-height:1.2;font-style:italic}@media screen and (min-width: 45em){.pull-quote--context{width:50%;float:left;margin-right:24px;padding-right:12px;padding-left:0;border-right:12px solid #f43059;border-left:none;text-align:right}}.pull-quote--context-alt{font-size:20px;font-size:1.25rem;line-height:1.2;font-style:italic}@media screen and (min-width: 45em){.pull-quote--context-alt{width:50%;float:right;margin-left:24px}}.annotate{position:relative}.annotate__image{display:block;border-radius:3px}.annotate__list{list-style:none;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.annotate__item{position:absolute;width:5%;height:5%;overflow:hidden;white-space:nowrap;text-indent:100%;cursor:help;border-width:2px;border-style:solid;border-color:transparent;border-radius:3px;transition:0.2s}.annotate:hover .annotate__item{border-color:#ccc;border-color:rgba(255,255,255,0.5)}.annotate:hover .annotate__item:hover{z-index:1;border-color:#fff}.annotate__caption{position:relative;z-index:1}.adpacks{min-height:216px}.carbon-wrap{display:block;text-align:center}.carbon-img{display:block;margin-bottom:6px}.carbon-img>img{border-radius:3px}.carbon-img:hover+.carbon-text{text-decoration:underline}.carbon-text{overflow:hidden;display:block;color:#666;text-wrap:balance}.carbon-poweredby{display:block;text-align:center;font-size:12px;font-size:.75rem;line-height:2;text-transform:uppercase;color:#999;letter-spacing:0.01em}.c-label{display:block}.c-input-text{border:2px solid #ddd;min-width:25ch;outline:none;transition:border-color 0.2s;padding:11px 6px;vertical-align:middle;border-radius:3px}.c-input-text:active,.c-input-text:focus{border-color:#f43059}.c-newsletter{text-align:center}.c-newsletter__title{font-size:16px;font-size:1rem;line-height:1.5;font-weight:600;color:inherit;margin-bottom:0}.c-newsletter__text{font-size:12px;font-size:.75rem;line-height:2}.c-newsletter__email{width:100%;margin-bottom:24px;text-align:center}@media screen and (min-width: 45em){.c-newsletter__email{width:auto;margin-bottom:0;min-width:40ch}}.c-newsletter__submit{width:100%}@media screen and (min-width: 45em){.c-newsletter__submit{width:auto}}.c-video{position:relative;padding-bottom:56.25%}@media screen and (min-width: 1380px){.c-video{padding-bottom:75%}}.c-video__media{position:absolute;top:0;left:0;width:100%;height:100%}.footnotes{font-size:12px;font-size:.75rem;line-height:2}.footnotes p{margin-bottom:0}.twitter-tweet-rendered{margin-top:0 !important;margin-right:auto;margin-bottom:24px !important;margin-left:auto}.c-youtube-embed{max-width:100%}.c-youtube-embed,.c-spotify-embed{display:block;margin-right:auto;margin-bottom:24px;margin-left:auto}.c-highlight{padding:24px;background-color:#ffc}.c-highlight,.c-highlight a{color:#36393a}.c-highlight::selection,.c-highlight ::selection{color:#ffc;background-color:#36393a}.c-highlight a{text-decoration:underline}.c-highlight>:last-child{margin-bottom:0}.c-highlight--small{padding:12px}.c-highlight--ribbon{text-align:center}.s-post p,.s-post li{text-wrap:pretty}.s-post thead{border-bottom:2px solid #ddd}.s-post tbody tr:nth-of-type(even){background-color:rgba(0,0,0,0.05)}.s-post iframe{max-width:100%;width:100%;border:none;margin-bottom:24px}.s-post :target{background-color:#ffc}.s-post>h2:nth-of-type(2) ~ p{content-visibility:auto;contain-intrinsic-size:1px 250px}.s-post a[href^="https://csswizardry.com"]::after,.s-post a[href^="/"]::after{content:"";display:inline-block;width:1ch;height:1ch;background-image:url(/icon.png);background-size:cover;margin-left:0.1ch;vertical-align:super}.s-post a:visited:not(.btn){color:#6a0dad}.clearfix:after,.box:after,.media:after,.site-nav:after{content:"";display:table;clear:both}.one-whole{width:100% !important}.one-half,.two-quarters,.three-sixths,.four-eighths,.five-tenths,.six-twelfths{width:50% !important}.one-third,.two-sixths,.three-ninths,.four-twelfths{width:33.3333333% !important}.two-thirds,.four-sixths,.six-ninths,.eight-twelfths{width:66.6666666% !important}.one-quarter,.two-eighths,.three-twelfths{width:25% !important}.three-quarters,.six-eighths,.nine-twelfths{width:75% !important}.one-fifth,.two-tenths{width:20% !important}.two-fifths,.four-tenths{width:40% !important}.three-fifths,.six-tenths{width:60% !important}.four-fifths,.eight-tenths{width:80% !important}.one-sixth,.two-twelfths{width:16.6666666% !important}.five-sixths,.ten-twelfths{width:83.3333333% !important}.one-eighth{width:12.5% !important}.three-eighths{width:37.5% !important}.five-eighths{width:62.5% !important}.seven-eighths{width:87.5% !important}.one-ninth{width:11.1111111% !important}.two-ninths{width:22.2222222% !important}.four-ninths{width:44.4444444% !important}.five-ninths{width:55.5555555% !important}.seven-ninths{width:77.7777777% !important}.eight-ninths{width:88.8888888% !important}.one-tenth{width:10% !important}.three-tenths{width:30% !important}.seven-tenths{width:70% !important}.nine-tenths{width:90% !important}.one-twelfth{width:8.3333333% !important}.five-twelfths{width:41.6666666% !important}.seven-twelfths{width:58.3333333% !important}.eleven-twelfths{width:91.6666666% !important}@media screen and (min-width: 45em){.lap-and-up-one-half{width:50%}.lap-and-up-one-quarter{width:25%}}@media screen and (min-width: 64em){.desk-one-third{width:33.333333333%}.desk-two-thirds{width:66.666666666%}.desk-three-fifths{width:60%}.desk-three-tenths{width:30%}.desk-push-one-tenth{position:relative;left:10%}}.m{margin:24px !important}.mt{margin-top:24px !important}.mr{margin-right:24px !important}.mb{margin-bottom:24px !important}.ml{margin-left:24px !important}.mh{margin-right:24px !important;margin-left:24px !important}.mv{margin-top:24px !important;margin-bottom:24px !important}.m\+\+{margin:96px !important}.mt\+\+{margin-top:96px !important}.mr\+\+{margin-right:96px !important}.mb\+\+{margin-bottom:96px !important}.ml\+\+{margin-left:96px !important}.mh\+\+{margin-right:96px !important;margin-left:96px !important}.mv\+\+{margin-top:96px !important;margin-bottom:96px !important}.m0{margin:0 !important}.mt0{margin-top:0 !important}.mr0{margin-right:0 !important}.mb0{margin-bottom:0 !important}.ml0{margin-left:0 !important}.mh0{margin-right:0 !important;margin-left:0 !important}.mv0{margin-top:0 !important;margin-bottom:0 !important}.hide{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}@media screen and (max-width: 44.9375em){.hide-palm{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 45em) and (max-width: 63.9375em){.hide-lap{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 45em){.hide-lap-and-up{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (max-width: 63.9375em){.hide-portable{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 64em){.hide-desk{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}::selection{color:#fff;background-color:#f43059}.u-text-prominent{font-size:22px;font-size:1.375rem;line-height:1.090909091;font-weight:600;text-align:center}.u-color-brand{color:#f43059 !important}.u-color-positive{color:#3f990f !important}.u-color-negative{color:#9f102e !important} diff --git a/css/_base.type.scss b/css/_base.type.scss index 233ef8db..c4723a4f 100644 --- a/css/_base.type.scss +++ b/css/_base.type.scss @@ -149,6 +149,7 @@ var { * 2. Reindent figcaptions. */ figure { + counter-increment: figure; @media screen and (min-width: 1380px) { margin-left: -128px; /* [1] */ @@ -167,6 +168,11 @@ figure { margin-left: 128px; /* [2] */ } + &::before { + content: "Fig. " counter(figure) ": "; + font-weight: bold; + } + }