static/style.css (view raw)
1/*@font-face {
2 font-family: 'Inter';
3 src: url('/static/fonts/Inter-V.otf') format('opentype');
4}*/
5
6@supports (font-variation-settings: normal) {
7 html {
8 font-family: 'Charter', sans-serif;
9 font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'zero' 1,
10 'cv03' 1, 'cv02' 1, 'cv04' 1, 'tnum' 1;
11 }
12}
13
14@font-face {
15 font-family: 'Charter';
16 src: url('/static/fonts/charter_italic.woff') format('woff');
17 font-style: italic;
18}
19
20
21@font-face {
22 font-family: 'Charter';
23 src: url('/static/fonts/charter_bold.woff') format('woff');
24}
25
26@font-face {
27 font-family: 'Charter';
28 src: url('/static/fonts/charter_regular.woff') format('woff');
29}
30
31
32:root {
33 --bg: #fff;
34 --cyan: #1e9191;
35 --light-gray: #eee;
36 --gray: #6a6a6a;
37 --code: #666;
38 --dark: #444;
39 --code-bg: #0000000a;
40}
41
42body {
43 text-align: center;
44}
45
46html {
47 /* background: var(--bg);*/
48 font-size: 19px;
49 line-height: 1.5;
50}
51
52.content > article, p, blockquote, ul {
53 line-height: 1.5;
54 font-family: 'Charter';
55 font-feature-settings: normal;
56}
57
58.content {
59 margin: auto 5% auto 5%;
60}
61
62.pull-right > p {
63 font-family: 'Charter';
64}
65
66/*.content > h1, h2, h3, h4 {
67 font-family: 'Inter';
68}*/
69
70a {
71 color: var(--gray);
72 text-decoration: none;
73}
74
75a:hover {
76 background: #eee;
77 color: var(--dark);
78}
79
80
81article a, a:hover {
82 color: inherit;
83 background: 0;
84 text-decoration: underline;
85 outline: 0;
86}
87
88.navbar {
89 margin: 2px 0;
90}
91
92.sidebar-link {
93 font-size: 15px;
94 color: var(--dark);
95}
96
97.container {
98 display: grid;
99 grid-template-columns: repeat(12, minmax(0, 1fr));
100 min-width: 0;
101 margin-bottom: 20px;
102}
103
104.pull-right {
105 padding-top: 20%;
106 text-align: left;
107 grid-column: 1 / 13;
108 grid-row: 2;
109}
110
111.pull-right > p:not(:last-child) {
112 padding: 0px;
113 margin: 0px;
114 padding-top: 2%;
115 padding-left: 3%;
116 padding-bottom: 1%;
117}
118
119.pull-right > h3 {
120 color: var(--dark);
121 padding: 0px;
122 margin: 0px;
123 padding-top: 7%;
124 padding-left: 3%;
125}
126
127.pull-left {
128 grid-column: 1 / 13;
129 grid-row: 1;
130}
131
132.openring {
133 display: inline-block;
134}
135
136.openring-feed > p {
137 padding: 4px 8px 4px;
138 font-family: 'Charter';
139}
140
141.sep {
142 display: visible;
143}
144
145.content {
146 text-align: left;
147}
148
149pre {
150 overflow-x: auto;
151 overflow-y: hidden;
152 padding: 10px;
153 min-width: 0;
154 background-color: var(--code-bg) !important;
155 font-size: 18px !important;
156}
157
158pre > code {
159 color: var(--code);
160}
161
162code {
163 font-variant: normal;
164 font-size: 18px !important;
165 color: var(--dark);
166 border-bottom: unset;
167}
168
169@media only screen and (min-width: 800px) {
170 .pull-right {
171 text-align: left;
172 max-width: 100%;
173 grid-column: 9 / 13;
174 grid-row: 1;
175 }
176
177 .sep {
178 display: hidden;
179 }
180
181 .pull-left {
182 grid-column: 2 / 9;
183 grid-row: 1;
184 }
185 .content {
186 margin: 0%;
187 }
188
189 .openring {
190 display: grid;
191 grid-template-columns: repeat(3, minmax(0, 1fr));
192 min-width: 0;
193 }
194
195 .openring-feed {
196 grid-row: 1;
197 font-size: 16px;
198 padding: 4px 8px 4px;
199 }
200
201}
202
203@media only screen and (min-width: 1200px) {
204 .pull-right {
205 max-width: 100%;
206 text-align: left;
207 grid-column: 8 / 10;
208 padding-left: 10%;
209 grid-row: 1;
210 }
211
212 html {
213 font-size: 20px;
214 }
215
216 code {
217 font-size: 19px;
218 }
219
220 pre {
221 font-size: 19px;
222 }
223
224 .sep {
225 display: hidden;
226 }
227 .pull-left {
228 grid-column: 4 / 8;
229 grid-row: 1;
230 }
231 .content {
232 margin: 0 auto;
233 }
234
235 .openring {
236 display: grid;
237 grid-template-columns: repeat(3, minmax(0, 1fr));
238 min-width: 0;
239 }
240
241 .openring-feed {
242 grid-row: 1;
243 font-size: 16px;
244 padding: 4px 8px 4px;
245 }
246}
247
248
249.logo {
250 width: 180px;
251 margin-bottom: 20px;
252}
253
254footer {
255 color: var(--gray);
256 bottom: 20px;
257 width: 100%;
258 text-align: center;
259 margin-bottom: 20px;
260}
261
262header {
263 top: 30px;
264 display: inline-block;
265 width: 100%;
266 text-align: left;
267 padding-bottom: 2%;
268}
269
270header a {
271 margin-right: 20px;
272}
273
274header a:last-child {
275 margin-right: 0
276}
277
278.muted {
279 color: var(--gray);
280 font-family: 'Charter';
281 font-size: 18px;
282}
283
284.muted a {
285 color: var(--cyan);
286 border-bottom: unset;
287}
288
289table {
290 width: 100%;
291}
292
293td {
294 white-space: nowrap;
295}
296
297
298
299td:first-child {
300 width: 100%;
301 max-width: 1px;
302 white-space: nowrap;
303 text-overflow: ellipsis;
304 overflow: hidden;
305}
306
307img {
308 max-width: 100%;
309 margin: 0 auto;
310 display: block;
311 border: 0px solid transparent;
312 border-radius: 5px;
313}
314
315
316.icons a {
317 color: unset;
318 background: unset;
319 border-bottom: unset;
320}
321
322.icons a:hover {
323 color: unset;
324 background: unset;
325 border-bottom: unset;
326}
327
328.subtitle {
329 font-style: italic;
330 font-weight: normal;
331 font-variant: unset;
332 color: var(--dark);
333 padding-bottom: 30px;
334}
335
336h2, h3, h4 {
337 font-variant: all-small-caps;
338}
339
340h2 {
341 color: var(--dark);
342}
343
344h3 {
345 color: black;
346}
347
348p {
349 bottom: 2em;
350}
351
352blockquote {
353 border-left: 0.25rem solid var(--gray);
354 color: var(--gray);
355 font-style: italic;
356 margin: .8rem 0;
357 padding: .5rem 1rem
358}
359hr {
360 width: 20%;
361}
362
363::selection {
364 background-color: var(--dark);
365 color: white;
366}
367
368.icons img {
369 all: initial;
370}
371
372.icons img {
373 padding-left: 3%;
374 padding-top: 10px;
375 max-height: 2rem;
376 display: inline-block;
377 vertical-align: text-top;
378 image-orientation: from-image;
379 max-width: 100%;
380 padding-bottom: 5px;
381 cursor: pointer;
382}