Improve slightly css
This commit is contained in:
parent
5ae19b34eb
commit
ffa36b27d5
1 changed files with 27 additions and 25 deletions
|
@ -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); }
|
||||
|
|
Loading…
Reference in a new issue