|
|
|
@ -31,23 +31,15 @@ body{
|
|
|
|
|
--clr-soft-text: rgba(0,0,0,0.25);
|
|
|
|
|
--clr-header: black;
|
|
|
|
|
|
|
|
|
|
--clr-soft: hsl(54, 40%, 82%);
|
|
|
|
|
/* --clr-back: hsl(82, 24%, 84%); */
|
|
|
|
|
--clr-back: hsl(92, 24%, 84%);
|
|
|
|
|
--clr-soft: hsl(54, 40%, 82%);
|
|
|
|
|
|
|
|
|
|
/* a bit more solarized */
|
|
|
|
|
/* --clr-soft: hsl(48, 46%, 82%); */
|
|
|
|
|
/* --clr-back: hsl(72, 32%, 84%); */
|
|
|
|
|
|
|
|
|
|
/* --clr-soft: hsl(48, 46%, 84%); */
|
|
|
|
|
/* old but nicer */
|
|
|
|
|
--clr-back: hsl(95, 32%, 88%);
|
|
|
|
|
--clr-soft: hsl(60, 38%, 88%);
|
|
|
|
|
|
|
|
|
|
/* --clr-soft: rgba(0,0,0,0.15); */
|
|
|
|
|
/* is equal to */
|
|
|
|
|
--clr-soft: hsl(100, 12%, 76%);
|
|
|
|
|
|
|
|
|
|
background: var(--clr-back);
|
|
|
|
|
color: var(--clr-text);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
--border-width: 1px;
|
|
|
|
|
--border: var(--border-width) solid var(--clr-text);
|
|
|
|
@ -55,18 +47,14 @@ body{
|
|
|
|
|
body.night{
|
|
|
|
|
|
|
|
|
|
/* slitghly cyan moon reflection, low contrast */
|
|
|
|
|
--clr-text: hsl(160, 6%, 92%);
|
|
|
|
|
--clr-text: white;
|
|
|
|
|
--clr-soft-text: rgba(255,255,255,0.35);
|
|
|
|
|
--clr-header: hsl(320, 4%, 12%);
|
|
|
|
|
--clr-header: black;
|
|
|
|
|
|
|
|
|
|
/* night -- grey purple */
|
|
|
|
|
/* --clr-soft: hsl(290, 10%, 38%); */
|
|
|
|
|
--clr-back: hsl(252, 34%, 14%);
|
|
|
|
|
|
|
|
|
|
/* --clr-soft: rgba(255,255,255,0.25); */
|
|
|
|
|
/* is equal to */
|
|
|
|
|
--clr-soft: hsl(253, 10%, 40%);
|
|
|
|
|
--clr-back: hsl(252, 34%, 16%);
|
|
|
|
|
--clr-soft: hsl(260, 8%, 56%);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|