main.css (8518B)
1 /**
2 * Reset some basic elements
3 */
4 body, h1, h2, h3, h4, h5, h6,
5 p, blockquote, pre, hr,
6 dl, dd, ol, ul, figure {
7 margin: 0;
8 padding: 0; }
9
10 /**
11 * Basic styling
12 */
13 body {
14 font-family: Helvetica, Arial, sans-serif;
15 font-size: 16px;
16 line-height: 1.5;
17 font-weight: 300;
18 color: #111;
19 background-color: #fdfdfd;
20 -webkit-text-size-adjust: 100%; }
21
22 strong {
23 font-weight: bold;
24 }
25
26 /**
27 * Set `margin-bottom` to maintain vertical rhythm
28 */
29 h1, h2, h3, h4, h5, h6,
30 p, blockquote, pre,
31 ul, ol, dl, figure,
32 .highlight {
33 margin-bottom: 15px; }
34
35 /**
36 * Images
37 */
38 img {
39 max-width: 100%;
40 vertical-align: middle; }
41
42 /**
43 * Figures
44 */
45 figure > img {
46 display: block; }
47
48 figcaption {
49 font-size: 14px; }
50
51 /**
52 * Lists
53 */
54 ul, ol {
55 margin-left: 30px; }
56
57 li > ul,
58 li > ol {
59 margin-bottom: 0; }
60
61 /**
62 * Headings
63 */
64 h1, h2, h3, h4, h5, h6 {
65 font-weight: 300; }
66
67 /**
68 * Links
69 */
70 a {
71 color: #2a7ae2;
72 text-decoration: none; }
73 a:visited {
74 color: #1756a9; }
75 a:hover {
76 color: #111;
77 text-decoration: underline; }
78
79 /**
80 * Blockquotes
81 */
82 blockquote {
83 color: #828282;
84 border-left: 4px solid #e8e8e8;
85 padding-left: 15px;
86 font-size: 18px;
87 letter-spacing: -1px;
88 font-style: italic; }
89 blockquote > :last-child {
90 margin-bottom: 0; }
91
92 /**
93 * Code formatting
94 */
95 pre,
96 code {
97 font-size: 15px;
98 border: 1px solid #e8e8e8;
99 border-radius: 3px;
100 background-color: #eef; }
101
102 code {
103 padding: 1px 5px; }
104
105 pre {
106 padding: 8px 12px;
107 overflow-x: scroll; }
108 pre > code {
109 border: 0;
110 padding-right: 0;
111 padding-left: 0; }
112
113 /**
114 * Wrapper
115 */
116 .wrapper {
117 max-width: -webkit-calc(800px - (30px * 2));
118 max-width: calc(800px - (30px * 2));
119 margin-right: auto;
120 margin-left: auto;
121 padding-right: 30px;
122 padding-left: 30px; }
123 @media screen and (max-width: 800px) {
124 .wrapper {
125 max-width: -webkit-calc(800px - (30px));
126 max-width: calc(800px - (30px));
127 padding-right: 15px;
128 padding-left: 15px; } }
129
130 /**
131 * Clearfix
132 */
133 .wrapper:after, .footer-col-wrapper:after {
134 content: "";
135 display: table;
136 clear: both; }
137
138 /**
139 * Icons
140 */
141 .icon > svg {
142 display: inline-block;
143 width: 16px;
144 height: 16px;
145 vertical-align: middle; }
146 .icon > svg path {
147 fill: #828282; }
148
149 /**
150 * Site header
151 */
152 .site-header {
153 border-top: 5px solid #424242;
154 border-bottom: 1px solid #e8e8e8;
155 min-height: 56px;
156 position: relative; }
157
158 .site-title {
159 font-size: 26px;
160 line-height: 56px;
161 letter-spacing: -1px;
162 margin-bottom: 0;
163 float: left; }
164 .site-title, .site-title:visited {
165 color: #424242; }
166
167 .site-nav {
168 float: right;
169 line-height: 56px; }
170 .site-nav .menu-icon {
171 display: none; }
172 .site-nav .page-link {
173 color: #111;
174 line-height: 1.5; }
175 .site-nav .page-link:not(:first-child) {
176 margin-left: 20px; }
177 @media screen and (max-width: 600px) {
178 .site-nav {
179 position: absolute;
180 top: 9px;
181 right: 30px;
182 background-color: #fdfdfd;
183 border: 1px solid #e8e8e8;
184 border-radius: 5px;
185 text-align: right; }
186 .site-nav .menu-icon {
187 display: block;
188 float: right;
189 width: 36px;
190 height: 26px;
191 line-height: 0;
192 padding-top: 10px;
193 text-align: center; }
194 .site-nav .menu-icon > svg {
195 width: 18px;
196 height: 15px; }
197 .site-nav .menu-icon > svg path {
198 fill: #424242; }
199 .site-nav .trigger {
200 clear: both;
201 display: none; }
202 .site-nav:hover .trigger {
203 display: block;
204 padding-bottom: 5px; }
205 .site-nav .page-link {
206 display: block;
207 padding: 5px 10px; } }
208
209 /**
210 * Site footer
211 */
212 .site-footer {
213 border-top: 1px solid #e8e8e8;
214 padding: 30px 0; }
215
216 .footer-heading {
217 font-size: 18px;
218 margin-bottom: 15px; }
219
220 .contact-list,
221 .social-media-list {
222 list-style: none;
223 margin-left: 0; }
224
225 .footer-col-wrapper {
226 font-size: 15px;
227 color: #828282;
228 margin-left: -15px; }
229
230 .footer-col {
231 float: left;
232 margin-bottom: 15px;
233 padding-left: 15px; }
234
235 .footer-col-1 {
236 width: -webkit-calc(35% - (30px / 2));
237 width: calc(35% - (30px / 2)); }
238
239 .footer-col-2 {
240 width: -webkit-calc(20% - (30px / 2));
241 width: calc(20% - (30px / 2)); }
242
243 .footer-col-3 {
244 width: -webkit-calc(45% - (30px / 2));
245 width: calc(45% - (30px / 2)); }
246
247 @media screen and (max-width: 800px) {
248 .footer-col-1,
249 .footer-col-2 {
250 width: -webkit-calc(50% - (30px / 2));
251 width: calc(50% - (30px / 2)); }
252
253 .footer-col-3 {
254 width: -webkit-calc(100% - (30px / 2));
255 width: calc(100% - (30px / 2)); } }
256 @media screen and (max-width: 600px) {
257 .footer-col {
258 float: none;
259 width: -webkit-calc(100% - (30px / 2));
260 width: calc(100% - (30px / 2)); } }
261 /**
262 * Page content
263 */
264 .page-content {
265 padding: 30px 0; }
266
267 .page-heading {
268 font-size: 20px; }
269
270 .post-list {
271 margin-left: 0;
272 list-style: none; }
273 .post-list > li {
274 margin-bottom: 30px; }
275
276 .post-meta {
277 font-size: 14px;
278 color: #828282; }
279
280 .post-link {
281 display: block;
282 font-size: 24px; }
283
284 /**
285 * Posts
286 */
287 .post-header {
288 margin-bottom: 30px; }
289
290 .post-title {
291 font-size: 42px;
292 letter-spacing: -1px;
293 line-height: 1; }
294 @media screen and (max-width: 800px) {
295 .post-title {
296 font-size: 36px; } }
297
298 .post-content {
299 margin-bottom: 30px; }
300 .post-content h2 {
301 font-size: 32px; }
302 @media screen and (max-width: 800px) {
303 .post-content h2 {
304 font-size: 28px; } }
305 .post-content h3 {
306 font-size: 26px; }
307 @media screen and (max-width: 800px) {
308 .post-content h3 {
309 font-size: 22px; } }
310 .post-content h4 {
311 font-size: 20px; }
312 @media screen and (max-width: 800px) {
313 .post-content h4 {
314 font-size: 18px; } }
315
316 /**
317 * Syntax highlighting styles
318 */
319 .highlight {
320 background: #fff; }
321 .highlight .c {
322 color: #998;
323 font-style: italic; }
324 .highlight .err {
325 color: #a61717;
326 background-color: #e3d2d2; }
327 .highlight .k {
328 font-weight: bold; }
329 .highlight .o {
330 font-weight: bold; }
331 .highlight .cm {
332 color: #998;
333 font-style: italic; }
334 .highlight .cp {
335 color: #999;
336 font-weight: bold; }
337 .highlight .c1 {
338 color: #998;
339 font-style: italic; }
340 .highlight .cs {
341 color: #999;
342 font-weight: bold;
343 font-style: italic; }
344 .highlight .gd {
345 color: #000;
346 background-color: #fdd; }
347 .highlight .gd .x {
348 color: #000;
349 background-color: #faa; }
350 .highlight .ge {
351 font-style: italic; }
352 .highlight .gr {
353 color: #a00; }
354 .highlight .gh {
355 color: #999; }
356 .highlight .gi {
357 color: #000;
358 background-color: #dfd; }
359 .highlight .gi .x {
360 color: #000;
361 background-color: #afa; }
362 .highlight .go {
363 color: #888; }
364 .highlight .gp {
365 color: #555; }
366 .highlight .gs {
367 font-weight: bold; }
368 .highlight .gu {
369 color: #aaa; }
370 .highlight .gt {
371 color: #a00; }
372 .highlight .kc {
373 font-weight: bold; }
374 .highlight .kd {
375 font-weight: bold; }
376 .highlight .kp {
377 font-weight: bold; }
378 .highlight .kr {
379 font-weight: bold; }
380 .highlight .kt {
381 color: #458;
382 font-weight: bold; }
383 .highlight .m {
384 color: #099; }
385 .highlight .s {
386 color: #d14; }
387 .highlight .na {
388 color: #008080; }
389 .highlight .nb {
390 color: #0086B3; }
391 .highlight .nc {
392 color: #458;
393 font-weight: bold; }
394 .highlight .no {
395 color: #008080; }
396 .highlight .ni {
397 color: #800080; }
398 .highlight .ne {
399 color: #900;
400 font-weight: bold; }
401 .highlight .nf {
402 color: #900;
403 font-weight: bold; }
404 .highlight .nn {
405 color: #555; }
406 .highlight .nt {
407 color: #000080; }
408 .highlight .nv {
409 color: #008080; }
410 .highlight .ow {
411 font-weight: bold; }
412 .highlight .w {
413 color: #bbb; }
414 .highlight .mf {
415 color: #099; }
416 .highlight .mh {
417 color: #099; }
418 .highlight .mi {
419 color: #099; }
420 .highlight .mo {
421 color: #099; }
422 .highlight .sb {
423 color: #d14; }
424 .highlight .sc {
425 color: #d14; }
426 .highlight .sd {
427 color: #d14; }
428 .highlight .s2 {
429 color: #d14; }
430 .highlight .se {
431 color: #d14; }
432 .highlight .sh {
433 color: #d14; }
434 .highlight .si {
435 color: #d14; }
436 .highlight .sx {
437 color: #d14; }
438 .highlight .sr {
439 color: #009926; }
440 .highlight .s1 {
441 color: #d14; }
442 .highlight .ss {
443 color: #990073; }
444 .highlight .bp {
445 color: #999; }
446 .highlight .vc {
447 color: #008080; }
448 .highlight .vg {
449 color: #008080; }
450 .highlight .vi {
451 color: #008080; }
452 .highlight .il {
453 color: #099; }