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.hero {
268  float: left;
269}
270
271header {
272  top: 30px;
273  display: inline-block;
274  width: 100%;
275  text-align: left;
276  padding-bottom: 2%;
277}
278
279header a {
280  margin-right: 20px;
281}
282
283header a:last-child {
284  margin-right: 0
285}
286
287.muted {
288  color: var(--gray);
289  font-family: 'Charter', serif;
290  font-size: 18px;
291}
292
293.muted a {
294  color: var(--cyan);
295  border-bottom: unset;
296}
297
298table {
299  width: 100%;
300}
301
302td {
303  white-space: nowrap;
304}
305
306
307
308td:first-child {
309  width: 100%;
310  max-width: 1px;
311  white-space: nowrap;
312  text-overflow: ellipsis;
313  overflow: hidden;
314}
315
316img {
317  max-width: 100%;
318  margin: 0 auto;
319/*  display: block; */
320  border: 0px solid transparent;
321  border-radius: 5px;
322}
323
324
325.icons a {
326  color: unset;
327  background: unset;
328  border-bottom: unset;
329  text-decoration: none;
330}
331
332.icons a:hover {
333  color: unset;
334  background: unset;
335  border-bottom: unset;
336}
337
338.subtitle {
339  font-style: italic;
340  font-weight: normal;
341  font-variant: unset;
342  color: var(--dark);
343  padding-bottom: 30px;
344}
345
346h2 { 
347  color: var(--dark);
348  font-size: 22px;
349}
350
351h1 {
352  font-size: 28px;
353}
354
355h3 {
356  color: black;
357}
358
359p {
360  bottom: 2em;
361}
362
363blockquote {
364  border-left: 0.25rem solid var(--gray);
365  color: var(--gray);
366  font-style: italic;
367  margin: .8rem 0;
368  padding: .5rem 1rem
369}
370hr {
371  width: 20%;
372}
373
374::selection {
375  background-color: var(--dark);
376  color: white;
377}
378
379.icons img {
380  all: initial;
381}
382
383.icons img {
384  padding-left: 3%;
385  padding-top: 10px;
386  max-height: 2rem;
387  display: inline-block;
388  vertical-align: text-top;
389  image-orientation: from-image;
390  max-width: 100%;
391  padding-bottom: 5px;
392  cursor: pointer;
393}