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