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