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