all repos — site @ 86ead6861fb364962d5448590675805e8674ede8

source for my site, found at icyphox.sh

static/style.css (view raw)

  1:root {
  2  --bg: #f4f4f4;
  3  --cyan: #509c93;
  4  --light-gray: #eee;
  5  --gray: #6a6a6a;
  6  --code: #666;
  7  --dark: #444;
  8  --darker: #222;
  9}
 10
 11html {
 12  background: var(--bg);
 13}
 14
 15::selection {
 16  background: var(--dark);
 17  color: var(--bg);
 18}
 19
 20* {
 21  box-sizing: border-box;
 22  text-decoration: none;
 23  padding: 0;
 24  margin: 0;
 25}
 26
 27main {
 28  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
 29  font-size: 18px;
 30  padding: 0;
 31  line-height: 160%;
 32}
 33
 34main article, table {
 35  min-width: 0;
 36}
 37
 38main h1 {
 39  font: 25px;
 40  padding: 10px 0 10px 0;
 41}
 42
 43main h2 {
 44  font-size: 25px;
 45}
 46
 47main h2, h3 {
 48  padding: 20px 0 15px 0;
 49}
 50
 51.logo img {
 52  max-height: 2.5rem;
 53  max-width: 2.5rem;
 54  vertical-align: middle;
 55  transform: translateY(-5%);
 56}
 57
 58.logo  {
 59  text-decoration: none;
 60  background: unset !important;
 61}
 62
 63.footer a {
 64  all: unset !important;
 65}
 66
 67.footer img {
 68  max-height: 2.5rem;
 69  max-width: 2.5rem;
 70  display: inline-block;
 71  vertical-align: middle;
 72  image-orientation: from-image;
 73  padding: 0 0 5px 5px;
 74  cursor: pointer;
 75}
 76
 77a {
 78  margin: 0;
 79  padding: 0;
 80  box-sizing: border-box;
 81  text-decoration: none;
 82  word-wrap: break-word;
 83}
 84
 85main a {
 86  color: var(--darker);
 87  text-decoration: underline;
 88}
 89
 90a:hover {
 91  text-decoration: underline;
 92  background: var(--light-gray);
 93}
 94
 95body {
 96  max-width: 640px;
 97  padding: 0 13px;
 98  margin: 40px auto;
 99}
100
101main article img {
102  max-width: 100%;
103  width: 100%;
104  display: block;
105  margin: 0 0 15px 0;
106}
107
108main ul, main ol {
109  margin: 0 30px 7px 30px;
110}
111
112main ul ul {
113  margin-bottom: 0
114}
115
116.subtitle {
117  font-style: italic;
118  font-weight: normal;
119  font-variant: unset;
120  color: var(--dark);
121  padding: 0 0 20px 0;
122}
123
124.muted {
125  color: var(--gray);
126}
127.muted a {
128  color: var(--cyan);
129  text-decoration: underline;
130}
131
132article p {
133  padding: 7px 0 7px 0;
134}
135
136article a {
137  color: var(--dark);
138}
139
140.tagline {
141  padding: 50px 0 50px 0;
142}
143
144pre {
145  overflow-x: auto;
146  overflow-y: hidden;
147  padding: 10px;
148  min-width: 0;
149  background-color: var(--light-gray) !important;
150  margin-bottom: 10px;
151}
152
153code {
154  background-color: var(--light-gray);
155}
156
157pre > code {
158  color: var(--code);
159}
160
161.post-date {
162  color: var(--gray);
163  text-transform: lowercase;
164}
165
166table {
167  table-layout: fixed;
168  width: 100%;
169}
170
171table a {
172  text-decoration: none;
173}
174
175td {
176  padding: 7px 11px 0 11px;
177}
178
179td:first-child {
180  padding-left: 0;
181}
182
183td:last-child {
184  padding-right: 0;
185}
186
187.index-date {
188  white-space: nowrap;
189  vertical-align: baseline;
190  color: var(--gray);
191  text-transform: lowercase;
192}
193
194header {
195  padding-bottom: 20px;
196}
197
198hr {
199  max-width: 100%;
200  text-align: left;
201  margin: 20px 0 20px 0;
202}
203
204footer {
205  padding-top: 30px;
206}
207
208
209blockquote {
210  margin: 7px 0 7px 0;
211}
212
213blockquote p {
214  font-style: italic;
215  color: var(--darker);
216  padding-left: 20px;
217  border-left: 3px solid var(--gray);
218}
219
220nav ul {
221  padding: 0;
222  margin: 0;
223  list-style: none;
224  padding-bottom: 20px;
225}
226
227nav ul li {
228  padding-right: 10px;
229  display: inline-block;
230}
231
232@media (max-width: 385px) {
233  table, thead, tbody, th, td, tr { 
234    display: block; 
235  }
236  td {
237    padding: 0;
238    text-align: left;
239  }
240  tr {
241    padding: 10px 0 10px 0;
242  }
243  nav ul li {
244    display: block;
245  }
246}