├── .gitattributes
├── README.md
├── page.hbs
├── post.hbs
├── package.json
├── partials
    ├── navigation.hbs
    ├── sidebar.hbs
    ├── pagination.hbs
    └── head.hbs
├── index.hbs
├── default.hbs
├── LICENSE
└── assets
    └── css
        ├── syntax.css
        ├── hyde.css
        └── poole.css


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Heidi
2 | =====
3 | 
4 | Heidi is a port of Mark Otto's Hyde theme (of Jekyll fame) to Ghost.
5 | 


--------------------------------------------------------------------------------
/page.hbs:
--------------------------------------------------------------------------------
1 | {{!< default}}
2 | 
3 | {{#post}}
4 | <div class="page">
5 |   <h1 class="page-title">{{{title}}}</h1>
6 |   {{content}}
7 | </div>
8 | {{/post}}
9 | 


--------------------------------------------------------------------------------
/post.hbs:
--------------------------------------------------------------------------------
 1 | {{!< default}}
 2 | 
 3 | {{#post}}
 4 | <div class="post">
 5 |   <h1 class="post-title">{{{title}}}</h1>
 6 |   <span class="post-date">{{date format="YYYY-MM-DD"}}</span>
 7 |   {{content}}
 8 | </div>
 9 | {{/post}}
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "heidi",
 3 |     "version": "0.1.1",
 4 |     "author": {
 5 |         "name": "Thai Phan",
 6 |         "email": "thai@outlook.com"
 7 |     },
 8 |     "config": {
 9 |         "posts_per_page": 5
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/partials/navigation.hbs:
--------------------------------------------------------------------------------
1 | <ul class="sidebar-nav">
2 |   {{#foreach navigation}}
3 |     <li class="sidebar-nav-item nav-{{slug}}{{#if current}} active{{/if}}">
4 |       <a href="{{url absolute="true"}}">{{label}}</a>
5 |     </li>
6 |   {{/foreach}}
7 | </ul>
8 | 


--------------------------------------------------------------------------------
/partials/sidebar.hbs:
--------------------------------------------------------------------------------
 1 | <div class="sidebar">
 2 |   <div class="container sidebar-sticky">
 3 |     <div class="sidebar-about">
 4 |       <h1>{{@blog.title}}</h1>
 5 |       <p class="lead">{{@blog.description}}</p>
 6 |     </div>
 7 | 
 8 |     {{navigation}}
 9 | 
10 |     <p>&copy; {{date format='YYYY'}}. All rights reserved.</p>
11 |   </div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/index.hbs:
--------------------------------------------------------------------------------
 1 | {{!< default}}
 2 | 
 3 | <div class="posts">
 4 |   {{#foreach posts}}
 5 |   <div class="post">
 6 |     <h1 class="post-title">
 7 |       <a href="{{url}}">
 8 |         {{{title}}}
 9 |       </a>
10 |     </h1>
11 | 
12 |     <span class="post-date">{{date format='YYYY-MM-DD'}}</span>
13 | 
14 |     {{content}}
15 |   </div>
16 |   {{/foreach}}
17 | 
18 |   {{pagination}}
19 | </div>
20 | 


--------------------------------------------------------------------------------
/partials/pagination.hbs:
--------------------------------------------------------------------------------
 1 | <div class="pagination">
 2 |   {{#if next}}
 3 |     <a class="pagination-item older" href="{{page_url next}}">Older</a>
 4 |   {{else}}
 5 |     <span class="pagination-item older">Older</span>
 6 |   {{/if}}
 7 |   {{#if prev}}
 8 |     <a class="pagination-item newer" href="{{page_url prev}}">Newer</a>
 9 |   {{else}}
10 |     <span class="pagination-item newer">Newer</span>
11 |   {{/if}}
12 | </div>
13 | 


--------------------------------------------------------------------------------
/default.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
 3 | 
 4 |   {{> head}}
 5 | 
 6 |   <body>
 7 | 
 8 |     {{> sidebar}}
 9 | 
10 |     <div class="content container">
11 |       {{{body}}}
12 |     </div>
13 | 
14 |     {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
15 |     {{ghost_foot}}
16 | 
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/partials/head.hbs:
--------------------------------------------------------------------------------
 1 | <head>
 2 |   <link href="http://gmpg.org/xfn/11" rel="profile">
 3 |   <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4 | 
 5 |   <!-- Enable responsiveness on mobile devices-->
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
 7 | 
 8 |   <title>
 9 |     {{meta_title}}
10 |   </title>
11 | 
12 |   <!-- CSS -->
13 |   <link rel="stylesheet" href="{{asset "css/poole.css"}}">
14 |   <link rel="stylesheet" href="{{asset "css/syntax.css"}}">
15 |   <link rel="stylesheet" href="{{asset "css/hyde.css"}}">
16 |   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
17 | 
18 |   <!-- Icons -->
19 |   <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
20 | 
21 |   {{ghost_head}}
22 | </head>
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Thai Phan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/assets/css/syntax.css:
--------------------------------------------------------------------------------
 1 | .hll { background-color: #ffffcc }
 2 |  /*{ background: #f0f3f3; }*/
 3 | .c { color: #999; } /* Comment */
 4 | .err { color: #AA0000; background-color: #FFAAAA } /* Error */
 5 | .k { color: #006699; } /* Keyword */
 6 | .o { color: #555555 } /* Operator */
 7 | .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
 8 | .cp { color: #009999 } /* Comment.Preproc */
 9 | .c1 { color: #999; } /* Comment.Single */
10 | .cs { color: #999; } /* Comment.Special */
11 | .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
12 | .ge { font-style: italic } /* Generic.Emph */
13 | .gr { color: #FF0000 } /* Generic.Error */
14 | .gh { color: #003300; } /* Generic.Heading */
15 | .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
16 | .go { color: #AAAAAA } /* Generic.Output */
17 | .gp { color: #000099; } /* Generic.Prompt */
18 | .gs { } /* Generic.Strong */
19 | .gu { color: #003300; } /* Generic.Subheading */
20 | .gt { color: #99CC66 } /* Generic.Traceback */
21 | .kc { color: #006699; } /* Keyword.Constant */
22 | .kd { color: #006699; } /* Keyword.Declaration */
23 | .kn { color: #006699; } /* Keyword.Namespace */
24 | .kp { color: #006699 } /* Keyword.Pseudo */
25 | .kr { color: #006699; } /* Keyword.Reserved */
26 | .kt { color: #007788; } /* Keyword.Type */
27 | .m { color: #FF6600 } /* Literal.Number */
28 | .s { color: #d44950 } /* Literal.String */
29 | .na { color: #4f9fcf } /* Name.Attribute */
30 | .nb { color: #336666 } /* Name.Builtin */
31 | .nc { color: #00AA88; } /* Name.Class */
32 | .no { color: #336600 } /* Name.Constant */
33 | .nd { color: #9999FF } /* Name.Decorator */
34 | .ni { color: #999999; } /* Name.Entity */
35 | .ne { color: #CC0000; } /* Name.Exception */
36 | .nf { color: #CC00FF } /* Name.Function */
37 | .nl { color: #9999FF } /* Name.Label */
38 | .nn { color: #00CCFF; } /* Name.Namespace */
39 | .nt { color: #2f6f9f; } /* Name.Tag */
40 | .nv { color: #003333 } /* Name.Variable */
41 | .ow { color: #000000; } /* Operator.Word */
42 | .w { color: #bbbbbb } /* Text.Whitespace */
43 | .mf { color: #FF6600 } /* Literal.Number.Float */
44 | .mh { color: #FF6600 } /* Literal.Number.Hex */
45 | .mi { color: #FF6600 } /* Literal.Number.Integer */
46 | .mo { color: #FF6600 } /* Literal.Number.Oct */
47 | .sb { color: #CC3300 } /* Literal.String.Backtick */
48 | .sc { color: #CC3300 } /* Literal.String.Char */
49 | .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
50 | .s2 { color: #CC3300 } /* Literal.String.Double */
51 | .se { color: #CC3300; } /* Literal.String.Escape */
52 | .sh { color: #CC3300 } /* Literal.String.Heredoc */
53 | .si { color: #AA0000 } /* Literal.String.Interpol */
54 | .sx { color: #CC3300 } /* Literal.String.Other */
55 | .sr { color: #33AAAA } /* Literal.String.Regex */
56 | .s1 { color: #CC3300 } /* Literal.String.Single */
57 | .ss { color: #FFCC33 } /* Literal.String.Symbol */
58 | .bp { color: #336666 } /* Name.Builtin.Pseudo */
59 | .vc { color: #003333 } /* Name.Variable.Class */
60 | .vg { color: #003333 } /* Name.Variable.Global */
61 | .vi { color: #003333 } /* Name.Variable.Instance */
62 | .il { color: #FF6600 } /* Literal.Number.Integer.Long */
63 | 
64 | .css .o,
65 | .css .o + .nt,
66 | .css .nt + .nt { color: #999; }
67 | 


--------------------------------------------------------------------------------
/assets/css/hyde.css:
--------------------------------------------------------------------------------
  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/hyde.
 14 |  */
 15 | 
 16 | 
 17 | /*
 18 |  * Contents
 19 |  *
 20 |  * Global resets
 21 |  * Sidebar
 22 |  * Container
 23 |  * Reverse layout
 24 |  * Themes
 25 |  */
 26 | 
 27 | 
 28 | /*
 29 |  * Global resets
 30 |  *
 31 |  * Update the foundational and global aspects of the page.
 32 |  */
 33 | 
 34 | html {
 35 |   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 36 | }
 37 | @media (min-width: 48rem) {
 38 |   html {
 39 |     font-size: 16px;
 40 |   }
 41 | }
 42 | @media (min-width: 58rem) {
 43 |   html {
 44 |     font-size: 20px;
 45 |   }
 46 | }
 47 | 
 48 | 
 49 | /*
 50 |  * Sidebar
 51 |  *
 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.
 54 |  */
 55 | 
 56 | .sidebar {
 57 |   text-align: center;
 58 |   padding: 2rem 1rem;
 59 |   color: rgba(255,255,255,.5);
 60 |   background-color: #202020;
 61 | }
 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 |   }
 71 | }
 72 | 
 73 | /* Sidebar links */
 74 | .sidebar a {
 75 |   color: #fff;
 76 | }
 77 | 
 78 | /* About section */
 79 | .sidebar-about h1 {
 80 |   color: #fff;
 81 |   margin-top: 0;
 82 |   font-family: "Abril Fatface", serif;
 83 |   font-size: 3.25rem;
 84 | }
 85 | 
 86 | /* Sidebar nav */
 87 | .sidebar-nav {
 88 |   padding-left: 0;
 89 |   list-style: none;
 90 | }
 91 | .sidebar-nav-item {
 92 |   display: block;
 93 | }
 94 | a.sidebar-nav-item:hover,
 95 | a.sidebar-nav-item:focus {
 96 |   text-decoration: underline;
 97 | }
 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 {
110 |     position: absolute;
111 |     right:  1rem;
112 |     bottom: 1rem;
113 |     left:   1rem;
114 |   }
115 | }
116 | 
117 | 
118 | /* Container
119 |  *
120 |  * Align the contents of the site above the proper threshold with some margin-fu
121 |  * with a 25%-wide `.sidebar`.
122 |  */
123 | 
124 | .content {
125 |   padding-top:    4rem;
126 |   padding-bottom: 4rem;
127 | }
128 | 
129 | @media (min-width: 48rem) {
130 |   .content {
131 |     max-width: 38rem;
132 |     margin-left: 20rem;
133 |     margin-right: 2rem;
134 |   }
135 | }
136 | 
137 | @media (min-width: 64rem) {
138 |   .content {
139 |     margin-left: 22rem;
140 |     margin-right: 4rem;
141 |   }
142 | }
143 | 
144 | 
145 | /*
146 |  * Reverse layout
147 |  *
148 |  * Flip the orientation of the page by placing the `.sidebar` on the right.
149 |  */
150 | 
151 | @media (min-width: 48rem) {
152 |   .layout-reverse .sidebar {
153 |     left: auto;
154 |     right: 0;
155 |   }
156 |   .layout-reverse .content {
157 |     margin-left: 2rem;
158 |     margin-right: 20rem;
159 |   }
160 | }
161 | 
162 | @media (min-width: 64rem) {
163 |   .layout-reverse .content {
164 |     margin-left: 4rem;
165 |     margin-right: 22rem;
166 |   }
167 | }
168 | 
169 | 
170 | 
171 | /*
172 |  * Themes
173 |  *
174 |  * As of v1.1, Hyde includes optional themes to color the sidebar and links
175 |  * within blog posts. To use, add the class of your choosing to the `body`.
176 |  */
177 | 
178 | /* Base16 (http://chriskempson.github.io/base16/#default) */
179 | 
180 | /* Red */
181 | .theme-base-08 .sidebar {
182 |   background-color: #ac4142;
183 | }
184 | .theme-base-08 .content a,
185 | .theme-base-08 .related-posts li a:hover {
186 |   color: #ac4142;
187 | }
188 | 
189 | /* Orange */
190 | .theme-base-09 .sidebar {
191 |   background-color: #d28445;
192 | }
193 | .theme-base-09 .content a,
194 | .theme-base-09 .related-posts li a:hover {
195 |   color: #d28445;
196 | }
197 | 
198 | /* Yellow */
199 | .theme-base-0a .sidebar {
200 |   background-color: #f4bf75;
201 | }
202 | .theme-base-0a .content a,
203 | .theme-base-0a .related-posts li a:hover {
204 |   color: #f4bf75;
205 | }
206 | 
207 | /* Green */
208 | .theme-base-0b .sidebar {
209 |   background-color: #90a959;
210 | }
211 | .theme-base-0b .content a,
212 | .theme-base-0b .related-posts li a:hover {
213 |   color: #90a959;
214 | }
215 | 
216 | /* Cyan */
217 | .theme-base-0c .sidebar {
218 |   background-color: #75b5aa;
219 | }
220 | .theme-base-0c .content a,
221 | .theme-base-0c .related-posts li a:hover {
222 |   color: #75b5aa;
223 | }
224 | 
225 | /* Blue */
226 | .theme-base-0d .sidebar {
227 |   background-color: #6a9fb5;
228 | }
229 | .theme-base-0d .content a,
230 | .theme-base-0d .related-posts li a:hover {
231 |   color: #6a9fb5;
232 | }
233 | 
234 | /* Magenta */
235 | .theme-base-0e .sidebar {
236 |   background-color: #aa759f;
237 | }
238 | .theme-base-0e .content a,
239 | .theme-base-0e .related-posts li a:hover {
240 |   color: #aa759f;
241 | }
242 | 
243 | /* Brown */
244 | .theme-base-0f .sidebar {
245 |   background-color: #8f5536;
246 | }
247 | .theme-base-0f .content a,
248 | .theme-base-0f .related-posts li a:hover {
249 |   color: #8f5536;
250 | }
251 | 


--------------------------------------------------------------------------------
/assets/css/poole.css:
--------------------------------------------------------------------------------
  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 | }
404 | 


--------------------------------------------------------------------------------