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

Docs: Adapt the DOM and styles for code blocks #36

Browse source
This commit is contained in:
Lucas Larroche 2021-10-23 23:02:36 +07:00
parent d64bb2343d
commit b40a9277f2
7 changed files with 108 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,11 +2,22 @@
* Docs: Code
*/
// Custom spacings for <pre> (Horizontally aligned with <article> content)
// Code block inside article
article > footer.code {
background: var(--article-code-background-color);
}
article pre,
article pre code {
background: transparent;
margin-bottom: 0;
}
// Code block outside article
// Horizontally aligned with <article> content
section > pre {
background: var(--article-code-background-color);
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
}
@ -36,7 +47,7 @@ section > pre {
// Spacing for Valid & Invalid badge
code {
padding: calc(var(--spacing) * 1.625) 0;
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
}
}

18
docs/scss/themes/_docs.scss
View file

@ -4,5 +4,23 @@
@import "../../../scss/themes/default/colors";
@import "docs/icons";
// Light theme (Default)
// Can be forced with data-theme="light"
@import "docs/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@import "docs/dark";
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark;
}
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark;
}

24
docs/scss/themes/docs/_dark.scss
View file

@ -1,23 +1,9 @@
// Dark theme (Auto) [Additions for docs]
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}
}
// Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
// Dark theme [Additions for docs]
@mixin dark {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}
--article-code-background-color: var(--code-background-color);
}

1
docs/scss/themes/docs/_light.scss
View file

@ -7,4 +7,5 @@
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{$white};
--article-code-background-color: #{mix($grey-50, $white, 33%)};
}