2020-07-16 18:42:14 +00:00
|
|
|
$blue: #3a81c3;
|
|
|
|
$green: #2d9574;
|
|
|
|
$red: #ba2f59;
|
|
|
|
$orange: #dc752f;
|
|
|
|
$cyan: #2aa1ae;
|
|
|
|
$purple: #715ab1;
|
|
|
|
|
|
|
|
$accent: var(--accent);
|
|
|
|
$accent-dark: var(--accent-dark);
|
|
|
|
|
|
|
|
$code-foreground: var(--code-foreground);
|
|
|
|
$code-background: var(--code-background);
|
|
|
|
$code-func: var(--code-func);
|
|
|
|
$code-constant: var(--code-const);
|
|
|
|
$code-regex: var(--code-regex);
|
|
|
|
|
|
|
|
$back-white: var(--back-white);
|
|
|
|
$back-light: var(--back-light);
|
|
|
|
$back-medium: var(--back-medium);
|
|
|
|
|
|
|
|
$text-light: var(--text-light);
|
|
|
|
$text-gray: var(--text-gray);
|
|
|
|
$text-medium: var(--text-medium);
|
|
|
|
$text-dark: var(--text-dark);
|
|
|
|
|
|
|
|
#page {
|
|
|
|
--accent: #002642;
|
|
|
|
--accent-dark: #00151c;
|
|
|
|
|
|
|
|
--code-foreground: #2c3e50;
|
|
|
|
--code-background: #efefef;
|
|
|
|
--code-func: #6c3163;
|
|
|
|
--code-const: #4e3163;
|
|
|
|
--code-regex: #655370;
|
|
|
|
|
|
|
|
--back-white: #fff;
|
2020-10-11 05:24:58 +00:00
|
|
|
--back-light: #f0eeed;
|
2020-07-16 18:42:14 +00:00
|
|
|
--back-medium: #c8c8c8;
|
|
|
|
|
|
|
|
--text-light: #7b7b7b;
|
|
|
|
--text-gray: #444;
|
|
|
|
--text-medium: #222;
|
|
|
|
--text-dark: #000;
|
|
|
|
|
2020-07-18 07:59:42 +00:00
|
|
|
--switch-icon: "🌚";
|
|
|
|
--switch-shadow-color: #373d4e;
|
|
|
|
--switch-text: "dark mode?";
|
2020-07-16 18:42:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#theme-switch:checked ~ #page {
|
|
|
|
--accent: #002642;
|
|
|
|
--accent-dark: #daf1ff;
|
|
|
|
|
|
|
|
--code-foreground: #a1a8ae;
|
|
|
|
--code-background: #222;
|
|
|
|
--code-func: #bd56ad;
|
|
|
|
--code-const: #8755ab;
|
|
|
|
--code-regex: #a184b3;
|
|
|
|
|
|
|
|
--back-white: #000;
|
2020-07-18 07:59:42 +00:00
|
|
|
--back-light: #181818;
|
2020-07-16 18:42:14 +00:00
|
|
|
--back-medium: #444;
|
|
|
|
|
|
|
|
--text-light: #7b7b7b;
|
|
|
|
--text-gray: #c8c8c8;
|
|
|
|
--text-medium: #ddd;
|
|
|
|
--text-dark: #efefef;
|
|
|
|
|
2020-07-18 07:59:42 +00:00
|
|
|
--switch-icon: "🌝";
|
|
|
|
--switch-shadow-color: #fce477;
|
|
|
|
--switch-text: "light mode?";
|
2020-10-07 16:24:06 +00:00
|
|
|
img.invertible, object[type="image/svg+xml"].invertible {
|
2020-08-12 10:04:24 +00:00
|
|
|
filter: invert(90.0%) hue-rotate(180deg) sepia(1%);
|
2020-07-16 18:42:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#theme-switch {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#switch-label {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 4rem;
|
|
|
|
left: 3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
#switch-label::before {
|
|
|
|
content: var(--switch-icon);
|
|
|
|
font-size: 20px;
|
|
|
|
transition: text-shadow .2s;
|
|
|
|
}
|
|
|
|
|
|
|
|
#switch-label::after {
|
|
|
|
content: var(--switch-text);
|
|
|
|
color: var(--switch-shadow-color);
|
2020-07-18 07:59:42 +00:00
|
|
|
font-size: 12px;
|
|
|
|
visibility: hidden;
|
|
|
|
margin-left: 0.5em;
|
|
|
|
z-index: 1;
|
|
|
|
position: fixed;
|
|
|
|
bottom: calc(4rem - 25px);
|
|
|
|
left: calc(3rem - 10px);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 1000px) {
|
|
|
|
#switch-label {
|
|
|
|
left: auto;
|
|
|
|
bottom: auto;
|
|
|
|
right: 1vw;
|
|
|
|
top: 1vh;
|
|
|
|
&::after {
|
|
|
|
position: fixed;
|
|
|
|
top: calc(1vh + 3px);
|
|
|
|
right: calc(1vw + 30px);
|
|
|
|
left: auto;
|
|
|
|
bottom: auto;
|
|
|
|
}
|
|
|
|
}
|
2020-07-16 18:42:14 +00:00
|
|
|
}
|
|
|
|
|
2020-07-18 07:59:42 +00:00
|
|
|
#theme-switch:focus ~ #page #switch-label,
|
|
|
|
#switch-label:hover {
|
|
|
|
&::before {
|
2020-07-16 18:42:14 +00:00
|
|
|
text-shadow: 0 0 15px var(--switch-shadow-color);
|
2020-07-18 07:59:42 +00:00
|
|
|
}
|
|
|
|
&::after {
|
|
|
|
visibility: visible;
|
|
|
|
}
|
2020-07-16 18:42:14 +00:00
|
|
|
}
|