deduplicate css rules by using media query to set variables (#420)

* deduplicate css rules by using media query to set variables

* Update xess/xess.css

Co-authored-by: Xe Iaso <me@xeiaso.net>
Signed-off-by: Benjamin Armintor <armintor@gmail.com>

---------

Signed-off-by: Benjamin Armintor <armintor@gmail.com>
Co-authored-by: Xe Iaso <me@xeiaso.net>
This commit is contained in:
Benjamin Armintor 2025-05-02 14:17:27 -04:00 committed by GitHub
parent fc54e95208
commit 9e760b1c16
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 60 deletions

View File

@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased] ## [Unreleased]
- Use CSS variables to deduplicate styles
- Fixed native packages not containing the stdlib and botPolicies.yaml - Fixed native packages not containing the stdlib and botPolicies.yaml
- Change import syntax to allow multi-level imports - Change import syntax to allow multi-level imports

View File

@ -3,25 +3,28 @@
--body-preformatted-font: Iosevka Curly Iaso, monospace; --body-preformatted-font: Iosevka Curly Iaso, monospace;
--body-title-font: Podkova, serif; --body-title-font: Podkova, serif;
--dark-background: #1d2021; --background: #1d2021;
--dark-text: #f9f5d7; --text: #f9f5d7;
--dark-text-selection: #d3869b; --text-selection: #d3869b;
--dark-preformatted-background: #3c3836; --preformatted-background: #3c3836;
--dark-link-foreground: #b16286; --link-foreground: #b16286;
--dark-link-background: #282828; --link-background: #282828;
--dark-blockquote-border-left: 1px solid #bdae93; --blockquote-border-left: 1px solid #bdae93;
--light-background: #f9f5d7;
--light-text: #1d2021;
--light-text-selection: #d3869b;
--light-preformatted-background: #ebdbb2;
--light-link-foreground: #b16286;
--light-link-background: #fbf1c7;
--light-blockquote-border-left: 1px solid #655c54;
--progress-bar-outline: #b16286 solid 4px; --progress-bar-outline: #b16286 solid 4px;
--progress-bar-fill: #b16286; --progress-bar-fill: #b16286;
} }
@media (prefers-color-scheme: light) {
:root {
--background: #f9f5d7;
--text: #1d2021;
--text-selection: #d3869b;
--preformatted-background: #ebdbb2;
--link-foreground: #b16286;
--link-background: #fbf1c7;
--blockquote-border-left: 1px solid #655c54;
}
}
@font-face { @font-face {
font-family: "Geist"; font-family: "Geist";
@ -54,12 +57,12 @@ main {
} }
::selection { ::selection {
background: var(--dark-text-selection); background: var(--text-selection);
} }
body { body {
background: var(--dark-background); background: var(--background);
color: var(--dark-text); color: var(--text);
} }
body, body,
@ -113,7 +116,7 @@ html {
} }
pre { pre {
background-color: var(--dark-preformatted-background); background-color: var(--preformatted-background);
padding: 1em; padding: 1em;
border: 0; border: 0;
font-family: var(--body-preformatted-font); font-family: var(--body-preformatted-font);
@ -122,8 +125,8 @@ pre {
a, a,
a:active, a:active,
a:visited { a:visited {
color: var(--dark-link-foreground); color: var(--link-foreground);
background-color: var(--dark-link-background); background-color: var(--link-background);
} }
h1, h1,
@ -136,7 +139,7 @@ h5 {
} }
blockquote { blockquote {
border-left: var(--dark-blockquote-border-left); border-left: var(--blockquote-border-left);
margin: 0.5em 10px; margin: 0.5em 10px;
padding: 0.5em 10px; padding: 0.5em 10px;
} }
@ -144,41 +147,3 @@ blockquote {
footer { footer {
text-align: center; text-align: center;
} }
@media (prefers-color-scheme: light) {
::selection {
background: var(--light-text-selection);
}
body {
background: var(--light-background);
color: var(--light-text);
}
pre {
background-color: var(--light-preformatted-background);
padding: 1em;
border: 0;
}
a,
a:active,
a:visited {
color: var(--light-link-foreground);
background-color: var(--light-link-background);
}
h1,
h2,
h3,
h4,
h5 {
margin-bottom: 0.1rem;
}
blockquote {
border-left: var(--light-blockquote-border-left);
margin: 0.5em 10px;
padding: 0.5em 10px;
}
}