mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 09:56:14 -04:00
Lucas Larroche
GitHub
commit
e1981259b1
30 changed files with 1508 additions and 205 deletions
17
README.md
17
README.md
|
|
@ -14,8 +14,11 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
# Pico.css
|
# Pico.css
|
||||||
|
[](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
|
||||||
|
[](https://github.com/picocss/pico/releases/latest)
|
||||||
|
[](https://www.npmjs.com/package/@picocss/pico)
|
||||||
|
[](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
||||||
|
|
||||||
`5.6 KB` minified and gzipped
|
|
||||||
|
|
||||||
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
|
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
|
||||||
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
|
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
|
||||||
|
|
@ -27,7 +30,7 @@
|
||||||
There are 3 ways to get started with pico.css:
|
There are 3 ways to get started with pico.css:
|
||||||
|
|
||||||
### Install manually
|
### Install manually
|
||||||
[Download Pico](https://github.com/picocss/pico/archive/v1.0.5.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
[Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="css/pico.min.css">
|
<link rel="stylesheet" href="css/pico.min.css">
|
||||||
|
|
@ -83,6 +86,14 @@ npm install @picocss/pico
|
||||||
## Copyright and license
|
## Copyright and license
|
||||||
|
|
||||||
- Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
- Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
||||||
- Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed) & [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
|
||||||
- Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
- Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
||||||
- Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))
|
- Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))
|
||||||
|
|
||||||
|
Openly inspired by:
|
||||||
|
|
||||||
|
- [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE))
|
||||||
|
- [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE))
|
||||||
|
- [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE))
|
||||||
|
- [CSS Bed](https://github.com/ubershmekel/cssbed)
|
||||||
|
- [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
||||||
|
- [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md))
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.0.5 (https://picocss.com)
|
* Pico.css v1.0.6 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
|
|
@ -155,16 +155,26 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
text-decoration: inherit;
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
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-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -320,15 +330,19 @@ sup {
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
dl dl,
|
||||||
max-width: 100%;
|
dl ol,
|
||||||
height: auto;
|
dl ul,
|
||||||
border-style: none;
|
ol dl,
|
||||||
|
ul dl {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg,
|
ol ol,
|
||||||
img {
|
ol ul,
|
||||||
vertical-align: text-bottom;
|
ul ol,
|
||||||
|
ul ul {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
address,
|
address,
|
||||||
|
|
@ -411,6 +425,84 @@ h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
address ~ h1,
|
||||||
|
blockquote ~ h1,
|
||||||
|
dl ~ h1,
|
||||||
|
figure ~ h1,
|
||||||
|
form ~ h1,
|
||||||
|
ol ~ h1,
|
||||||
|
p ~ h1,
|
||||||
|
pre ~ h1,
|
||||||
|
table ~ h1,
|
||||||
|
ul ~ h1 {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h2,
|
||||||
|
blockquote ~ h2,
|
||||||
|
dl ~ h2,
|
||||||
|
figure ~ h2,
|
||||||
|
form ~ h2,
|
||||||
|
ol ~ h2,
|
||||||
|
p ~ h2,
|
||||||
|
pre ~ h2,
|
||||||
|
table ~ h2,
|
||||||
|
ul ~ h2 {
|
||||||
|
margin-top: 2.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h3,
|
||||||
|
blockquote ~ h3,
|
||||||
|
dl ~ h3,
|
||||||
|
figure ~ h3,
|
||||||
|
form ~ h3,
|
||||||
|
ol ~ h3,
|
||||||
|
p ~ h3,
|
||||||
|
pre ~ h3,
|
||||||
|
table ~ h3,
|
||||||
|
ul ~ h3 {
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h4,
|
||||||
|
blockquote ~ h4,
|
||||||
|
dl ~ h4,
|
||||||
|
figure ~ h4,
|
||||||
|
form ~ h4,
|
||||||
|
ol ~ h4,
|
||||||
|
p ~ h4,
|
||||||
|
pre ~ h4,
|
||||||
|
table ~ h4,
|
||||||
|
ul ~ h4 {
|
||||||
|
margin-top: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h5,
|
||||||
|
blockquote ~ h5,
|
||||||
|
dl ~ h5,
|
||||||
|
figure ~ h5,
|
||||||
|
form ~ h5,
|
||||||
|
ol ~ h5,
|
||||||
|
p ~ h5,
|
||||||
|
pre ~ h5,
|
||||||
|
table ~ h5,
|
||||||
|
ul ~ h5 {
|
||||||
|
margin-top: 1.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h6,
|
||||||
|
blockquote ~ h6,
|
||||||
|
dl ~ h6,
|
||||||
|
figure ~ h6,
|
||||||
|
form ~ h6,
|
||||||
|
ol ~ h6,
|
||||||
|
p ~ h6,
|
||||||
|
pre ~ h6,
|
||||||
|
table ~ h6,
|
||||||
|
ul ~ h6 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -509,6 +601,46 @@ del {
|
||||||
background-color: var(--primary-focus);
|
background-color: var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Embedded content
|
||||||
|
*/
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not([fill]) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Form elements
|
* Form elements
|
||||||
*/
|
*/
|
||||||
|
|
@ -519,6 +651,7 @@ textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
letter-spacing: inherit;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -539,7 +672,10 @@ legend {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
margin: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
resize: vertical;
|
||||||
|
resize: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
|
|
@ -547,7 +683,8 @@ textarea {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button {
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -565,6 +702,29 @@ textarea {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="color"],
|
||||||
|
[type="range"] {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
@ -603,9 +763,11 @@ textarea {
|
||||||
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;
|
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,
|
input::placeholder, input::-webkit-input-placeholder,
|
||||||
select::placeholder,
|
select::placeholder,
|
||||||
textarea::placeholder {
|
select::-webkit-input-placeholder,
|
||||||
|
textarea::placeholder,
|
||||||
|
textarea::-webkit-input-placeholder {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -664,8 +826,8 @@ select::-ms-expand {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:not([multiple]) {
|
select:not([multiple]):not([size]) {
|
||||||
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-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='rgba(115, 130, 140, 0.66)' 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-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -808,8 +970,8 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
|
@ -855,7 +1017,10 @@ a[role="button"][disabled] {
|
||||||
*/
|
*/
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-color: inherit;
|
||||||
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
text-indent: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -863,9 +1028,9 @@ td {
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-size: 0.875rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -890,10 +1055,15 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
|
|
@ -901,7 +1071,7 @@ kbd {
|
||||||
color: var(--code-color-1);
|
color: var(--code-color-1);
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -985,6 +1155,43 @@ kbd {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accessibility & User interaction
|
||||||
|
*/
|
||||||
|
[aria-busy="true"] {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-controls] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-disabled="true"],
|
||||||
|
[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden] {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden]:not(:focus) {
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea,
|
||||||
|
[tabindex] {
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Miscs
|
* Miscs
|
||||||
*/
|
*/
|
||||||
|
|
@ -997,6 +1204,7 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
display: inline-block;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1005,6 +1213,32 @@ template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: -webkit-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
border: solid;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog:not([open]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
||||||
|
|
@ -1017,9 +1251,9 @@ details {
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary {
|
details summary {
|
||||||
|
line-height: 1rem;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary::-webkit-details-marker {
|
details summary::-webkit-details-marker {
|
||||||
|
|
@ -1040,7 +1274,7 @@ details summary::after {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
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-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='rgba(115, 130, 140, 0.66)' 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-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -1246,6 +1480,7 @@ nav {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol,
|
||||||
nav ul {
|
nav ul {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -1253,10 +1488,12 @@ nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol:first-of-type,
|
||||||
nav ul:first-of-type {
|
nav ul:first-of-type {
|
||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol:last-of-type,
|
||||||
nav ul:last-of-type {
|
nav ul:last-of-type {
|
||||||
margin-right: -0.5rem;
|
margin-right: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1284,6 +1521,7 @@ nav a:hover, nav a:active, nav a:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav,
|
aside nav,
|
||||||
|
aside ol,
|
||||||
aside ul,
|
aside ul,
|
||||||
aside li {
|
aside li {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1349,3 +1587,20 @@ aside li a {
|
||||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reduce Motion Features
|
||||||
|
*/
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
background-attachment: initial;
|
||||||
|
animation-duration: 1ms;
|
||||||
|
animation-delay: -1ms;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
scroll-behavior: auto;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
301
css/pico.css
301
css/pico.css
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.0.5 (https://picocss.com)
|
* Pico.css v1.0.6 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
|
|
@ -155,16 +155,26 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
text-decoration: inherit;
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
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-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -259,9 +269,9 @@ body > footer {
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.container {
|
.container {
|
||||||
|
max-width: 510px;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
max-width: 510px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -376,15 +386,19 @@ sup {
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
dl dl,
|
||||||
max-width: 100%;
|
dl ol,
|
||||||
height: auto;
|
dl ul,
|
||||||
border-style: none;
|
ol dl,
|
||||||
|
ul dl {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg,
|
ol ol,
|
||||||
img {
|
ol ul,
|
||||||
vertical-align: text-bottom;
|
ul ol,
|
||||||
|
ul ul {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
address,
|
address,
|
||||||
|
|
@ -494,6 +508,84 @@ h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
address ~ h1,
|
||||||
|
blockquote ~ h1,
|
||||||
|
dl ~ h1,
|
||||||
|
figure ~ h1,
|
||||||
|
form ~ h1,
|
||||||
|
ol ~ h1,
|
||||||
|
p ~ h1,
|
||||||
|
pre ~ h1,
|
||||||
|
table ~ h1,
|
||||||
|
ul ~ h1 {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h2,
|
||||||
|
blockquote ~ h2,
|
||||||
|
dl ~ h2,
|
||||||
|
figure ~ h2,
|
||||||
|
form ~ h2,
|
||||||
|
ol ~ h2,
|
||||||
|
p ~ h2,
|
||||||
|
pre ~ h2,
|
||||||
|
table ~ h2,
|
||||||
|
ul ~ h2 {
|
||||||
|
margin-top: 2.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h3,
|
||||||
|
blockquote ~ h3,
|
||||||
|
dl ~ h3,
|
||||||
|
figure ~ h3,
|
||||||
|
form ~ h3,
|
||||||
|
ol ~ h3,
|
||||||
|
p ~ h3,
|
||||||
|
pre ~ h3,
|
||||||
|
table ~ h3,
|
||||||
|
ul ~ h3 {
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h4,
|
||||||
|
blockquote ~ h4,
|
||||||
|
dl ~ h4,
|
||||||
|
figure ~ h4,
|
||||||
|
form ~ h4,
|
||||||
|
ol ~ h4,
|
||||||
|
p ~ h4,
|
||||||
|
pre ~ h4,
|
||||||
|
table ~ h4,
|
||||||
|
ul ~ h4 {
|
||||||
|
margin-top: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h5,
|
||||||
|
blockquote ~ h5,
|
||||||
|
dl ~ h5,
|
||||||
|
figure ~ h5,
|
||||||
|
form ~ h5,
|
||||||
|
ol ~ h5,
|
||||||
|
p ~ h5,
|
||||||
|
pre ~ h5,
|
||||||
|
table ~ h5,
|
||||||
|
ul ~ h5 {
|
||||||
|
margin-top: 1.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h6,
|
||||||
|
blockquote ~ h6,
|
||||||
|
dl ~ h6,
|
||||||
|
figure ~ h6,
|
||||||
|
form ~ h6,
|
||||||
|
ol ~ h6,
|
||||||
|
p ~ h6,
|
||||||
|
pre ~ h6,
|
||||||
|
table ~ h6,
|
||||||
|
ul ~ h6 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -592,6 +684,46 @@ del {
|
||||||
background-color: var(--primary-focus);
|
background-color: var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Embedded content
|
||||||
|
*/
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not([fill]) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Form elements
|
* Form elements
|
||||||
*/
|
*/
|
||||||
|
|
@ -602,6 +734,7 @@ textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
letter-spacing: inherit;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -622,7 +755,10 @@ legend {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
margin: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
resize: vertical;
|
||||||
|
resize: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
|
|
@ -630,7 +766,8 @@ textarea {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button {
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -648,6 +785,29 @@ textarea {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="color"],
|
||||||
|
[type="range"] {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
@ -686,9 +846,11 @@ textarea {
|
||||||
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;
|
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,
|
input::placeholder, input::-webkit-input-placeholder,
|
||||||
select::placeholder,
|
select::placeholder,
|
||||||
textarea::placeholder {
|
select::-webkit-input-placeholder,
|
||||||
|
textarea::placeholder,
|
||||||
|
textarea::-webkit-input-placeholder {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -753,14 +915,14 @@ input:not([type="checkbox"]):not([type="radio"]).valid,
|
||||||
select.valid,
|
select.valid,
|
||||||
textarea.valid {
|
textarea.valid {
|
||||||
border-bottom: 1px solid var(--valid);
|
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");
|
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='rgba(40, 138, 106, 0.99)' 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:not([type="checkbox"]):not([type="radio"]).invalid,
|
input:not([type="checkbox"]):not([type="radio"]).invalid,
|
||||||
select.invalid,
|
select.invalid,
|
||||||
textarea.invalid {
|
textarea.invalid {
|
||||||
border-bottom: 1px solid var(--invalid);
|
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");
|
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='rgba(185, 70, 70, 0.99)' 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[type="color"] {
|
input[type="color"] {
|
||||||
|
|
@ -772,8 +934,8 @@ select::-ms-expand {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:not([multiple]) {
|
select:not([multiple]):not([size]) {
|
||||||
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-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='rgba(115, 130, 140, 0.66)' 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-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -916,8 +1078,8 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
|
@ -1101,7 +1263,10 @@ a.outline.contrast[role="button"]:focus {
|
||||||
*/
|
*/
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-color: inherit;
|
||||||
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
text-indent: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -1109,9 +1274,9 @@ td {
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-size: 0.875rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -1136,10 +1301,15 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
|
|
@ -1147,7 +1317,7 @@ kbd {
|
||||||
color: var(--code-color-1);
|
color: var(--code-color-1);
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -1231,6 +1401,43 @@ kbd {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accessibility & User interaction
|
||||||
|
*/
|
||||||
|
[aria-busy="true"] {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-controls] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-disabled="true"],
|
||||||
|
[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden] {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden]:not(:focus) {
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea,
|
||||||
|
[tabindex] {
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Miscs
|
* Miscs
|
||||||
*/
|
*/
|
||||||
|
|
@ -1243,6 +1450,7 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
display: inline-block;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1251,6 +1459,32 @@ template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: -webkit-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
border: solid;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog:not([open]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
||||||
|
|
@ -1263,9 +1497,9 @@ details {
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary {
|
details summary {
|
||||||
|
line-height: 1rem;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary::-webkit-details-marker {
|
details summary::-webkit-details-marker {
|
||||||
|
|
@ -1286,7 +1520,7 @@ details summary::after {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
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-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='rgba(115, 130, 140, 0.66)' 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-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -1492,6 +1726,7 @@ nav {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol,
|
||||||
nav ul {
|
nav ul {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -1499,10 +1734,12 @@ nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol:first-of-type,
|
||||||
nav ul:first-of-type {
|
nav ul:first-of-type {
|
||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol:last-of-type,
|
||||||
nav ul:last-of-type {
|
nav ul:last-of-type {
|
||||||
margin-right: -0.5rem;
|
margin-right: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1534,6 +1771,7 @@ nav a.contrast:not([role="button"]), nav a.contrast:not([role="button"]):hover,
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav,
|
aside nav,
|
||||||
|
aside ol,
|
||||||
aside ul,
|
aside ul,
|
||||||
aside li {
|
aside li {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1599,3 +1837,20 @@ aside li a {
|
||||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reduce Motion Features
|
||||||
|
*/
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
background-attachment: initial;
|
||||||
|
animation-duration: 1ms;
|
||||||
|
animation-delay: -1ms;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
scroll-behavior: auto;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.0.5 (https://picocss.com)
|
* Pico.css v1.0.6 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
|
|
@ -155,16 +155,26 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
text-decoration: inherit;
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
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-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -316,15 +326,19 @@ sup {
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
dl dl,
|
||||||
max-width: 100%;
|
dl ol,
|
||||||
height: auto;
|
dl ul,
|
||||||
border-style: none;
|
ol dl,
|
||||||
|
ul dl {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg,
|
ol ol,
|
||||||
img {
|
ol ul,
|
||||||
vertical-align: text-bottom;
|
ul ol,
|
||||||
|
ul ul {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
address,
|
address,
|
||||||
|
|
@ -407,6 +421,84 @@ h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
address ~ h1,
|
||||||
|
blockquote ~ h1,
|
||||||
|
dl ~ h1,
|
||||||
|
figure ~ h1,
|
||||||
|
form ~ h1,
|
||||||
|
ol ~ h1,
|
||||||
|
p ~ h1,
|
||||||
|
pre ~ h1,
|
||||||
|
table ~ h1,
|
||||||
|
ul ~ h1 {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h2,
|
||||||
|
blockquote ~ h2,
|
||||||
|
dl ~ h2,
|
||||||
|
figure ~ h2,
|
||||||
|
form ~ h2,
|
||||||
|
ol ~ h2,
|
||||||
|
p ~ h2,
|
||||||
|
pre ~ h2,
|
||||||
|
table ~ h2,
|
||||||
|
ul ~ h2 {
|
||||||
|
margin-top: 2.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h3,
|
||||||
|
blockquote ~ h3,
|
||||||
|
dl ~ h3,
|
||||||
|
figure ~ h3,
|
||||||
|
form ~ h3,
|
||||||
|
ol ~ h3,
|
||||||
|
p ~ h3,
|
||||||
|
pre ~ h3,
|
||||||
|
table ~ h3,
|
||||||
|
ul ~ h3 {
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h4,
|
||||||
|
blockquote ~ h4,
|
||||||
|
dl ~ h4,
|
||||||
|
figure ~ h4,
|
||||||
|
form ~ h4,
|
||||||
|
ol ~ h4,
|
||||||
|
p ~ h4,
|
||||||
|
pre ~ h4,
|
||||||
|
table ~ h4,
|
||||||
|
ul ~ h4 {
|
||||||
|
margin-top: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h5,
|
||||||
|
blockquote ~ h5,
|
||||||
|
dl ~ h5,
|
||||||
|
figure ~ h5,
|
||||||
|
form ~ h5,
|
||||||
|
ol ~ h5,
|
||||||
|
p ~ h5,
|
||||||
|
pre ~ h5,
|
||||||
|
table ~ h5,
|
||||||
|
ul ~ h5 {
|
||||||
|
margin-top: 1.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h6,
|
||||||
|
blockquote ~ h6,
|
||||||
|
dl ~ h6,
|
||||||
|
figure ~ h6,
|
||||||
|
form ~ h6,
|
||||||
|
ol ~ h6,
|
||||||
|
p ~ h6,
|
||||||
|
pre ~ h6,
|
||||||
|
table ~ h6,
|
||||||
|
ul ~ h6 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -505,6 +597,46 @@ del {
|
||||||
background-color: var(--primary-focus);
|
background-color: var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Embedded content
|
||||||
|
*/
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not([fill]) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Form elements
|
* Form elements
|
||||||
*/
|
*/
|
||||||
|
|
@ -515,6 +647,7 @@ textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
letter-spacing: inherit;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -535,7 +668,10 @@ legend {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
margin: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
resize: vertical;
|
||||||
|
resize: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
|
|
@ -543,7 +679,8 @@ textarea {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button {
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -561,6 +698,29 @@ textarea {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="color"],
|
||||||
|
[type="range"] {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
@ -599,9 +759,11 @@ textarea {
|
||||||
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;
|
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,
|
input::placeholder, input::-webkit-input-placeholder,
|
||||||
select::placeholder,
|
select::placeholder,
|
||||||
textarea::placeholder {
|
select::-webkit-input-placeholder,
|
||||||
|
textarea::placeholder,
|
||||||
|
textarea::-webkit-input-placeholder {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -660,8 +822,8 @@ select::-ms-expand {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:not([multiple]) {
|
select:not([multiple]):not([size]) {
|
||||||
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-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='rgba(115, 130, 140, 0.66)' 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-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -804,8 +966,8 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
|
@ -851,7 +1013,10 @@ a[role="button"][disabled] {
|
||||||
*/
|
*/
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-color: inherit;
|
||||||
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
text-indent: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -859,9 +1024,9 @@ td {
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-size: 0.875rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -886,10 +1051,15 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
|
|
@ -897,7 +1067,7 @@ kbd {
|
||||||
color: var(--code-color-1);
|
color: var(--code-color-1);
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -981,6 +1151,43 @@ kbd {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accessibility & User interaction
|
||||||
|
*/
|
||||||
|
[aria-busy="true"] {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-controls] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-disabled="true"],
|
||||||
|
[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden] {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden]:not(:focus) {
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea,
|
||||||
|
[tabindex] {
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Miscs
|
* Miscs
|
||||||
*/
|
*/
|
||||||
|
|
@ -993,6 +1200,7 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
display: inline-block;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1001,6 +1209,32 @@ template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: -webkit-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
border: solid;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog:not([open]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
||||||
|
|
@ -1013,9 +1247,9 @@ details {
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary {
|
details summary {
|
||||||
|
line-height: 1rem;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary::-webkit-details-marker {
|
details summary::-webkit-details-marker {
|
||||||
|
|
@ -1036,7 +1270,7 @@ details summary::after {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
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-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='rgba(115, 130, 140, 0.66)' 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-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -1242,6 +1476,7 @@ nav {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol,
|
||||||
nav ul {
|
nav ul {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -1249,10 +1484,12 @@ nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol:first-of-type,
|
||||||
nav ul:first-of-type {
|
nav ul:first-of-type {
|
||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav ol:last-of-type,
|
||||||
nav ul:last-of-type {
|
nav ul:last-of-type {
|
||||||
margin-right: -0.5rem;
|
margin-right: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1280,6 +1517,7 @@ nav a:hover, nav a:active, nav a:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav,
|
aside nav,
|
||||||
|
aside ol,
|
||||||
aside ul,
|
aside ul,
|
||||||
aside li {
|
aside li {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1345,3 +1583,20 @@ aside li a {
|
||||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reduce Motion Features
|
||||||
|
*/
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
background-attachment: initial;
|
||||||
|
animation-duration: 1ms;
|
||||||
|
animation-delay: -1ms;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
scroll-behavior: auto;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
4
css/pico.fluid.classless.min.css
vendored
4
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
4
css/pico.min.css
vendored
4
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.0.5 (https://picocss.com)
|
* Pico.css v1.0.6 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
|
|
@ -158,16 +158,26 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
text-decoration: inherit;
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
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-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -230,9 +240,9 @@ body > footer {
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.container {
|
.container {
|
||||||
|
max-width: 510px;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
max-width: 510px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -315,15 +325,19 @@ sup {
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
dl dl,
|
||||||
max-width: 100%;
|
dl ol,
|
||||||
height: auto;
|
dl ul,
|
||||||
border-style: none;
|
ol dl,
|
||||||
|
ul dl {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg,
|
ol ol,
|
||||||
img {
|
ol ul,
|
||||||
vertical-align: text-bottom;
|
ul ol,
|
||||||
|
ul ul {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
address,
|
address,
|
||||||
|
|
@ -432,6 +446,84 @@ h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
address ~ h1,
|
||||||
|
blockquote ~ h1,
|
||||||
|
dl ~ h1,
|
||||||
|
figure ~ h1,
|
||||||
|
form ~ h1,
|
||||||
|
ol ~ h1,
|
||||||
|
p ~ h1,
|
||||||
|
pre ~ h1,
|
||||||
|
table ~ h1,
|
||||||
|
ul ~ h1 {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h2,
|
||||||
|
blockquote ~ h2,
|
||||||
|
dl ~ h2,
|
||||||
|
figure ~ h2,
|
||||||
|
form ~ h2,
|
||||||
|
ol ~ h2,
|
||||||
|
p ~ h2,
|
||||||
|
pre ~ h2,
|
||||||
|
table ~ h2,
|
||||||
|
ul ~ h2 {
|
||||||
|
margin-top: 2.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h3,
|
||||||
|
blockquote ~ h3,
|
||||||
|
dl ~ h3,
|
||||||
|
figure ~ h3,
|
||||||
|
form ~ h3,
|
||||||
|
ol ~ h3,
|
||||||
|
p ~ h3,
|
||||||
|
pre ~ h3,
|
||||||
|
table ~ h3,
|
||||||
|
ul ~ h3 {
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h4,
|
||||||
|
blockquote ~ h4,
|
||||||
|
dl ~ h4,
|
||||||
|
figure ~ h4,
|
||||||
|
form ~ h4,
|
||||||
|
ol ~ h4,
|
||||||
|
p ~ h4,
|
||||||
|
pre ~ h4,
|
||||||
|
table ~ h4,
|
||||||
|
ul ~ h4 {
|
||||||
|
margin-top: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h5,
|
||||||
|
blockquote ~ h5,
|
||||||
|
dl ~ h5,
|
||||||
|
figure ~ h5,
|
||||||
|
form ~ h5,
|
||||||
|
ol ~ h5,
|
||||||
|
p ~ h5,
|
||||||
|
pre ~ h5,
|
||||||
|
table ~ h5,
|
||||||
|
ul ~ h5 {
|
||||||
|
margin-top: 1.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
address ~ h6,
|
||||||
|
blockquote ~ h6,
|
||||||
|
dl ~ h6,
|
||||||
|
figure ~ h6,
|
||||||
|
form ~ h6,
|
||||||
|
ol ~ h6,
|
||||||
|
p ~ h6,
|
||||||
|
pre ~ h6,
|
||||||
|
table ~ h6,
|
||||||
|
ul ~ h6 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -530,6 +622,46 @@ del {
|
||||||
background-color: var(--primary-focus);
|
background-color: var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Embedded content
|
||||||
|
*/
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not([fill]) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Form elements
|
* Form elements
|
||||||
*/
|
*/
|
||||||
|
|
@ -540,6 +672,7 @@ textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
letter-spacing: inherit;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -560,7 +693,10 @@ legend {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
margin: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
resize: vertical;
|
||||||
|
resize: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
|
|
@ -568,7 +704,8 @@ textarea {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button {
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -586,6 +723,29 @@ textarea {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="color"],
|
||||||
|
[type="range"] {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
@ -623,9 +783,11 @@ textarea {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder,
|
input::placeholder, input::-webkit-input-placeholder,
|
||||||
select::placeholder,
|
select::placeholder,
|
||||||
textarea::placeholder {
|
select::-webkit-input-placeholder,
|
||||||
|
textarea::placeholder,
|
||||||
|
textarea::-webkit-input-placeholder {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -684,8 +846,8 @@ select::-ms-expand {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:not([multiple]) {
|
select:not([multiple]):not([size]) {
|
||||||
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-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='rgba(115, 130, 140, 0.66)' 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-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -827,8 +989,8 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
|
@ -873,7 +1035,10 @@ a[role="button"][disabled] {
|
||||||
*/
|
*/
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-color: inherit;
|
||||||
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
text-indent: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -881,9 +1046,9 @@ td {
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-size: 0.875rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -900,3 +1065,40 @@ thead td {
|
||||||
tbody tr:nth-child(odd) {
|
tbody tr:nth-child(odd) {
|
||||||
background-color: var(--table-stripping);
|
background-color: var(--table-stripping);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accessibility & User interaction
|
||||||
|
*/
|
||||||
|
[aria-busy="true"] {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-controls] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-disabled="true"],
|
||||||
|
[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden] {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden]:not(:focus) {
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea,
|
||||||
|
[tabindex] {
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
|
||||||
4
css/pico.slim.min.css
vendored
4
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -101,7 +101,7 @@
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<p>There are 3 ways to get started with pico.css:</p>
|
<p>There are 3 ways to get started with pico.css:</p>
|
||||||
<h4>Install manually</h4>
|
<h4>Install manually</h4>
|
||||||
<a href="https://github.com/picocss/pico/archive/v1.0.5.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.
|
<p><a href="https://github.com/picocss/pico/releases/latest">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.</p>
|
||||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||||
<h4>Install from CDN</h4>
|
<h4>Install from CDN</h4>
|
||||||
<p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
|
<p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
|
||||||
|
|
@ -365,6 +365,8 @@
|
||||||
<th scope="col">Heading</th>
|
<th scope="col">Heading</th>
|
||||||
<th scope="col">Heading</th>
|
<th scope="col">Heading</th>
|
||||||
<th scope="col">Heading</th>
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
@ -377,6 +379,8 @@
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2</th>
|
<th scope="row">2</th>
|
||||||
|
|
@ -387,6 +391,8 @@
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">3</th>
|
<th scope="row">3</th>
|
||||||
|
|
@ -397,6 +403,8 @@
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -945,7 +953,7 @@
|
||||||
<hr>
|
<hr>
|
||||||
<p>
|
<p>
|
||||||
<small>
|
<small>
|
||||||
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a><br>
|
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a>, <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a> & <a href="https://csstools.github.io/sanitize.css/" class="secondary">Sanitize</a><br>
|
||||||
Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
|
Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
|
||||||
</small>
|
</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,9 @@
|
||||||
* Copyright 2019 - Licensed under MIT
|
* Copyright 2019 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// @prepros-append src/aside.js
|
// @append src/aside.js
|
||||||
// @prepros-append src/theme-switcher.js
|
// @append src/theme-switcher.js
|
||||||
// @prepros-append src/grid.js
|
// @append src/grid.js
|
||||||
// @prepros-append src/color-picker.js
|
// @append src/color-picker.js
|
||||||
// @prepros-append src/most-visible.js
|
// @append src/most-visible.js
|
||||||
// @prepros-append src/scrollspy.js
|
// @append src/scrollspy.js
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@picocss/pico",
|
"name": "@picocss/pico",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
|
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
|
||||||
"author": "Lucas Larroche",
|
"author": "Lucas Larroche",
|
||||||
"main": "./css/pico.min.css",
|
"main": "./css/pico.min.css",
|
||||||
|
|
|
||||||
|
|
@ -54,14 +54,38 @@ $spacing-input-button: .75rem 1rem !default;
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Sans serif native font stack
|
// Sans serif native font stack
|
||||||
$sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
$sans-serif:
|
||||||
"Apple Color Emoji", "Segoe UI Emoji",
|
system-ui,
|
||||||
"Segoe UI Symbol", "Noto Color Emoji" !default;
|
-apple-system, // macOS 10.11-10.12
|
||||||
|
"Segoe UI", // Windows 6+
|
||||||
|
"Roboto", // Android 4+
|
||||||
|
"Ubuntu", // Ubuntu 10.10+
|
||||||
|
"Cantarell", // Gnome 3+
|
||||||
|
"Noto Sans", // KDE Plasma 5+
|
||||||
|
sans-serif, // Fallback
|
||||||
|
"Apple Color Emoji", // macOS emoji
|
||||||
|
"Segoe UI Emoji", // Windows emoji
|
||||||
|
"Segoe UI Symbol", // Windows emoji
|
||||||
|
"Noto Color Emoji" // Linux emoji
|
||||||
|
!default;
|
||||||
|
|
||||||
// Monospace native font stack
|
// Monospace native font stack
|
||||||
$monospace: SFMono-Regular, Menlo, Monaco, Consolas,
|
// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||||
"Liberation Mono", "Courier New", monospace !default;
|
$monospace:
|
||||||
|
"Menlo", // macOS 10.10+
|
||||||
|
"Consolas", // Windows 6+
|
||||||
|
"Roboto Mono", // Android 4+
|
||||||
|
"Ubuntu Monospace", // Ubuntu 10.10+
|
||||||
|
"Noto Mono", // KDE Plasma 5+
|
||||||
|
"Oxygen Mono", // KDE Plasma 4+
|
||||||
|
"Liberation Mono", // Linux/OpenOffice fallback
|
||||||
|
monospace, // Fallback
|
||||||
|
"Apple Color Emoji", // macOS emoji
|
||||||
|
"Segoe UI Emoji", // Windows emoji
|
||||||
|
"Segoe UI Symbol", // Windows emoji
|
||||||
|
"Noto Color Emoji" // Linux emoji
|
||||||
|
!default;
|
||||||
|
|
||||||
$line-height: 1.5 !default;
|
$line-height: 1.5 !default;
|
||||||
$text-weight: 400 !default;
|
$text-weight: 400 !default;
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,9 @@ details {
|
||||||
border-bottom: 1px solid var(--muted-border);
|
border-bottom: 1px solid var(--muted-border);
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
|
line-height: 1rem;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1rem;
|
|
||||||
|
|
||||||
// Reset marker
|
// Reset marker
|
||||||
&::-webkit-details-marker {
|
&::-webkit-details-marker {
|
||||||
|
|
@ -27,14 +27,13 @@ details {
|
||||||
|
|
||||||
// Marker
|
// Marker
|
||||||
&::after {
|
&::after {
|
||||||
$caret-icon-color: "808080"; // Without '#' !important
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
// Source: https://feathericons.com/
|
// Source: https://feathericons.com/
|
||||||
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='%23" + $caret-icon-color + "' 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-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='#{rgba($grey-500, .66)}' 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-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ nav ul {
|
||||||
nav {
|
nav {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
ol,
|
||||||
ul {
|
ul {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -65,6 +66,7 @@ nav {
|
||||||
aside {
|
aside {
|
||||||
|
|
||||||
nav,
|
nav,
|
||||||
|
ol,
|
||||||
ul,
|
ul,
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,5 @@
|
||||||
&::after {
|
&::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
51
scss/content/_accessibility.scss
Normal file
51
scss/content/_accessibility.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
/**
|
||||||
|
* Accessibility & User interaction
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Reboot based on :
|
||||||
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Accessibility
|
||||||
|
|
||||||
|
// Change the cursor on busy elements in all browsers (opinionated)
|
||||||
|
[aria-busy="true"] {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the cursor on control elements in all browsers (opinionated)
|
||||||
|
[aria-controls] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
|
||||||
|
[aria-disabled="true"],
|
||||||
|
[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the display on visually hidden accessible elements in all browsers (opinionated)
|
||||||
|
[aria-hidden="false"][hidden] {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-hidden="false"][hidden]:not(:focus) {
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
// User interaction
|
||||||
|
// Remove the tapping delay in IE 10
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea,
|
||||||
|
[tabindex] {
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
@ -3,11 +3,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// 1. Change the font styles in all browsers.
|
// 1. Change the font styles in all browsers
|
||||||
// 2. Remove the margin in Firefox and Safari
|
// 2. Remove the margin in Firefox and Safari
|
||||||
// 3. Show the overflow in Edge
|
// 3. Show the overflow in Edge
|
||||||
button {
|
button {
|
||||||
|
|
@ -17,7 +18,7 @@ button {
|
||||||
text-transform: none; // 1
|
text-transform: none; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct the inability to style clickable types in iOS and Safari.
|
// Correct the inability to style clickable types in iOS and Safari
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type="button"],
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
|
|
@ -25,7 +26,7 @@ button,
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inner border and padding in Firefox.
|
// Remove the inner border and padding in Firefox
|
||||||
button::-moz-focus-inner,
|
button::-moz-focus-inner,
|
||||||
[type="button"]::-moz-focus-inner,
|
[type="button"]::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
|
@ -52,8 +53,8 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: $spacing-input-button;
|
padding: $spacing-input-button;
|
||||||
|
border: 1px solid transparent;
|
||||||
border-radius: $round;
|
border-radius: $round;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||||
// 2. Correct the odd `em` font sizing in all browsers.
|
// 2. Correct the odd `em` font sizing in all browsers
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
|
|
@ -16,6 +18,12 @@ samp {
|
||||||
font-size: 1rem; // 2
|
font-size: 1rem; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Prevent overflow of the container in all browsers (opinionated)
|
||||||
|
pre {
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
@ -27,7 +35,7 @@ kbd {
|
||||||
color: var(--code-color-1);
|
color: var(--code-color-1);
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: initial;
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
|
|
||||||
54
scss/content/_embedded.scss
Normal file
54
scss/content/_embedded.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
/**
|
||||||
|
* Embedded content
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Reboot based on :
|
||||||
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Change the alignment on media elements in all browsers (opinionated)
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in IE 9-
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in iOS 4-7
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the border on iframes in all browsers (opinionated)
|
||||||
|
iframe {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Remove the border on images inside links in IE 10.
|
||||||
|
// 2. Responsive by default
|
||||||
|
img {
|
||||||
|
max-width: 100%; // 2
|
||||||
|
height: auto; // 2
|
||||||
|
border-style: none; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the fill color to match the text color in all browsers (opinionated)
|
||||||
|
svg:not([fill]) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide the overflow in IE
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
@ -3,12 +3,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// 1. Change the font styles in all browsers.
|
// 1. Change the font styles in all browsers
|
||||||
// 2. Remove the margin in Firefox and Safari.
|
// 2. Remove the margin in Firefox and Safari
|
||||||
input,
|
input,
|
||||||
optgroup,
|
optgroup,
|
||||||
select,
|
select,
|
||||||
|
|
@ -16,6 +17,7 @@ textarea {
|
||||||
margin: 0; // 2
|
margin: 0; // 2
|
||||||
font-family: inherit; // 1
|
font-family: inherit; // 1
|
||||||
font-size: 1rem; // 1
|
font-size: 1rem; // 1
|
||||||
|
letter-spacing: inherit; // 2
|
||||||
line-height: $line-height; // 1
|
line-height: $line-height; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -24,15 +26,15 @@ input {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inheritance of text transform in Edge, Firefox, and IE.
|
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||||
select {
|
select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the text wrapping in Edge and IE.
|
// 1. Correct the text wrapping in Edge and IE
|
||||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||||
// 3. Remove the padding so developers are not caught out when they zero out
|
// 3. Remove the padding so developers are not caught out when they zero out
|
||||||
// `fieldset` elements in all browsers.
|
// `fieldset` elements in all browsers
|
||||||
legend {
|
legend {
|
||||||
display: table; // 1
|
display: table; // 1
|
||||||
max-width: 100%; // 1
|
max-width: 100%; // 1
|
||||||
|
|
@ -41,41 +43,75 @@ legend {
|
||||||
white-space: normal; // 1
|
white-space: normal; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the default vertical scrollbar in IE 10+.
|
// 1. Remove the margin in Firefox and Safari
|
||||||
|
// 2. Remove the default vertical scrollbar in IE
|
||||||
|
// 3. Change the resize direction in all browsers (opinionated)
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
margin: 0; // 1
|
||||||
|
overflow: auto; // 2
|
||||||
|
resize: vertical; // 3
|
||||||
|
resize: block; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the padding in IE 10.
|
// Remove the padding in IE 10
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
// Correct the cursor style of increment and decrement buttons in Safari
|
||||||
[type="number"]::-webkit-inner-spin-button {
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the odd appearance in Chrome and Safari.
|
// 1. Correct the odd appearance in Chrome and Safari
|
||||||
// 2. Correct the outline style in Safari.
|
// 2. Correct the outline style in Safari
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
-webkit-appearance: textfield; // 1
|
-webkit-appearance: textfield; // 1
|
||||||
outline-offset: -2px; // 2
|
outline-offset: -2px; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inner padding in Chrome and Safari on macOS.
|
// Remove the inner padding in Chrome and Safari on macOS
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type="search"]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||||
// 2. Change font properties to `inherit` in Safari.
|
// 2. Change font properties to `inherit` in Safari
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button; // 1
|
-webkit-appearance: button; // 1
|
||||||
font: inherit; // 2
|
font: inherit; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove the inner border and padding of focus outlines in Firefox
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restore the focus outline styles unset by the previous rule in Firefox
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the additional :invalid styles in Firefox
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the inconsistent appearance in IE (opinionated)
|
||||||
|
::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the border and padding in all browsers (opinionated)
|
||||||
|
[type="color"],
|
||||||
|
[type="range"] {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
@ -132,7 +168,8 @@ textarea {
|
||||||
box-shadow $transition;
|
box-shadow $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder,
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -181,17 +218,15 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.valid {
|
&.valid {
|
||||||
// Source: https://feathericons.com/
|
|
||||||
$valid-icon-color: "288a6a"; // Without '#' !important
|
|
||||||
border-bottom: 1px solid var(--valid);
|
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='%23" + $valid-icon-color + "' 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");
|
// Source: https://feathericons.com/
|
||||||
|
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='#{rgba($green-600, .99)}' 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");
|
||||||
}
|
}
|
||||||
|
|
||||||
&.invalid {
|
&.invalid {
|
||||||
// Source: https://feathericons.com/
|
|
||||||
$invalid-icon-color: "b94646"; // Without '#' !important
|
|
||||||
border-bottom: 1px solid var(--invalid);
|
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='%23" + $invalid-icon-color + "' 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");
|
// Source: https://feathericons.com/
|
||||||
|
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='#{rgba($red-700, .99)}' 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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -210,10 +245,9 @@ select {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([multiple]) {
|
&:not([multiple]):not([size]) {
|
||||||
// Source: https://feathericons.com/
|
// Source: https://feathericons.com/
|
||||||
$caret-icon-color: "808080"; // Without '#' !important
|
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='#{rgba($grey-500, .66)}' 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-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='%23" + $caret-icon-color + "' 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-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// 1. Add the correct box sizing in Firefox.
|
// 1. Add the correct box sizing in Firefox
|
||||||
// 2. Show the overflow in Edge and IE.
|
// 2. Show the overflow in Edge and IE
|
||||||
hr {
|
hr {
|
||||||
box-sizing: content-box; // 1
|
box-sizing: content-box; // 1
|
||||||
height: 0; // 1
|
height: 0; // 1
|
||||||
|
|
@ -17,13 +18,43 @@ hr {
|
||||||
border-top: 1px solid var(--muted-border);
|
border-top: 1px solid var(--muted-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
// 1. Add the correct display in Edge 18- and IE
|
||||||
|
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
display: inline-block; // 1
|
||||||
|
vertical-align: baseline; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the correct display in IE 10+.
|
// Add the correct display in IE 10+
|
||||||
[hidden],
|
[hidden],
|
||||||
template {
|
template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add the correct styles in Edge 18-, IE, and Safari
|
||||||
|
dialog {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: -webkit-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
border: solid;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog:not([open]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in IE 9-
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
|
||||||
29
scss/content/_reduce-motion.scss
Normal file
29
scss/content/_reduce-motion.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
@if $enable-transitions {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reduce Motion Features
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Based on :
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Remove animations when motion is reduced (opinionated)
|
||||||
|
// 2. Remove fixed background attachments when motion is reduced (opinionated)
|
||||||
|
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
|
||||||
|
// 4. Remove transitions when motion is reduced (opinionated)
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
background-attachment: initial; // 2
|
||||||
|
animation-duration: 1ms; // 1
|
||||||
|
animation-delay: -1ms; // 1
|
||||||
|
animation-iteration-count: 1; // 1
|
||||||
|
scroll-behavior: auto; // 3
|
||||||
|
transition-delay: 0s; // 4
|
||||||
|
transition-duration: 0s; // 4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,20 +2,36 @@
|
||||||
* Table
|
* Table
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Reboot based on :
|
||||||
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Collapse border spacing in all browsers (opinionated).
|
||||||
|
// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
|
||||||
|
// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-color: inherit; // 2
|
||||||
|
border-collapse: collapse; // 1
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
text-indent: 0; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Cells
|
// Cells
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
padding: ($spacing-gutter/2) $spacing-gutter;
|
padding: ($spacing-gutter/2) $spacing-gutter;
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-size: 0.875rem;
|
||||||
font-weight: $text-weight;
|
font-weight: $text-weight;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Titles
|
// Titles
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,18 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
// Add the correct font weight in Chrome, Edge, and Safari
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -28,16 +29,21 @@ sup {
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Remove the border on images inside links in IE 10.
|
// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||||
// 2. Responsive by default
|
dl dl,
|
||||||
img {
|
dl ol,
|
||||||
max-width: 100%; // 2
|
dl ul,
|
||||||
height: auto; // 2
|
ol dl,
|
||||||
border-style: none; // 1
|
ul dl {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
svg,
|
|
||||||
img {
|
// Remove the margin on nested lists in Edge 18- and IE
|
||||||
vertical-align: text-bottom;
|
ol ol,
|
||||||
|
ol ul,
|
||||||
|
ul ol,
|
||||||
|
ul ul {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -62,7 +68,7 @@ ul {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
// 1. Remove the gray background on active links in IE 10.
|
// 1. Remove the gray background on active links in IE 10
|
||||||
a {
|
a {
|
||||||
background-color: transparent; // 1
|
background-color: transparent; // 1
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
|
|
@ -174,6 +180,43 @@ h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Margin-top for headings after a typography block
|
||||||
|
address,
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
figure,
|
||||||
|
form,
|
||||||
|
ol,
|
||||||
|
p,
|
||||||
|
pre,
|
||||||
|
table,
|
||||||
|
ul {
|
||||||
|
& ~ h1 {
|
||||||
|
margin-top: $spacing-typography*2;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ h2 {
|
||||||
|
margin-top: $spacing-typography*1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ h3 {
|
||||||
|
margin-top: $spacing-typography*1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ h4 {
|
||||||
|
margin-top: $spacing-typography*1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ h5 {
|
||||||
|
margin-top: $spacing-typography*1.125;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ h6 {
|
||||||
|
margin-top: $spacing-typography;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Multi-level heading
|
// Multi-level heading
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: $spacing-typography;
|
||||||
|
|
@ -258,7 +301,7 @@ blockquote {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Abbreviations
|
// Abbreviations
|
||||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari.
|
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: 1px dotted;
|
border-bottom: 1px dotted;
|
||||||
text-decoration: none; // 1
|
text-decoration: none; // 1
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,9 @@
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
max-width: map-get($viewports, "sm");
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
max-width: map-get($viewports, "sm");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,23 +4,38 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: border-box; // 1
|
box-sizing: border-box; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the line height in all browsers.
|
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||||
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||||
// 3. Change the default tap highlight to be completely transparent in iOS.
|
::before,
|
||||||
|
::after {
|
||||||
|
text-decoration: inherit; // 1
|
||||||
|
vertical-align: inherit; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Correct the line height in all browsers
|
||||||
|
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||||
|
// 3. Change the default tap highlight to be completely transparent in iOS
|
||||||
|
// 4. Use the default cursor in all browsers (opinionated)
|
||||||
|
// 5. Use a 4-space tab width in all browsers (opinionated)
|
||||||
|
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%; // 2
|
-webkit-text-size-adjust: 100%; // 2
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
|
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
|
||||||
|
-moz-tab-size: 4; // 5
|
||||||
|
-ms-text-size-adjust: 100%; // 6
|
||||||
|
-webkit-text-size-adjust: 100%; // 6
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-family: $sans-serif;
|
font-family: $sans-serif;
|
||||||
|
|
@ -28,6 +43,7 @@ html {
|
||||||
font-weight: $text-weight;
|
font-weight: $text-weight;
|
||||||
line-height: $line-height; // 1
|
line-height: $line-height; // 1
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
cursor: default; // 4
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($base-font, "sm") and
|
map-get($base-font, "sm") and
|
||||||
|
|
@ -64,5 +80,4 @@ html {
|
||||||
font-size: map-get($base-font, "xl");
|
font-size: map-get($base-font, "xl");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot based on :
|
||||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Render the `main` element consistently in IE.
|
// Render the `main` element consistently in IE
|
||||||
main {
|
main {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.0.5 (https://picocss.com)
|
* Pico.css v1.0.6 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -18,14 +18,16 @@
|
||||||
@import "layout/scroller"; // figure
|
@import "layout/scroller"; // figure
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
@import "content/typography"; // a, headings, p, ul, blockquote ...
|
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||||
|
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||||
@import "content/form"; // label, input, select, ...
|
@import "content/form"; // label, input, select, ...
|
||||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||||
@import "content/button"; // button, a[role=button], ...
|
@import "content/button"; // button, a[role=button], ...
|
||||||
@import "content/button-styles"; // .secondary, .contrast, .outline
|
@import "content/button-styles"; // .secondary, .contrast, .outline
|
||||||
@import "content/table"; // table, tr, td, ...
|
@import "content/table"; // table, tr, td, ...
|
||||||
@import "content/code"; // pre, code, ...
|
@import "content/code"; // pre, code, ...
|
||||||
@import "content/miscs"; // hr, progress, template, [hidden]
|
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||||
|
@import "content/miscs"; // hr, progress, template, [hidden], dialog, canvas
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import "components/accordion"; // details, summary
|
@import "components/accordion"; // details, summary
|
||||||
|
|
@ -33,3 +35,6 @@
|
||||||
@import "components/card-sectioning"; // article > header, footer, pre
|
@import "components/card-sectioning"; // article > header, footer, pre
|
||||||
@import "components/nav"; // nav
|
@import "components/nav"; // nav
|
||||||
@import "components/tooltip"; // data-tooltip
|
@import "components/tooltip"; // data-tooltip
|
||||||
|
|
||||||
|
// Reduce motion
|
||||||
|
@import "content/reduce-motion"; // prefers-reduced-motion
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.0.5 (https://picocss.com)
|
* Pico.css v1.0.6 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
|
|
@ -30,26 +30,31 @@ $enable-transitions: false;
|
||||||
@import "themes/default";
|
@import "themes/default";
|
||||||
|
|
||||||
// Layout
|
// Layout
|
||||||
@import "layout/document"; // html
|
@import "layout/document"; // html
|
||||||
@import "layout/sectioning"; // body, header, main, footer
|
@import "layout/sectioning"; // body, header, main, footer
|
||||||
@import "layout/container"; // .container, .container-fluid
|
@import "layout/container"; // .container, .container-fluid
|
||||||
// @import "layout/section"; // section
|
// @import "layout/section"; // section
|
||||||
@import "layout/grid"; // .grid
|
@import "layout/grid"; // .grid
|
||||||
@import "layout/scroller"; // figure
|
@import "layout/scroller"; // figure
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
@import "content/typography"; // a, headings, p, ul, blockquote ...
|
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||||
@import "content/form"; // label, input, select, ...
|
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
@import "content/form"; // label, input, select, ...
|
||||||
@import "content/button"; // button, a[role=button], ...
|
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||||
// @import "content/button-styles"; // .secondary, .contrast, .outline
|
@import "content/button"; // button, a[role=button], ...
|
||||||
@import "content/table"; // table, tr, td, ...
|
// @import "content/button-styles"; // .secondary, .contrast, .outline
|
||||||
// @import "content/code"; // pre, code, ...
|
@import "content/table"; // table, tr, td, ...
|
||||||
// @import "content/miscs"; // hr, progress, template, [hidden]
|
// @import "content/code"; // pre, code, ...
|
||||||
|
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||||
|
// @import "content/miscs"; // hr, progress, template, [hidden], dialog
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
// @import "components/accordion"; // details, summary
|
// @import "components/accordion"; // details, summary
|
||||||
// @import "components/card"; // article
|
// @import "components/card"; // article
|
||||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||||
// @import "components/nav"; // nav
|
// @import "components/nav"; // nav
|
||||||
// @import "components/tooltip"; // data-tooltip
|
// @import "components/tooltip"; // data-tooltip
|
||||||
|
|
||||||
|
// Reduce motion
|
||||||
|
// @import "content/reduce-motion"; // prefers-reduced-motion
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue