diff --git a/css/pico.classless.css b/css/pico.classless.css index 8e27e2f0..e59a97f7 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -9,35 +9,37 @@ [data-theme="light"], :root:not([data-theme="dark"]) { --background: #FFF; - --text: #415762; - --h1: #1b2a32; - --h2: #2c4049; - --h3: #415762; - --h4: #596e78; - --h5: #73848c; - --h6: #8a9ba3; - --primary: #1086c1; - --primary-hover: #086a9b; - --primary-focus: rgba(16, 134, 193, 0.125); + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); --primary-inverse: #FFF; --input-background: #FFF; - --input-border: #c8d2d8; + --input-border: #c8d1d8; --valid: #288a6a; --invalid: #b94646; --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c4049; - --muted-text: #7e8f98; - --muted-background: #edf1f3; - --muted-border: #edf1f3; + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; --card-background: #FFF; - --card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024); + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --code-background: #f3f5f7; - --code-border: #d5dde2; - --code-inlined: #edf1f3; - --code-color-1: #9f6060; - --code-color-2: #2f7ca2; - --table-border: rgba(237, 241, 243, 0.75); - --table-stripping: rgba(27, 42, 50, 0.033); + --code-inlined: #edf0f3; + --code-color-2: #a65980; + --code-color-3: #478085; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(27, 40, 50, 0.02); } /** @@ -46,36 +48,39 @@ */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10191e; - --text: #a2b1b9; - --h1: #edf1f3; - --h2: #d5dde2; - --h3: #bbc7ce; - --h4: #a2b1b9; - --h5: #8a9ba3; - --h6: #73848c; - --primary: #1086c1; - --primary-hover: #1aa2e6; - --primary-focus: rgba(16, 134, 193, 0.25); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; - --input-background: #10191e; - --input-border: #374b56; + --input-background: #10181e; + --input-border: #374956; --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.5); --mark-text: #FFF; - --muted-text: #73848c; - --muted-background: #10191e; - --muted-border: #23353e; - --card-background: #17242b; + --muted-text: #73828c; + --muted-background: #10181e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); - --code-background: #141f24; - --code-border: #23353e; - --code-inlined: rgba(65, 87, 98, 0.25); - --code-color-1: #ac5353; - --code-color-2: #4d91b3; - --table-border: #10191e; - --table-stripping: rgba(237, 241, 243, 0.033); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); } } @@ -84,36 +89,39 @@ * Enabled if forced with data-theme="dark" */ [data-theme="dark"] { - --background: #10191e; - --text: #a2b1b9; - --h1: #edf1f3; - --h2: #d5dde2; - --h3: #bbc7ce; - --h4: #a2b1b9; - --h5: #8a9ba3; - --h6: #73848c; - --primary: #1086c1; - --primary-hover: #1aa2e6; - --primary-focus: rgba(16, 134, 193, 0.25); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; - --input-background: #10191e; - --input-border: #374b56; + --input-background: #10181e; + --input-border: #374956; --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.5); --mark-text: #FFF; - --muted-text: #73848c; - --muted-background: #10191e; - --muted-border: #23353e; - --card-background: #17242b; + --muted-text: #73828c; + --muted-background: #10181e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); - --code-background: #141f24; - --code-border: #23353e; - --code-inlined: rgba(65, 87, 98, 0.25); - --code-color-1: #ac5353; - --code-color-2: #4d91b3; - --table-border: #10191e; - --table-stripping: rgba(237, 241, 243, 0.033); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); } /** @@ -526,6 +534,10 @@ del { color: var(--invalid); } +::selection { + background-color: var(--primary-focus); +} + /** * Form elements */ @@ -948,7 +960,7 @@ pre, code, kbd { background: var(--code-inlined); - color: var(--muted-text); + color: var(--code-color-1); font-size: 85%; font-weight: 400; line-height: 1; @@ -999,7 +1011,6 @@ pre { margin-left: -1rem; padding: 2rem 1rem; overflow-x: auto; - border-left: 0.25rem solid var(--code-border); background: var(--code-background); } @@ -1019,20 +1030,25 @@ pre > code { } code b { - color: var(--code-color-1); + color: var(--code-color-2); font-weight: normal; } code i { - color: var(--code-color-2); + color: var(--code-color-3); font-style: normal; } code u { - color: var(--text); + color: var(--code-color-4); text-decoration: none; } +code em { + color: var(--code-color-5); + font-style: normal; +} + kbd { background-color: var(--secondary); color: var(--secondary-inverse); @@ -1131,6 +1147,7 @@ article { margin-right: -1rem; margin-left: -1rem; padding: 2rem 1rem; + overflow: hidden; background: var(--card-background); box-shadow: var(--card-shadow); } @@ -1164,6 +1181,132 @@ article { } } +article > *:not(footer):not(pre):last-child { + margin-bottom: 0; +} + +/** + * Card sectionning (
> header, footer|pre) + */ +article > header, +article > footer { + background-color: var(--card-sections); +} + +article > header, +article > footer, +article > pre { + margin: -1rem; + padding: 2rem 1rem; +} + +@media (min-width: 576px) { + article > header, + article > footer, + article > pre { + margin: -2.5rem; + padding: 2rem 2.5rem; + } +} + +@media (min-width: 768px) { + article > header, + article > footer, + article > pre { + margin: -3rem; + padding: 2rem 3rem; + } +} + +@media (min-width: 992px) { + article > header, + article > footer, + article > pre { + margin: -3.5rem; + padding: 2rem 3.5rem; + } +} + +@media (min-width: 1200px) { + article > header, + article > footer, + article > pre { + margin: -4rem; + padding: 2rem 4rem; + } +} + +article > header { + margin-top: -2rem; + margin-bottom: 2rem; +} + +@media (min-width: 576px) { + article > header { + margin-top: -2.5rem; + margin-bottom: 2.5rem; + } +} + +@media (min-width: 768px) { + article > header { + margin-top: -3rem; + margin-bottom: 3rem; + } +} + +@media (min-width: 992px) { + article > header { + margin-top: -3.5rem; + margin-bottom: 3.5rem; + } +} + +@media (min-width: 1200px) { + article > header { + margin-top: -4rem; + margin-bottom: 4rem; + } +} + +article > footer, +article > pre { + margin-top: 2rem; + margin-bottom: -2rem; +} + +@media (min-width: 576px) { + article > footer, + article > pre { + margin-top: 2.5rem; + margin-bottom: -2.5rem; + } +} + +@media (min-width: 768px) { + article > footer, + article > pre { + margin-top: 3rem; + margin-bottom: -3rem; + } +} + +@media (min-width: 992px) { + article > footer, + article > pre { + margin-top: 3.5rem; + margin-bottom: -3.5rem; + } +} + +@media (min-width: 1200px) { + article > footer, + article > pre { + margin-top: 4rem; + margin-bottom: -4rem; + } +} + /** * Nav */ diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index 1151acee..e3783c0e 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v0.1.0 (https://picocss.com) * Copyright 2019 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415762;--h1:#1b2a32;--h2:#2c4049;--h3:#415762;--h4:#596e78;--h5:#73848c;--h6:#8a9ba3;--primary:#1086c1;--primary-hover:#086a9b;--primary-focus:rgba(16, 134, 193, 0.125);--primary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d2d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c4049;--muted-text:#7e8f98;--muted-background:#edf1f3;--muted-border:#edf1f3;--card-background:#FFF;--card-shadow:0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);--code-background:#f3f5f7;--code-border:#d5dde2;--code-inlined:#edf1f3;--code-color-1:#9f6060;--code-color-2:#2f7ca2;--table-border:rgba(237, 241, 243, 0.75);--table-stripping:rgba(27, 42, 50, 0.033)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--table-border:#10191e;--table-stripping:rgba(237, 241, 243, 0.033)}}[data-theme=dark]{--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--table-border:#10191e;--table-stripping:rgba(237, 241, 243, 0.033)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--muted-text);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;border-left:0.25rem solid var(--code-border);background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-1);font-weight:normal}code i{color:var(--code-color-2);font-style:normal}code u{color:var(--text);text-decoration:none}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-2:#a65980;--code-color-3:#478085;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(27, 40, 50, 0.02)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index f0a6dd14..8e39973e 100644 --- a/css/pico.css +++ b/css/pico.css @@ -9,44 +9,46 @@ [data-theme="light"], :root:not([data-theme="dark"]) { --background: #FFF; - --text: #415762; - --h1: #1b2a32; - --h2: #2c4049; - --h3: #415762; - --h4: #596e78; - --h5: #73848c; - --h6: #8a9ba3; - --primary: #1086c1; - --primary-hover: #086a9b; - --primary-focus: rgba(16, 134, 193, 0.125); + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); --primary-inverse: #FFF; - --secondary: #73848c; - --secondary-hover: #415762; - --secondary-focus: rgba(115, 132, 140, 0.125); + --secondary: #73828c; + --secondary-hover: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); --secondary-inverse: #FFF; - --contrast: #2c4049; - --contrast-hover: #0d1519; - --contrast-focus: rgba(115, 132, 140, 0.125); + --contrast: #2c3d49; + --contrast-hover: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); --contrast-border: rgba(255, 223, 128, 0.5); --contrast-inverse: #FFF; --input-background: #FFF; - --input-border: #c8d2d8; + --input-border: #c8d1d8; --valid: #288a6a; --invalid: #b94646; --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c4049; - --muted-text: #7e8f98; - --muted-background: #edf1f3; - --muted-border: #edf1f3; + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; --card-background: #FFF; - --card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024); + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --code-background: #f3f5f7; - --code-border: #d5dde2; - --code-inlined: #edf1f3; - --code-color-1: #9f6060; - --code-color-2: #2f7ca2; - --table-border: rgba(237, 241, 243, 0.75); - --table-stripping: rgba(27, 42, 50, 0.033); + --code-inlined: #edf0f3; + --code-color-2: #a65980; + --code-color-3: #478085; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(27, 40, 50, 0.02); } /** @@ -55,45 +57,48 @@ */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10191e; - --text: #a2b1b9; - --h1: #edf1f3; - --h2: #d5dde2; - --h3: #bbc7ce; - --h4: #a2b1b9; - --h5: #8a9ba3; - --h6: #73848c; - --primary: #1086c1; - --primary-hover: #1aa2e6; - --primary-focus: rgba(16, 134, 193, 0.25); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; - --secondary: #596e78; - --secondary-hover: #73848c; - --secondary-focus: rgba(89, 110, 120, 0.25); + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF; - --contrast: #d5dde2; + --contrast: #d5dce2; --contrast-hover: #FFF; - --contrast-focus: rgba(89, 110, 120, 0.25); + --contrast-focus: rgba(89, 107, 120, 0.25); --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-inverse: #10191e; - --input-background: #10191e; - --input-border: #374b56; + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.5); --mark-text: #FFF; - --muted-text: #73848c; - --muted-background: #10191e; - --muted-border: #23353e; - --card-background: #17242b; + --muted-text: #73828c; + --muted-background: #10181e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); - --code-background: #141f24; - --code-border: #23353e; - --code-inlined: rgba(65, 87, 98, 0.25); - --code-color-1: #ac5353; - --code-color-2: #4d91b3; - --table-border: #10191e; - --table-stripping: rgba(237, 241, 243, 0.033); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); } } @@ -102,45 +107,48 @@ * Enabled if forced with data-theme="dark" */ [data-theme="dark"] { - --background: #10191e; - --text: #a2b1b9; - --h1: #edf1f3; - --h2: #d5dde2; - --h3: #bbc7ce; - --h4: #a2b1b9; - --h5: #8a9ba3; - --h6: #73848c; - --primary: #1086c1; - --primary-hover: #1aa2e6; - --primary-focus: rgba(16, 134, 193, 0.25); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; - --secondary: #596e78; - --secondary-hover: #73848c; - --secondary-focus: rgba(89, 110, 120, 0.25); + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF; - --contrast: #d5dde2; + --contrast: #d5dce2; --contrast-hover: #FFF; - --contrast-focus: rgba(89, 110, 120, 0.25); + --contrast-focus: rgba(89, 107, 120, 0.25); --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-inverse: #10191e; - --input-background: #10191e; - --input-border: #374b56; + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.5); --mark-text: #FFF; - --muted-text: #73848c; - --muted-background: #10191e; - --muted-border: #23353e; - --card-background: #17242b; + --muted-text: #73828c; + --muted-background: #10181e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); - --code-background: #141f24; - --code-border: #23353e; - --code-inlined: rgba(65, 87, 98, 0.25); - --code-color-1: #ac5353; - --code-color-2: #4d91b3; - --table-border: #10191e; - --table-stripping: rgba(237, 241, 243, 0.033); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); } /** @@ -634,6 +642,10 @@ del { color: var(--invalid); } +::selection { + background-color: var(--primary-focus); +} + /** * Form elements */ @@ -1198,7 +1210,7 @@ pre, code, kbd { background: var(--code-inlined); - color: var(--muted-text); + color: var(--code-color-1); font-size: 85%; font-weight: 400; line-height: 1; @@ -1249,7 +1261,6 @@ pre { margin-left: -1rem; padding: 2rem 1rem; overflow-x: auto; - border-left: 0.25rem solid var(--code-border); background: var(--code-background); } @@ -1269,20 +1280,25 @@ pre > code { } code b { - color: var(--code-color-1); + color: var(--code-color-2); font-weight: normal; } code i { - color: var(--code-color-2); + color: var(--code-color-3); font-style: normal; } code u { - color: var(--text); + color: var(--code-color-4); text-decoration: none; } +code em { + color: var(--code-color-5); + font-style: normal; +} + kbd { background-color: var(--secondary); color: var(--secondary-inverse); @@ -1381,6 +1397,7 @@ article { margin-right: -1rem; margin-left: -1rem; padding: 2rem 1rem; + overflow: hidden; background: var(--card-background); box-shadow: var(--card-shadow); } @@ -1414,6 +1431,132 @@ article { } } +article > *:not(footer):not(pre):last-child { + margin-bottom: 0; +} + +/** + * Card sectionning (
> header, footer|pre) + */ +article > header, +article > footer { + background-color: var(--card-sections); +} + +article > header, +article > footer, +article > pre { + margin: -1rem; + padding: 2rem 1rem; +} + +@media (min-width: 576px) { + article > header, + article > footer, + article > pre { + margin: -2.5rem; + padding: 2rem 2.5rem; + } +} + +@media (min-width: 768px) { + article > header, + article > footer, + article > pre { + margin: -3rem; + padding: 2rem 3rem; + } +} + +@media (min-width: 992px) { + article > header, + article > footer, + article > pre { + margin: -3.5rem; + padding: 2rem 3.5rem; + } +} + +@media (min-width: 1200px) { + article > header, + article > footer, + article > pre { + margin: -4rem; + padding: 2rem 4rem; + } +} + +article > header { + margin-top: -2rem; + margin-bottom: 2rem; +} + +@media (min-width: 576px) { + article > header { + margin-top: -2.5rem; + margin-bottom: 2.5rem; + } +} + +@media (min-width: 768px) { + article > header { + margin-top: -3rem; + margin-bottom: 3rem; + } +} + +@media (min-width: 992px) { + article > header { + margin-top: -3.5rem; + margin-bottom: 3.5rem; + } +} + +@media (min-width: 1200px) { + article > header { + margin-top: -4rem; + margin-bottom: 4rem; + } +} + +article > footer, +article > pre { + margin-top: 2rem; + margin-bottom: -2rem; +} + +@media (min-width: 576px) { + article > footer, + article > pre { + margin-top: 2.5rem; + margin-bottom: -2.5rem; + } +} + +@media (min-width: 768px) { + article > footer, + article > pre { + margin-top: 3rem; + margin-bottom: -3rem; + } +} + +@media (min-width: 992px) { + article > footer, + article > pre { + margin-top: 3.5rem; + margin-bottom: -3.5rem; + } +} + +@media (min-width: 1200px) { + article > footer, + article > pre { + margin-top: 4rem; + margin-bottom: -4rem; + } +} + /** * Nav */ diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index 1eb1ee92..ff185650 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -9,35 +9,37 @@ [data-theme="light"], :root:not([data-theme="dark"]) { --background: #FFF; - --text: #415762; - --h1: #1b2a32; - --h2: #2c4049; - --h3: #415762; - --h4: #596e78; - --h5: #73848c; - --h6: #8a9ba3; - --primary: #1086c1; - --primary-hover: #086a9b; - --primary-focus: rgba(16, 134, 193, 0.125); + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); --primary-inverse: #FFF; --input-background: #FFF; - --input-border: #c8d2d8; + --input-border: #c8d1d8; --valid: #288a6a; --invalid: #b94646; --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c4049; - --muted-text: #7e8f98; - --muted-background: #edf1f3; - --muted-border: #edf1f3; + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; --card-background: #FFF; - --card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024); + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --code-background: #f3f5f7; - --code-border: #d5dde2; - --code-inlined: #edf1f3; - --code-color-1: #9f6060; - --code-color-2: #2f7ca2; - --table-border: rgba(237, 241, 243, 0.75); - --table-stripping: rgba(27, 42, 50, 0.033); + --code-inlined: #edf0f3; + --code-color-2: #a65980; + --code-color-3: #478085; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(27, 40, 50, 0.02); } /** @@ -46,36 +48,39 @@ */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10191e; - --text: #a2b1b9; - --h1: #edf1f3; - --h2: #d5dde2; - --h3: #bbc7ce; - --h4: #a2b1b9; - --h5: #8a9ba3; - --h6: #73848c; - --primary: #1086c1; - --primary-hover: #1aa2e6; - --primary-focus: rgba(16, 134, 193, 0.25); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; - --input-background: #10191e; - --input-border: #374b56; + --input-background: #10181e; + --input-border: #374956; --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.5); --mark-text: #FFF; - --muted-text: #73848c; - --muted-background: #10191e; - --muted-border: #23353e; - --card-background: #17242b; + --muted-text: #73828c; + --muted-background: #10181e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); - --code-background: #141f24; - --code-border: #23353e; - --code-inlined: rgba(65, 87, 98, 0.25); - --code-color-1: #ac5353; - --code-color-2: #4d91b3; - --table-border: #10191e; - --table-stripping: rgba(237, 241, 243, 0.033); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); } } @@ -84,36 +89,39 @@ * Enabled if forced with data-theme="dark" */ [data-theme="dark"] { - --background: #10191e; - --text: #a2b1b9; - --h1: #edf1f3; - --h2: #d5dde2; - --h3: #bbc7ce; - --h4: #a2b1b9; - --h5: #8a9ba3; - --h6: #73848c; - --primary: #1086c1; - --primary-hover: #1aa2e6; - --primary-focus: rgba(16, 134, 193, 0.25); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; - --input-background: #10191e; - --input-border: #374b56; + --input-background: #10181e; + --input-border: #374956; --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.5); --mark-text: #FFF; - --muted-text: #73848c; - --muted-background: #10191e; - --muted-border: #23353e; - --card-background: #17242b; + --muted-text: #73828c; + --muted-background: #10181e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); - --code-background: #141f24; - --code-border: #23353e; - --code-inlined: rgba(65, 87, 98, 0.25); - --code-color-1: #ac5353; - --code-color-2: #4d91b3; - --table-border: #10191e; - --table-stripping: rgba(237, 241, 243, 0.033); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); } /** @@ -522,6 +530,10 @@ del { color: var(--invalid); } +::selection { + background-color: var(--primary-focus); +} + /** * Form elements */ @@ -944,7 +956,7 @@ pre, code, kbd { background: var(--code-inlined); - color: var(--muted-text); + color: var(--code-color-1); font-size: 85%; font-weight: 400; line-height: 1; @@ -995,7 +1007,6 @@ pre { margin-left: -1rem; padding: 2rem 1rem; overflow-x: auto; - border-left: 0.25rem solid var(--code-border); background: var(--code-background); } @@ -1015,20 +1026,25 @@ pre > code { } code b { - color: var(--code-color-1); + color: var(--code-color-2); font-weight: normal; } code i { - color: var(--code-color-2); + color: var(--code-color-3); font-style: normal; } code u { - color: var(--text); + color: var(--code-color-4); text-decoration: none; } +code em { + color: var(--code-color-5); + font-style: normal; +} + kbd { background-color: var(--secondary); color: var(--secondary-inverse); @@ -1127,6 +1143,7 @@ article { margin-right: -1rem; margin-left: -1rem; padding: 2rem 1rem; + overflow: hidden; background: var(--card-background); box-shadow: var(--card-shadow); } @@ -1160,6 +1177,132 @@ article { } } +article > *:not(footer):not(pre):last-child { + margin-bottom: 0; +} + +/** + * Card sectionning (
> header, footer|pre) + */ +article > header, +article > footer { + background-color: var(--card-sections); +} + +article > header, +article > footer, +article > pre { + margin: -1rem; + padding: 2rem 1rem; +} + +@media (min-width: 576px) { + article > header, + article > footer, + article > pre { + margin: -2.5rem; + padding: 2rem 2.5rem; + } +} + +@media (min-width: 768px) { + article > header, + article > footer, + article > pre { + margin: -3rem; + padding: 2rem 3rem; + } +} + +@media (min-width: 992px) { + article > header, + article > footer, + article > pre { + margin: -3.5rem; + padding: 2rem 3.5rem; + } +} + +@media (min-width: 1200px) { + article > header, + article > footer, + article > pre { + margin: -4rem; + padding: 2rem 4rem; + } +} + +article > header { + margin-top: -2rem; + margin-bottom: 2rem; +} + +@media (min-width: 576px) { + article > header { + margin-top: -2.5rem; + margin-bottom: 2.5rem; + } +} + +@media (min-width: 768px) { + article > header { + margin-top: -3rem; + margin-bottom: 3rem; + } +} + +@media (min-width: 992px) { + article > header { + margin-top: -3.5rem; + margin-bottom: 3.5rem; + } +} + +@media (min-width: 1200px) { + article > header { + margin-top: -4rem; + margin-bottom: 4rem; + } +} + +article > footer, +article > pre { + margin-top: 2rem; + margin-bottom: -2rem; +} + +@media (min-width: 576px) { + article > footer, + article > pre { + margin-top: 2.5rem; + margin-bottom: -2.5rem; + } +} + +@media (min-width: 768px) { + article > footer, + article > pre { + margin-top: 3rem; + margin-bottom: -3rem; + } +} + +@media (min-width: 992px) { + article > footer, + article > pre { + margin-top: 3.5rem; + margin-bottom: -3.5rem; + } +} + +@media (min-width: 1200px) { + article > footer, + article > pre { + margin-top: 4rem; + margin-bottom: -4rem; + } +} + /** * Nav */ diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 73d77ad8..2768eeb1 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v0.1.0 (https://picocss.com) * Copyright 2019 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415762;--h1:#1b2a32;--h2:#2c4049;--h3:#415762;--h4:#596e78;--h5:#73848c;--h6:#8a9ba3;--primary:#1086c1;--primary-hover:#086a9b;--primary-focus:rgba(16, 134, 193, 0.125);--primary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d2d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c4049;--muted-text:#7e8f98;--muted-background:#edf1f3;--muted-border:#edf1f3;--card-background:#FFF;--card-shadow:0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);--code-background:#f3f5f7;--code-border:#d5dde2;--code-inlined:#edf1f3;--code-color-1:#9f6060;--code-color-2:#2f7ca2;--table-border:rgba(237, 241, 243, 0.75);--table-stripping:rgba(27, 42, 50, 0.033)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--table-border:#10191e;--table-stripping:rgba(237, 241, 243, 0.033)}}[data-theme=dark]{--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--table-border:#10191e;--table-stripping:rgba(237, 241, 243, 0.033)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--muted-text);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;border-left:0.25rem solid var(--code-border);background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-1);font-weight:normal}code i{color:var(--code-color-2);font-style:normal}code u{color:var(--text);text-decoration:none}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-2:#a65980;--code-color-3:#478085;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(27, 40, 50, 0.02)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index d9df3393..351060c1 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v0.1.0 (https://picocss.com) * Copyright 2019 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415762;--h1:#1b2a32;--h2:#2c4049;--h3:#415762;--h4:#596e78;--h5:#73848c;--h6:#8a9ba3;--primary:#1086c1;--primary-hover:#086a9b;--primary-focus:rgba(16, 134, 193, 0.125);--primary-inverse:#FFF;--secondary:#73848c;--secondary-hover:#415762;--secondary-focus:rgba(115, 132, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c4049;--contrast-hover:#0d1519;--contrast-focus:rgba(115, 132, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d2d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c4049;--muted-text:#7e8f98;--muted-background:#edf1f3;--muted-border:#edf1f3;--card-background:#FFF;--card-shadow:0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);--code-background:#f3f5f7;--code-border:#d5dde2;--code-inlined:#edf1f3;--code-color-1:#9f6060;--code-color-2:#2f7ca2;--table-border:rgba(237, 241, 243, 0.75);--table-stripping:rgba(27, 42, 50, 0.033)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#596e78;--secondary-hover:#73848c;--secondary-focus:rgba(89, 110, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dde2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 110, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10191e;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--table-border:#10191e;--table-stripping:rgba(237, 241, 243, 0.033)}}[data-theme=dark]{--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#596e78;--secondary-hover:#73848c;--secondary-focus:rgba(89, 110, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dde2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 110, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10191e;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--table-border:#10191e;--table-stripping:rgba(237, 241, 243, 0.033)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{color:var(--contrast-hover)}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a.secondary[role=button],button.secondary,input.secondary[type=submit],input[type=reset]{border:1px solid var(--secondary);background-color:var(--secondary);color:var(--secondary-inverse)}a.secondary[role=button]:active,a.secondary[role=button]:focus,a.secondary[role=button]:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input.secondary[type=submit]:active,input.secondary[type=submit]:focus,input.secondary[type=submit]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border:1px solid var(--secondary-hover);background-color:var(--secondary-hover)}a.secondary[role=button]:focus,button.secondary:focus,input.secondary[type=submit]:focus,input[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.contrast[role=button],button.contrast,input.contrast[type=reset],input.contrast[type=submit]{border:1px solid var(--contrast);background-color:var(--contrast);color:var(--contrast-inverse)}a.contrast[role=button]:active,a.contrast[role=button]:focus,a.contrast[role=button]:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input.contrast[type=reset]:active,input.contrast[type=reset]:focus,input.contrast[type=reset]:hover,input.contrast[type=submit]:active,input.contrast[type=submit]:focus,input.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);background-color:var(--contrast-hover)}a.contrast[role=button]:focus,button.contrast:focus,input.contrast[type=reset]:focus,input.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline.contrast[role=button],button.outline.contrast,input.outline.contrast[type=reset],input.outline.contrast[type=submit]{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a.outline.contrast[role=button]:active,a.outline.contrast[role=button]:focus,a.outline.contrast[role=button]:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input.outline.contrast[type=reset]:active,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=reset]:hover,input.outline.contrast[type=submit]:active,input.outline.contrast[type=submit]:focus,input.outline.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a.outline.contrast[role=button]:focus,button.outline.contrast:focus,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--muted-text);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;border-left:0.25rem solid var(--code-border);background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-1);font-weight:normal}code i{color:var(--code-color-2);font-style:normal}code u{color:var(--text);text-decoration:none}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]){box-shadow:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-2:#a65980;--code-color-3:#478085;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(27, 40, 50, 0.02)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{color:var(--contrast-hover)}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a.secondary[role=button],button.secondary,input.secondary[type=submit],input[type=reset]{border:1px solid var(--secondary);background-color:var(--secondary);color:var(--secondary-inverse)}a.secondary[role=button]:active,a.secondary[role=button]:focus,a.secondary[role=button]:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input.secondary[type=submit]:active,input.secondary[type=submit]:focus,input.secondary[type=submit]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border:1px solid var(--secondary-hover);background-color:var(--secondary-hover)}a.secondary[role=button]:focus,button.secondary:focus,input.secondary[type=submit]:focus,input[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.contrast[role=button],button.contrast,input.contrast[type=reset],input.contrast[type=submit]{border:1px solid var(--contrast);background-color:var(--contrast);color:var(--contrast-inverse)}a.contrast[role=button]:active,a.contrast[role=button]:focus,a.contrast[role=button]:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input.contrast[type=reset]:active,input.contrast[type=reset]:focus,input.contrast[type=reset]:hover,input.contrast[type=submit]:active,input.contrast[type=submit]:focus,input.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);background-color:var(--contrast-hover)}a.contrast[role=button]:focus,button.contrast:focus,input.contrast[type=reset]:focus,input.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline.contrast[role=button],button.outline.contrast,input.outline.contrast[type=reset],input.outline.contrast[type=submit]{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a.outline.contrast[role=button]:active,a.outline.contrast[role=button]:focus,a.outline.contrast[role=button]:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input.outline.contrast[type=reset]:active,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=reset]:hover,input.outline.contrast[type=submit]:active,input.outline.contrast[type=submit]:focus,input.outline.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a.outline.contrast[role=button]:focus,button.outline.contrast:focus,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]){box-shadow:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index e24a2694..c0043621 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -8,7 +8,7 @@ [data-theme="light"], :root:not([data-theme="dark"]) { --nav-background: rgba(255, 255, 255, 0.7); - --nav-border: rgba(115, 132, 140, 0.2); + --nav-border: rgba(115, 130, 140, 0.2); } /** @@ -17,8 +17,8 @@ */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --nav-background: rgba(16, 25, 30, 0.8); - --nav-border: rgba(115, 132, 140, 0.2); + --nav-background: rgba(16, 24, 30, 0.8); + --nav-border: rgba(115, 130, 140, 0.2); } } @@ -27,8 +27,8 @@ * Enabled if forced with data-theme="dark" */ [data-theme="dark"] { - --nav-background: rgba(16, 25, 30, 0.8); - --nav-border: rgba(115, 132, 140, 0.2); + --nav-background: rgba(16, 24, 30, 0.8); + --nav-border: rgba(115, 130, 140, 0.2); } /** @@ -167,9 +167,10 @@ main > aside details { } main > aside details summary { + color: var(--h3); + font-size: 14px; font-weight: 300; text-transform: uppercase; - color: var(--h3); } main > aside details summary::after { @@ -370,19 +371,11 @@ a[role=button] { content: 'Bulky'; } -[data-theme="invalid"] pre { - border-color: var(--invalid); -} - [data-theme="valid"]:before { background: var(--valid); content: 'Great'; } -[data-theme="valid"] pre { - border-color: var(--valid); -} - section[title="love"] [data-theme="invalid"]:before { content: 'Not so great'; } @@ -427,46 +420,6 @@ body > nav ul:first-of-type li:nth-of-type(2) { } } -/** - * Docs: Code inside
- */ -article pre { - margin-top: 2rem; - margin-bottom: -2rem; -} - -@media (min-width: 576px) { - article pre { - padding: 2rem 2.5rem; - margin: -2.5rem; - margin-top: 2.5rem; - } -} - -@media (min-width: 768px) { - article pre { - padding: 2rem 3rem; - margin: -3rem; - margin-top: 3rem; - } -} - -@media (min-width: 992px) { - article pre { - padding: 2rem 3.5rem; - margin: -3.5rem; - margin-top: 3.5rem; - } -} - -@media (min-width: 1200px) { - article pre { - padding: 2rem 4rem; - margin: -4rem; - margin-top: 4rem; - } -} - /** * Docs: Theme switcher */ diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 8eb3e20d..c36ab650 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles for Docs - */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 132, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus,main>aside a:focus{background-color:transparent;color:var(--primary-hover)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{font-weight:300;text-transform:uppercase;color:var(--h3)}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:-1rem;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:576px){[data-theme=invalid]:before,[data-theme=valid]:before{right:0}}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] pre,[data-theme=valid] pre{padding-top:2rem;padding-bottom:2rem}[data-theme=invalid]:before{background:var(--invalid);content:'Bulky'}[data-theme=invalid] pre{border-color:var(--invalid)}[data-theme=valid]:before{background:var(--valid);content:'Great'}[data-theme=valid] pre{border-color:var(--valid)}section[title=love] [data-theme=invalid]:before{content:'Not so great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav li a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}article pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article pre{padding:2rem 2.5rem;margin:-2.5rem;margin-top:2.5rem}}@media (min-width:768px){article pre{padding:2rem 3rem;margin:-3rem;margin-top:3rem}}@media (min-width:992px){article pre{padding:2rem 3.5rem;margin:-3.5rem;margin-top:3.5rem}}@media (min-width:1200px){article pre{padding:2rem 4rem;margin:-4rem;margin-top:4rem}}button.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}button.switcher:after{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}button.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}button.switcher:focus,button.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}button.switcher:hover:after{transform:rotate(180deg)}button.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}button.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){button.switcher{right:1rem}} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus,main>aside a:focus{background-color:transparent;color:var(--primary-hover)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:-1rem;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:576px){[data-theme=invalid]:before,[data-theme=valid]:before{right:0}}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] pre,[data-theme=valid] pre{padding-top:2rem;padding-bottom:2rem}[data-theme=invalid]:before{background:var(--invalid);content:'Bulky'}[data-theme=valid]:before{background:var(--valid);content:'Great'}section[title=love] [data-theme=invalid]:before{content:'Not so great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav li a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}button.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}button.switcher:after{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}button.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}button.switcher:focus,button.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}button.switcher:hover:after{transform:rotate(180deg)}button.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}button.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){button.switcher{right:1rem}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b098f2e4..9d88f6cd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -113,7 +113,7 @@
<link rel="stylesheet" href="css/pico.min.css">

Starter template:

-
<!doctype html>
+
<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -211,18 +211,18 @@
 
             

SCSS:

-
// Custom colors
+
// Custom colors
 $primary-500: ...;
 $primary-600: ...;
 $primary-700: ...;
 
-// Pico library
+// Pico library
 @import "path/pico";

CSS:

-
/* Light theme (Default) */
-/* Can be forced with data-theme="light" */
+
/* Light theme (Default) */
+/* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
   --primary:            ...;
@@ -232,8 +232,8 @@
 }
 
 
-/* Dark theme (Auto) */
-/* Automatically enabled if user has Dark mode enabled */
+/* Dark theme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --primary:          ...;
@@ -243,8 +243,8 @@
 }
 
 
-/* Dark theme (Forced) */
-/* Enabled if forced with data-theme="dark" */
+/* Dark theme (Forced) */
+/* Enabled if forced with data-theme="dark" */
 [data-theme="dark"] {
   --primary:            ...;
   --primary-hover:      ...;
@@ -264,7 +264,6 @@
               

For wild HTML purists!

Pico provide a .classless version (Example).

-

Obviously this version do not include .container, .container-fluid, .grid, .secondary, .contrast and .outline.

In this version, <header>, <main> and <footer> act as containers to define a centered or a fluid viewport.

Usage:

Use the default .classless version if you need centered viewports:

@@ -656,11 +655,11 @@

 <form>
 
-  <!-- Grid -->
+  <!-- Grid -->
   <section class="grid">
 
     <div>
-      <!-- Markup example 1: input is inside label -->
+      <!-- Markup example 1: input is inside label -->
       <label for="firstname">
         First name
         <input type="text" id="firstname" name="firstname" placeholder="First name" required>
@@ -676,12 +675,12 @@
 
   </section>
 
-  <!-- Markup example 2: input is after label -->
+  <!-- Markup example 2: input is after label -->
   <label for="email">Email address</label>
   <input type="email" id="email" name="email" placeholder="Email address" required>
   <small>We'll never share your email with anyone else.</small>
 
-  <!-- Button -->
+  <!-- Button -->
   <button type="submit">Submit</button>
 
 </form>
@@ -748,14 +747,14 @@ -
<!-- Select -->
+
<!-- Select -->
 <label for="country">Country</label>
 <select id="country">
   <option selected>Choose...</option>
   <option>...</option>
 </select>
 
-<!-- Radios -->
+<!-- Radios -->
 <fieldset>
   <legend>Gender</legend>
   <label for="male">
@@ -772,7 +771,7 @@
   </label>
 </fieldset>
 
-<!-- Checkbox -->
+<!-- Checkbox -->
 <fieldset>
   <label for="terms">
     <input type="checkbox" id="terms" name="terms">
@@ -780,7 +779,7 @@
   </label>
 </fieldset>
 
-<!-- Switch -->
+<!-- Switch -->
 <fieldset>
   <label for="switch">
     <input type="checkbox" id="switch" name="switch" role="switch">
@@ -842,6 +841,27 @@
   I'm a card!
 </article>
+

You can use <header> and footer <footer> inside <article>

+
+
+ Header +
+ Body +
+ Footer +
+
+ +
<article>
+  <header>
+    Header
+  </header>
+  Body
+  <footer>
+    Footer
+  </footer>
+</article>
+ diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index 87b59304..d10edf62 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1 +1 @@ -!function(){if(document.querySelector("aside nav").clientWidth<200)for(var e=document.querySelectorAll("aside details"),t=1;t]*>?/gm,"")),f.currentTheme=e}var f={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(f.button.element);e.className=f.button.class,document.querySelector(f.target).appendChild(e),a(f.currentTheme);for(var t=document.querySelectorAll(f.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<section class="grid">\n'+r+"</section>"}var t,f={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrentf.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){for(var r=document.querySelectorAll(s.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var s={list:"json/material-colors.json",target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#2c4049"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#2c4049"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#2c4049"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',s.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(s.target).after(a);for(var f=document.querySelectorAll(s.selectorButton),o=0;o]*>?/gm,""));f.currentTheme=e}var f={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(f.button.element);e.className=f.button.class,document.querySelector(f.target).appendChild(e),a(f.currentTheme);for(var t=document.querySelectorAll(f.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<section class="grid">\n'+r+"</section>"}var t,f={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrentf.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){for(var r=document.querySelectorAll(s.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var s={list:"json/material-colors.json",target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#2c4049"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#2c4049"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#2c4049"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',s.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(s.target).after(a);for(var f=document.querySelectorAll(s.selectorButton),o=0;oTurn off dark mode' }, target: 'body', // Button append in target - selector: 'button.theme-switcher', // Button selector in Dom + selector: 'button.theme-switcher', // Button selector in Dom currentTheme: systemColorScheme() }; @@ -101,8 +101,11 @@ // Apply theme document.querySelector('html').setAttribute('data-theme', set); - document.querySelector(switcher.selector).innerHTML = label; - document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label)); + var switchers = document.querySelectorAll(switcher.selector); + for (var i = 0; i < switchers.length; i++) { + switchers[i].innerHTML = label; + switchers[i].setAttribute('aria-label', stripTags(label)); + } switcher.currentTheme = set; } diff --git a/docs/scss/components/_card-code.scss b/docs/scss/components/_card-code.scss deleted file mode 100644 index e9b5d097..00000000 --- a/docs/scss/components/_card-code.scss +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Docs: Code inside
- */ - -// Custom spacings -article pre { - margin-top: $spacing-block; - margin-bottom: -$spacing-gutter*2; - - @if map-get($breakpoints, "sm") and - map-get($spacing-factor, "sm") { - - @media (min-width: map-get($breakpoints, "sm")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm")); - margin: -$spacing-block*map-get($spacing-factor, "sm"); - margin-top: $spacing-block*map-get($spacing-factor, "sm"); - } - } - - @if map-get($breakpoints, "md") and - map-get($spacing-factor, "md") and - $enable-responsive-spacings { - - @media (min-width: map-get($breakpoints, "md")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md")); - margin: -$spacing-block*map-get($spacing-factor, "md"); - margin-top: $spacing-block*map-get($spacing-factor, "md"); - } - } - - @if map-get($breakpoints, "lg") and - map-get($spacing-factor, "lg") and - $enable-responsive-spacings { - - @media (min-width: map-get($breakpoints, "lg")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg")); - margin: -$spacing-block*map-get($spacing-factor, "lg"); - margin-top: $spacing-block*map-get($spacing-factor, "lg"); - } - } - - @if map-get($breakpoints, "xl") and - map-get($spacing-factor, "xl") and - $enable-responsive-spacings { - - @media (min-width: map-get($breakpoints, "xl")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl")); - margin: -$spacing-block*map-get($spacing-factor, "xl"); - margin-top: $spacing-block*map-get($spacing-factor, "xl"); - } - } -} diff --git a/docs/scss/content/_code.scss b/docs/scss/content/_code.scss index e9e89aeb..d825ae05 100644 --- a/docs/scss/content/_code.scss +++ b/docs/scss/content/_code.scss @@ -83,10 +83,6 @@ pre { background: var(--invalid); content: 'Bulky'; } - - pre { - border-color: var(--invalid); - } } [data-theme="valid"] { @@ -94,10 +90,6 @@ pre { background: var(--valid); content: 'Great'; } - - pre { - border-color: var(--valid); - } } section[title="love"] [data-theme="invalid"] { diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss index 4197ecf9..86504346 100644 --- a/docs/scss/layout/_aside.scss +++ b/docs/scss/layout/_aside.scss @@ -53,9 +53,10 @@ main > aside { border-bottom: none; summary { + color: var(--h3); + font-size: 14px; font-weight: 300; text-transform: uppercase; - color: var(--h3); &::after { display: none; diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss index 9f64fd4c..60f4b06b 100644 --- a/docs/scss/pico.docs.scss +++ b/docs/scss/pico.docs.scss @@ -21,5 +21,5 @@ // Components @import "components/nav"; -@import "components/card-code"; +//@import "components/card-code"; @import "components/theme-switcher"; diff --git a/scss/_colors.scss b/scss/_colors.scss index f5406bb9..24fa50b2 100644 --- a/scss/_colors.scss +++ b/scss/_colors.scss @@ -1,5 +1,5 @@ // Navy-Grey -$grey-hue: 200 !default; +$grey-hue: 205 !default; $grey-50: hsl($grey-hue, 20%, 94%) !default; $grey-100: hsl($grey-hue, 18%, 86%) !default; $grey-200: hsl($grey-hue, 16%, 77%) !default; @@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default; $grey-900: hsl($grey-hue, 30%, 15%) !default; // Light Blue -$primary-hue: 200; +$primary-hue: 195; $primary-50: hsl($primary-hue, 90%, 94%) !default; $primary-100: hsl($primary-hue, 88%, 86%) !default; $primary-200: hsl($primary-hue, 86%, 77%) !default; diff --git a/scss/components/_card-sectioning.scss b/scss/components/_card-sectioning.scss new file mode 100644 index 00000000..c49d33b7 --- /dev/null +++ b/scss/components/_card-sectioning.scss @@ -0,0 +1,145 @@ +/** + * Card sectionning (
> header, footer|pre) + */ + +article { + > header, + > footer { + background-color: var(--card-sections); + } + > header, + > footer, + > pre { + margin: -$spacing-gutter; + padding: $spacing-block $spacing-gutter; + + @if map-get($breakpoints, "sm") and + map-get($spacing-factor, "sm") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "sm")) { + margin: -$spacing-block*map-get($spacing-factor, "sm"); + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm")); + } + } + + @if map-get($breakpoints, "md") and + map-get($spacing-factor, "md") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "md")) { + margin: -$spacing-block*map-get($spacing-factor, "md"); + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md")); + } + } + + @if map-get($breakpoints, "lg") and + map-get($spacing-factor, "lg") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "lg")) { + margin: -$spacing-block*map-get($spacing-factor, "lg"); + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg")); + } + } + + @if map-get($breakpoints, "xl") and + map-get($spacing-factor, "xl") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "xl")) { + margin: -$spacing-block*map-get($spacing-factor, "xl"); + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl")); + } + } + } + > header { + margin-top: -$spacing-gutter*2; + margin-bottom: $spacing-block; + + @if map-get($breakpoints, "sm") and + map-get($spacing-factor, "sm") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "sm")) { + margin-top: -($spacing-block*map-get($spacing-factor, "sm")); + margin-bottom: $spacing-block*map-get($spacing-factor, "sm"); + } + } + + @if map-get($breakpoints, "md") and + map-get($spacing-factor, "md") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "md")) { + margin-top: -($spacing-block*map-get($spacing-factor, "md")); + margin-bottom: $spacing-block*map-get($spacing-factor, "md"); + } + } + + @if map-get($breakpoints, "lg") and + map-get($spacing-factor, "lg") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "lg")) { + margin-top: -($spacing-block*map-get($spacing-factor, "lg")); + margin-bottom: $spacing-block*map-get($spacing-factor, "lg"); + } + } + + @if map-get($breakpoints, "xl") and + map-get($spacing-factor, "xl") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "xl")) { + margin-top: -($spacing-block*map-get($spacing-factor, "xl")); + margin-bottom: $spacing-block*map-get($spacing-factor, "xl"); + } + } + } + > footer, + > pre { + margin-top: $spacing-block; + margin-bottom: -$spacing-gutter*2; + + @if map-get($breakpoints, "sm") and + map-get($spacing-factor, "sm") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "sm")) { + margin-top: $spacing-block*map-get($spacing-factor, "sm"); + margin-bottom: -($spacing-block*map-get($spacing-factor, "sm")); + } + } + + @if map-get($breakpoints, "md") and + map-get($spacing-factor, "md") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "md")) { + margin-top: $spacing-block*map-get($spacing-factor, "md"); + margin-bottom: -($spacing-block*map-get($spacing-factor, "md")); + } + } + + @if map-get($breakpoints, "lg") and + map-get($spacing-factor, "lg") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "lg")) { + margin-top: $spacing-block*map-get($spacing-factor, "lg"); + margin-bottom: -($spacing-block*map-get($spacing-factor, "lg")); + } + } + + @if map-get($breakpoints, "xl") and + map-get($spacing-factor, "xl") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "xl")) { + margin-top: $spacing-block*map-get($spacing-factor, "xl"); + margin-bottom: -($spacing-block*map-get($spacing-factor, "xl")); + } + } + } +} diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 60af158e..f3a12e53 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -7,6 +7,7 @@ article { margin-right: -$spacing-gutter; margin-left: -$spacing-gutter; padding: $spacing-block $spacing-gutter; + overflow: hidden; background: var(--card-background); box-shadow: var(--card-shadow); @@ -53,4 +54,9 @@ article { padding: $spacing-block*map-get($spacing-factor, "xl"); } } + + // Remove last-child margin bottom + > *:not(footer):not(pre):last-child { + margin-bottom: 0; + } } diff --git a/scss/content/_code.scss b/scss/content/_code.scss index c79c07de..27132291 100644 --- a/scss/content/_code.scss +++ b/scss/content/_code.scss @@ -24,7 +24,7 @@ pre, code, kbd { background: var(--code-inlined); - color: var(--muted-text); + color: var(--code-color-1); font-size: 85%; font-weight: 400; line-height: 1; @@ -66,7 +66,6 @@ pre { margin-left: -$spacing-gutter; padding: $spacing-block $spacing-gutter; overflow-x: auto; - border-left: .25rem solid var(--code-border); background: var(--code-background); @media (min-width: map-get($breakpoints, "sm")) { @@ -88,21 +87,27 @@ code { // Tags b { - color: var(--code-color-1); + color: var(--code-color-2); font-weight: normal; } // Properties i { - color: var(--code-color-2); + color: var(--code-color-3); font-style: normal; } // Values u { - color: var(--text); + color: var(--code-color-4); text-decoration: none; } + + // Comments + em { + color: var(--code-color-5); + font-style: normal; + } } // kbd diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index bbc1bf28..7f128961 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -309,3 +309,8 @@ ins { del { color: var(--invalid); } + +// selection +::selection { + background-color: var(--primary-focus); +} diff --git a/scss/pico.scss b/scss/pico.scss index 04561528..42d44042 100644 --- a/scss/pico.scss +++ b/scss/pico.scss @@ -12,24 +12,25 @@ @import "themes/dark"; // Layout -@import "layout/document"; // html -@import "layout/sectioning"; // body, header, main, footer -@import "layout/container"; // .container, .container-fluid -@import "layout/section"; // main > section -@import "layout/grid"; // .grid -@import "layout/scroller"; // figure +@import "layout/document"; // html +@import "layout/sectioning"; // body, header, main, footer +@import "layout/container"; // .container, .container-fluid +@import "layout/section"; // main > section +@import "layout/grid"; // .grid +@import "layout/scroller"; // figure // Content -@import "content/typography"; // a, headings, p, ul, blockquote ... -@import "content/form"; // label, input, select, ... -@import "content/button"; // button, a[role=button], ... -@import "content/button-styles"; // .secondary, .contrast, .outline -@import "content/table"; // table, tr, td, ... -@import "content/code"; // pre, code, ... -@import "content/miscs"; // hr, progress, template, [hidden] +@import "content/typography"; // a, headings, p, ul, blockquote ... +@import "content/form"; // label, input, select, ... +@import "content/button"; // button, a[role=button], ... +@import "content/button-styles"; // .secondary, .contrast, .outline +@import "content/table"; // table, tr, td, ... +@import "content/code"; // pre, code, ... +@import "content/miscs"; // hr, progress, template, [hidden] // Components -@import "components/accordion"; // details, summary -@import "components/card"; // article -@import "components/nav"; // nav -@import "components/tooltip"; // data-tooltip +@import "components/accordion"; // details, summary +@import "components/card"; // article +@import "components/card-sectioning"; // article > header, footer|pre +@import "components/nav"; // nav +@import "components/tooltip"; // data-tooltip diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss index 578bbad5..d66e6c98 100644 --- a/scss/themes/_dark.scss +++ b/scss/themes/_dark.scss @@ -55,18 +55,21 @@ // Card --card-background: #{darken($grey-900, 2%)}; + --card-sections: #{darken($grey-900, 4%)}; --card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)}; // Code --code-background: #{darken($grey-900, 4%)}; - --code-border: #{mix($grey-800, $grey-900)}; --code-inlined: #{rgba($grey-700, .25)}; - --code-color-1: #{desaturate($red-700, 10%)}; - --code-color-2: #{desaturate($primary-500, 40%)}; + --code-color-1: #{$grey-500)}; + --code-color-2: #{hsl(330, 30%, 50%)}; + --code-color-3: #{hsl(185, 30%, 50%)}; + --code-color-4: #{hsl(40, 10%, 50%)}; + --code-color-5: #{mix($grey-600, $grey-700)}; // Table --table-border: #{darken($grey-900, 6%)}; - --table-stripping: #{rgba($grey-50,.033)}; + --table-stripping: #{rgba($grey-50,.02)}; } } @@ -128,16 +131,19 @@ // Card --card-background: #{darken($grey-900, 2%)}; + --card-sections: #{darken($grey-900, 4%)}; --card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)}; // Code --code-background: #{darken($grey-900, 4%)}; - --code-border: #{mix($grey-800, $grey-900)}; --code-inlined: #{rgba($grey-700, .25)}; - --code-color-1: #{desaturate($red-700, 10%)}; - --code-color-2: #{desaturate($primary-500, 40%)}; + --code-color-1: #{$grey-500)}; + --code-color-2: #{hsl(330, 30%, 50%)}; + --code-color-3: #{hsl(185, 30%, 50%)}; + --code-color-4: #{hsl(40, 10%, 50%)}; + --code-color-5: #{mix($grey-600, $grey-700)}; // Table --table-border: #{darken($grey-900, 6%)}; - --table-stripping: #{rgba($grey-50,.033)}; + --table-stripping: #{rgba($grey-50,.02)}; } diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss index 66d21ffc..8e9d6ff5 100644 --- a/scss/themes/_light.scss +++ b/scss/themes/_light.scss @@ -25,7 +25,6 @@ --primary-inverse: #{$white}; @if $enable-classes { - // Secondary Call-to-Action and links --secondary: #{$grey-500}; --secondary-hover: #{$grey-700}; @@ -55,16 +54,18 @@ // Card --card-background: #{$white}; + --card-sections: #{lighten($grey-50, 2%)}; --card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)}; // Code --code-background: #{lighten($grey-50, 2%)}; - --code-border: #{$grey-100}; --code-inlined: #{$grey-50}; - --code-color-1: #{desaturate($red-700, 20%)}; - --code-color-2: #{desaturate($primary-600, 30%)}; + --code-color-2: #{hsl(330, 30%, 50%)}; + --code-color-3: #{hsl(185, 30%, 40%)}; + --code-color-4: #{hsl(40, 20%, 50%)}; + --code-color-5: #{mix($grey-300, $grey-400)}; // Table --table-border: #{rgba($grey-50, .75)}; - --table-stripping: #{rgba($grey-900,.033)}; + --table-stripping: #{rgba($grey-900,.02)}; }