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: gray;
 37  --code: #666;
 38  --dark: #444;
 39}
 40
 41body {
 42  text-align: center;
 43}
 44
 45html {
 46  background: var(--bg);
 47  font-size: 21px;
 48  line-height: 1.5;
 49}
 50
 51.content > article, p, blockquote, ul {
 52  line-height: 1.3;
 53  font-family: 'Charter';
 54  font-feature-settings: normal;
 55}
 56
 57.pull-right > p {
 58  font-family:  'Charter';
 59}
 60
 61/*.content > h1, h2, h3, h4 {
 62  font-family: 'Inter';
 63}*/
 64
 65a {
 66  color: var(--gray);
 67  margin: 0;
 68  transition: all 200ms;
 69  text-decoration: none;
 70  outline: 0;
 71}
 72
 73a:hover {
 74  color: var(--light-gray);
 75  background: var(--dark);
 76}
 77
 78.navbar {
 79  margin: 2px 0;
 80}
 81
 82.sidebar-link {
 83  font-size: 15px;
 84  color: var(--dark);
 85}
 86
 87.container {
 88  display: grid;
 89  grid-template-columns: repeat(12, minmax(0, 1fr));
 90  min-width: 0;
 91  margin-bottom: 20px;
 92}
 93
 94.pull-right {
 95  padding-top: 20%;
 96  text-align: left;
 97  grid-column: 1 / 13;
 98  grid-row: 2;
 99}
100
101.pull-right > p:not(:last-child) {
102  padding: 0px;
103  margin: 0px;
104  padding-top: 2%;
105  padding-left: 3%;
106  padding-bottom: 1%;
107}
108
109.pull-right > h3 {
110  color: var(--dark);
111  padding: 0px;
112  margin: 0px;
113  padding-top: 7%;
114  padding-left: 3%;
115}
116
117.pull-left {
118  grid-column: 1 / 13;
119  grid-row: 1;
120}
121
122.openring {
123  display: inline-block;
124}
125
126.openring-feed > p {
127  padding: 4px 8px 4px;
128  font-family: 'Charter';
129}
130
131.sep {
132  display: visible;
133}
134
135.content {
136  text-align: left;
137}
138
139pre {
140  overflow-x: auto;
141  overflow-y: hidden;
142  padding: 10px;
143  min-width: 0;
144}
145
146
147code {
148  color: var(--cyan);
149  border-bottom: unset;
150}
151
152pre > code {
153  color: var(--code);
154}
155
156pre {
157  background: var(--bg)
158}
159
160@media only screen and (min-width: 800px) {
161  .pull-right {
162    text-align: left;
163    max-width: 100%;
164    grid-column: 9 / 13;
165    grid-row: 1;
166  }
167
168  .sep {
169    display: hidden;
170  }
171
172  .pull-left {
173    grid-column: 2 / 9;
174    grid-row: 1;
175  }
176  .content {
177    margin: 0 auto;
178  }
179  
180  
181  .openring {
182    display: grid;
183    grid-template-columns: repeat(3, minmax(0, 1fr));
184    min-width: 0;
185  }
186  
187  .openring-feed {
188    grid-row: 1;
189    font-size: 16px;
190    padding: 4px 8px 4px;
191  }
192
193}
194
195@media only screen and (min-width: 1200px) {
196  .pull-right {
197    max-width: 100%;
198    text-align: left;
199    grid-column: 8 / 10;
200    padding-left: 10%;
201    grid-row: 1;
202  }
203
204  .sep {
205    display: hidden;
206  }
207  .pull-left {
208    grid-column: 4 / 8;
209    grid-row: 1;
210  }
211  .content {
212    margin: 0 auto;
213  }
214
215  html {
216    font-size: 21px;
217  }
218
219  .openring {
220    display: grid;
221    grid-template-columns: repeat(3, minmax(0, 1fr));
222    min-width: 0;
223  }
224  
225  .openring-feed {
226    grid-row: 1;
227    font-size: 16px;
228    padding: 4px 8px 4px;
229  }
230}
231
232
233.logo {
234  width: 180px;
235  margin-bottom: 20px;
236}
237
238footer {
239  color: var(--gray);
240  bottom: 20px;
241  width: 100%;
242  text-align: center;
243  margin-bottom: 20px;
244}
245
246header {
247  color: var(--cyan);
248  top: 30px;
249  display: inline-block;
250  width: 100%;
251  text-align: left;
252  padding-bottom: 2%;
253}
254
255header a {
256  margin-right: 20px;
257}
258
259header a:last-child {
260  margin-right: 0
261}
262
263.muted {
264  color: var(--gray);
265  font-family: 'Charter';
266  font-size: 18px;
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
317h2, 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(--dark);
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}