seth.computer
this repo has no description
1@import "normalize.css";
2@import "prism-duotone-light.css";
3
4@font-face {
5 font-family: "Lato";
6 src: local("Lato"), url("/fonts/Lato-Regular.ttf");
7 font-weight: regular;
8}
9
10@font-face {
11 font-family: "Lato";
12 src: local("Lato"), url("/fonts/Lato-Bold.ttf");
13 font-weight: bold;
14}
15
16@font-face {
17 font-family: "Source Serif Pro";
18 src: local("Source Serif Pro"), url("/fonts/SourceSerifPro-Regular.ttf");
19 font-weight: normal;
20 font-style: normal;
21}
22
23@font-face {
24 font-family: "Source Serif Pro";
25 src: local("Source Serif Pro"), url("/fonts/SourceSerifPro-Bold.ttf");
26 font-weight: bold;
27 font-style: normal;
28}
29
30@font-face {
31 font-family: "Source Serif Pro";
32 src: local("Source Serif Pro"), url("/fonts/SourceSerifPro-Italic.ttf");
33 font-weight: normal;
34 font-style: italic;
35}
36
37@font-face {
38 font-family: "Source Serif Pro";
39 src: local("Source Serif Pro"), url("/fonts/SourceSerifPro-BoldItalic.ttf");
40 font-weight: bold;
41 font-style: italic;
42}
43
44/**
45 * everforest (https://github.com/sainnhe/everforest)
46 */
47:root {
48 --color-bg: #fdf6e3;
49 --color-fg: #5c6a72;
50 --color-blue: #3a94c5;
51 --color-statusline2: #708089;
52 --color-green: #8da101;
53 --color-gray0: #a6b0a0;
54 --color-gray1: #eeeeee;
55 --color-gray2: #829181;
56}
57
58@media (prefers-color-scheme: dark) {
59 :root {
60 --color-bg: #2d353b;
61 --color-fg: #d2c6aa;
62 --color-blue: #7fbbb3;
63 --color-statusline2: #d3c6aa;
64 --color-green: #a7c080;
65 --color-gray0: #7a8478;
66 --color-gray1: #555555;
67 --color-gray2: #9da9a0;
68 }
69}
70
71ul.post-list {
72 padding-left: 0;
73 list-style: none;
74}
75
76ul.post-list li {
77 margin-bottom: 6px;
78}
79
80ul.post-list li a {
81 text-decoration: none;
82}
83
84ul.post-list li em {
85 color: var(--color-gray0);
86}
87
88ul.post-list li .subtext::before {
89 content: " — ";
90 font-size: 0.8em;
91 color: var(--color-gray0);
92}
93
94@media (max-width: 600px) {
95 ul.post-list li .subtext::before {
96 content: "";
97 }
98
99 ul.post-list li .subtext {
100 display: block;
101 }
102}
103
104body {
105 background-color: var(--color-bg);
106 color: var(--color-fg);
107 font-family: Lato, "Source Sans Pro", sans;
108 font-size: 18px;
109 line-height: 1.5em;
110 margin: 0px auto 0px auto;
111 padding: 0 15px;
112 max-width: 700px;
113}
114
115#content article .body {
116 font-family: "Source Serif Pro", sans;
117}
118
119a,
120a:visited {
121 color: var(--color-green);
122 text-decoration: none;
123}
124
125a:hover,
126a:focus {
127 color: var(--color-blue);
128}
129
130div#header {
131 border-bottom: 1px solid var(--color-gray0);
132 margin-bottom: 30px;
133 padding: 12px 0px 12px 0px;
134 display: flex;
135}
136
137div#logo,
138div#navigation {
139 flex-grow: 1;
140}
141
142div#logo a {
143 float: left;
144 font-size: 18px;
145 text-decoration: none;
146}
147
148div#header div#logo a,
149div#header div#logo a:visited {
150 color: var(--color-gray2);
151}
152
153div#header a,
154div#header a:visited {
155 color: var(--color-green);
156}
157
158div#header a:active,
159div#header a:hover {
160 color: var(--color-blue);
161}
162
163div#header #navigation {
164 text-align: right;
165}
166
167div#header #navigation ul {
168 list-style: none;
169 margin: 0;
170}
171
172div#header #navigation ul li {
173 display: inline;
174}
175
176div#header #navigation a {
177 font-size: 16px;
178 margin-left: 12px;
179 text-decoration: none;
180 text-transform: lowercase;
181}
182
183#footer {
184 border-top: solid 1px var(--color-gray0);
185 color: var(--color-gray2);
186 font-size: 12px;
187 margin-top: 30px;
188 padding: 12px 0px 12px 0px;
189}
190
191h1,
192h2,
193h3,
194h4,
195h5 {
196 font-family: Lato, sans;
197 font-weight: bold;
198 color: var(--color-statusline2);
199}
200
201h1 {
202 font-size: 32px;
203}
204
205h2 {
206 font-size: 24px;
207}
208
209div.info {
210 color: var(--color-gray2);
211 font-size: 14px;
212 font-style: italic;
213}
214
215body pre {
216 font-size: 0.8em;
217 line-height: 1.5em;
218 background: var(--color-gray0);
219 overflow-x: scroll;
220 padding: 10px 15px;
221}
222
223blockquote {
224 border-left: 10px solid var(--color-gray0);
225 margin-left: 0;
226 padding-left: 30px;
227 color: var(--color-fg);
228 font-size: 1.1em;
229 line-height: 1.5em;
230}
231
232hr {
233 border: 0;
234 border-bottom: 1px solid var(--color-gray0);
235}
236
237section.header {
238 margin: 0;
239 font-size: 16px;
240 padding-bottom: 15px;
241 color: var(--color-fg);
242 border-bottom: solid 1px var(--color-gray2);
243}
244
245.tag {
246 font-size: 0.8em;
247 display: inline-block;
248 padding-right: 5px;
249 color: var(--color-gray0);
250 white-space: nowrap;
251}
252
253.tag::before {
254 content: "#";
255 color: var(--color-gray2);
256}
257
258.tag a:link,
259.tag a:visited,
260.tag a:active {
261 color: var(--color-gray2);
262}
263
264.tag a:hover {
265 color: var(--color-blue);
266}
267
268code {
269 color: var(--color-fg);
270 font-size: 0.9em;
271 background: var(--color-gray1);
272 padding: 1px 4px;
273 border-radius: 5px;
274}
275
276a code {
277 text-decoration: underline;
278}
279
280pre code {
281 background-color: transparent;
282}