1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
/* Colors from Modus theme. **************************************************/
/* Stylesheets used on https://andinus.unfla.me ******************************/
:root {
--bg-main: #ffffff;
--bg-dim: #f8f8f8;
--bg-alt: #f0f0f0;
--blue-subtle-bg: #b5d0ff;
--cyan-subtle-bg: #c0efff;
--bg-hl-alt-intense: #e8dfd1;
--fg-main: #000000;
--fg-dim: #282828;
--fg-alt: #505050;
--fg-special-cold: #093060;
--fg-special-mild: #184034;
--fg-special-warm: #5d3026;
--fg-special-calm: #61284f;
--red: #a60000;
--green: #005e00;
--yellow: #813e00;
--blue: #0031a9;
--magenta: #721045;
--cyan: #00538b;
--blue-alt-other: #0000c0;
--yellow-nuanced-fg: #3f3000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-main: #000000;
--bg-dim: #100f10; /* #110b11 */
--bg-alt: #191a1b; /* #181a20 */
--blue-subtle-bg: #10387c;
--cyan-subtle-bg: #00415e;
--bg-hl-alt-intense: #282e46;
--fg-main: #ffffff;
--fg-dim: #e0e6f0;
--fg-alt: #a8a8a8;
--fg-special-cold: #c6eaff;
--fg-special-mild: #bfebe0;
--fg-special-warm: #f8dec0;
--fg-special-calm: #fbd6f4;
--red: #ff8059;
--green: #44bc44;
--yellow: #eecc00;
--blue: #2fafff;
--magenta: #feacd0;
--cyan: #00d3d0;
--blue-alt-other: #00bcff;
--yellow-nuanced-fg: #dfdfb0;
}
}
::selection { background-color: var(--bg-hl-alt-intense); }
html {
color: var(--fg-main);
background-color: var(--bg-main);
font-family: "Iosevka Aile", sans-serif;
}
body {
max-width: 96ch;
margin: auto;
line-height: 1.5;
}
h1 { color: var(--fg); }
h2 { color: var(--fg-special-warm); }
h3 { color: var(--fg-special-cold); }
h4 { color: var(--fg-special-mild); }
h5 { color: var(--fg-special-calm); }
h6 { color: var(--yellow-nuanced-fg); }
h1, h2, h3, h4, h5, h6, .title { font-family: "Iosevka Etoile", serif; }
.title {
color: var(--fg-special-cold);
border-bottom: 1px solid var(--bg-alt);
}
a { color: var(--blue-alt-other); }
a:hover, a:focus {
color: var(--fg-dim);
background-color: var(--blue-subtle-bg);
}
a:visited { color: var(--cyan); }
a:visited:hover, a:visited:focus {
color: var(--fg-dim);
background-color: var(--cyan-subtle-bg);
}
form, input, button {
color: var(--fg-main);
background-color: var(--bg-main);
margin: .25em;
padding: .25em;
}
input, button {
border: 2px solid var(--bg-alt);
}
code {
font-size: 1rem; /* code size should be same as body */
padding: 0 0.4ch;
color: var(--fg-special-calm);
background-color: var(--bg-alt);
}
table {
width: 100%;
margin-bottom: 1em;
border-collapse: collapse;
}
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {
background-color: var(--bg-dim);
}
td, th { padding: .25em .5em; border: 1px solid var(--bg-alt); }
|