| /* |
| * ___ |
| * /\_ \ |
| * _____ ___ ___\//\ \ __ |
| * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ |
| * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ |
| * \ \ ,__/\ \____/\ \____//\____\ \____\ |
| * \ \ \/ \/___/ \/___/ \/____/\/____/ |
| * \ \_\ |
| * \/_/ |
| * |
| * Designed, built, and released under MIT license by @mdo. Learn more at |
| * https://github.com/poole/poole. |
| */ |
| |
| |
| /* |
| * Contents |
| * |
| * Body resets |
| * Custom type |
| * Messages |
| * Container |
| * Masthead |
| * Posts and pages |
| * Pagination |
| * Reverse layout |
| * Themes |
| */ |
| |
| |
| /* |
| * Body resets |
| * |
| * Update the foundational and global aspects of the page. |
| */ |
| |
| * { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| html, |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| html { |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| font-size: 16px; |
| line-height: 1.5; |
| } |
| @media (min-width: 38em) { |
| html { |
| font-size: 20px; |
| } |
| } |
| |
| body { |
| color: #515151; |
| background-color: #fff; |
| -webkit-text-size-adjust: 100%; |
| -ms-text-size-adjust: 100%; |
| } |
| |
| /* No `:visited` state is required by default (browsers will use `a`) */ |
| a { |
| color: #268bd2; |
| text-decoration: none; |
| } |
| a strong { |
| color: inherit; |
| } |
| /* `:focus` is linked to `:hover` for basic accessibility */ |
| a:hover, |
| a:focus { |
| text-decoration: underline; |
| } |
| |
| /* Headings */ |
| h1, h2, h3, h4, h5, h6 { |
| margin-bottom: .5rem; |
| font-weight: bold; |
| line-height: 1.25; |
| color: #313131; |
| text-rendering: optimizeLegibility; |
| } |
| h1 { |
| font-size: 2rem; |
| } |
| h2 { |
| margin-top: 1rem; |
| font-size: 1.5rem; |
| } |
| h3 { |
| margin-top: 1.5rem; |
| font-size: 1.25rem; |
| } |
| h4, h5, h6 { |
| margin-top: 1rem; |
| font-size: 1rem; |
| } |
| |
| /* Body text */ |
| p { |
| margin-top: 0; |
| margin-bottom: 1rem; |
| } |
| |
| strong { |
| color: #303030; |
| } |
| |
| |
| /* Lists */ |
| ul, ol, dl { |
| margin-top: 0; |
| margin-bottom: 1rem; |
| } |
| |
| dt { |
| font-weight: bold; |
| } |
| dd { |
| margin-bottom: .5rem; |
| } |
| |
| /* Misc */ |
| hr { |
| position: relative; |
| margin: 1.5rem 0; |
| border: 0; |
| border-top: 1px solid #eee; |
| border-bottom: 1px solid #fff; |
| } |
| |
| abbr { |
| font-size: 85%; |
| font-weight: bold; |
| color: #555; |
| text-transform: uppercase; |
| } |
| abbr[title] { |
| cursor: help; |
| border-bottom: 1px dotted #e5e5e5; |
| } |
| |
| /* Code */ |
| code, |
| pre { |
| font-family: Menlo, Monaco, "Courier New", monospace; |
| } |
| code { |
| padding: .25em .5em; |
| font-size: 85%; |
| color: #bf616a; |
| background-color: #f9f9f9; |
| border-radius: 3px; |
| } |
| pre { |
| display: block; |
| margin-top: 0; |
| margin-bottom: 1rem; |
| padding: 1rem; |
| font-size: .8rem; |
| line-height: 1.4; |
| white-space: pre; |
| white-space: pre-wrap; |
| word-break: break-all; |
| word-wrap: break-word; |
| background-color: #f9f9f9; |
| } |
| pre code { |
| padding: 0; |
| font-size: 100%; |
| color: inherit; |
| background-color: transparent; |
| } |
| |
| /* Pygments via Jekyll */ |
| .highlight { |
| margin-bottom: 1rem; |
| border-radius: 4px; |
| } |
| .highlight pre { |
| margin-bottom: 0; |
| } |
| |
| /* Gist via GitHub Pages */ |
| .gist .gist-file { |
| font-family: Menlo, Monaco, "Courier New", monospace !important; |
| } |
| .gist .markdown-body { |
| padding: 15px; |
| } |
| .gist pre { |
| padding: 0; |
| background-color: transparent; |
| } |
| .gist .gist-file .gist-data { |
| font-size: .8rem !important; |
| line-height: 1.4; |
| } |
| .gist code { |
| padding: 0; |
| color: inherit; |
| background-color: transparent; |
| border-radius: 0; |
| } |
| |
| /* Quotes */ |
| blockquote { |
| padding: .5rem 1rem; |
| margin: .8rem 0; |
| color: #7a7a7a; |
| border-left: .25rem solid #e5e5e5; |
| } |
| blockquote p:last-child { |
| margin-bottom: 0; |
| } |
| @media (min-width: 30em) { |
| blockquote { |
| padding-right: 5rem; |
| padding-left: 1.25rem; |
| } |
| } |
| |
| img { |
| display: block; |
| max-width: 100%; |
| margin: 0 0 1rem; |
| border-radius: 5px; |
| } |
| |
| /* Tables */ |
| table { |
| margin-bottom: 1rem; |
| width: 100%; |
| border: 1px solid #e5e5e5; |
| border-collapse: collapse; |
| } |
| td, |
| th { |
| padding: .25rem .5rem; |
| border: 1px solid #e5e5e5; |
| } |
| tbody tr:nth-child(odd) td, |
| tbody tr:nth-child(odd) th { |
| background-color: #f9f9f9; |
| } |
| |
| |
| /* |
| * Custom type |
| * |
| * Extend paragraphs with `.lead` for larger introductory text. |
| */ |
| |
| .lead { |
| font-size: 1.25rem; |
| font-weight: 300; |
| } |
| |
| |
| /* |
| * Messages |
| * |
| * Show alert messages to users. You may add it to single elements like a `<p>`, |
| * or to a parent if there are multiple elements to show. |
| */ |
| |
| .message { |
| margin-bottom: 1rem; |
| padding: 1rem; |
| color: #717171; |
| background-color: #f9f9f9; |
| } |
| |
| |
| /* |
| * Container |
| * |
| * Center the page content. |
| */ |
| |
| .container { |
| max-width: 38rem; |
| padding-left: 1rem; |
| padding-right: 1rem; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| /* |
| * Masthead |
| * |
| * Super small header above the content for site name and short description. |
| */ |
| |
| .masthead { |
| padding-top: 1rem; |
| padding-bottom: 1rem; |
| margin-bottom: 3rem; |
| } |
| .masthead-title { |
| margin-top: 0; |
| margin-bottom: 0; |
| color: #505050; |
| } |
| .masthead-title a { |
| color: #505050; |
| } |
| .masthead-title small { |
| font-size: 75%; |
| font-weight: 400; |
| color: #c0c0c0; |
| letter-spacing: 0; |
| } |
| |
| |
| /* |
| * Posts and pages |
| * |
| * Each post is wrapped in `.post` and is used on default and post layouts. Each |
| * page is wrapped in `.page` and is only used on the page layout. |
| */ |
| |
| .page, |
| .post { |
| margin-bottom: 4em; |
| } |
| |
| /* Blog post or page title */ |
| .page-title, |
| .post-title, |
| .post-title a { |
| color: #303030; |
| } |
| .page-title, |
| .post-title { |
| margin-top: 0; |
| } |
| |
| /* Meta data line below post title */ |
| .post-date { |
| display: block; |
| margin-top: -.5rem; |
| margin-bottom: 1rem; |
| color: #9a9a9a; |
| } |
| |
| /* Related posts */ |
| .related { |
| padding-top: 2rem; |
| padding-bottom: 2rem; |
| border-top: 1px solid #eee; |
| } |
| .related-posts { |
| padding-left: 0; |
| list-style: none; |
| } |
| .related-posts h3 { |
| margin-top: 0; |
| } |
| .related-posts li small { |
| font-size: 75%; |
| color: #999; |
| } |
| .related-posts li a:hover { |
| color: #268bd2; |
| text-decoration: none; |
| } |
| .related-posts li a:hover small { |
| color: inherit; |
| } |
| |
| |
| /* |
| * Pagination |
| * |
| * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when |
| * there are no more previous or next posts to show. |
| */ |
| |
| .pagination { |
| overflow: hidden; /* clearfix */ |
| margin-left: -1rem; |
| margin-right: -1rem; |
| font-family: "PT Sans", Helvetica, Arial, sans-serif; |
| color: #ccc; |
| text-align: center; |
| } |
| |
| /* Pagination items can be `span`s or `a`s */ |
| .pagination-item { |
| display: block; |
| padding: 1rem; |
| border: 1px solid #eee; |
| } |
| .pagination-item:first-child { |
| margin-bottom: -1px; |
| } |
| |
| /* Only provide a hover state for linked pagination items */ |
| a.pagination-item:hover { |
| background-color: #f5f5f5; |
| } |
| |
| @media (min-width: 30em) { |
| .pagination { |
| margin: 3rem 0; |
| } |
| .pagination-item { |
| float: left; |
| width: 50%; |
| } |
| .pagination-item:first-child { |
| margin-bottom: 0; |
| border-top-left-radius: 4px; |
| border-bottom-left-radius: 4px; |
| } |
| .pagination-item:last-child { |
| margin-left: -1px; |
| border-top-right-radius: 4px; |
| border-bottom-right-radius: 4px; |
| } |
| } |