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

Small fixes

Browse source 
- @mixin and @include for dark scheme
- unset `--font-weight` in `hgroup`
This commit is contained in:
Lucas Larroche 2021-07-03 00:22:17 +07:00
parent 0c1d8b5972
commit 537f5008c2
17 changed files with 25 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -69,7 +69,8 @@ npm install @picocss/pico
## Class-less version ## Class-less version
Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)). Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
In this version, `header`, `main` and `footer` act as container. In this version, `header`, `main` and `footer` act as container.
Use the default `.classless `version if you need centered viewports: Use the default `.classless `version if you need centered viewports:

4
css/pico.classless.css
View file

@ -357,7 +357,7 @@ kbd {
} }
} }
[data-theme="dark"] :root:not([data-theme="light"]) { [data-theme="dark"] {
color-scheme: dark; color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: #bbc6ce; --color: #bbc6ce;
@ -740,9 +740,9 @@ hgroup > * {
hgroup > *:last-child { hgroup > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset;
font-family: unset; font-family: unset;
font-size: 1rem; font-size: 1rem;
font-weight: unset;
} }
p { p {

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

File diff suppressed because one or more lines are too long

4
css/pico.css
View file

@ -357,7 +357,7 @@ kbd {
} }
} }
[data-theme="dark"] :root:not([data-theme="light"]) { [data-theme="dark"] {
color-scheme: dark; color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: #bbc6ce; --color: #bbc6ce;
@ -790,9 +790,9 @@ hgroup > * {
hgroup > *:last-child { hgroup > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset;
font-family: unset; font-family: unset;
font-size: 1rem; font-size: 1rem;
font-weight: unset;
} }
p { p {

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

@ -357,7 +357,7 @@ kbd {
} }
} }
[data-theme="dark"] :root:not([data-theme="light"]) { [data-theme="dark"] {
color-scheme: dark; color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: #bbc6ce; --color: #bbc6ce;
@ -706,9 +706,9 @@ hgroup > * {
hgroup > *:last-child { hgroup > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset;
font-family: unset; font-family: unset;
font-size: 1rem; font-size: 1rem;
font-weight: unset;
} }
p { p {

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

4
css/pico.slim.css
View file

@ -300,7 +300,7 @@ kbd {
} }
} }
[data-theme="dark"] :root:not([data-theme="light"]) { [data-theme="dark"] {
color-scheme: dark; color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: #bbc6ce; --color: #bbc6ce;
@ -732,9 +732,9 @@ hgroup > * {
hgroup > *:last-child { hgroup > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset;
font-family: unset; font-family: unset;
font-size: 1rem; font-size: 1rem;
font-weight: unset;
} }
p { p {

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

File diff suppressed because one or more lines are too long

2
css/themes/default.css
View file

@ -353,7 +353,7 @@ kbd {
} }
} }
[data-theme="dark"] :root:not([data-theme="light"]) { [data-theme="dark"] {
color-scheme: dark; color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: #bbc6ce; --color: #bbc6ce;

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
docs/css/pico.docs.css
View file

@ -320,10 +320,6 @@ a[role=button] {
/** /**
* Docs: Code * Docs: Code
*/ */
code {
--font-weight: 400;
}
section > pre { section > pre {
margin: var(--block-spacing-vertical) 0; margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);

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

File diff suppressed because one or more lines are too long

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

@ -2,10 +2,6 @@
* Docs: Code * Docs: Code
*/ */
code {
--font-weight: 400;
}
// Custom spacings for <pre> (Horizontally aligned with <article> content) // Custom spacings for <pre> (Horizontally aligned with <article> content)
section > pre { section > pre {
margin: var(--block-spacing-vertical) 0; margin: var(--block-spacing-vertical) 0;

2
scss/content/_typography.scss
View file

@ -195,9 +195,9 @@ hgroup {
> *:last-child { > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset;
font-family: unset; font-family: unset;
font-size: 1rem; font-size: 1rem;
font-weight: unset;
} }
} }

7
scss/themes/default.scss
View file

@ -15,12 +15,15 @@
// Dark theme (Auto) // Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled // Automatically enabled if user has Dark mode enabled
@import "default/dark";
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
@import "default/dark"; :root:not([data-theme="light"]) {
@include dark;
}
} }
// Dark theme (Forced) // Dark theme (Forced)
// Enabled if forced with data-theme="dark" // Enabled if forced with data-theme="dark"
[data-theme="dark"] { [data-theme="dark"] {
@import "default/dark"; @include dark;
} }

3
scss/themes/default/_dark.scss
View file

@ -1,6 +1,7 @@
// Default: Dark theme // Default: Dark theme
:root:not([data-theme="light"]) {
@mixin dark {
// Document // Document
color-scheme: dark; color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)}; --background-color: #{mix($black, $grey-900, 37.5%)};