142 lines
3 KiB
CSS
142 lines
3 KiB
CSS
@layer baseline, baseline-raised, print;
|
|
/* https://color.adobe.com/create/color-contrast-analyzer */
|
|
/*dark theme*/
|
|
@layer baseline{
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-color: #000;
|
|
/*
|
|
* #5ac
|
|
* */
|
|
--normal-text: #CCC;
|
|
--focus-outline-color: #f00;
|
|
--link-clicked: #B250D8;
|
|
--link-unclicked: #d80;
|
|
--link-active: lab(100% 0% 100%);
|
|
--header-bg: hsl(0,0%,15%);
|
|
--nav-link-color: #6B0;
|
|
--nav-link-bg-color: hsl(0,0%,25%);
|
|
--nav-link-bg-color-hover:hsl(0,0%,20%);
|
|
--content-border-color: #5ac;
|
|
/*stolen from code theme*/
|
|
--blockquote-bg: rgb(29, 31, 33);
|
|
--highlight-bg: #fff;
|
|
--highlight-fg: #000;
|
|
--nav-link-bg-color-active: #118411;
|
|
--nav-link-color-active: white;
|
|
}
|
|
}
|
|
/*
|
|
*#ABABD4;
|
|
*bs-primary-bg-subtle: #cfe2ff;
|
|
--bs-secondary-bg-subtle: #e2e3e5;
|
|
--bs-success-bg-subtle: #d1e7dd;
|
|
--bs-info-bg-subtle: #cff4fc;
|
|
--bs-warning-bg-subtle: #fff3cd;
|
|
--bs-danger-bg-subtle: #f8d7da;
|
|
--bs-light-bg-subtle: #fcfcfd;
|
|
* */
|
|
/*light theme*/
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg-color: #fff;
|
|
--normal-text: #000;
|
|
--focus-outline-color: #f00;
|
|
--link-unclicked: #2535B4;
|
|
--link-clicked: #832244;
|
|
--link-active: lab(20% 80% -80%);
|
|
/*#E6DDE6
|
|
* #dce2e5
|
|
*
|
|
* promising
|
|
* #b4d2ec*/
|
|
|
|
--header-bg: hsl(0,0%,85%);
|
|
/*#841163
|
|
* #115e84*/
|
|
--nav-link-color: #118411;
|
|
--nav-link-bg-color: hsl(0,0%,75%);
|
|
--nav-link-bg-color-hover:hsl(0,0%,70%);
|
|
--content-border-color: #026;
|
|
--blockquote-bg: rgb(226,224,222);
|
|
--highlight-bg: #000;
|
|
--highlight-fg: #fff;
|
|
--nav-link-bg-color-active: #118411;
|
|
--nav-link-color-active: white;
|
|
}
|
|
}
|
|
}
|
|
@layer baseline-raised {
|
|
.nav-link {
|
|
color: var(--nav-link-color);
|
|
background-color: var(--nav-link-bg-color);
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: var(--nav-link-bg-color-hover);
|
|
}
|
|
|
|
.nav-link:active {
|
|
background: var(--nav-link-bg-color-active);
|
|
color: var(--nav-link-color-active)
|
|
}
|
|
}
|
|
@layer baseline{
|
|
body {
|
|
background: var(--bg-color);
|
|
color: var(--normal-text);
|
|
}
|
|
|
|
/*iffy if this should be here but it doesn't mess with the layout so I'll allow it*/
|
|
:focus-visible {
|
|
outline: 2px solid var(--focus-outline-color);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-unclicked);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--link-clicked);
|
|
}
|
|
a:active {
|
|
color: var(--link-active)
|
|
}
|
|
#header {
|
|
background: var(--header-bg);
|
|
}
|
|
|
|
#content {
|
|
border: 0.7rem solid var(--content-border-color);
|
|
}
|
|
|
|
blockquote {
|
|
background: var(--blockquote-bg);
|
|
strong {
|
|
color:red;
|
|
}
|
|
}
|
|
|
|
pre:has( > code), pre.hljs {
|
|
/*I don't wanna dig into highlight.js internals to make !important redundant*/
|
|
background: var(--blockquote-bg) !important;
|
|
}
|
|
/*fancy user selection for funsies*/
|
|
::selection {
|
|
background-color: var(--highlight-bg);
|
|
color: var(--highlight-fg);
|
|
}
|
|
|
|
}
|
|
|
|
@media print {
|
|
@layer print{
|
|
|
|
:root {
|
|
/*trying to avoid accidentally eating the entire printer's ink supply with bg color*/
|
|
--bg-color: #FFF;
|
|
}
|
|
|
|
}
|
|
}
|