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