]>
Commit | Line | Data |
---|---|---|
da66ac19 | 1 | /* |
2 | __ __ | |
3 | /\ \ /\ \ | |
4 | \ \ \___ __ __ \_\ \ __ | |
5 | \ \ _ `\/\ \/\ \ /'_` \ /'__`\ | |
6 | \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ | |
7 | \ \_\ \_\/`____ \ \___,_\ \____\ | |
8 | \/_/\/_/`/___/> \/__,_ /\/____/ | |
9 | /\___/ | |
10 | \/__/ | |
11 | ||
12 | Hyde is an elegant, open source, mobile first theme for Jekyll. It includes | |
13 | lightweight styles and placeholder content to get you up and running with a | |
14 | simple blog in no time. | |
15 | ||
16 | Designed, built, and released under MIT license by @mdo. | |
17 | ||
18 | Learn more at http://andhyde.com or https://github.com/mdo/hyde. | |
19 | ||
20 | */ | |
21 | ||
22 | ||
23 | /* | |
24 | * Contents | |
25 | * | |
26 | * Body resets | |
27 | * Custom type | |
28 | * Links | |
29 | * Masthead | |
30 | * Container | |
31 | * Posts | |
32 | * Error page | |
33 | * Pagination | |
34 | * Themes | |
35 | */ | |
36 | ||
37 | ||
38 | /* | |
39 | * Body resets | |
40 | * | |
41 | * Update the foundational and global aspects of the page. | |
42 | */ | |
43 | ||
44 | * { | |
45 | -webkit-box-sizing: border-box; | |
46 | -moz-box-sizing: border-box; | |
47 | box-sizing: border-box; | |
48 | } | |
49 | ||
50 | html, | |
51 | body { | |
52 | margin: 0; | |
53 | padding: 0; | |
54 | } | |
55 | ||
56 | body { | |
57 | font-family: "Open Sans", Helvetica, Arial, sans-serif; | |
58 | font-size: 16px; | |
59 | line-height: 1.5; | |
60 | color: #454441; | |
61 | background-color: #fff; | |
62 | } | |
63 | @media (min-width: 990px) { | |
64 | body { | |
65 | font-size: 18px; | |
66 | } | |
67 | } | |
68 | ||
69 | h1, h2, h3, h4, h5, h6 { | |
70 | margin: 0 0 10px; | |
71 | font-weight: 600; | |
72 | line-height: 1.25; | |
73 | text-rendering: optimizeLegibility; | |
74 | } | |
75 | h1 { | |
76 | font-size: 40px; | |
77 | } | |
78 | h2 { | |
79 | margin-top: 20px; | |
80 | font-size: 32px; | |
81 | } | |
82 | h3 { | |
83 | margin-top: 24px; | |
84 | font-size: 24px; | |
85 | } | |
86 | h4, h5, h6 { | |
87 | margin-top: 16px; | |
88 | font-size: 16px; | |
89 | } | |
90 | ||
91 | p { | |
92 | margin: 0 0 15px; | |
93 | } | |
94 | ||
95 | ul, ol { | |
96 | margin-bottom: 15px; | |
97 | } | |
98 | ||
99 | hr { | |
100 | position: relative; | |
101 | margin: 40px 0; | |
102 | border: 0; | |
103 | border-top: 1px solid #eee; | |
104 | border-bottom: 1px solid #fff; | |
105 | } | |
106 | ||
107 | strong { | |
108 | color: #222; | |
109 | } | |
110 | ||
111 | abbr { | |
112 | background-color: #eee; | |
113 | display: inline-block; | |
114 | padding: 3px; | |
115 | font-size: 13px; | |
116 | font-weight: bold; | |
117 | color: #555; | |
118 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); | |
119 | text-transform: uppercase; | |
120 | border-radius: 3px; | |
121 | } | |
122 | ||
123 | code, | |
124 | pre { | |
125 | font-family: Menlo, Monaco, "Courier New", monospace; | |
126 | } | |
127 | code { | |
128 | padding: .25em .5em; | |
129 | font-size: 85%; | |
130 | color: #bf616a; | |
131 | background-color: #f9f9f9; | |
132 | border-radius: 3px; | |
133 | } | |
134 | pre { | |
135 | display: block; | |
136 | margin: 0 0 14px; | |
137 | padding: 15px 20px; | |
138 | font-size: 16px; | |
139 | line-height: 1.4; | |
140 | white-space: pre; | |
141 | white-space: pre-wrap; | |
142 | word-break: break-all; | |
143 | word-wrap: break-word; | |
144 | background-color: #f9f9f9; | |
145 | } | |
146 | pre code { | |
147 | padding: 0; | |
148 | font-size: 100%; | |
149 | color: inherit; | |
150 | background-color: transparent; | |
151 | } | |
152 | .highlight { | |
153 | margin-bottom: 15px; | |
154 | border-radius: 4px; | |
155 | } | |
156 | .highlight pre { | |
157 | margin-bottom: 0; | |
158 | } | |
159 | ||
160 | /* Quotes */ | |
161 | blockquote { | |
162 | padding: 5px 30px 5px 25px; | |
163 | margin: 15px 0; | |
164 | border-left: 5px solid #eee; | |
165 | } | |
166 | blockquote p { | |
167 | margin-bottom: 0; | |
168 | color: #7a7a7a; | |
169 | text-indent: -0.4em; | |
170 | } | |
171 | blockquote p:before { | |
172 | content: '\201C'; | |
173 | } | |
174 | blockquote p:after { | |
175 | content: '\201D'; | |
176 | } | |
177 | ||
178 | img { | |
179 | display: block; | |
180 | margin: 0 0 15px; | |
181 | border-radius: 5px; | |
182 | } | |
183 | ||
184 | ||
185 | /* | |
186 | * Custom type | |
187 | * | |
188 | * Extend paragraphs with `.lead` for larger introductory text. | |
189 | */ | |
190 | ||
191 | .lead { | |
192 | font-size: 20px; | |
193 | font-weight: 300; | |
194 | } | |
195 | @media (min-width: 990px) { | |
196 | .lead { | |
197 | font-size: 24px; | |
198 | } | |
199 | } | |
200 | ||
201 | ||
202 | /* | |
203 | * Links | |
204 | * | |
205 | * No `:visited` state is required by default (browsers will use `a`). `:focus` | |
206 | * is linked to `:hover` for basic accessibility. | |
207 | */ | |
208 | ||
209 | a { | |
210 | font-weight: 600; | |
211 | color: #222; | |
212 | text-decoration: none; | |
213 | } | |
214 | a:hover, | |
215 | a:focus { | |
216 | text-decoration: underline; | |
217 | } | |
218 | ||
219 | ||
220 | /* | |
221 | * Masthead | |
222 | * | |
223 | * Sidebar banner for housing site name, intro, and colophon (footer). | |
224 | */ | |
225 | ||
226 | /* Sidebar masthead */ | |
227 | .masthead { | |
228 | color: #fff; | |
229 | background-color: #2a2a2a; | |
230 | } | |
231 | .masthead-inner { | |
232 | padding: 20px; | |
233 | } | |
234 | ||
235 | /* Masthead content */ | |
236 | .masthead h1 { | |
237 | margin-top: 0; | |
238 | font-family: "Abril Fatface"; | |
239 | } | |
240 | .masthead .lead { | |
241 | margin-bottom: 0; | |
242 | } | |
243 | .masthead a { | |
244 | color: #fff; | |
245 | } | |
246 | ||
247 | /* Footer area of masthead */ | |
248 | .colophon { | |
249 | margin-top: 20px; | |
250 | color: rgba(255,255,255,.5); | |
251 | } | |
252 | .colophon-links { | |
253 | padding-left: 0; | |
254 | list-style: none; | |
255 | } | |
256 | .colophon-links li { | |
257 | color: inherit; | |
258 | } | |
259 | ||
260 | /* Responsive masthead */ | |
261 | @media (min-width: 768px) { | |
262 | .masthead-inner { | |
263 | padding: 40px; | |
264 | } | |
265 | } | |
266 | @media (min-width: 990px) { | |
267 | /* Fix the masthead to the side for impact and awesomeness */ | |
268 | .masthead { | |
269 | position: fixed; | |
270 | top: 0; | |
271 | left: 0; | |
272 | bottom: 0; | |
273 | width: 25%; | |
274 | margin-bottom: 0; | |
275 | } | |
276 | .masthead-inner { | |
277 | position: absolute; | |
278 | bottom: 0; | |
279 | right: 0; | |
280 | left: 0; | |
281 | } | |
282 | .masthead h1 { | |
283 | font-size: 64px; | |
284 | } | |
285 | .colophon { | |
286 | margin-top: 40px; | |
287 | } | |
288 | } | |
289 | ||
290 | ||
291 | /* Container | |
292 | * | |
293 | * Align the contents of the site above the proper threshold with some margin-fu | |
294 | * with a 25%-wide `.masthead`. | |
295 | */ | |
296 | ||
297 | .content { | |
298 | padding: 40px 20px; | |
299 | } | |
300 | ||
301 | /* Center container in available real estate */ | |
302 | @media (min-width: 990px) { | |
303 | .content { | |
304 | padding: 60px 0; | |
305 | } | |
306 | .container { | |
307 | width: 55%; | |
308 | margin-left: 35%; | |
309 | margin-right: 10%; | |
310 | } | |
311 | } | |
312 | ||
313 | ||
314 | /* | |
315 | * Posts | |
316 | * | |
317 | * Each post is wrapped in `.post`. Used on default and post layouts. | |
318 | */ | |
319 | ||
320 | /* Single post */ | |
321 | .post { | |
322 | margin-bottom: 40px; | |
323 | } | |
324 | @media (min-width: 990px) { | |
325 | .post { | |
326 | margin-bottom: 60px; | |
327 | } | |
328 | } | |
329 | ||
330 | /* Meta data line below post title */ | |
331 | .post-date { | |
332 | display: block; | |
333 | margin: -10px 0 10px; | |
334 | color: #9a9a9a; | |
335 | } | |
336 | ||
337 | /* Related posts */ | |
338 | .related { | |
339 | padding-top: 20px; | |
340 | padding-bottom: 40px; | |
341 | border-top: 1px solid #eee; | |
342 | } | |
343 | .related-posts { | |
344 | padding-left: 0; | |
345 | list-style: none; | |
346 | } | |
347 | .related-posts h3 { | |
348 | margin-top: 0; | |
349 | } | |
350 | .related-posts li small { | |
351 | font-size: 75%; | |
352 | color: #999; | |
353 | } | |
354 | .related-posts li a:hover { | |
355 | color: #000; | |
356 | text-decoration: none; | |
357 | } | |
358 | .related-posts li a:hover small { | |
359 | color: inherit; | |
360 | } | |
361 | ||
362 | ||
363 | /* | |
364 | * Pagination | |
365 | * | |
366 | * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when | |
367 | * there are no more previous or next posts to show. | |
368 | */ | |
369 | ||
370 | .pagination { | |
371 | overflow: hidden; /* clearfix */ | |
372 | margin-top: 40px; | |
373 | font-weight: bold; | |
374 | color: #ccc; | |
375 | text-align: center; | |
376 | border-top: 1px solid #eee; | |
377 | } | |
378 | /* Pagination should float when space is plentiful */ | |
379 | @media (min-width: 990px) { | |
380 | .pagination { | |
381 | margin-bottom: 60px; | |
382 | border: 1px solid #eee; | |
383 | } | |
384 | } | |
385 | ||
386 | .pagination a, | |
387 | .pagination span { | |
388 | float: left; | |
389 | width: 50%; | |
390 | padding: 20px; | |
391 | } | |
392 | .pagination a:first-child, | |
393 | .pagination span:first-child { | |
394 | border-right: 1px solid #eee; | |
395 | } | |
396 | .pagination a:hover { | |
397 | text-decoration: none; | |
398 | background-color: #f5f5f5; | |
399 | } | |
400 | ||
401 | ||
402 | /* | |
403 | * Reverse layout | |
404 | * | |
405 | * Flip the orientation of the page by placing the `.masthead` on the right. | |
406 | */ | |
407 | ||
408 | @media (min-width: 990px) { | |
409 | .layout-reverse .masthead { | |
410 | left: auto; | |
411 | right: 0; | |
412 | } | |
413 | .layout-reverse .container { | |
414 | margin-left: 10%; | |
415 | margin-right: 35%; | |
416 | } | |
417 | } | |
418 | ||
419 | ||
420 | /* | |
421 | * Themes | |
422 | * | |
423 | * As of v1.1, Hyde includes optional themes to color the sidebar and links | |
424 | * within blog posts. To use, add the class of your choosing to the `body`. | |
425 | */ | |
426 | ||
427 | /* Base16 (http://chriskempson.github.io/base16/#default) */ | |
428 | ||
429 | /* Red */ | |
430 | .theme-base-08 .masthead { | |
431 | background-color: #ac4142; | |
432 | } | |
433 | .theme-base-08 .container a, | |
434 | .theme-base-08 .related-posts li a:hover { | |
435 | color: #ac4142; | |
436 | } | |
437 | ||
438 | /* Orange */ | |
439 | .theme-base-09 .masthead { | |
440 | background-color: #d28445; | |
441 | } | |
442 | .theme-base-09 .container a, | |
443 | .theme-base-09 .related-posts li a:hover { | |
444 | color: #d28445; | |
445 | } | |
446 | ||
447 | /* Yellow */ | |
448 | .theme-base-0a .masthead { | |
449 | background-color: #f4bf75; | |
450 | } | |
451 | .theme-base-0a .container a, | |
452 | .theme-base-0a .related-posts li a:hover { | |
453 | color: #f4bf75; | |
454 | } | |
455 | ||
456 | /* Green */ | |
457 | .theme-base-0b .masthead { | |
458 | background-color: #90a959; | |
459 | } | |
460 | .theme-base-0b .container a, | |
461 | .theme-base-0b .related-posts li a:hover { | |
462 | color: #90a959; | |
463 | } | |
464 | ||
465 | /* Cyan */ | |
466 | .theme-base-0c .masthead { | |
467 | background-color: #75b5aa; | |
468 | } | |
469 | .theme-base-0c .container a, | |
470 | .theme-base-0c .related-posts li a:hover { | |
471 | color: #75b5aa; | |
472 | } | |
473 | ||
474 | /* Blue */ | |
475 | .theme-base-0d .masthead { | |
476 | background-color: #6a9fb5; | |
477 | } | |
478 | .theme-base-0d .container a, | |
479 | .theme-base-0d .related-posts li a:hover { | |
480 | color: #6a9fb5; | |
481 | } | |
482 | ||
483 | /* Magenta */ | |
484 | .theme-base-0e .masthead { | |
485 | background-color: #aa759f; | |
486 | } | |
487 | .theme-base-0e .container a, | |
488 | .theme-base-0e .related-posts li a:hover { | |
489 | color: #aa759f; | |
490 | } | |
491 | ||
492 | /* Brown */ | |
493 | .theme-base-0f .masthead { | |
494 | background-color: #8f5536; | |
495 | } | |
496 | .theme-base-0f .container a, | |
497 | .theme-base-0f .related-posts li a:hover { | |
498 | color: #8f5536; | |
499 | } |