瀏覽代碼

Hyde theme: sync with upstream to v2.0.0.

CSS is now split into poole.css and hyde.css; chrome/sidebar.html updated.

Also cherry-pick:

  * poole/hyde@48b9d1f - Set a max-width for images
Dato Simó 11 年之前
父節點
當前提交
0576ec066d
共有 7 個檔案被更改,包括 529 行新增374 行删除
  1. 1
    0
      layouts/chrome/head.html
  2. 13
    13
      layouts/chrome/sidebar.html
  3. 112
    361
      static/css/hyde.css
  4. 403
    0
      static/css/poole.css
  5. 0
    0
      static/css/syntax.css
  6. 0
    0
      static/favicon.png
  7. 0
    0
      static/touch-icon-144-precomposed.png

+ 1
- 0
layouts/chrome/head.html 查看文件

@@ -10,6 +10,7 @@
10 10
   <title> {{ .Title }} &middot; {{ .Site.Title }} </title>
11 11
 
12 12
   <!-- CSS -->
13
+  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/poole.css">
13 14
   <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/syntax.css">
14 15
   <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/hyde.css">
15 16
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

+ 13
- 13
layouts/chrome/sidebar.html 查看文件

@@ -1,19 +1,19 @@
1
-    <header class="masthead">
2
-      <div class="masthead-inner">
1
+<div class="sidebar">
2
+  <div class="container sidebar-sticky">
3
+    <div class="sidebar-about">
3 4
       <h1>{{ .Site.Title }}</h1>
4 5
       <p class="lead">
5 6
       {{ with .Site.Params.Description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
6 7
       </p>
8
+    </div>
7 9
 
8
-        <div class="colophon">
9
-          <ul class="colophon-links">
10
-              <li><a href="/">Home</a> </li>
11
-              {{ range .Site.Menus.main }}
12
-                    <li><a href="{{.Url}}"> {{ .Name }} </a></li>
13
-              {{end}}
14
-          </ul>
10
+    <ul class="sidebar-nav">
11
+      <li><a href="/">Home</a> </li>
12
+      {{ range .Site.Menus.main }}
13
+        <li><a href="{{.Url}}"> {{ .Name }} </a></li>
14
+      {{end}}
15
+    </ul>
15 16
 
16
-          <p>{{ with .Site.Params.Copyright }}{{.}}{{ else }}&copy; {{.Now.Format "2006"}}. All rights reserved. {{end}}</p>
17
-        </div>
18
-      </div>
19
-    </header>
17
+    <p>{{ with .Site.Params.Copyright }}{{.}}{{ else }}&copy; {{.Now.Format "2006"}}. All rights reserved. {{end}}</p>
18
+  </div>
19
+</div>

+ 112
- 361
static/css/hyde.css 查看文件

@@ -1,289 +1,116 @@
1 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
-*/
2
+ *  __                  __
3
+ * /\ \                /\ \
4
+ * \ \ \___   __  __   \_\ \     __
5
+ *  \ \  _ `\/\ \/\ \  /'_` \  /'__`\
6
+ *   \ \ \ \ \ \ \_\ \/\ \_\ \/\  __/
7
+ *    \ \_\ \_\/`____ \ \___,_\ \____\
8
+ *     \/_/\/_/`/___/> \/__,_ /\/____/
9
+ *                /\___/
10
+ *                \/__/
11
+ *
12
+ * Designed, built, and released under MIT license by @mdo. Learn more at
13
+ * https://github.com/poole/hyde.
14
+ */
21 15
 
22 16
 
23 17
 /*
24 18
  * Contents
25 19
  *
26
- * Body resets
27
- * Custom type
28
- * Links
29
- * Masthead
20
+ * Global resets
21
+ * Sidebar
30 22
  * Container
31
- * Posts
32
- * Error page
33
- * Pagination
23
+ * Reverse layout
34 24
  * Themes
35 25
  */
36 26
 
37 27
 
38 28
 /*
39
- * Body resets
29
+ * Global resets
40 30
  *
41 31
  * Update the foundational and global aspects of the page.
42 32
  */
43 33
 
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;
34
+html {
35
+  font-family: "PT Sans", Helvetica, Arial, sans-serif;
54 36
 }
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;
37
+@media (min-width: 48rem) {
38
+  html {
39
+    font-size: 16px;
66 40
   }
67 41
 }
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;
42
+@media (min-width: 58rem) {
43
+  html {
44
+    font-size: 20px;
198 45
   }
199 46
 }
200 47
 
201 48
 
202 49
 /*
203
- * Links
50
+ * Sidebar
204 51
  *
205
- * No `:visited` state is required by default (browsers will use `a`). `:focus`
206
- * is linked to `:hover` for basic accessibility.
52
+ * Flexible banner for housing site name, intro, and "footer" content. Starts
53
+ * out above content in mobile and later moves to the side with wider viewports.
207 54
  */
208 55
 
209
-a {
210
-  font-weight: 600;
211
-  color: #222;
212
-  text-decoration: none;
56
+.sidebar {
57
+  text-align: center;
58
+  padding: 2rem 1rem;
59
+  color: rgba(255,255,255,.5);
60
+  background-color: #202020;
213 61
 }
214
-a:hover,
215
-a:focus {
216
-  text-decoration: underline;
62
+@media (min-width: 48rem) {
63
+  .sidebar {
64
+    position: fixed;
65
+    top: 0;
66
+    left: 0;
67
+    bottom: 0;
68
+    width: 18rem;
69
+    text-align: left;
70
+  }
217 71
 }
218 72
 
219
-
220
-/*
221
- * Masthead
222
- *
223
- * Sidebar banner for housing site name, intro, and colophon (footer).
224
- */
225
-
226
-/* Sidebar masthead */
227
-.masthead {
73
+/* Sidebar links */
74
+.sidebar a {
228 75
   color: #fff;
229
-  background-color: #2a2a2a;
230
-}
231
-.masthead-inner {
232
-  padding: 20px;
233 76
 }
234 77
 
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 {
78
+/* About section */
79
+.sidebar-about h1 {
244 80
   color: #fff;
81
+  margin-top: 0;
82
+  font-family: "Abril Fatface", serif;
83
+  font-size: 3.25rem;
245 84
 }
246 85
 
247
-/* Footer area of masthead */
248
-.colophon {
249
-  margin-top: 20px;
250
-  color: rgba(255,255,255,.5);
251
-}
252
-.colophon-links {
86
+/* Sidebar nav */
87
+.sidebar-nav {
253 88
   padding-left: 0;
254 89
   list-style: none;
255 90
 }
256
-.colophon-links li {
257
-  color: inherit;
91
+.sidebar-nav-item {
92
+  display: block;
258 93
 }
259
-
260
-/* Responsive masthead */
261
-@media (min-width: 768px) {
262
-  .masthead-inner {
263
-    padding: 40px;
264
-  }
94
+a.sidebar-nav-item:hover,
95
+a.sidebar-nav-item:focus {
96
+  text-decoration: underline;
265 97
 }
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 {
98
+.sidebar-nav-item.active {
99
+  font-weight: bold;
100
+}
101
+
102
+/* Sticky sidebar
103
+ *
104
+ * Add the `sidebar-sticky` class to the sidebar's container to affix it the
105
+ * contents to the bottom of the sidebar in tablets and up.
106
+ */
107
+
108
+@media (min-width: 48rem) {
109
+  .sidebar-sticky {
277 110
     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;
111
+    right:  1rem;
112
+    bottom: 1rem;
113
+    left:   1rem;
287 114
   }
288 115
 }
289 116
 
@@ -291,131 +118,55 @@ a:focus {
291 118
 /* Container
292 119
  *
293 120
  * Align the contents of the site above the proper threshold with some margin-fu
294
- * with a 25%-wide `.masthead`.
121
+ * with a 25%-wide `.sidebar`.
295 122
  */
296 123
 
297 124
 .content {
298
-  padding: 40px 20px;
125
+  padding-top:    4rem;
126
+  padding-bottom: 4rem;
299 127
 }
300 128
 
301
-/* Center container in available real estate */
302
-@media (min-width: 990px) {
129
+@media (min-width: 48rem) {
303 130
   .content {
304
-    padding: 60px 0;
305
-  }
306
-  .container {
307
-    width: 55%;
308
-    margin-left: 35%;
309
-    margin-right: 10%;
131
+    max-width: 38rem;
132
+    margin-left: 20rem;
133
+    margin-right: 2rem;
310 134
   }
311 135
 }
312 136
 
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;
137
+@media (min-width: 64rem) {
138
+  .content {
139
+    margin-left: 22rem;
140
+    margin-right: 4rem;
383 141
   }
384 142
 }
385 143
 
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 144
 
402 145
 /*
403 146
  * Reverse layout
404 147
  *
405
- * Flip the orientation of the page by placing the `.masthead` on the right.
148
+ * Flip the orientation of the page by placing the `.sidebar` on the right.
406 149
  */
407 150
 
408
-@media (min-width: 990px) {
409
-  .layout-reverse .masthead {
151
+@media (min-width: 48rem) {
152
+  .layout-reverse .sidebar {
410 153
     left: auto;
411 154
     right: 0;
412 155
   }
413
-  .layout-reverse .container {
414
-    margin-left: 10%;
415
-    margin-right: 35%;
156
+  .layout-reverse .content {
157
+    margin-left: 2rem;
158
+    margin-right: 20rem;
416 159
   }
417 160
 }
418 161
 
162
+@media (min-width: 64rem) {
163
+  .layout-reverse .content {
164
+    margin-left: 4rem;
165
+    margin-right: 22rem;
166
+  }
167
+}
168
+
169
+
419 170
 
420 171
 /*
421 172
  * Themes
@@ -427,73 +178,73 @@ a:focus {
427 178
 /* Base16 (http://chriskempson.github.io/base16/#default) */
428 179
 
429 180
 /* Red */
430
-.theme-base-08 .masthead {
181
+.theme-base-08 .sidebar {
431 182
   background-color: #ac4142;
432 183
 }
433
-.theme-base-08 .container a,
184
+.theme-base-08 .content a,
434 185
 .theme-base-08 .related-posts li a:hover {
435 186
   color: #ac4142;
436 187
 }
437 188
 
438 189
 /* Orange */
439
-.theme-base-09 .masthead {
190
+.theme-base-09 .sidebar {
440 191
   background-color: #d28445;
441 192
 }
442
-.theme-base-09 .container a,
193
+.theme-base-09 .content a,
443 194
 .theme-base-09 .related-posts li a:hover {
444 195
   color: #d28445;
445 196
 }
446 197
 
447 198
 /* Yellow */
448
-.theme-base-0a .masthead {
199
+.theme-base-0a .sidebar {
449 200
   background-color: #f4bf75;
450 201
 }
451
-.theme-base-0a .container a,
202
+.theme-base-0a .content a,
452 203
 .theme-base-0a .related-posts li a:hover {
453 204
   color: #f4bf75;
454 205
 }
455 206
 
456 207
 /* Green */
457
-.theme-base-0b .masthead {
208
+.theme-base-0b .sidebar {
458 209
   background-color: #90a959;
459 210
 }
460
-.theme-base-0b .container a,
211
+.theme-base-0b .content a,
461 212
 .theme-base-0b .related-posts li a:hover {
462 213
   color: #90a959;
463 214
 }
464 215
 
465 216
 /* Cyan */
466
-.theme-base-0c .masthead {
217
+.theme-base-0c .sidebar {
467 218
   background-color: #75b5aa;
468 219
 }
469
-.theme-base-0c .container a,
220
+.theme-base-0c .content a,
470 221
 .theme-base-0c .related-posts li a:hover {
471 222
   color: #75b5aa;
472 223
 }
473 224
 
474 225
 /* Blue */
475
-.theme-base-0d .masthead {
226
+.theme-base-0d .sidebar {
476 227
   background-color: #6a9fb5;
477 228
 }
478
-.theme-base-0d .container a,
229
+.theme-base-0d .content a,
479 230
 .theme-base-0d .related-posts li a:hover {
480 231
   color: #6a9fb5;
481 232
 }
482 233
 
483 234
 /* Magenta */
484
-.theme-base-0e .masthead {
235
+.theme-base-0e .sidebar {
485 236
   background-color: #aa759f;
486 237
 }
487
-.theme-base-0e .container a,
238
+.theme-base-0e .content a,
488 239
 .theme-base-0e .related-posts li a:hover {
489 240
   color: #aa759f;
490 241
 }
491 242
 
492 243
 /* Brown */
493
-.theme-base-0f .masthead {
244
+.theme-base-0f .sidebar {
494 245
   background-color: #8f5536;
495 246
 }
496
-.theme-base-0f .container a,
247
+.theme-base-0f .content a,
497 248
 .theme-base-0f .related-posts li a:hover {
498 249
   color: #8f5536;
499 250
 }

+ 403
- 0
static/css/poole.css 查看文件

@@ -0,0 +1,403 @@
1
+/*
2
+ *                        ___
3
+ *                       /\_ \
4
+ *  _____     ___     ___\//\ \      __
5
+ * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
6
+ * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
7
+ *  \ \ ,__/\ \____/\ \____//\____\ \____\
8
+ *   \ \ \/  \/___/  \/___/ \/____/\/____/
9
+ *    \ \_\
10
+ *     \/_/
11
+ *
12
+ * Designed, built, and released under MIT license by @mdo. Learn more at
13
+ * https://github.com/poole/poole.
14
+ */
15
+
16
+
17
+/*
18
+ * Contents
19
+ *
20
+ * Body resets
21
+ * Custom type
22
+ * Messages
23
+ * Container
24
+ * Masthead
25
+ * Posts and pages
26
+ * Pagination
27
+ * Reverse layout
28
+ * Themes
29
+ */
30
+
31
+
32
+/*
33
+ * Body resets
34
+ *
35
+ * Update the foundational and global aspects of the page.
36
+ */
37
+
38
+* {
39
+  -webkit-box-sizing: border-box;
40
+     -moz-box-sizing: border-box;
41
+          box-sizing: border-box;
42
+}
43
+
44
+html,
45
+body {
46
+  margin: 0;
47
+  padding: 0;
48
+}
49
+
50
+html {
51
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
52
+  font-size: 16px;
53
+  line-height: 1.5;
54
+}
55
+@media (min-width: 38rem) {
56
+  html {
57
+    font-size: 20px;
58
+  }
59
+}
60
+
61
+body {
62
+  color: #515151;
63
+  background-color: #fff;
64
+  -webkit-text-size-adjust: 100%;
65
+      -ms-text-size-adjust: 100%;
66
+}
67
+
68
+/* No `:visited` state is required by default (browsers will use `a`) */
69
+a {
70
+  color: #268bd2;
71
+  text-decoration: none;
72
+}
73
+/* `:focus` is linked to `:hover` for basic accessibility */
74
+a:hover,
75
+a:focus {
76
+  text-decoration: underline;
77
+}
78
+
79
+/* Headings */
80
+h1, h2, h3, h4, h5, h6 {
81
+  margin-bottom: .5rem;
82
+  font-weight: bold;
83
+  line-height: 1.25;
84
+  color: #313131;
85
+  text-rendering: optimizeLegibility;
86
+}
87
+h1 {
88
+  font-size: 2rem;
89
+}
90
+h2 {
91
+  margin-top: 1rem;
92
+  font-size: 1.5rem;
93
+}
94
+h3 {
95
+  margin-top: 1.5rem;
96
+  font-size: 1.25rem;
97
+}
98
+h4, h5, h6 {
99
+  margin-top: 1rem;
100
+  font-size: 1rem;
101
+}
102
+
103
+/* Body text */
104
+p {
105
+  margin-top: 0;
106
+  margin-bottom: 1rem;
107
+}
108
+
109
+strong {
110
+  color: #303030;
111
+}
112
+
113
+
114
+/* Lists */
115
+ul, ol, dl {
116
+  margin-top: 0;
117
+  margin-bottom: 1rem;
118
+}
119
+
120
+dt {
121
+  font-weight: bold;
122
+}
123
+dd {
124
+  margin-bottom: .5rem;
125
+}
126
+
127
+/* Misc */
128
+hr {
129
+  position: relative;
130
+  margin: 1.5rem 0;
131
+  border: 0;
132
+  border-top: 1px solid #eee;
133
+  border-bottom: 1px solid #fff;
134
+}
135
+
136
+abbr {
137
+  font-size: 85%;
138
+  font-weight: bold;
139
+  color: #555;
140
+  text-transform: uppercase;
141
+}
142
+abbr[title] {
143
+  cursor: help;
144
+  border-bottom: 1px dotted #e5e5e5;
145
+}
146
+
147
+/* Code */
148
+code,
149
+pre {
150
+  font-family: Menlo, Monaco, "Courier New", monospace;
151
+}
152
+code {
153
+  padding: .25em .5em;
154
+  font-size: 85%;
155
+  color: #bf616a;
156
+  background-color: #f9f9f9;
157
+  border-radius: 3px;
158
+}
159
+pre {
160
+  display: block;
161
+  margin-top: 0;
162
+  margin-bottom: 1rem;
163
+  padding: 1rem;
164
+  font-size: .8rem;
165
+  line-height: 1.4;
166
+  white-space: pre;
167
+  white-space: pre-wrap;
168
+  word-break: break-all;
169
+  word-wrap: break-word;
170
+  background-color: #f9f9f9;
171
+}
172
+pre code {
173
+  padding: 0;
174
+  font-size: 100%;
175
+  color: inherit;
176
+  background-color: transparent;
177
+}
178
+.highlight {
179
+  margin-bottom: 1rem;
180
+  border-radius: 4px;
181
+}
182
+.highlight pre {
183
+  margin-bottom: 0;
184
+}
185
+
186
+/* Quotes */
187
+blockquote {
188
+  padding: .5rem 1rem;
189
+  margin: .8rem 0;
190
+  color: #7a7a7a;
191
+  border-left: .25rem solid #e5e5e5;
192
+}
193
+blockquote p:last-child {
194
+  margin-bottom: 0;
195
+}
196
+@media (min-width: 30rem) {
197
+  blockquote {
198
+    padding-right: 5rem;
199
+    padding-left: 1.25rem;
200
+  }
201
+}
202
+
203
+img {
204
+  display: block;
205
+  margin: 0 0 1rem;
206
+  border-radius: 5px;
207
+  max-width: 100%;
208
+}
209
+
210
+/* Tables */
211
+table {
212
+  margin-bottom: 1rem;
213
+  width: 100%;
214
+  border: 1px solid #e5e5e5;
215
+  border-collapse: collapse;
216
+}
217
+td,
218
+th {
219
+  padding: .25rem .5rem;
220
+  border: 1px solid #e5e5e5;
221
+}
222
+tbody tr:nth-child(odd) td,
223
+tbody tr:nth-child(odd) th {
224
+  background-color: #f9f9f9;
225
+}
226
+
227
+
228
+/*
229
+ * Custom type
230
+ *
231
+ * Extend paragraphs with `.lead` for larger introductory text.
232
+ */
233
+
234
+.lead {
235
+  font-size: 1.25rem;
236
+  font-weight: 300;
237
+}
238
+
239
+
240
+/*
241
+ * Messages
242
+ *
243
+ * Show alert messages to users. You may add it to single elements like a `<p>`,
244
+ * or to a parent if there are multiple elements to show.
245
+ */
246
+
247
+.message {
248
+  margin-bottom: 1rem;
249
+  padding: 1rem;
250
+  color: #717171;
251
+  background-color: #f9f9f9;
252
+}
253
+
254
+
255
+/*
256
+ * Container
257
+ *
258
+ * Center the page content.
259
+ */
260
+
261
+.container {
262
+  max-width: 38rem;
263
+  padding-left:  1rem;
264
+  padding-right: 1rem;
265
+  margin-left:  auto;
266
+  margin-right: auto;
267
+}
268
+
269
+
270
+/*
271
+ * Masthead
272
+ *
273
+ * Super small header above the content for site name and short description.
274
+ */
275
+
276
+.masthead {
277
+  padding-top:    1rem;
278
+  padding-bottom: 1rem;
279
+  margin-bottom: 3rem;
280
+}
281
+.masthead-title {
282
+  margin-top: 0;
283
+  margin-bottom: 0;
284
+  color: #505050;
285
+}
286
+.masthead-title a {
287
+  color: #505050;
288
+}
289
+.masthead-title small {
290
+  font-size: 75%;
291
+  font-weight: 400;
292
+  color: #c0c0c0;
293
+  letter-spacing: 0;
294
+}
295
+
296
+
297
+/*
298
+ * Posts and pages
299
+ *
300
+ * Each post is wrapped in `.post` and is used on default and post layouts. Each
301
+ * page is wrapped in `.page` and is only used on the page layout.
302
+ */
303
+
304
+.page,
305
+.post {
306
+  margin-bottom: 4em;
307
+}
308
+
309
+/* Blog post or page title */
310
+.page-title,
311
+.post-title,
312
+.post-title a {
313
+  color: #303030;
314
+}
315
+.page-title,
316
+.post-title {
317
+  margin-top: 0;
318
+}
319
+
320
+/* Meta data line below post title */
321
+.post-date {
322
+  display: block;
323
+  margin-top: -.5rem;
324
+  margin-bottom: 1rem;
325
+  color: #9a9a9a;
326
+}
327
+
328
+/* Related posts */
329
+.related {
330
+  padding-top: 2rem;
331
+  padding-bottom: 2rem;
332
+  border-top: 1px solid #eee;
333
+}
334
+.related-posts {
335
+  padding-left: 0;
336
+  list-style: none;
337
+}
338
+.related-posts h3 {
339
+  margin-top: 0;
340
+}
341
+.related-posts li small {
342
+  font-size: 75%;
343
+  color: #999;
344
+}
345
+.related-posts li a:hover {
346
+  color: #268bd2;
347
+  text-decoration: none;
348
+}
349
+.related-posts li a:hover small {
350
+  color: inherit;
351
+}
352
+
353
+
354
+/*
355
+ * Pagination
356
+ *
357
+ * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
358
+ * there are no more previous or next posts to show.
359
+ */
360
+
361
+.pagination {
362
+  overflow: hidden; /* clearfix */
363
+  margin-left: -1rem;
364
+  margin-right: -1rem;
365
+  font-family: "PT Sans", Helvetica, Arial, sans-serif;
366
+  color: #ccc;
367
+  text-align: center;
368
+}
369
+
370
+/* Pagination items can be `span`s or `a`s */
371
+.pagination-item {
372
+  display: block;
373
+  padding: 1rem;
374
+  border: 1px solid #eee;
375
+}
376
+.pagination-item:first-child {
377
+  margin-bottom: -1px;
378
+}
379
+
380
+/* Only provide a hover state for linked pagination items */
381
+a.pagination-item:hover {
382
+  background-color: #f5f5f5;
383
+}
384
+
385
+@media (min-width: 30rem) {
386
+  .pagination {
387
+    margin: 3rem 0;
388
+  }
389
+  .pagination-item {
390
+    float: left;
391
+    width: 50%;
392
+  }
393
+  .pagination-item:first-child {
394
+    margin-bottom: 0;
395
+    border-top-left-radius:    4px;
396
+    border-bottom-left-radius: 4px;
397
+  }
398
+  .pagination-item:last-child {
399
+    margin-left: -1px;
400
+    border-top-right-radius:    4px;
401
+    border-bottom-right-radius: 4px;
402
+  }
403
+}

+ 0
- 0
static/css/syntax.css 查看文件


+ 0
- 0
static/favicon.png 查看文件


+ 0
- 0
static/touch-icon-144-precomposed.png 查看文件