all repos — site @ 4213759cbac92a74343718c3590cc882d3e53229

source for my site, found at icyphox.sh

static/style.css (view raw)

  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  padding-top: 1%;
 39  display: grid;
 40  grid-template-columns: repeat(12, minmax(0, 1fr));
 41  min-width: 0;
 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.sep {
 73  display: visible;
 74}
 75
 76.content {
 77  text-align: left;
 78}
 79
 80pre {
 81  overflow-x: auto;
 82  overflow-y: hidden;
 83  padding: 10px;
 84  min-width: 0;
 85}
 86
 87
 88code {
 89  color: var(--cyan);
 90  border-bottom: unset;
 91}
 92
 93pre > code {
 94  color: var(--code);
 95  background: unset;
 96}
 97
 98@media only screen and (min-width: 800px) {
 99  .pull-right {
100    text-align: left;
101    max-width: 100%;
102    grid-column: 9 / 13;
103    grid-row: 1;
104  }
105
106  .sep {
107    display: hidden;
108  }
109
110  .pull-left {
111    grid-column: 2 / 9;
112    grid-row: 1;
113  }
114  .content {
115    margin: 0 auto;
116  }
117  
118  html {
119    font-size: 18px;
120  }
121}
122
123@media only screen and (min-width: 1200px) {
124  .pull-right {
125    max-width: 100%;
126    text-align: left;
127    grid-column: 8 / 10;
128    padding-left: 10%;
129    grid-row: 1;
130  }
131
132  .sep {
133    display: hidden;
134  }
135  .pull-left {
136    grid-column: 4 / 8;
137    grid-row: 1;
138  }
139  .content {
140    margin: 0 auto;
141  }
142
143  html {
144    font-size: 18px;
145  }
146}
147
148
149.logo {
150  width: 180px;
151  margin-bottom: 20px;
152}
153
154footer {
155  color: var(--gray);
156  bottom: 20px;
157  width: 100%;
158  text-align: center;
159  margin-bottom: 20px;
160}
161
162header {
163  color: var(--cyan);
164  top: 30px;
165  display: inline-block;
166  width: 100%;
167  text-align: left;
168  padding-bottom: 2%;
169}
170
171header a {
172  margin-right: 20px;
173}
174
175header a:last-child {
176  margin-right: 0
177}
178
179.muted {
180  color: var(--gray);
181}
182
183.muted a {
184  color: var(--cyan);
185  border-bottom: unset;
186}
187
188table {
189  width: 100%;
190}
191
192td {
193  white-space: nowrap;
194}
195
196td:first-child {
197  width: 100%;
198  max-width: 1px;
199  white-space: nowrap;
200  text-overflow: ellipsis;
201  overflow: hidden;
202}
203
204a {
205  color: var(--gray);
206  margin: 0;
207  transition: all 200ms;
208  text-decoration: none;
209  outline: 0;
210}
211
212a:hover {
213  color: var(--dark);
214  background: var(--light-gray);
215  border-bottom: 1px solid var(--cyan);
216}
217
218img {
219  max-width: 100%;
220  margin: 0 auto;
221  display: block;
222  border: 0px solid transparent;
223  border-radius: 5px;
224}
225
226
227.license a {
228  color: unset;
229  background: unset;
230  border-bottom: unset;
231}
232
233.license a:hover {
234  color: unset;
235  background: unset;
236  border-bottom: unset;
237}
238
239.subtitle {
240  font-style: italic;
241  color: var(--dark);
242  padding-bottom: 30px;
243}
244
245h1, h2, h3 {
246  font-weight: normal;
247}
248
249h2 { 
250  color: var(--gray);
251}
252
253h3 {
254  color: black;
255}
256
257p {
258  bottom: 2em;
259}
260
261blockquote {
262  border-left: 0.25rem solid var(--gray);
263  color: var(--gray);
264  font-style: italic;
265  margin: .8rem 0;
266  padding: .5rem 1rem
267}
268
269hr {
270  width: 20%;
271}
272
273::selection {
274  background-color: var(--sel);
275  color: white;
276}
277
278.license img {
279  all: initial;
280}
281
282.license img {
283  padding-left: 3%;
284  padding-top: 10px;
285  max-height: 2rem;
286  display: inline-block;
287  vertical-align: text-top;
288  image-orientation: from-image;
289  max-width: 100%;
290  padding-bottom: 5px;
291  cursor: pointer;
292}