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