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