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}