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