Improve slightly css

This commit is contained in:
Yann Esposito (Yogsototh) 2020-08-20 22:55:45 +02:00
parent 5ae19b34eb
commit ffa36b27d5
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646

View file

@ -1,7 +1,7 @@
html {
font-family: "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: calc(1ex/0.32); }
line-height: calc(1ex/0.37); }
html,body { margin: 0; padding: 0; border: 0; }
h1,h2,h3,h4,h5,h6 {
line-height: calc(1ex/0.42);
@ -54,11 +54,6 @@ label ~ pre { margin-top: 0; }
/* not used because light mode is has more contrast
--b01: #656b74;
*/
--b00: #727781;
--b0: #989ea8;
--b1: #b0bac7;
--b2: #ECEFF4;
--b3: #fff;
--y: #c18600;
--o: #d84100;
--r: #e62729;
@ -67,6 +62,11 @@ label ~ pre { margin-top: 0; }
--b: #0095ff;
--c: #00b0a3;
--g: #879a00;
--b00: #727781;
--b0: #989ea8;
--b1: #b0bac7;
--b2: #ECEFF4;
--b3: #fff;
/* default light */
--bg: var(--b3);
@ -81,12 +81,6 @@ label ~ pre { margin-top: 0; }
@media (prefers-color-scheme: dark)
{
:root {
--bg: hsl(218,20%,16%);
--rbg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00);
--rfg: var(--b2);
--hl: var(--g);
--y: #ae8c51;
--o: #a9654a;
--r: #af6255;
@ -95,6 +89,12 @@ label ~ pre { margin-top: 0; }
--b: #3f8cc3;
--c: #15a198;
--g: #939452;
--bg: hsl(218,20%,16%);
--rbg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00);
--rfg: var(--b1);
--hl: var(--g);
}
img { filter: brightness(0.7) saturate(0.5); }
pre {
@ -105,12 +105,6 @@ label ~ pre { margin-top: 0; }
/* light checked */
input#l:checked ~ div {
--bg: var(--b3);
--rbg: var(--b2);
--fg0: var(--b0);
--fg: var(--b02);
--rfg: #000;
--hl: var(--g);
--y: #c18600;
--o: #d84100;
--r: #e62729;
@ -119,6 +113,12 @@ input#l:checked ~ div {
--b: #0095ff;
--c: #00b0a3;
--g: #879a00;
--bg: var(--b3);
--rbg: var(--b2);
--fg0: var(--b0);
--fg: var(--b02);
--rfg: #000;
--hl: var(--g);
}
input#l:checked ~ div img {
filter: none;
@ -130,12 +130,6 @@ input#l:checked ~ div pre {
/* dark checked */
input#d:checked ~ div {
--bg: hsl(218,20%,16%);
--rbg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00);
--rfg: var(--b2);
--hl: var(--g);
--y: #ae8c51;
--o: #a9654a;
--r: #af6255;
@ -144,6 +138,12 @@ input#d:checked ~ div {
--b: #3f8cc3;
--c: #15a198;
--g: #939452;
--bg: hsl(218,20%,16%);
--rbg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00);
--rfg: var(--b1);
--hl: var(--g);
}
input#d:checked ~ div img {
filter: brightness(0.7) saturate(0.5);
@ -153,6 +153,8 @@ input#d:checked ~ div pre {
border-color: hsl(218,15%,23%);
}
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
/* ---- */
::selection {
background: var(--m);
@ -169,7 +171,7 @@ figcaption { color: var(--fg0); }
/* ---- SYNTAX HIGHLIGHTING ---- */
#table-of-contents { text-align: left; }
.ex { color:var(--c); }
.ex { color:var(--v); }
.op, .fu, .ot {color:var(--b);}
.bu { color:var(--m); }
.dt { color:var(--o); }