Small fixes

- @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

View file

@ -69,7 +69,8 @@ npm install @picocss/pico
## 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.
Use the default `.classless `version if you need centered viewports:

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

View file

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

File diff suppressed because one or more lines are too long

View file

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

File diff suppressed because one or more lines are too long

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

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

View file

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