1* {
2 box-sizing: border-box;
3 font-family: dejavu sans;
4}
5body {
6 margin: 0;
7}
8h1,
9h2,
10h3,
11h4 {
12 font-weight: 400;
13}
14code[class*="language-"],
15nav,
16.blog-list {
17 font-style: normal;
18 font-weight: 400;
19 font-size: 1.025rem;
20}
21code {
22 font-family: dejavu sans mono;
23}
24tags {
25 font-family: dejavu sans mono;
26}
27.list-item {
28 font-family: dejavu sans mono;
29}
30html {
31 font-size: 16px;
32}
33body {
34 line-height: 1.8em;
35 color: #333;
36 background: #fefefe;
37}
38.post-title,
39.date-label {
40 letter-spacing: 0.025rem;
41}
42p,
43sub,
44nav {
45 letter-spacing: 0.05rem;
46}
47.title-wrapper,
48.title {
49 letter-spacing: 0.075rem;
50}
51a {
52 text-decoration: none;
53}
54.brand-icon {
55 color: #f93a3a;
56 display: inline-flex;
57 border-bottom: 1px solid;
58}
59.brand-icon:hover {
60 border-bottom: none;
61}
62.layout {
63 max-width: 48rem;
64 margin-left: auto;
65 margin-right: auto;
66 padding: 2.625rem 1.3125rem;
67}
68.layout .title-wrapper {
69 display: flex;
70 flex-direction: column;
71 align-items: center;
72 margin-bottom: 0.5rem;
73}
74.layout .title {
75 color: #333;
76 text-align: left;
77 display: block;
78 font-size: 1.875rem;
79 margin: 0;
80}
81nav {
82 font-size: 1.025rem;
83 text-align: center;
84}
85nav ul {
86 display: block;
87 padding: 0;
88}
89nav ul li {
90 display: inline;
91 list-style-type: none;
92}
93nav ul li a {
94 color: #333;
95 display: inline-block;
96 padding-top: 0.5rem;
97 padding-bottom: 0.5rem;
98 border-bottom: 1px solid #fefefe;
99}
100nav ul li a:hover {
101 color: #f93a3a;
102}
103nav ul li:not(:last-child) {
104 padding: 0 1rem 0 0;
105}
106.slim-description {
107 margin-bottom: calc(16px * 2);
108 color: #666;
109}
110.blog-post-content a {
111 color: #f93a3a;
112 text-decoration: none;
113 border-bottom: 1px solid;
114}
115.blog-post-content a:hover {
116 border-bottom: none;
117}
118.blog-list .list-item {
119 display: flex;
120 flex-direction: column-reverse;
121 align-items: baseline;
122 padding: 0.5rem 0.5rem 0.5rem 0;
123}
124.blog-list .post-title a {
125 text-decoration: none;
126 color: #333;
127 border-bottom: none;
128}
129.blog-list .post-title a:hover {
130 border-bottom: 1px solid;
131}
132.blog-list .date-label {
133 font-size: 80%;
134 margin-right: 1rem;
135}
136.content .title {
137 font-size: 1.275rem;
138}
139.blog-post-content a {
140 color: #f93a3a;
141 text-decoration: none;
142 border-bottom: 1px solid;
143}
144.blog-post-content a:hover {
145 border-bottom: none;
146}
147.blog-post-content img {
148 width: 100%;
149}
150.post-image {
151 margin-left: calc(-1.3125rem);
152 margin-right: calc(-1.3125rem);
153}
154.post-image img {
155 width: 100%;
156}
157.tags {
158 font-size: 0.9em;
159 text-align: left;
160}
161.tags ul {
162 display: block;
163 padding: 0;
164}
165.tags ul li {
166 display: inline;
167 list-style-type: none;
168 text-align: center;
169}
170.tags ul li a {
171 border: 1px solid #f93a3a;
172 border-radius: 3px;
173 background: #f93a3a;
174 padding: 0.2em;
175 color: #fff;
176 margin: 10px 2px 10px 0;
177 line-height: 1em;
178}
179.tags ul li a:hover {
180 background: #fefefe;
181 color: #f93a3a;
182}
183.tags ul li:not(:last-child) {
184 padding: 0 0.1rem 0 0;
185}
186.highlight {
187 margin-left: calc(-1.3125rem);
188 margin-right: calc(-1.3125rem);
189}
190.highlight pre {
191 line-height: 1.2rem;
192 border: 1px solid #ddd;
193 border-radius: 5px;
194 overflow: auto;
195 padding: 1.3125rem;
196 margin: 0;
197}
198.highlight pre code[class*="language-"] {
199 font-size: 0.9em;
200}
201.highlight pre .token.comment {
202 font-style: italic;
203}
204blockquote {
205 background: #f9f9f9;
206 border-left: 5px solid #333;
207 margin: 1.5em 10px;
208 padding: 0.5em 10px;
209 quotes: "“" "”" "‘" "’";
210}
211blockquote:before {
212 color: #333;
213 content: open-quote;
214 font-size: 4em;
215 line-height: 0.1em;
216 margin-right: 0.25em;
217 vertical-align: -0.4em;
218}
219blockquote p {
220 display: inline;
221}
222time {
223 font-size: 80%;
224 margin-right: 1rem;
225}
226@media only screen and (min-width: 600px) {
227 .layout .title-wrapper {
228 display: flex;
229 justify-content: space-between;
230 align-items: center;
231 flex-direction: row;
232 }
233 .layout .title {
234 margin-block-start: 0.83em;
235 margin-block-end: 0.83em;
236 margin-inline-start: 0;
237 margin-inline-end: 0;
238 }
239 .blog-list .list-item {
240 display: flex;
241 justify-content: space-between;
242 align-items: center;
243 flex-direction: unset;
244 padding: 0;
245 margin-bottom: 0.5rem;
246 }
247 .blog-list .date-label {
248 font-size: 100%;
249 margin-right: 0;
250 }
251 .project-board {
252 grid-template-columns: 1fr 1fr;
253 }
254 .highlight {
255 margin-left: 0;
256 margin-right: 0;
257 }
258 .post-image {
259 margin-left: 0;
260 margin-right: 0;
261 }
262}
263