mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improvements

Browse source 
- Edit code colors and add a color for comments
- Add ::selection
- Small edits for cards: last-child and overflow
- Add card-sectioning (header, footer, pre)
- Change global hue for Primary color
- Remove border for pre
- Add querySelectorAll() for theme-switcher.js
- Update docs
This commit is contained in:
Lucas 2019-12-01 16:35:38 +07:00
parent c3f9d8d8c8
commit 85e21d35de
23 changed files with 937 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

293
css/pico.classless.css
View file

@ -9,35 +9,37 @@
[data-theme="light"],
:root:not([data-theme="dark"]) {
--background: #FFF;
--text: #415762;
--h1: #1b2a32;
--h2: #2c4049;
--h3: #415762;
--h4: #596e78;
--h5: #73848c;
--h6: #8a9ba3;
--primary: #1086c1;
--primary-hover: #086a9b;
--primary-focus: rgba(16, 134, 193, 0.125);
--text: #415462;
--h1: #1b2832;
--h2: #2c3d49;
--h3: #415462;
--h4: #596b78;
--h5: #73828c;
--h6: #8a99a3;
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d2d8;
--input-border: #c8d1d8;
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #2c4049;
--muted-text: #7e8f98;
--muted-background: #edf1f3;
--muted-border: #edf1f3;
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
--muted-border: #edf0f3;
--card-background: #FFF;
--card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
--card-sections: #f3f5f7;
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--code-background: #f3f5f7;
--code-border: #d5dde2;
--code-inlined: #edf1f3;
--code-color-1: #9f6060;
--code-color-2: #2f7ca2;
--table-border: rgba(237, 241, 243, 0.75);
--table-stripping: rgba(27, 42, 50, 0.033);
--code-inlined: #edf0f3;
--code-color-2: #a65980;
--code-color-3: #478085;
--code-color-4: #998866;
--code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02);
}
/**
@ -46,36 +48,39 @@
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: #10191e;
--text: #a2b1b9;
--h1: #edf1f3;
--h2: #d5dde2;
--h3: #bbc7ce;
--h4: #a2b1b9;
--h5: #8a9ba3;
--h6: #73848c;
--primary: #1086c1;
--primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25);
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--input-background: #10191e;
--input-border: #374b56;
--input-background: #10181e;
--input-border: #374956;
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c;
--muted-background: #10191e;
--muted-border: #23353e;
--card-background: #17242b;
--muted-text: #73828c;
--muted-background: #10181e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
--code-background: #141f24;
--code-border: #23353e;
--code-inlined: rgba(65, 87, 98, 0.25);
--code-color-1: #ac5353;
--code-color-2: #4d91b3;
--table-border: #10191e;
--table-stripping: rgba(237, 241, 243, 0.033);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02);
}
}
@ -84,36 +89,39 @@
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
--background: #10191e;
--text: #a2b1b9;
--h1: #edf1f3;
--h2: #d5dde2;
--h3: #bbc7ce;
--h4: #a2b1b9;
--h5: #8a9ba3;
--h6: #73848c;
--primary: #1086c1;
--primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25);
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--input-background: #10191e;
--input-border: #374b56;
--input-background: #10181e;
--input-border: #374956;
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c;
--muted-background: #10191e;
--muted-border: #23353e;
--card-background: #17242b;
--muted-text: #73828c;
--muted-background: #10181e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
--code-background: #141f24;
--code-border: #23353e;
--code-inlined: rgba(65, 87, 98, 0.25);
--code-color-1: #ac5353;
--code-color-2: #4d91b3;
--table-border: #10191e;
--table-stripping: rgba(237, 241, 243, 0.033);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02);
}
/**
@ -526,6 +534,10 @@ del {
color: var(--invalid);
}
::selection {
background-color: var(--primary-focus);
}
/**
* Form elements
*/
@ -948,7 +960,7 @@ pre,
code,
kbd {
background: var(--code-inlined);
color: var(--muted-text);
color: var(--code-color-1);
font-size: 85%;
font-weight: 400;
line-height: 1;
@ -999,7 +1011,6 @@ pre {
margin-left: -1rem;
padding: 2rem 1rem;
overflow-x: auto;
border-left: 0.25rem solid var(--code-border);
background: var(--code-background);
}
@ -1019,20 +1030,25 @@ pre > code {
}
code b {
color: var(--code-color-1);
color: var(--code-color-2);
font-weight: normal;
}
code i {
color: var(--code-color-2);
color: var(--code-color-3);
font-style: normal;
}
code u {
color: var(--text);
color: var(--code-color-4);
text-decoration: none;
}
code em {
color: var(--code-color-5);
font-style: normal;
}
kbd {
background-color: var(--secondary);
color: var(--secondary-inverse);
@ -1131,6 +1147,7 @@ article {
margin-right: -1rem;
margin-left: -1rem;
padding: 2rem 1rem;
overflow: hidden;
background: var(--card-background);
box-shadow: var(--card-shadow);
}
@ -1164,6 +1181,132 @@ article {
}
}
article > *:not(footer):not(pre):last-child {
margin-bottom: 0;
}
/**
* Card sectionning (<article> > header, footer|pre)
*/
article > header,
article > footer {
background-color: var(--card-sections);
}
article > header,
article > footer,
article > pre {
margin: -1rem;
padding: 2rem 1rem;
}
@media (min-width: 576px) {
article > header,
article > footer,
article > pre {
margin: -2.5rem;
padding: 2rem 2.5rem;
}
}
@media (min-width: 768px) {
article > header,
article > footer,
article > pre {
margin: -3rem;
padding: 2rem 3rem;
}
}
@media (min-width: 992px) {
article > header,
article > footer,
article > pre {
margin: -3.5rem;
padding: 2rem 3.5rem;
}
}
@media (min-width: 1200px) {
article > header,
article > footer,
article > pre {
margin: -4rem;
padding: 2rem 4rem;
}
}
article > header {
margin-top: -2rem;
margin-bottom: 2rem;
}
@media (min-width: 576px) {
article > header {
margin-top: -2.5rem;
margin-bottom: 2.5rem;
}
}
@media (min-width: 768px) {
article > header {
margin-top: -3rem;
margin-bottom: 3rem;
}
}
@media (min-width: 992px) {
article > header {
margin-top: -3.5rem;
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
article > header {
margin-top: -4rem;
margin-bottom: 4rem;
}
}
article > footer,
article > pre {
margin-top: 2rem;
margin-bottom: -2rem;
}
@media (min-width: 576px) {
article > footer,
article > pre {
margin-top: 2.5rem;
margin-bottom: -2.5rem;
}
}
@media (min-width: 768px) {
article > footer,
article > pre {
margin-top: 3rem;
margin-bottom: -3rem;
}
}
@media (min-width: 992px) {
article > footer,
article > pre {
margin-top: 3.5rem;
margin-bottom: -3.5rem;
}
}
@media (min-width: 1200px) {
article > footer,
article > pre {
margin-top: 4rem;
margin-bottom: -4rem;
}
}
/**
* Nav
*/

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

329
css/pico.css
View file

@ -9,44 +9,46 @@
[data-theme="light"],
:root:not([data-theme="dark"]) {
--background: #FFF;
--text: #415762;
--h1: #1b2a32;
--h2: #2c4049;
--h3: #415762;
--h4: #596e78;
--h5: #73848c;
--h6: #8a9ba3;
--primary: #1086c1;
--primary-hover: #086a9b;
--primary-focus: rgba(16, 134, 193, 0.125);
--text: #415462;
--h1: #1b2832;
--h2: #2c3d49;
--h3: #415462;
--h4: #596b78;
--h5: #73828c;
--h6: #8a99a3;
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--secondary: #73848c;
--secondary-hover: #415762;
--secondary-focus: rgba(115, 132, 140, 0.125);
--secondary: #73828c;
--secondary-hover: #415462;
--secondary-focus: rgba(115, 130, 140, 0.125);
--secondary-inverse: #FFF;
--contrast: #2c4049;
--contrast-hover: #0d1519;
--contrast-focus: rgba(115, 132, 140, 0.125);
--contrast: #2c3d49;
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d2d8;
--input-border: #c8d1d8;
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #2c4049;
--muted-text: #7e8f98;
--muted-background: #edf1f3;
--muted-border: #edf1f3;
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
--muted-border: #edf0f3;
--card-background: #FFF;
--card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
--card-sections: #f3f5f7;
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--code-background: #f3f5f7;
--code-border: #d5dde2;
--code-inlined: #edf1f3;
--code-color-1: #9f6060;
--code-color-2: #2f7ca2;
--table-border: rgba(237, 241, 243, 0.75);
--table-stripping: rgba(27, 42, 50, 0.033);
--code-inlined: #edf0f3;
--code-color-2: #a65980;
--code-color-3: #478085;
--code-color-4: #998866;
--code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02);
}
/**
@ -55,45 +57,48 @@
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: #10191e;
--text: #a2b1b9;
--h1: #edf1f3;
--h2: #d5dde2;
--h3: #bbc7ce;
--h4: #a2b1b9;
--h5: #8a9ba3;
--h6: #73848c;
--primary: #1086c1;
--primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25);
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--secondary: #596e78;
--secondary-hover: #73848c;
--secondary-focus: rgba(89, 110, 120, 0.25);
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(89, 107, 120, 0.25);
--secondary-inverse: #FFF;
--contrast: #d5dde2;
--contrast: #d5dce2;
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 110, 120, 0.25);
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-inverse: #10191e;
--input-background: #10191e;
--input-border: #374b56;
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c;
--muted-background: #10191e;
--muted-border: #23353e;
--card-background: #17242b;
--muted-text: #73828c;
--muted-background: #10181e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
--code-background: #141f24;
--code-border: #23353e;
--code-inlined: rgba(65, 87, 98, 0.25);
--code-color-1: #ac5353;
--code-color-2: #4d91b3;
--table-border: #10191e;
--table-stripping: rgba(237, 241, 243, 0.033);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02);
}
}
@ -102,45 +107,48 @@
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
--background: #10191e;
--text: #a2b1b9;
--h1: #edf1f3;
--h2: #d5dde2;
--h3: #bbc7ce;
--h4: #a2b1b9;
--h5: #8a9ba3;
--h6: #73848c;
--primary: #1086c1;
--primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25);
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--secondary: #596e78;
--secondary-hover: #73848c;
--secondary-focus: rgba(89, 110, 120, 0.25);
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(89, 107, 120, 0.25);
--secondary-inverse: #FFF;
--contrast: #d5dde2;
--contrast: #d5dce2;
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 110, 120, 0.25);
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-inverse: #10191e;
--input-background: #10191e;
--input-border: #374b56;
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c;
--muted-background: #10191e;
--muted-border: #23353e;
--card-background: #17242b;
--muted-text: #73828c;
--muted-background: #10181e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
--code-background: #141f24;
--code-border: #23353e;
--code-inlined: rgba(65, 87, 98, 0.25);
--code-color-1: #ac5353;
--code-color-2: #4d91b3;
--table-border: #10191e;
--table-stripping: rgba(237, 241, 243, 0.033);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02);
}
/**
@ -634,6 +642,10 @@ del {
color: var(--invalid);
}
::selection {
background-color: var(--primary-focus);
}
/**
* Form elements
*/
@ -1198,7 +1210,7 @@ pre,
code,
kbd {
background: var(--code-inlined);
color: var(--muted-text);
color: var(--code-color-1);
font-size: 85%;
font-weight: 400;
line-height: 1;
@ -1249,7 +1261,6 @@ pre {
margin-left: -1rem;
padding: 2rem 1rem;
overflow-x: auto;
border-left: 0.25rem solid var(--code-border);
background: var(--code-background);
}
@ -1269,20 +1280,25 @@ pre > code {
}
code b {
color: var(--code-color-1);
color: var(--code-color-2);
font-weight: normal;
}
code i {
color: var(--code-color-2);
color: var(--code-color-3);
font-style: normal;
}
code u {
color: var(--text);
color: var(--code-color-4);
text-decoration: none;
}
code em {
color: var(--code-color-5);
font-style: normal;
}
kbd {
background-color: var(--secondary);
color: var(--secondary-inverse);
@ -1381,6 +1397,7 @@ article {
margin-right: -1rem;
margin-left: -1rem;
padding: 2rem 1rem;
overflow: hidden;
background: var(--card-background);
box-shadow: var(--card-shadow);
}
@ -1414,6 +1431,132 @@ article {
}
}
article > *:not(footer):not(pre):last-child {
margin-bottom: 0;
}
/**
* Card sectionning (<article> > header, footer|pre)
*/
article > header,
article > footer {
background-color: var(--card-sections);
}
article > header,
article > footer,
article > pre {
margin: -1rem;
padding: 2rem 1rem;
}
@media (min-width: 576px) {
article > header,
article > footer,
article > pre {
margin: -2.5rem;
padding: 2rem 2.5rem;
}
}
@media (min-width: 768px) {
article > header,
article > footer,
article > pre {
margin: -3rem;
padding: 2rem 3rem;
}
}
@media (min-width: 992px) {
article > header,
article > footer,
article > pre {
margin: -3.5rem;
padding: 2rem 3.5rem;
}
}
@media (min-width: 1200px) {
article > header,
article > footer,
article > pre {
margin: -4rem;
padding: 2rem 4rem;
}
}
article > header {
margin-top: -2rem;
margin-bottom: 2rem;
}
@media (min-width: 576px) {
article > header {
margin-top: -2.5rem;
margin-bottom: 2.5rem;
}
}
@media (min-width: 768px) {
article > header {
margin-top: -3rem;
margin-bottom: 3rem;
}
}
@media (min-width: 992px) {
article > header {
margin-top: -3.5rem;
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
article > header {
margin-top: -4rem;
margin-bottom: 4rem;
}
}
article > footer,
article > pre {
margin-top: 2rem;
margin-bottom: -2rem;
}
@media (min-width: 576px) {
article > footer,
article > pre {
margin-top: 2.5rem;
margin-bottom: -2.5rem;
}
}
@media (min-width: 768px) {
article > footer,
article > pre {
margin-top: 3rem;
margin-bottom: -3rem;
}
}
@media (min-width: 992px) {
article > footer,
article > pre {
margin-top: 3.5rem;
margin-bottom: -3.5rem;
}
}
@media (min-width: 1200px) {
article > footer,
article > pre {
margin-top: 4rem;
margin-bottom: -4rem;
}
}
/**
* Nav
*/

293
css/pico.fluid.classless.css
View file

@ -9,35 +9,37 @@
[data-theme="light"],
:root:not([data-theme="dark"]) {
--background: #FFF;
--text: #415762;
--h1: #1b2a32;
--h2: #2c4049;
--h3: #415762;
--h4: #596e78;
--h5: #73848c;
--h6: #8a9ba3;
--primary: #1086c1;
--primary-hover: #086a9b;
--primary-focus: rgba(16, 134, 193, 0.125);
--text: #415462;
--h1: #1b2832;
--h2: #2c3d49;
--h3: #415462;
--h4: #596b78;
--h5: #73828c;
--h6: #8a99a3;
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d2d8;
--input-border: #c8d1d8;
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #2c4049;
--muted-text: #7e8f98;
--muted-background: #edf1f3;
--muted-border: #edf1f3;
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
--muted-border: #edf0f3;
--card-background: #FFF;
--card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
--card-sections: #f3f5f7;
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--code-background: #f3f5f7;
--code-border: #d5dde2;
--code-inlined: #edf1f3;
--code-color-1: #9f6060;
--code-color-2: #2f7ca2;
--table-border: rgba(237, 241, 243, 0.75);
--table-stripping: rgba(27, 42, 50, 0.033);
--code-inlined: #edf0f3;
--code-color-2: #a65980;
--code-color-3: #478085;
--code-color-4: #998866;
--code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02);
}
/**
@ -46,36 +48,39 @@
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: #10191e;
--text: #a2b1b9;
--h1: #edf1f3;
--h2: #d5dde2;
--h3: #bbc7ce;
--h4: #a2b1b9;
--h5: #8a9ba3;
--h6: #73848c;
--primary: #1086c1;
--primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25);
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--input-background: #10191e;
--input-border: #374b56;
--input-background: #10181e;
--input-border: #374956;
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c;
--muted-background: #10191e;
--muted-border: #23353e;
--card-background: #17242b;
--muted-text: #73828c;
--muted-background: #10181e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
--code-background: #141f24;
--code-border: #23353e;
--code-inlined: rgba(65, 87, 98, 0.25);
--code-color-1: #ac5353;
--code-color-2: #4d91b3;
--table-border: #10191e;
--table-stripping: rgba(237, 241, 243, 0.033);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02);
}
}
@ -84,36 +89,39 @@
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
--background: #10191e;
--text: #a2b1b9;
--h1: #edf1f3;
--h2: #d5dde2;
--h3: #bbc7ce;
--h4: #a2b1b9;
--h5: #8a9ba3;
--h6: #73848c;
--primary: #1086c1;
--primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25);
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--input-background: #10191e;
--input-border: #374b56;
--input-background: #10181e;
--input-border: #374956;
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c;
--muted-background: #10191e;
--muted-border: #23353e;
--card-background: #17242b;
--muted-text: #73828c;
--muted-background: #10181e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
--code-background: #141f24;
--code-border: #23353e;
--code-inlined: rgba(65, 87, 98, 0.25);
--code-color-1: #ac5353;
--code-color-2: #4d91b3;
--table-border: #10191e;
--table-stripping: rgba(237, 241, 243, 0.033);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02);
}
/**
@ -522,6 +530,10 @@ del {
color: var(--invalid);
}
::selection {
background-color: var(--primary-focus);
}
/**
* Form elements
*/
@ -944,7 +956,7 @@ pre,
code,
kbd {
background: var(--code-inlined);
color: var(--muted-text);
color: var(--code-color-1);
font-size: 85%;
font-weight: 400;
line-height: 1;
@ -995,7 +1007,6 @@ pre {
margin-left: -1rem;
padding: 2rem 1rem;
overflow-x: auto;
border-left: 0.25rem solid var(--code-border);
background: var(--code-background);
}
@ -1015,20 +1026,25 @@ pre > code {
}
code b {
color: var(--code-color-1);
color: var(--code-color-2);
font-weight: normal;
}
code i {
color: var(--code-color-2);
color: var(--code-color-3);
font-style: normal;
}
code u {
color: var(--text);
color: var(--code-color-4);
text-decoration: none;
}
code em {
color: var(--code-color-5);
font-style: normal;
}
kbd {
background-color: var(--secondary);
color: var(--secondary-inverse);
@ -1127,6 +1143,7 @@ article {
margin-right: -1rem;
margin-left: -1rem;
padding: 2rem 1rem;
overflow: hidden;
background: var(--card-background);
box-shadow: var(--card-shadow);
}
@ -1160,6 +1177,132 @@ article {
}
}
article > *:not(footer):not(pre):last-child {
margin-bottom: 0;
}
/**
* Card sectionning (<article> > header, footer|pre)
*/
article > header,
article > footer {
background-color: var(--card-sections);
}
article > header,
article > footer,
article > pre {
margin: -1rem;
padding: 2rem 1rem;
}
@media (min-width: 576px) {
article > header,
article > footer,
article > pre {
margin: -2.5rem;
padding: 2rem 2.5rem;
}
}
@media (min-width: 768px) {
article > header,
article > footer,
article > pre {
margin: -3rem;
padding: 2rem 3rem;
}
}
@media (min-width: 992px) {
article > header,
article > footer,
article > pre {
margin: -3.5rem;
padding: 2rem 3.5rem;
}
}
@media (min-width: 1200px) {
article > header,
article > footer,
article > pre {
margin: -4rem;
padding: 2rem 4rem;
}
}
article > header {
margin-top: -2rem;
margin-bottom: 2rem;
}
@media (min-width: 576px) {
article > header {
margin-top: -2.5rem;
margin-bottom: 2.5rem;
}
}
@media (min-width: 768px) {
article > header {
margin-top: -3rem;
margin-bottom: 3rem;
}
}
@media (min-width: 992px) {
article > header {
margin-top: -3.5rem;
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
article > header {
margin-top: -4rem;
margin-bottom: 4rem;
}
}
article > footer,
article > pre {
margin-top: 2rem;
margin-bottom: -2rem;
}
@media (min-width: 576px) {
article > footer,
article > pre {
margin-top: 2.5rem;
margin-bottom: -2.5rem;
}
}
@media (min-width: 768px) {
article > footer,
article > pre {
margin-top: 3rem;
margin-bottom: -3rem;
}
}
@media (min-width: 992px) {
article > footer,
article > pre {
margin-top: 3.5rem;
margin-bottom: -3.5rem;
}
}
@media (min-width: 1200px) {
article > footer,
article > pre {
margin-top: 4rem;
margin-bottom: -4rem;
}
}
/**
* Nav
*/

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

61
docs/css/pico.docs.css
View file

@ -8,7 +8,7 @@
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7);
--nav-border: rgba(115, 132, 140, 0.2);
--nav-border: rgba(115, 130, 140, 0.2);
}
/**
@ -17,8 +17,8 @@
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: rgba(16, 25, 30, 0.8);
--nav-border: rgba(115, 132, 140, 0.2);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
}
}
@ -27,8 +27,8 @@
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
--nav-background: rgba(16, 25, 30, 0.8);
--nav-border: rgba(115, 132, 140, 0.2);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
}
/**
@ -167,9 +167,10 @@ main > aside details {
}
main > aside details summary {
color: var(--h3);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
color: var(--h3);
}
main > aside details summary::after {
@ -370,19 +371,11 @@ a[role=button] {
content: 'Bulky';
}
[data-theme="invalid"] pre {
border-color: var(--invalid);
}
[data-theme="valid"]:before {
background: var(--valid);
content: 'Great';
}
[data-theme="valid"] pre {
border-color: var(--valid);
}
section[title="love"] [data-theme="invalid"]:before {
content: 'Not so great';
}
@ -427,46 +420,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
}
}
/**
* Docs: Code inside <article>
*/
article pre {
margin-top: 2rem;
margin-bottom: -2rem;
}
@media (min-width: 576px) {
article pre {
padding: 2rem 2.5rem;
margin: -2.5rem;
margin-top: 2.5rem;
}
}
@media (min-width: 768px) {
article pre {
padding: 2rem 3rem;
margin: -3rem;
margin-top: 3rem;
}
}
@media (min-width: 992px) {
article pre {
padding: 2rem 3.5rem;
margin: -3.5rem;
margin-top: 3.5rem;
}
}
@media (min-width: 1200px) {
article pre {
padding: 2rem 4rem;
margin: -4rem;
margin-top: 4rem;
}
}
/**
* Docs: Theme switcher
*/

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

56
docs/index.html
View file

@ -113,7 +113,7 @@
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<p>Starter template:</p>
<pre><code>&lt;!doctype html&gt;
<pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
&lt;<b>head</b>&gt;
&lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
@ -211,18 +211,18 @@
<p>SCSS:</p>
<pre data-theme="generated"><code>// <span class="name">Custom colors</span>
<pre><code><em>// <span class="name">Custom colors</em></span>
<i>$primary-500</i>: <u class="c500">...</u>;
<i>$primary-600</i>: <u class="c600">...</u>;
<i>$primary-700</i>: <u class="c700">...</u>;
// Pico library
<em>// Pico library</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre>
<p>CSS:</p>
<pre data-theme="generated"><code>/* <span class="name"></span>Light theme (Default) */
/* Can be forced with data-theme="light" */
<pre><code><em>/* <span class="name"></span>Light theme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
@ -232,8 +232,8 @@
}
/* <span class="name"></span>Dark theme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
<em>/* <span class="name"></span>Dark theme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme="light"])</b> {
<i>--primary</i>: <u class="c600">...</u>;
@ -243,8 +243,8 @@
}
/* <span class="name"></span>Dark theme (Forced) */
/* Enabled if forced with data-theme="dark" */
<em>/* <span class="name"></span>Dark theme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme="<u>dark</u>"]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
@ -264,7 +264,6 @@
<h3>For wild HTML purists!</h3>
</hgroup>
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
<p>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code>, <code>.contrast</code> and <code>.outline</code>.</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
@ -656,11 +655,11 @@
<pre><code>
&lt;<b>form</b>&gt;
&lt;!-- Grid --&gt;
<em>&lt;!-- Grid --&gt;</em>
&lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt;
&lt;<b>div</b>&gt;
&lt;!-- Markup example 1: input is inside label --&gt;
<em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
First name
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
@ -676,12 +675,12 @@
&lt;/<b>section</b>&gt;
&lt;!-- Markup example 2: input is after label --&gt;
<em>&lt;!-- Markup example 2: input is after label --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"email"</u>&gt;Email address&lt;/<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>&gt;
&lt;<b>small</b>&gt;We'll never share your email with anyone else.&lt;/<b>small</b>&gt;
&lt;!-- Button --&gt;
<em>&lt;!-- Button --&gt;</em>
&lt;<b>button</b> <i>type</i>=<u>"submit"</u>&gt;Submit&lt;/<b>button</b>&gt;
&lt;/<b>form</b>&gt;</code></pre>
@ -748,14 +747,14 @@
</label>
</fieldset>
<pre><code>&lt;!-- Select --&gt;
<pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"country"</u>&gt;Country&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"country</u>"&gt;
&lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
&lt;!-- Radios --&gt;
<em>&lt;!-- Radios --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"male"</u>&gt;
@ -772,7 +771,7 @@
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
&lt;!-- Checkbox --&gt;
<em>&lt;!-- Checkbox --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
@ -780,7 +779,7 @@
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
&lt;!-- Switch --&gt;
<em>&lt;!-- Switch --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
@ -842,6 +841,27 @@
I'm a card!
&lt;/<b>article</b>&gt;</code></pre>
<p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p>
<article>
<header>
Header
</header>
Body
<footer>
Footer
</footer>
</article>
<pre><code>&lt;<b>article</b>&gt;
&lt;<b>header</b>&gt;
Header
&lt;/<b>header</b>&gt;
Body
&lt;<b>footer</b>&gt;
Footer
&lt;/<b>footer</b>&gt;
&lt;/<b>article</b>&gt;</code></pre>
</section><!-- ./ Docs: Card -->
<!-- Docs: Navs -->

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

7
docs/js/src/theme-switcher.js
View file

@ -101,8 +101,11 @@
// Apply theme
document.querySelector('html').setAttribute('data-theme', set);
document.querySelector(switcher.selector).innerHTML = label;
document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label));
var switchers = document.querySelectorAll(switcher.selector);
for (var i = 0; i < switchers.length; i++) {
switchers[i].innerHTML = label;
switchers[i].setAttribute('aria-label', stripTags(label));
}
switcher.currentTheme = set;
}

52
docs/scss/components/_card-code.scss
View file

@ -1,52 +0,0 @@
/**
* Docs: Code inside <article>
*/
// Custom spacings
article pre {
margin-top: $spacing-block;
margin-bottom: -$spacing-gutter*2;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
margin: -$spacing-block*map-get($spacing-factor, "sm");
margin-top: $spacing-block*map-get($spacing-factor, "sm");
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
margin: -$spacing-block*map-get($spacing-factor, "md");
margin-top: $spacing-block*map-get($spacing-factor, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
margin: -$spacing-block*map-get($spacing-factor, "lg");
margin-top: $spacing-block*map-get($spacing-factor, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
margin: -$spacing-block*map-get($spacing-factor, "xl");
margin-top: $spacing-block*map-get($spacing-factor, "xl");
}
}
}

8
docs/scss/content/_code.scss
View file

@ -83,10 +83,6 @@ pre {
background: var(--invalid);
content: 'Bulky';
}
pre {
border-color: var(--invalid);
}
}
[data-theme="valid"] {
@ -94,10 +90,6 @@ pre {
background: var(--valid);
content: 'Great';
}
pre {
border-color: var(--valid);
}
}
section[title="love"] [data-theme="invalid"] {

3
docs/scss/layout/_aside.scss
View file

@ -53,9 +53,10 @@ main > aside {
border-bottom: none;
summary {
color: var(--h3);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
color: var(--h3);
&::after {
display: none;

2
docs/scss/pico.docs.scss
View file

@ -21,5 +21,5 @@
// Components
@import "components/nav";
@import "components/card-code";
//@import "components/card-code";
@import "components/theme-switcher";

4
scss/_colors.scss
View file

@ -1,5 +1,5 @@
// Navy-Grey
$grey-hue: 200 !default;
$grey-hue: 205 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 200;
$primary-hue: 195;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;

145
scss/components/_card-sectioning.scss Normal file
View file

@ -0,0 +1,145 @@
/**
* Card sectionning (<article> > header, footer|pre)
*/
article {
> header,
> footer {
background-color: var(--card-sections);
}
> header,
> footer,
> pre {
margin: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin: -$spacing-block*map-get($spacing-factor, "sm");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: -$spacing-block*map-get($spacing-factor, "md");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: -$spacing-block*map-get($spacing-factor, "lg");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: -$spacing-block*map-get($spacing-factor, "xl");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
}
}
}
> header {
margin-top: -$spacing-gutter*2;
margin-bottom: $spacing-block;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
margin-bottom: $spacing-block*map-get($spacing-factor, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
}
}
}
> footer,
> pre {
margin-top: $spacing-block;
margin-bottom: -$spacing-gutter*2;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: $spacing-block*map-get($spacing-factor, "sm");
margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: $spacing-block*map-get($spacing-factor, "md");
margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: $spacing-block*map-get($spacing-factor, "lg");
margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: $spacing-block*map-get($spacing-factor, "xl");
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
}
}
}
}

6
scss/components/_card.scss
View file

@ -7,6 +7,7 @@ article {
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
overflow: hidden;
background: var(--card-background);
box-shadow: var(--card-shadow);
@ -53,4 +54,9 @@ article {
padding: $spacing-block*map-get($spacing-factor, "xl");
}
}
// Remove last-child margin bottom
> *:not(footer):not(pre):last-child {
margin-bottom: 0;
}
}

15
scss/content/_code.scss
View file

@ -24,7 +24,7 @@ pre,
code,
kbd {
background: var(--code-inlined);
color: var(--muted-text);
color: var(--code-color-1);
font-size: 85%;
font-weight: 400;
line-height: 1;
@ -66,7 +66,6 @@ pre {
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
overflow-x: auto;
border-left: .25rem solid var(--code-border);
background: var(--code-background);
@media (min-width: map-get($breakpoints, "sm")) {
@ -88,21 +87,27 @@ code {
// Tags
b {
color: var(--code-color-1);
color: var(--code-color-2);
font-weight: normal;
}
// Properties
i {
color: var(--code-color-2);
color: var(--code-color-3);
font-style: normal;
}
// Values
u {
color: var(--text);
color: var(--code-color-4);
text-decoration: none;
}
// Comments
em {
color: var(--code-color-5);
font-style: normal;
}
}
// kbd

5
scss/content/_typography.scss
View file

@ -309,3 +309,8 @@ ins {
del {
color: var(--invalid);
}
// selection
::selection {
background-color: var(--primary-focus);
}

1
scss/pico.scss
View file

@ -31,5 +31,6 @@
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/card-sectioning"; // article > header, footer|pre
@import "components/nav"; // nav
@import "components/tooltip"; // data-tooltip

22
scss/themes/_dark.scss
View file

@ -55,18 +55,21 @@
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
--code-color-1: #{$grey-500)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table
--table-border: #{darken($grey-900, 6%)};
--table-stripping: #{rgba($grey-50,.033)};
--table-stripping: #{rgba($grey-50,.02)};
}
}
@ -128,16 +131,19 @@
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
--code-color-1: #{$grey-500)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table
--table-border: #{darken($grey-900, 6%)};
--table-stripping: #{rgba($grey-50,.033)};
--table-stripping: #{rgba($grey-50,.02)};
}

11
scss/themes/_light.scss
View file

@ -25,7 +25,6 @@
--primary-inverse: #{$white};
@if $enable-classes {
// Secondary Call-to-Action and links
--secondary: #{$grey-500};
--secondary-hover: #{$grey-700};
@ -55,16 +54,18 @@
// Card
--card-background: #{$white};
--card-sections: #{lighten($grey-50, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-border: #{$grey-100};
--code-inlined: #{$grey-50};
--code-color-1: #{desaturate($red-700, 20%)};
--code-color-2: #{desaturate($primary-600, 30%)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 40%)};
--code-color-4: #{hsl(40, 20%, 50%)};
--code-color-5: #{mix($grey-300, $grey-400)};
// Table
--table-border: #{rgba($grey-50, .75)};
--table-stripping: #{rgba($grey-900,.033)};
--table-stripping: #{rgba($grey-900,.02)};
}