website/resources/colors.css

151 lines
3.4 KiB
CSS
Raw Normal View History

2025-02-05 20:37:42 -05:00
:root {
color-scheme: light dark;
/* Selenized White/Black for main content */
--bg-0: light-dark(#ffffff,#181818);
--bg-1: light-dark(#ebebeb,#252525);
--bg-2: light-dark(#cdcdcd,#3b3b3b);
--dim-0: light-dark(#878787,#777777);
--fg-0: light-dark(#474747,#b9b9b9);
--fg-1: light-dark(#282828,#dedede);
2025-02-05 22:36:10 -05:00
--red: light-dark(#d6000c,#ed4a46);
2025-02-05 20:37:42 -05:00
--green: light-dark(#1d9700,#70b433);
--yellow: light-dark(#c49700,#dbb32d);
--blue: light-dark(#0064e4,#368aeb);
--magenta: light-dark(#dd0f9d,#eb6eb7);
--cyan: light-dark(#00ad9c,#3fc5b7);
--orange: light-dark(#d04a00,#e67f43);
--violet: light-dark(#7f51d6,#a580e2);
/* Selenized Light/Dark for code content */
--code-bg-0: light-dark(#fbf3db,#103c48);
--code-bg-1: light-dark(#ece3cc,#184956);
--code-bg-2: light-dark(#d5cdb6,#2d5b69);
--code-dim-0: light-dark(#909995,#72898f);
--code-fg-0: light-dark(#53676d,#adbcbc);
--code-fg-1: light-dark(#3a4d53,#cad8d9);
--code-red: light-dark(#d2212d,#fa5750);
--code-green: light-dark(#489100,#75b938);
--code-yellow: light-dark(#ad8900,#dbb32d);
--code-blue: light-dark(#0072d4,#4695f7);
--code-magenta: light-dark(#ca4898,#f275be);
--code-cyan: light-dark(#009c8f,#41c7b9);
--code-orange: light-dark(#c25d1e,#ed8649);
--code-violet: light-dark(#8762c6,#af88eb);
2025-02-05 22:36:10 -05:00
/* Set basic colors */
color: var(--fg-0);
background-color: var(--bg-1);
}
/* Set link colors */
a:link {
color: var(--cyan);
}
a:visited {
color: var(--magenta);
}
/* Color our main content elements */
.site-header {
background-color: var(--bg-0);
}
.site-logo {
color: var(--red);
}
.site-tagline {
color: var(--dim-0);
}
2025-02-09 05:28:59 -05:00
.post-body, .post-header, .post-blurbs, .tags, .tags .tag-blurb-post,
2025-02-09 05:51:52 -05:00
.series-header, .series-blurbs, .series-list {
2025-02-05 22:36:10 -05:00
background-color: var(--bg-0);
}
2025-02-09 05:51:52 -05:00
.post-blurb, .tags .tag-blurb, .series-list-blurb {
2025-02-05 22:36:10 -05:00
background-color: var(--bg-1);
}
2025-02-07 01:58:44 -05:00
:not(.tags) .tag-blurb {
background-color: var(--bg-0);
}
:not(.tags) .tag-blurb-post {
background-color: var(--bg-1);
}
2025-02-09 05:51:52 -05:00
.post-title, .post-blurbs h1, .series-header h1, .series-list h1 {
2025-02-05 22:36:10 -05:00
color: var(--green);
}
2025-02-07 01:58:44 -05:00
.post-body h2, .post-body h3, .post-body h4 {
2025-02-05 22:36:10 -05:00
color: var(--fg-1);
2025-02-05 20:37:42 -05:00
}
2025-02-09 05:28:59 -05:00
.post-info > *, .series-info > * {
background-color: var(--bg-2);
}
blockquote {
background-color: var(--bg-1);
}
2025-02-09 22:27:17 -05:00
.unit-test {
background-color: var(--bg-1);
}
.unit-test > span {
background-color: var(--bg-2);
color: var(--fg-1);
}
.unit-test i {
color: var(--green);
}
2025-02-06 18:16:33 -05:00
/* Colorization for idris code blocks */
2025-02-06 18:16:33 -05:00
code {
color: var(--code-fg-0);
background-color: var(--code-bg-0);
}
2025-02-06 18:28:53 -05:00
.hl-type {
color: var(--code-yellow);
}
.hl-module {
font-style: italic;
color: car(--code-fg-1);
}
.hl-function {
color: var(--code-green);
}
.hl-bound {
color: var(--code-magenta);
}
.hl-keyword {
color: var(--code-blue);
}
.hl-comment {
color: var(--code-dim-0);
}
.hl-data {
color: var(--code-red);
}
/* Colorization for pygments code blocks */
.hl-kd, .hl-k, .hl-kc, .hl-bp {
color: var(--code-green);
}
.hl-n, .hl-nn {
color: var(--code-violet);
}
.hl-s, .hl-se {
color: var(--code-cyan);
}
.hl-nf, .hl-fm {
color: var(--code-blue);
}
.hl-c1, .hl-cm {
color: var(--code-dim-0);
}
.hl-mf, .hl-mi {
color: var(--code-magenta);
}
.hl-kt, .hl-nb, .hl-nc {
color: var(--code-orange);
}
.hl-cp {
color: var(--code-red);
}
.hl-se {
font-style: italic;
}
.hl-fm, .hl-k, .hl-o, .hl-kp {
font-weight: bold;
}