diff --git a/public_html/css/style.css b/public_html/css/style.css index 0861c35..65bb5a4 100644 --- a/public_html/css/style.css +++ b/public_html/css/style.css @@ -8,12 +8,22 @@ --col-w: clamp(33.333vw, 80ch, 80vw); /* colors */ - --fg-c: #000000; - --bg-c: #e2e2e2; - --link-c: #856cff; - --visited-c: #ff1170; - --active-c: #fa3500; - --mark-c: #d06600; + --black: #000000; + --red: #fa3500; + --green: #009843; + --orange: #d06600; + --blue: #856cff; + --magenta: #ff1170; + --cyan: #008cca; + --white: #e2e2e2; + --bright-black: #848484; + --bright-red: #ff888e; + --bright-green: #00c55b; + --bright-orange: #ff8d48; + --bright-blue: #ac9fff; + --bright-magenta: #ffb1c0; + --bright-cyan: #92ccff; + --bright-white: #ffffff; } @media (max-aspect-ratio: 1/1) { @@ -22,15 +32,6 @@ } } -/* -@media (prefers-color-scheme: dark) { - :root { - --fg-c: #e2e2e2; - --bg-c: #000000; - } -} -*/ - /* reset */ * { @@ -38,22 +39,22 @@ margin: unset; hyphens: auto; scrollbar-width: thin; - scrollbar-color: var(--link-c) rgba(0,0,0,0); -} - -::selection { - color: var(--bg-c); - background-color: var(--fg-c); + scrollbar-color: var(--blue) rgba(0,0,0,0); } /* root */ :root { - color: var(--fg-c); - background-color: var(--bg-c); + color: var(--white); + background-color: var(--black); font: var(--font-size)/var(--line-height) var(--font-family); } +::selection { + color: var(--black); + background-color: var(--white); +} + body { margin: 0; } @@ -150,23 +151,23 @@ a { } a:link { - color: var(--link-c); + color: var(--blue); } a:link:active { - color: var(--active-c); + color: var(--red); } a:visited { - color: var(--visited-c); + color: var(--magenta); } a:visited:active { - color: var(--active-c); + color: var(--red); } code { - color: var(--mark-c); + color: var(--orange); } sup { @@ -224,12 +225,6 @@ article.post>nav { margin-block: 1rlh; } -/* article.post .abstract */ - -article.post .abstract { - color: var(--link-c); -} - /* article#sitemap */ article#sitemap pre { margin-inline: unset; @@ -238,7 +233,7 @@ article#sitemap pre { /* div.fauxnote */ div.fauxnote { - color: var(--link-c); + color: var(--bright-black); } @@ -266,5 +261,5 @@ div.horizontal>* { /* .footnotes */ .footnotes { - color: var(--link-c); + color: var(--bright-black); }