62 lines
1.6 KiB
CSS
62 lines
1.6 KiB
CSS
|
/* Color scheme. */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* naturally */
|
||
|
|
--liquidex-brand-blue: #058ef0;
|
||
|
|
/* but also: */
|
||
|
|
--liquidex-brand-red: #eb134a;
|
||
|
|
--liquidex-brand-yellow: #ffc31f;
|
||
|
|
--liquidex-brand-green: #06ca4a;
|
||
|
|
|
||
|
|
--text-color-light: #55423e;
|
||
|
|
--link-color-light: #004ec8;
|
||
|
|
--link-color-visited-light: #6c2380;
|
||
|
|
|
||
|
|
--background-color: rgb(255, 253, 246);
|
||
|
|
--background-color-tooltip: rgb(226, 223, 214);
|
||
|
|
--text-color: #55423e;
|
||
|
|
--link-color: #004ec8;
|
||
|
|
--link-color-visited: #6c2380;
|
||
|
|
|
||
|
|
--shaded-background: rgba(0, 0, 0, 5%);
|
||
|
|
--border-1: rgba(0, 0, 0, 15%);
|
||
|
|
--border-2: rgba(0, 0, 0, 30%);
|
||
|
|
--hover: rgba(0, 0, 0, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--background-color: rgb(30, 40, 53);
|
||
|
|
--background-color-tooltip: rgb(23, 31, 41);
|
||
|
|
--text-color: #d7cdbf;
|
||
|
|
--link-color: #93cce8;
|
||
|
|
--link-color-visited: #f7afde;
|
||
|
|
|
||
|
|
--shaded-background: #f7e5df0c;
|
||
|
|
--border-0: #f7e5df1a;
|
||
|
|
--border-1: #f7e5df26;
|
||
|
|
--border-1-and-a-half: #f7e5df3a;
|
||
|
|
--border-2: #f7e5df4d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* Font size-responsive measurements. treehouse was designed against a font size of 14px;
|
||
|
|
each of these sizes is (n / 14)rem where n is the number of pixels. */
|
||
|
|
--1px: 0.07142857143rem;
|
||
|
|
--2px: 0.1428571429rem;
|
||
|
|
--3px: 0.2142857143rem;
|
||
|
|
--4px: 0.2857142857rem;
|
||
|
|
--6px: 0.4285714286rem;
|
||
|
|
--8px: 0.5714285714rem;
|
||
|
|
--10px: 0.7142857143rem;
|
||
|
|
--12px: 0.8571428571rem;
|
||
|
|
--16px: 1.142857143rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Reset things to more sensible sizing rules */
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|