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
 81.sitemap a, article 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}