diff --git a/assets/css/poole.css b/assets/css/poole.css new file mode 100644 index 0000000..75aa174 --- /dev/null +++ b/assets/css/poole.css @@ -0,0 +1,391 @@ +/** + * Body resets + * + * Update the foundational and global aspects of the page. + */ +* { + -moz-box-sizing: border-box; + -webkit-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 { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + background-color: #fff; + color: #515151; +} + +a { + color: #268bd2; + text-decoration: none; +} + +a strong { + color: inherit; +} + +a:hover, a:focus { + text-decoration: underline; +} + +h1, h2, h3, h4, h5, h6 { + color: #313131; + font-weight: bold; + line-height: 1.25; + margin-bottom: .5rem; + text-rendering: optimizeLegibility; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; + margin-top: 1rem; +} + +h3 { + font-size: 1.25rem; + margin-top: 1.5rem; +} + +h4, h5, h6 { + font-size: 1rem; + margin-top: 1rem; +} + +p { + margin-bottom: 1rem; + margin-top: 0; +} + +strong { + color: #303030; +} + +ul, ol, dl { + margin-bottom: 1rem; + margin-top: 0; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: .5rem; +} + +hr { + border-bottom: 1px solid #fff; + border-top: 1px solid #eee; + border: 0; + margin: 1.5rem 0; + position: relative; +} + +abbr { + color: #555; + font-size: 85%; + font-weight: bold; + text-transform: uppercase; +} + +abbr[title] { + border-bottom: 1px dotted #e5e5e5; + cursor: help; +} + +code, pre { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +code { + background-color: #f9f9f9; + border-radius: 3px; + color: #bf616a; + font-size: 85%; + padding: .25em .5em; +} + +pre { + background-color: #f9f9f9; + display: block; + font-size: .8rem; + line-height: 1.4; + margin-bottom: 1rem; + margin-top: 0; + padding: 1rem; + white-space: pre-wrap; + white-space: pre; + word-break: break-all; + word-wrap: break-word; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; +} + +.highlight { + border-radius: 4px; + margin-bottom: 1rem; +} + +.highlight pre { + margin-bottom: 0; +} + +.gist .gist-file { + font-family: Menlo, Monaco, "Courier New", monospace !important; +} + +.gist .markdown-body { + padding: 15px; +} + +.gist pre { + background-color: transparent; + padding: 0; +} + +.gist .gist-file .gist-data { + font-size: .8rem !important; + line-height: 1.4; +} + +.gist code { + background-color: transparent; + border-radius: 0; + color: inherit; + padding: 0; +} + +blockquote { + border-left: .25rem solid #e5e5e5; + color: #7a7a7a; + margin: .8rem 0; + padding: .5rem 1rem; +} + +blockquote p:last-child { + margin-bottom: 0; +} + +@media (min-width: 30em) { + blockquote { + padding-left: 1.25rem; + padding-right: 5rem; + } +} + +img { + border-radius: 5px; + display: block; + margin: 0 0 1rem; + max-width: 100%; +} + +table { + border-collapse: collapse; + border: 1px solid #e5e5e5; + margin-bottom: 1rem; + width: 100%; +} + +td, th { + border: 1px solid #e5e5e5; + padding: .25rem .5rem; +} + +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 `

`, + * or to a parent if there are multiple elements to show. + */ +.message { + background-color: #f9f9f9; + color: #717171; + margin-bottom: 1rem; + padding: 1rem; +} + +/** + * Container + * + * Center the page content. + */ +.container { + margin-left: auto; + margin-right: auto; + max-width: 38rem; + padding-left: 1rem; + padding-right: 1rem; +} + +/** + * Masthead + * + * Super small header above the content for site name and short description. + */ +.masthead { + margin-bottom: 3rem; + padding-bottom: 1rem; + padding-top: 1rem; +} + +.masthead-title { + color: #505050; + margin-bottom: 0; + margin-top: 0; +} + +.masthead-title a { + color: #505050; +} + +.masthead-title small { + color: #c0c0c0; + font-size: 75%; + font-weight: 400; + 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; +} + +.page-title, .post-title, .post-title a { + color: #303030; +} + +.page-title, .post-title { + margin-top: 0; +} + +.post-date { + color: #9a9a9a; + display: block; + margin-bottom: 1rem; + margin-top: -.5rem; +} + +.related { + border-top: 1px solid #eee; + padding-bottom: 2rem; + padding-top: 2rem; +} + +.related-posts { + list-style: none; + padding-left: 0; +} + +.related-posts h3 { + margin-top: 0; +} + +.related-posts li small { + color: #999; + font-size: 75%; +} + +.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 { + color: #ccc; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + margin-left: -1rem; + margin-right: -1rem; + overflow: hidden; + text-align: center; +} + +.pagination-item { + border: 1px solid #eee; + display: block; + padding: 1rem; +} + +.pagination-item:first-child { + margin-bottom: -1px; +} + +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 { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + margin-bottom: 0; + } + .pagination-item:last-child { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + margin-left: -1px; + } +}