From eda0ec4db2e5857fef1a53d07c1431b436be63dc Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Mon, 15 May 2017 21:03:47 +0100 Subject: [PATCH] First pass 2.0 design --- README.md | 18 +- assets/css/components/global.css | 474 +++++ assets/css/screen.css | 2963 +++++++++--------------------- assets/fonts/casper-icons.eot | Bin 2660 -> 0 bytes assets/fonts/casper-icons.svg | 20 - assets/fonts/casper-icons.ttf | Bin 2504 -> 0 bytes assets/fonts/casper-icons.woff | Bin 2580 -> 0 bytes assets/js/index.js | 56 - assets/public/screen.css | 2 + assets/public/screen.css.map | 1 + default.hbs | 64 +- gulpfile.js | 95 + index.hbs | 61 +- package.json | 27 +- page.hbs | 37 +- partials/floating-header.hbs | 23 + partials/icons/facebook.hbs | 1 + partials/icons/ghost-logo.hbs | 1 + partials/icons/point.hbs | 3 + partials/icons/rss.hbs | 1 + partials/icons/twitter.hbs | 1 + partials/loop.hbs | 50 +- partials/navigation.hbs | 14 +- partials/share.hbs | 36 + post.hbs | 255 ++- tag.hbs | 45 +- 26 files changed, 1845 insertions(+), 2403 deletions(-) create mode 100644 assets/css/components/global.css delete mode 100755 assets/fonts/casper-icons.eot delete mode 100755 assets/fonts/casper-icons.svg delete mode 100755 assets/fonts/casper-icons.ttf delete mode 100755 assets/fonts/casper-icons.woff delete mode 100644 assets/js/index.js create mode 100644 assets/public/screen.css create mode 100644 assets/public/screen.css.map create mode 100644 gulpfile.js create mode 100644 partials/floating-header.hbs create mode 100755 partials/icons/facebook.hbs create mode 100644 partials/icons/ghost-logo.hbs create mode 100644 partials/icons/point.hbs create mode 100644 partials/icons/rss.hbs create mode 100644 partials/icons/twitter.hbs create mode 100644 partials/share.hbs diff --git a/README.md b/README.md index 7c09e02..529303b 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,23 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/). To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page. +## Development + +Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the root directory: + +`$ npm install` + +`$ gulp` + +Now you can edit `/assets/css/` files, which will be compiled to `/assets/public/` automatically. + +## PostCSS Features Used + +- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser. +- Variables - Simple pure CSS variables +- [Color Function](https://github.com/postcss/postcss-color-function) + + ## Copyright & License Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](LICENSE). - diff --git a/assets/css/components/global.css b/assets/css/components/global.css new file mode 100644 index 0000000..1267407 --- /dev/null +++ b/assets/css/components/global.css @@ -0,0 +1,474 @@ +/* Variables +/* ---------------------------------------------------------- */ + +:root { + /* Colours */ + --blue: #3eb0ef; + --green: #a4d037; + --purple: #ad26b4; + --yellow: #fecd35; + --red: #f05230; + --darkgrey: #343f44; + --midgrey: #738a94; + --lightgrey: #c5d2d9; + --whitegrey: #e5eff5; + --pink: #fa3a57; + --brown: #a3821a; +} + +/* Reset +/* ---------------------------------------------------------- */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + vertical-align: baseline; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-spacing: 0; + border-collapse: collapse; +} +img { + max-width: 100%; +} +html { + box-sizing: border-box; + font-family: sans-serif; + + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +*, +*:before, +*:after { + box-sizing: inherit; +} +a { + background-color: transparent; +} +a:active, +a:hover { + outline: 0; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +h1 { + margin: 0.67em 0; + font-size: 2em; +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +button, +input, +optgroup, +select, +textarea { + margin: 0; /* 3 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ +} +button { + overflow: visible; + border: none; +} +button, +select { + text-transform: none; +} +button, +html input[type="button"], +/* 1 */ +input[type="reset"], +input[type="submit"] { + cursor: pointer; /* 3 */ + + -webkit-appearance: button; /* 2 */ +} +button[disabled], +html input[disabled] { + cursor: default; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} +input { + line-height: normal; +} +input:focus { + outline: none; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +input[type="search"] { + box-sizing: content-box; /* 2 */ + + -webkit-appearance: textfield; /* 1 */ +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +legend { + padding: 0; /* 2 */ + border: 0; /* 1 */ +} +textarea { + overflow: auto; +} +table { + border-spacing: 0; + border-collapse: collapse; +} +td, +th { + padding: 0; +} + + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html { + overflow-x: hidden; + overflow-y: scroll; + font-size: 62.5%; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +body { + overflow-x: hidden; + color: color(var(--midgrey) l(-25%)); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 1.5rem; + line-height: 1.6em; + font-weight: 400; + font-style: normal; + letter-spacing: 0; + text-rendering: optimizeLegibility; + background: #fff; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; +} + +::selection { + text-shadow: none; + background: color(var(--blue) lightness(+30%)); +} + +hr { + display: block; + margin: 2em 0; + padding: 0; + height: 1px; + border: 0; + border-top: 1px solid var(--whitegrey); +} + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +fieldset { + margin: 0; + padding: 0; + border: 0; +} + +textarea { + resize: vertical; +} + +p, +ul, +ol, +dl, +blockquote { + margin: 0 0 1.5em 0; +} + +ol, +ul { + padding-left: 2.5em; +} + +ol ol, +ul ul, +ul ol, +ol ul { + margin: 0.5em 0 1em; + padding-left: 2em; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li { + margin: 0.5em 0; + line-height: 1.6em; +} + +dt { + float: left; + margin: 0 20px 0 0; + width: 120px; + color: var(--darkgrey); + font-weight: 500; + text-align: right; +} + +dd { + margin: 0 0 5px 0; + text-align: left; +} + +blockquote { + margin: 1.6em 0; + padding: 0 1.6em 0 1.6em; + border-left: var(--whitegrey) 0.5em solid;; +} + +blockquote p { + margin: 0.8em 0; + font-size: 1.2em; + font-weight: 300; +} + +blockquote small { + display: inline-block; + margin: 0.8em 0 0.8em 1.5em; + font-size: 0.9em; + opacity: 0.8; +} +/* Quotation marks */ +blockquote small:before { + content: "\2014 \00A0"; +} + +blockquote cite { + font-weight: bold; +} +blockquote cite a { + font-weight: normal; +} + +a { + color: color(var(--blue) l(-5%)); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + line-height: 1.15; + font-weight: 700; + text-rendering: optimizeLegibility; +} + +h1 { + margin: 0 0 0.5em 0; + font-size: 5rem; + font-weight: 700; +} +@media (max-width: 500px) { + h1 { + font-size: 2.2rem; + } +} + +h2 { + margin: 1.5em 0 0.5em 0; + font-size: 1.8rem; +} +@media (max-width: 500px) { + h2 { + font-size: 1.8rem; + } +} + +h3 { + margin: 1.5em 0 0.5em 0; + font-size: 1.8rem; + font-weight: 500; +} +@media (max-width: 500px) { + h3 { + font-size: 1.7rem; + } +} + +h4 { + margin: 1.5em 0 0.5em 0; + font-size: 1.6rem; + font-weight: 500; +} + +h5 { + margin: 1.5em 0 0.5em 0; + font-size: 1.4rem; + font-weight: 500; +} + +h6 { + margin: 1.5em 0 0.5em 0; + font-size: 1.4rem; + font-weight: 500; +} diff --git a/assets/css/screen.css b/assets/css/screen.css index 88fb487..066abab 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -1,2253 +1,926 @@ -/* ========================================================================== - Table of Contents - ========================================================================== */ - -/* - - 0. Normalize - 1. Icons - 2. General - 3. Utilities - 4. General - 5. Single Post - 6. Author Profile - 7. Read More - 8. Third Party Elements - 9. Pagination - 10. Subscribe - 11. Footer - 12. Media Queries (Tablet) - 13. Media Queries (Mobile) - 14. Animations - -*/ - -/* ========================================================================== - 0. normalize.css v3.0.3 | MIT License | git.io/normalize | (minified) - ========================================================================== */ - -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100% -} -body { margin: 0; } -article, aside, details, -figcaption, figure, -footer, header, -main, menu, nav, -section, summary { display:block; } -audio, canvas, progress, video { - display: inline-block; - vertical-align: baseline; -} -audio:not([controls]) { display: none; height: 0; } -[hidden], template { display: none; } -a { background-color: transparent;} -a:active, a:hover { outline: 0; } -abbr[title] { border-bottom: 1px dotted; } -b, strong { font-weight: bold; } -dfn { font-style: italic; } -h1 { font-size: 2em; margin: 0.67em 0; } -mark { background: #ff0; color: #000; } -small { font-size: 80%; } -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sup { top: -0.5em; } -sub { bottom: -0.25em; } -img { border: 0; } -svg:not(:root) { overflow: hidden; } -figure { margin: 1em 40px; } -hr { box-sizing: content-box; height: 0; } -pre { overflow: auto; } -code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } -button, input, optgroup, select, textarea { - color: inherit; - font: inherit; - margin: 0; -} -button { overflow: visible; } -button, select { text-transform: none; } -button, html input[type="button"], -input[type="reset"], input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; -} -button[disabled], html input[disabled] { cursor: default; } -button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } -input { line-height: normal; } -input[type="checkbox"], -input[type="radio"] { box-sizing: border-box; padding: 0; } -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { height: auto; } -input[type="search"] { -webkit-appearance: textfield; } -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} -legend { border: 0; padding: 0; } -textarea { overflow: auto; } -optgroup { font-weight: bold; } -table{ border-collapse: collapse; border-spacing: 0; } -td, th{ padding: 0; } - - -/* ========================================================================== - 1. Icons - Sets up the icon font and respective classes - ========================================================================== */ - -/* Import the font file with the icons in it */ -@font-face { - font-family: "casper-icons"; - src:url("../fonts/casper-icons.eot?v=1"); - src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"), - url("../fonts/casper-icons.woff?v=1") format("woff"), - url("../fonts/casper-icons.ttf?v=1") format("truetype"), - url("../fonts/casper-icons.svg?v=1#icons") format("svg"); - font-weight: normal; - font-style: normal; -} - -/* Apply these base styles to all icons */ -[class^="icon-"]:before, [class*=" icon-"]:before { - font-family: "casper-icons", "Open Sans", sans-serif; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - text-decoration: none !important; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* Each icon is created by inserting the correct character into the - content of the :before pseudo element. Like a boss. */ -.icon-ghost:before { - content: "\f600"; -} -.icon-feed:before { - content: "\f601"; -} -.icon-twitter:before { - content: "\f602"; - font-size: 1.1em; -} -.icon-google-plus:before { - content: "\f603"; -} -.icon-facebook:before { - content: "\f604"; -} -.icon-arrow-left:before { - content: "\f605"; -} -.icon-stats:before { - content: "\f606"; -} -.icon-location:before { - content: "\f607"; - margin-left: -3px; /* Tracking fix */ -} -.icon-link:before { - content: "\f608"; -} -.icon-menu:before { - content: "\f609"; -} -/* - IMPORTANT: When making any changes to the icon font, be sure to increment - the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2` - This forces browsers to download the new font file. -*/ - - -/* ========================================================================== - 2. General - Setting up some base styles - ========================================================================== */ - -html { - height: 100%; - max-height: 100%; - font-size: 62.5%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} +/* Components - Groups of Patterns +/* ---------------------------------------------------------- */ +@import "components/global.css"; body { + background: #F4F8FB; +} + +.img { + display: block; + width: 100%; height: 100%; - max-height: 100%; - font-family: "Merriweather", serif; - letter-spacing: 0.01rem; - font-size: 1.8rem; - line-height: 1.75em; - color: #3A4145; - -webkit-font-feature-settings: 'kern' 1; - -moz-font-feature-settings: 'kern' 1; - -o-font-feature-settings: 'kern' 1; - text-rendering: geometricPrecision; + border-radius: 100%; + background-position: center center; + background-size: cover; } -::-moz-selection { - background: #D6EDFF; -} - -::selection { - background: #D6EDFF; -} - -h1, h2, h3, -h4, h5, h6 { - -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - color: #2E2E2E; - line-height: 1.15em; - margin: 0 0 0.4em 0; - font-family: "Open Sans", sans-serif; - text-rendering: geometricPrecision; -} - -h1 { - font-size: 5rem; - letter-spacing: -2px; - text-indent: -3px; -} - -h2 { - font-size: 3.6rem; - letter-spacing: -1px; -} - -h3 { - font-size: 3rem; - letter-spacing: -0.6px; -} - -h4 { - font-size: 2.5rem; -} - -h5 { - font-size: 2rem; -} - -h6 { - font-size: 2rem; -} - -a { - color: #4A4A4A; - transition: color 0.3s ease; -} - -a:hover { - color: #111; -} - -p, ul, ol, dl { - -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; - -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; - -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; - margin: 0 0 1.75em 0; - text-rendering: geometricPrecision; -} - -ol, ul { - padding-left: 3rem; -} - -ol ol, ul ul, -ul ol, ol ul { - margin: 0 0 0.4em 0; - padding-left: 2em; -} - -dl dt { - float: left; - width: 180px; - overflow: hidden; - clear: left; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 700; - margin-bottom: 1em; -} - -dl dd { - margin-left: 200px; - margin-bottom: 1em -} - -li { - margin: 0.4em 0; -} - -li li { - margin: 0; -} - -li > p:last-of-type { - margin-bottom: 0; -} - -hr { - display: block; - height: 1px; - border: 0; - border-top: #EFEFEF 1px solid; - margin: 3.2em 0; - padding: 0; -} - -blockquote { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 1.75em 0 1.75em -2.2em; - padding: 0 0 0 1.75em; - border-left: #4A4A4A 0.4em solid; -} - -blockquote p { - margin: 0.8em 0; - font-style: italic; -} - -blockquote small { - display: inline-block; - margin: 0.8em 0 0.8em 1.5em; - font-size: 0.9em; - color: #CCC; -} - -blockquote small:before { content: "\2014 \00A0"; } - -blockquote cite { - font-weight: 700; -} - -blockquote cite a { font-weight: normal; } - -mark { - background-color: #fdffb6; -} - -code, tt { - padding: 1px 3px; - font-family: Inconsolata, monospace, sans-serif; - font-size: 0.85em; - white-space: pre-wrap; - border: #E3EDF3 1px solid; - background: #F7FAFB; - border-radius: 2px; - -webkit-font-feature-settings: "liga" 0; - -moz-font-feature-settings: "liga" 0; - font-feature-settings: "liga" 0; -} - -pre { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0 0 1.75em 0; - border: #E3EDF3 1px solid; - width: 100%; - padding: 10px; - font-family: Inconsolata, monospace, sans-serif; - font-size: 0.9em; - white-space: pre; - overflow: auto; - background: #F7FAFB; - border-radius: 3px; -} - -pre code, pre tt { - font-size: inherit; - white-space: pre-wrap; - background: transparent; - border: none; - padding: 0; -} - -kbd { - display: inline-block; - margin-bottom: 0.4em; - padding: 1px 8px; - border: #CCC 1px solid; - color: #666; - text-shadow: #FFF 0 1px 0; - font-size: 0.9em; - font-weight: 700; - background: #F4F4F4; - border-radius: 4px; - box-shadow: - 0 1px 0 rgba(0, 0, 0, 0.2), - 0 1px 0 0 #fff inset; -} - -table { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 1.75em 0; - width: 100%; - max-width: 100%; - background-color: transparent; -} - -table th, -table td { - padding: 8px; - line-height: 20px; - text-align: left; - vertical-align: top; - border-top: #EFEFEF 1px solid; -} - -table th { color: #000; } - -table caption + thead tr:first-child th, -table caption + thead tr:first-child td, -table colgroup + thead tr:first-child th, -table colgroup + thead tr:first-child td, -table thead:first-child tr:first-child th, -table thead:first-child tr:first-child td { - border-top: 0; -} - -table tbody + tbody { border-top: #EFEFEF 2px solid; } - -table table table { background-color: #FFF; } - -table tbody > tr:nth-child(odd) > td, -table tbody > tr:nth-child(odd) > th { - background-color: #F6F6F6; -} - -table.plain tbody > tr:nth-child(odd) > td, -table.plain tbody > tr:nth-child(odd) > th { - background: transparent; -} - -iframe, .fluid-width-video-wrapper { - display: block; - margin: 1.75em 0; -} - -/* When a video is inside the fitvids wrapper, drop the -margin on the iframe, cause it breaks stuff. */ -.fluid-width-video-wrapper iframe { - margin: 0; -} - -textarea, select, input { - width: 260px; - padding: 6px 9px; - margin: 0 0 5px 0; - outline: 0; - font-family: 'Open Sans', sans-serif; - font-size: 1.6rem; - font-weight: 100; - line-height: 1.4em; - background: #fff; - border: #e7eef2 1px solid; - border-radius: 4px; - box-shadow: none; - -webkit-appearance: none; -} - -textarea { - width: 100%; - max-width: 340px; - min-width: 250px; - height: auto; - min-height: 80px; -} - -input[type="text"]:focus, -input[type="email"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="number"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="week"]:focus, -input[type="time"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -textarea:focus { - border: #bbc7cc 1px solid; - background: #fff; - outline: none; - outline-width: 0; -} - -select { - width: 270px; - height: 30px; - line-height: 30px; -} - -button { - min-height: 35px; - width: auto; - display: inline-block; - padding: 0.1rem 1.5rem; - cursor: pointer; - outline: none; - text-decoration: none; - color: #fff; - font-family: 'Open Sans', sans-serif; - font-size: 11px; /* Hacks targeting Firefox. */ - line-height: 13px; /* Hacks targeting Firefox. */ - font-weight: 300; - text-align: center; - letter-spacing: 1px; - text-transform: uppercase; - text-shadow: none; - border-radius: 0.3rem; - border: rgba(0,0,0,0.05) 0.1em solid; - background: #5ba4e5; -} - - -/* ========================================================================== - 3. Utilities - These things get used a lot - ========================================================================== */ - -/* Clears shit */ -.clearfix:before, -.clearfix:after { - content: " "; - display: table; -} -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } - -/* Hides shit */ .hidden { + position: absolute; text-indent: -9999px; visibility: hidden; - display: none; } -/* Creates a responsive wrapper that makes our content scale nicely */ + +/* Layout - Groups of Patterns +/* ---------------------------------------------------------- */ + +/* Full width page blocks */ +.outer { + position: relative; + padding: 0 4vw; +} + +/* Centered content container blocks */ .inner { - position: relative; - width: 80%; - max-width: 710px; margin: 0 auto; -} - -/* Centres vertically yo. (IE8+) */ -.vertical { - display: table-cell; - vertical-align: middle; -} - -/* Wraps the main content & footer */ -.site-wrapper { - position: relative; - z-index: 10; - min-height: 100%; - background: #fff; - -webkit-transition: -webkit-transform 0.5s ease; - transition: transform 0.5s ease; -} - -body.nav-opened .site-wrapper { - overflow-x: hidden; - -webkit-transform: translate3D(-240px, 0, 0); - -ms-transform: translate3D(-240px, 0, 0); - transform: translate3D(-240px, 0, 0); - -webkit-transition: -webkit-transform 0.3s ease; - transition: transform 0.3s ease; -} - - -/* ========================================================================== - 4. General - The main styles for the the theme - ========================================================================== */ - -/* Big cover image on the home page */ -.main-header { - position: relative; - display: table; + max-width: 1040px; width: 100%; - height: 100vh; - margin-bottom: 5rem; - text-align: center; - background: #222 no-repeat center center; - background-size: cover; - overflow: hidden; } -.main-header .inner { - width: 80%; +/* Usage: + +
+
+ Centered content +
+
+ +*/ + +/* Home page +/* ---------------------------------------------------------- */ + +@media (min-width: 900px) { + .home-template .post-feed { + margin-top: -100px; + } + .home-template .site-nav { + position: relative; + top: -70px; + z-index: 300; + } } -.main-nav { + +/* Site Header +/* ---------------------------------------------------------- */ + +.site-header { position: relative; - padding: 35px 40px; - margin: 0 0 30px 0; + padding-top: 12px; + padding-bottom: 12px; + color: #fff; + background: color(var(--darkgrey) l(-15%)) no-repeat center center; + background-size: cover; } -.main-nav a { - text-decoration: none; - font-family: 'Open Sans', sans-serif; -} - -/* Navigation */ -body.nav-opened .nav-cover { - position: fixed; - top: 0; - left: 0; - right: 240px; - bottom: 0; - z-index: 200; -} - -.nav { - position: fixed; +.site-header:before { + display: block; + content: ""; + position: absolute; top: 0; right: 0; bottom: 0; - z-index: 5; - width: 240px; - opacity: 0; - background: #111; - margin-bottom: 0; - text-align: left; - overflow-y: auto; - -webkit-transition: -webkit-transform 0.5s ease, - opacity 0.3s ease 0.7s; - transition: transform 0.5s ease, - opacity 0.3s ease 0.7s; + left: 0; + z-index: 10; + background: rgba(0,0,0,0.18); } -body.nav-closed .nav { - -webkit-transform: translate3D(97px, 0, 0); - -ms-transform: translate3D(97px, 0, 0); - transform: translate3D(97px, 0, 0); -} - -body.nav-opened .nav { - opacity: 1; - -webkit-transition: -webkit-transform 0.3s ease, - opacity 0s ease 0s; - transition: transform 0.3s ease, - opacity 0s ease 0s; - -webkit-transform: translate3D(0, 0, 0); - -ms-transform: translate3D(0, 0, 0); - transform: translate3D(0, 0, 0); -} - -.nav-title { - position: absolute; - top: 45px; - left: 30px; - font-size: 16px; - font-weight: 100; - text-transform: uppercase; - color: #fff; -} - -.nav-close { - position: absolute; - top: 38px; - right: 25px; - width: 20px; - height: 20px; - padding: 0; - font-size: 10px; -} - -.nav-close:focus { - outline: 0; -} - -.nav-close:before, -.nav-close:after { - content: ''; - position: absolute; - top: 0; - width: 20px; - height: 1px; - background: rgb(150,150,150); - top: 15px; - -webkit-transition: background 0.15s ease; - transition: background 0.15s ease; -} - -.nav-close:before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -.nav-close:after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.nav-close:hover:before, -.nav-close:hover:after { - background: rgb(255,255,255); -} - -.nav ul { - padding: 90px 9% 5%; - list-style: none; - counter-reset: item; -} - -.nav li:before { +.site-header:after { display: block; - float: right; - padding-right: 4%; - padding-left: 5px; - text-align: right; - font-size: 1.2rem; - vertical-align: bottom; - color: #B8B8B8; - content: counter(item, lower-roman); - counter-increment: item; + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + z-index: 10; + height: 60px; + background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); } -.nav li { + +.site-header.no-cover:before, +.site-header.no-cover:after { + display: none; +} + +.site-header-content { + position: relative; + z-index: 100; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10vw 0; + min-height: 200px; + max-height: 450px; + text-align: center; +} + +.site-title { margin: 0; + padding: 0; + font-size: 3.8rem; + font-weight: 700; } -.nav li a { - text-decoration: none; - line-height: 1.4; - font-size: 1.4rem; - display: block; - padding: 0.6rem 4%; - overflow: hidden; + +.site-logo { + max-height: 45px; +} + +.site-description { + margin: 0; + padding: 5px 0; + font-size: 2.2rem; + font-weight: 300; + letter-spacing: 0.5px; + opacity: 0.8; +} + + +/* Site Navigation +/* ---------------------------------------------------------- */ + +.site-nav { + position: relative; + z-index: 100; + display: flex; + align-items: flex-start; + justify-content: space-between; + height: 40px; + font-size: 1.3rem; + overflow-y: hidden; +} + +.site-nav-left { + display: flex; + align-items: center; + margin-right: 10px; + padding-bottom: 80px; white-space: nowrap; - text-overflow: ellipsis; -} -.nav li a:after { - display: inline-block; - content: " ......................................................."; - color: rgba(255,255,255,0.2); - margin-left: 5px; -} -.nav .nav-current:before { - color: #fff; -} -.nav .nav-current a:after { - content: " "; - border-bottom: rgba(255,255,255,0.5) 1px solid; - width: 100%; - height: 1px; + overflow-x: auto; + overflow-y: hidden; + + -webkit-overflow-scrolling: touch; + -ms-overflow-scrolling: touch; } -.nav a:link, -.nav a:visited { - color: #B8B8B8; +/* Site Nav Hack Explanation (above): + +What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them. + +The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result. + +*/ + +.site-nav-logo { + display: block; + margin-right: 24px; } -.nav li.nav-current a, -.nav a:hover, -.nav a:active, -.nav a:focus { +.site-nav-logo img { + display: block; + height: 21px; + width: auto; +} + +.nav-menu ul { + display: flex; + margin: 0 0 0 -12px; + padding: 0; + list-style: none; +} + +.nav-item { + display: block; + margin: 0; + padding: 0; + text-transform: uppercase; +} + +.nav-item a { + display: block; + margin: 0; + padding: 10px 12px; color: #fff; + opacity: 0.8; +} + +.nav-item a:hover { + opacity: 1; + text-decoration: none; +} + +.site-nav-right { + display: flex; + align-items: center; + flex-shrink: 0; +} + +.social-links { + display: flex; + align-items: center; + flex-shrink: 0; +} + +.social-links a:last-of-type { + padding-right: 20px; +} + +.social-link { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + padding: 10px; + color: #fff; + opacity: 0.8; +} + +.social-link:hover { + opacity: 1; +} + +.social-link svg { + height: 1.8rem; + fill: #fff; +} + +.social-link-fb svg { + height: 1.5rem; } .subscribe-button { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; display: block; - position: absolute; - bottom: 30px; - left: 30px; - right: 30px; - height: 38px; - padding: 0 20px; - color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */ - text-align: center; - font-size: 12px; - font-family: "Open Sans", sans-serif; - text-transform: uppercase; - text-decoration: none; - line-height: 35px; - border-radius: 3px; - background: #fff; - transition: all ease 0.3s; -} -.subscribe-button:before { - font-size: 9px; - margin-right: 6px; -} - - -/* Create a bouncing scroll-down arrow on homepage with cover image */ -.scroll-down { - display: block; - position: absolute; - z-index: 100; - bottom: 45px; - left: 50%; - margin-left: -16px; - width: 34px; - height: 34px; - font-size: 34px; - text-align: center; - text-decoration: none; - color: rgba(255,255,255,0.7); - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-animation: bounce 4s 2s infinite; - animation: bounce 4s 2s infinite; -} - -/* Stop it bouncing and increase contrast when hovered */ -.scroll-down:hover { + padding: 4px 10px; + border: #fff 1px solid; color: #fff; - -webkit-animation: none; - animation: none; + font-size: 1.2rem; + line-height: 1em; + border-radius: 10px; + opacity: 0.8; } -/* Put a semi-opaque radial gradient behind the icon to make it more visible - on photos which happen to have a light background. */ -.home-template .main-header:after { - display: block; - content: " "; - width: 150px; - height: 130px; - border-radius: 100%; - position: absolute; - bottom: 0; - left: 50%; - margin-left: -75px; - background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); -} - -/* Hide when there's no cover image or on page2+ */ -.no-cover .scroll-down, -.no-cover.main-header:after, -.paged .scroll-down, -.paged .main-header:after { - display: none -} - -/* Appears in the top left corner of your home page */ -.blog-logo { - display: block; - float: left; - background: none !important; /* Makes sure there is never a background */ - border: none !important; /* Makes sure there is never a border */ -} - -.blog-logo img { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - height: 38px; - padding: 1px 0 5px 0; - width: auto; -} - -.menu-button { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - float: right; - height: 38px; - padding: 0 15px; - border-style: solid; - border-width: 1px; +.subscribe-button:hover { + text-decoration: none; opacity: 1; - text-align: center; - font-size: 12px; - text-transform: uppercase; - line-height: 35px; - white-space: nowrap; - border-radius: 3px; +} + +.rss-button { + opacity: 0.8; +} + +.rss-button:hover { + opacity: 1; +} + +.rss-button svg { + height: 2.1rem; + margin-bottom: 1px; + fill: #fff; +} + + +/* Site Navigation +/* ---------------------------------------------------------- */ + +.post-feed { + position: relative; + z-index: 200; + display: flex; + flex-wrap: wrap; + margin: 0 -15px; + padding: 30px 0 0 0; +} + +.post-card { + flex: 1 1 300px; + margin: 0 15px 30px; + background: #fff center center; + background-size: cover; + box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px; + border-radius: 5px; + overflow: hidden; transition: all 0.5s ease; } -.menu-button:before { - font-size: 12px; - font-weight: bold; - margin-right: 6px; - position: relative; - top: 1px; -} -.menu-button:hover { - background: #fff; -} -.menu-button:focus { - outline: 0; -} -/* When the navigation is closed */ -.nav-closed .menu-button { - color: #fff; - border-color: rgba(255, 255, 255, 0.6); -} -.nav-closed .menu-button:hover { - color: #222; -} - -/* When the navigation is closed and there is no cover image */ -.nav-closed .no-cover .menu-button { - border-color: #BFC8CD; - color: #9EABB3; -} -.nav-closed .no-cover .menu-button:hover { - border-color: #555; - color: #555; -} - -/* When the navigation is opened */ -.nav-opened .menu-button { - padding: 0 12px; - background: #111; - border-color: #111; - color: #fff; - -webkit-transform: translate3D(94px, 0, 0); - -ms-transform: translate3D(94px, 0, 0); - transform: translate3D(94px, 0, 0); +.post-card:hover { + box-shadow: 0 0 1px rgba(39,44,49,0.10), 0 3px 16px rgba(39, 44, 49,0.07); + transform: translate3D(0, -1px, 0); transition: all 0.3s ease; } -.nav-opened .menu-button .word { - opacity: 0; - transition: all 0.3s ease; -} - -/* Special styles when overlaid on an image*/ -.main-nav.overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 70px; - border: none; - background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); -} -.no-cover .main-nav.overlay { - background: none; -} - -/* The details of your blog. Defined in ghost/settings/ */ -.page-title { - margin: 10px 0 10px 0; - font-size: 5rem; - letter-spacing: -1px; - font-weight: 700; - font-family: "Open Sans", sans-serif; - color: #fff; -} - -.page-description { - margin: 0; - font-size: 2rem; - line-height: 1.5em; - font-weight: 400; - font-family: "Merriweather", serif; - letter-spacing: 0.01rem; - color: rgba(255,255,255,0.8); -} - -.no-cover.main-header { - min-height: 160px; - max-height: 40vh; - background: #f5f8fa; -} - -.no-cover .page-title { - color: rgba(0,0,0,0.8); -} - -.no-cover .page-description { - color: rgba(0,0,0,0.5); -} - -/* Add subtle load-in animation for content on the home page */ -.home-template .page-title { - -webkit-animation: fade-in-down 0.6s; - animation: fade-in-down 0.6s both; - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; -} -.home-template .page-description { - -webkit-animation: fade-in-down 0.9s; - animation: fade-in-down 0.9s both; - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; -} - -/* Every post, on every page, gets this style on its
tag */ -.post { +.post-card-image-link { position: relative; - width: 80%; - max-width: 710px; - margin: 4rem auto; - padding-bottom: 4rem; - border-bottom: #EBF2F6 1px solid; - word-wrap: break-word; } -/* Add a little circle in the middle of the border-bottom on our .post - just for the lolz and stylepoints. */ -.post:after { - display: block; - content: ""; - width: 7px; - height: 7px; - border: #E7EEF2 1px solid; - position: absolute; - bottom: -5px; - left: 50%; - margin-left: -5px; - background: #FFF; - border-radius: 100%; - box-shadow: #FFF 0 0 0 5px; -} - -body:not(.post-template) .post-title { - font-size: 3.6rem; -} - -body.page-template .post-title { - font-size: 5rem; -} - -.post-title a { - text-decoration: none; -} - -.post-excerpt p { - margin: 0; - font-size: 0.9em; - line-height: 1.7em; -} - -.read-more { - text-decoration: none; -} - -.post-meta { - display: block; - margin: 1.75rem 0 0 0; - font-family: "Open Sans", sans-serif; - font-size: 1.5rem; - line-height: 2.2rem; - color: #9EABB3; -} - -.author-thumb { - width: 24px; - height: 24px; - float: left; - margin-right: 9px; - border-radius: 100%; -} - -.post-meta a { - color: #9EABB3; - text-decoration: none; -} - -.post-meta a:hover { - text-decoration: underline; -} - -.user-meta { - position: relative; - padding: 0.3rem 40px 0 100px; - min-height: 77px; -} - -.post-date { - display: inline-block; - margin-left: 8px; - padding-left: 12px; - border-left: #d5dbde 1px solid; - text-transform: uppercase; - font-size: 1.3rem; - white-space: nowrap; -} - -.user-image { - position: absolute; - top: 0; - left: 0; -} - -.user-name { - display: block; - font-weight: 700; -} - -.user-bio { - display: block; - max-width: 440px; - font-size: 1.4rem; - line-height: 1.5em; -} - -.publish-meta { - position: absolute; - top: 0; - right: 0; - padding: 4.3rem 0 4rem 0; - text-align: right; -} - -.publish-heading { - display: block; - font-weight: 700; -} - -.publish-date { - display: block; - font-size: 1.4rem; - line-height: 1.5em; -} - - -/* ========================================================================== - 5. Single Post - When you click on an individual post - ========================================================================== */ - -.post-template .post-header, -.page-template .post-header { - margin-bottom: 3.4rem; -} - -.post-template .post-title, -.page-template .post-title { - margin-bottom: 0; -} - -.post-template .post-meta, -.page-template .post-meta { - margin: 0; -} - -.post-template .post-date, -.page-template .post-date { - padding: 0; - margin: 0; - border: none; -} - -/* Stop elements, such as img wider than the post content, from - creating horizontal scroll - slight hack due to imperfections - with browser width % calculations and rounding */ -.post-template .content, -.page-template .content { - overflow: hidden; -} - -/* Tweak the .post wrapper style */ -.post-template .post, -.page-template .post { - margin-top: 0; - border-bottom: none; - padding-bottom: 0; -} - -/* Kill that stylish little circle that was on the border, too */ -.post-template .post:after, -.page-template .post:after { - display: none; -} - -/* Keep images centered, and allow images wider than the main - text column to break out. */ -.post-content img { - display: block; - max-width: 126%; - height: auto; - padding: 0.6em 0; - /* Centers an image by (1) pushing its left edge to the - center of its container and (2) shifting the entire image - in the opposite direction by half its own width. - Works for images that are larger than their containers. */ - position: relative; - left: 50%; - -webkit-transform: translateX(-50%); /* for Safari and iOS */ - -ms-transform: translateX(-50%); /* for IE9 */ - transform: translateX(-50%); -} - -.footnotes { - font-style: italic; - font-size: 1.3rem; - line-height: 1.6em; -} - -.footnotes li { - margin: 0.6rem 0; -} - -.footnotes p { - margin: 0; -} - -.footnotes p a:last-child { - text-decoration: none; -} - - -/* The author credit area after the post */ -.post-footer { - position: relative; - margin: 6rem 0 0 0; - padding: 3rem 0 0 0; - border-top: #EBF2F6 1px solid; -} - -.post-footer h4 { - font-size: 1.8rem; - margin: 0; -} - -.post-footer p { - margin: 1rem 0; - font-size: 1.4rem; - line-height: 1.75em; -} - -/* list of author links - location / url */ -.author-meta { - padding: 0; - margin: 0; - list-style: none; - font-size: 1.4rem; - line-height: 1; - font-style: italic; - color: #9EABB3; -} - -.author-meta a { - color: #9EABB3; -} -.author-meta a:hover { - color: #111; -} - -/* Create some space to the right for the share links */ -.post-footer .author { - margin-right: 180px; -} - -.post-footer h4 a { - color: #2e2e2e; - text-decoration: none; -} - -.post-footer h4 a:hover { - text-decoration: underline; -} - -/* Drop the share links in the space to the right. - Doing it like this means it's easier for the author bio - to be flexible at smaller screen sizes while the share - links remain at a fixed width the whole time */ -.post-footer .share { - position: absolute; - top: 3rem; - right: 0; - width: 140px; -} - -.post-footer .share a { - font-size: 1.8rem; - display: inline-block; - margin: 1rem 1.6rem 1.6rem 0; - color: #BBC7CC; - text-decoration: none; -} - -.post-footer .share .icon-twitter:hover { - color: #55acee; -} -.post-footer .share .icon-facebook:hover { - color: #3b5998; -} -.post-footer .share .icon-google-plus:hover { - color: #dd4b39; -} - - -/* ========================================================================== - 6. Author profile - ========================================================================== */ - -.post-head.main-header { - height: 65vh; - min-height: 180px; -} - -.no-cover.post-head.main-header { - height: 85px; - min-height: 0; - margin-bottom: 0; - background: transparent; -} - -.tag-head.main-header { - height: 40vh; - min-height: 180px; -} - -.author-head.main-header { - height: 40vh; - min-height: 180px; -} - -.no-cover.author-head.main-header { - height: 10vh; - min-height: 100px; - background: transparent; -} - -.author-profile { - padding: 0 15px 5rem 15px; - border-bottom: #EBF2F6 1px solid; - text-align: center; -} - -/* Add a little circle in the middle of the border-bottom */ -.author-profile:after { - display: block; - content: ""; - width: 7px; - height: 7px; - border: #E7EEF2 1px solid; - position: absolute; - bottom: -5px; - left: 50%; - margin-left: -5px; - background: #FFF; - border-radius: 100%; - box-shadow: #FFF 0 0 0 5px; -} - -.author-image { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - position: absolute; - top: -40px; - left: 50%; - margin-left: -40px; - width: 80px; - height: 80px; - border-radius: 100%; - overflow: hidden; - padding: 6px; - background: #fff; - z-index: 2; - box-shadow: #E7EEF2 0 0 0 1px; -} - -.author-image .img { - position: relative; - display: block; - width: 100%; - height: 100%; - background-size: cover; - background-position: center center; - border-radius: 100%; -} - -.author-profile .author-image { - position: relative; - left: auto; - top: auto; - width: 120px; - height: 120px; - padding: 3px; - margin: -100px auto 0 auto; - box-shadow: none; -} - -.author-title { - margin: 1.5rem 0 1rem; -} - -.author-bio { - font-size: 1.8rem; - line-height: 1.5em; - font-weight: 200; - color: #50585D; - letter-spacing: 0; - text-indent: 0; -} - -.author-meta { - margin: 1.6rem 0; -} -/* Location, website, and link */ -.author-profile .author-meta { - margin: 2rem 0; - font-family: "Merriweather", serif; - letter-spacing: 0.01rem; - font-size: 1.7rem; -} -.author-meta span { - display: inline-block; - margin: 0 2rem 1rem 0; - word-wrap: break-word; -} -.author-meta a { - text-decoration: none; -} - -/* Turn off meta for page2+ to make room for extra - pagination prev/next links */ -.paged .author-profile .author-meta { - display: none; -} - - -/* ========================================================================== - 7. Read More - Next/Prev Post Links - ========================================================================== */ - -.read-next { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; - margin-top: 10rem; -} - -.read-next-story { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 50%; - text-decoration: none; - position: relative; - text-align: center; - color: #fff; - background: #222 no-repeat center center; - background-size: cover; - overflow: hidden; -} -.read-next-story:hover:before { - background: rgba(0,0,0,0.8); - transition: all 0.2s ease; -} -.read-next-story:hover .post:before { - color: #222; - background: #fff; - transition: all 0.2s ease; -} - -.read-next-story:before { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(0,0,0,0.7); - transition: all 0.5s ease; -} - -.read-next-story .post { - padding-top: 6rem; - padding-bottom: 6rem; -} - -.read-next-story .post:before { - content: "Read This Next"; - padding: 4px 10px 5px; - text-transform: uppercase; - font-size: 1.1rem; - font-family: "Open Sans", sans-serif; - color: rgba(255,255,255,0.8); - border: rgba(255,255,255,0.5) 1px solid; - border-radius: 4px; - transition: all 0.5s ease; -} -.read-next-story.prev .post:before { - content: "You Might Enjoy"; -} - -.read-next-story h2 { - margin-top: 1rem; - color: #fff; -} - -.read-next-story p { - margin: 0; - color: rgba(255,255,255,0.8); -} - -/* Special styles for posts with no cover images */ -.read-next-story.no-cover { - background: #f5f8fa; -} - -.read-next-story.no-cover:before { - display: none; -} - -.read-next-story.no-cover .post:before { - color: rgba(0,0,0,0.5); - border-color: rgba(0,0,0,0.2); -} - -.read-next-story.no-cover h2 { - color: rgba(0,0,0,0.8); -} - -.read-next-story.no-cover p { - color: rgba(0,0,0,0.5); -} - -/* if there are two posts without covers, put a border between them */ -.read-next-story.no-cover + .read-next-story.no-cover { - border-left: rgba(0,0,100,0.04) 1px solid; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* Correctly position site-footer when next to the .read-next container */ -.read-next + .site-footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - margin: 0; -} - -/* ========================================================================== - 8. Third Party Elements - Embeds from other services - ========================================================================== */ - -/* Github */ -.gist table { - margin: 0; - font-size: 1.4rem; - text-rendering: auto; -} -.gist td { - line-height: 1.4; -} -.gist .line-number { - min-width: 25px; -} - -/* Pastebin */ -.content .embedPastebin { - margin-bottom: 1.75em; -} - - -/* ========================================================================== - 9. Pagination - Tools to let you flick between pages - ========================================================================== */ - -/* The main wrapper for our pagination links */ -.pagination { - position: relative; - width: 80%; - max-width: 710px; - margin: 4rem auto; - font-family: "Open Sans", sans-serif; - font-size: 1.3rem; - color: #9EABB3; - text-align: center; -} - -.pagination a { - color: #9EABB3; - transition: all 0.2s ease; -} - -/* Push the previous/next links out to the left/right */ -.older-posts, -.newer-posts { - position: absolute; - display: inline-block; - padding: 0 15px; - border: #bfc8cd 1px solid; - text-decoration: none; - border-radius: 4px; - transition: border 0.3s ease; -} - -.older-posts { - right: 0; -} - -.page-number { - display: inline-block; - padding: 2px 0; - min-width: 100px; -} - -.newer-posts { - left: 0; -} - -.older-posts:hover, -.newer-posts:hover { - color: #889093; - border-color: #98a0a4; -} - -.extra-pagination { - display: none; - border-bottom: #EBF2F6 1px solid; -} -.extra-pagination:after { - display: block; - content: ""; - width: 7px; - height: 7px; - border: #E7EEF2 1px solid; - position: absolute; - bottom: -5px; - left: 50%; - margin-left: -5px; - background: #FFF; - border-radius: 100%; - box-shadow: #FFF 0 0 0 5px; -} -.extra-pagination .pagination { +.post-card-image { width: auto; + height: 200px; + background: var(--lightgrey) no-repeat center center; + background-size: cover; } -/* On page2+ make all the headers smaller */ -.paged .main-header { - max-height: 30vh; -} - -/* On page2+ show extra pagination controls at the top of post list */ -.paged .extra-pagination { +.post-card-content-link { + position: relative; display: block; + padding: 25px 25px 0; + color: var(--darkgrey); +} + +.post-card-content-link:hover { + text-decoration: none; +} + +.post-card-title { + margin-top: 0; +} + +.post-card-content { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.post-card-excerpt { + font-family: Georgia, serif; +} + +.post-card-meta { + padding: 0 25px 25px; +} + +/* Special Styling for first item (below): + +The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices. + + */ + +@media (min-width: 795px) { + + .post-feed .post-card:nth-child(6n+1) { + flex: 1 1 100%; + display: flex; + } + + .post-feed .post-card:nth-child(6n+1) .post-card-image-link { + flex: 1 1 auto; + } + + .post-feed .post-card:nth-child(6n+1) .post-card-image { + width: 100%; + height: 100%; + } + + .post-feed .post-card:nth-child(6n+1) .post-card-content { + flex: 0 1 357px; + } + + .post-feed .post-card:nth-child(6n+1) h2 { + font-size: 2.6rem; + } + + .post-feed .post-card:nth-child(6n+1) p { + font-size: 1.8rem; + line-height: 1.55em; + } + + .post-feed .post-card:nth-child(6n+1) .post-card-content-link { + padding: 30px 30px 0; + } + + .post-feed .post-card:nth-child(6n+1) .post-card-meta { + padding: 0 30px 30px; + } + } -/* ========================================================================== - 10. Subscribe - Generate those email subscribers - ========================================================================== */ -.gh-subscribe { - border: #e7eef2 1px solid; - padding: 3rem; - margin-top: 3rem; +/* Single Post +/* ---------------------------------------------------------- */ + +.post-template .site-main { + background: #fff; +} + +.post-full { + position: relative; + z-index: 50; +} +/* ^ Required to make .post-full-content:before/after z-index stacking work */ + +.post-full-header { + max-width: 1000px; + margin: 0 auto; + padding: 10vw 3vw 6vw; text-align: center; - background: #f5f8fa; +} + +.post-full-meta { + display: flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + font-weight: 600; + font-size: 1.4rem; + color: var(--midgrey) +} + +.post-full-meta-date { + color: var(--blue); + +} + +.post-full-title { + color: var(--darkgrey); +} + +.date-divider { + display: inline-block; + margin: 0 6px 1px; +} + +.post-full-image { + height: 800px; + margin: -5vw -10vw -165px; + background: var(--lightgrey) center center; + background-size: cover; border-radius: 5px; } -.gh-subscribe-title { - margin-bottom: 0; - font-size: 2.4rem +@media (max-width: 1170px) { + .post-full-image { + height: 600px; + margin: -5vw -4vw -100px; + background: var(--lightgrey) center center; + background-size: cover; + } } -.gh-subscribe p { - margin-top: 0; - font-size: 1.5rem; +.post-full-content { + position: relative; + max-width: 920px; + min-height: 230px; + padding: 70px 100px 0; + margin: 0 auto; + font-size: 2.2rem; + line-height: 1.55em; + font-family: Georgia, serif; + background: #fff; } -.gh-subscribe form { +.post-full-content:before { + display: block; + content: ""; + width: 20px; + height: 200px; + transform: rotate(-5deg); + position: absolute; + top: 15px; + left: -5px; + z-index: -1; + background: rgba(39,44,49,0.20); + filter: blur(5px); +} + +.post-full-content:after { + display: block; + content: ""; + width: 20px; + height: 200px; + transform: rotate(5deg); + position: absolute; + top: 15px; + right: -5px; + z-index: -1; + background: rgba(39,44,49,0.20); + filter: blur(5px); +} + +.post-full-content blockquote { + padding: 0; + border: 0; + text-align: center; + font-size: 3rem; + line-height: 1.5em; + color: var(--blue); +} + +@media (min-width: 1000px) { + .post-full-content blockquote { + margin-left: -150px; + margin-right: -150px; + } +} + + +/* Post Footer +/* ---------------------------------------------------------- */ + +.post-full-footer { + display: flex; + justify-content: space-between; + // max-width: 700px; + margin: 0 auto; + padding: 0 0 6vw 0; +} + +.author-card { + display: flex; + align-items: center; +} + +.author-card-image { + height: 60px; + width: 60px; + margin-right: 10px; +} + +.author-card-content h4 { + margin: 0; + padding: 0; +} + +.author-card-content h4 a { + color: var(--darkgrey); + font-weight: 700; +} + +.author-card-content h4 a:hover { + text-decoration: none; +} + +.author-card-content p { + margin: 0; +} + + +/* Subscribe Form +/* ---------------------------------------------------------- */ + +.subscribe-form { + padding: 6vw 0 8vw 0; + text-align: center; +} + +.subscribe-form-title { + margin: 0 0 3px 0; + padding: 0; + font-size: 2.9rem; + font-weight: 700; + color: var(--darkgrey) +} + +.subscribe-form p { + font-size: 1.8rem; + line-height: 1.55em; +} + +.subscribe-form form { display: flex; justify-content: center; - margin: 20px 0 0 0; + align-items: center; + max-width: 420px; + margin: 0 auto; } -.gh-subscribe .form-group { +.subscribe-form .form-group { flex-grow: 1; - max-width: 300px; } -.gh-subscribe .subscribe-email { - box-sizing: border-box; +.subscribe-email { + display: block; + padding: 10px; width: 100%; + border: color(var(--lightgrey) l(+7%)) 1px solid; + color: var(--midgrey); + font-size: 1.8rem; + line-height: 1em; + font-weight: normal; + user-select: text; + border-radius: 5px; + transition: border-color 0.15s linear; + + -webkit-appearance: none; +} + +.subscribe-email:focus { + outline: 0; + border-color: color(var(--lightgrey) l(-2%)); +} + +.subscribe-form button { + display: inline-block; + outline: none; + margin: 0 0 0 10px; + padding: 0 20px; + height: 41px; + font-size: 1.3rem; + line-height: 37px; + font-weight: 400; + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,0.1); + text-align: center; + border-radius: 5px; + background: linear-gradient( + color(var(--blue) whiteness(+7%)), + color(var(--blue) lightness(-7%) saturation(-10%)) 60%, + color(var(--blue) lightness(-7%) saturation(-10%)) 90%, + color(var(--blue) lightness(-4%) saturation(-10%)) + ); + box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14); + + -webkit-font-smoothing: subpixel-antialiased; +} + +.subscribe-form button:active, +.subscribe-form button:focus { + background: color(var(--blue) lightness(-9%) saturation(-10%)); +} + + +/* Related posts +/* ---------------------------------------------------------- */ + +.read-next-feed { + display: flex; + flex-wrap: wrap; + margin: 0 -15px; + padding: 30px 0 0 0; +} + +.read-next-card { + position: relative; + flex: 1 1 300px; + margin: 0 15px 30px; + padding: 25px; + color: #fff; + background: var(--darkgrey) center center; + background-size: cover; + box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px; + border-radius: 5px; + overflow: hidden; +} + +.read-next-card:before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(135deg, rgba(62,176,239,0.90) 0%,rgba(46,138,172,0.80) 100%); +} + +.read-next-card-header { + position: relative; + z-index: 50; + text-align: center; +} + +.read-next-card-header-title { + padding: 10px 20px; margin: 0; - border-radius: 4px 0 0 4px; - transition: all ease 0.5s; + font-size: 3rem; + line-height: 1.2em; + font-weight: 200; + letter-spacing: 1px; } -.gh-subscribe .subscribe-email:focus { - border: #5ba4e5 1px solid; - transition: all ease 0.2s; +.read-next-card-content { + position: relative; + z-index: 50; + font-size: 1.7rem; } -.gh-subscribe button { - margin-left: -1px; - border-radius: 0 4px 4px 0; +.read-next-card-content a { + color: #fff; } -.gh-subscribe-rss { - font-family: 'Open Sans', sans-serif; - font-size: 1.2rem; - line-height: 1.4em; +.read-next-card-content ol { + margin: 0; + padding: 0 0 0 2em; } -/* ========================================================================== - 11. Footer - The bottom of every page - ========================================================================== */ +.read-next-card-content li { + padding-left: 5px; + margin: 20px 0; + font-size: 1.8rem; + line-height: 1.8rem; + font-weight: 200; +} + +.read-next-card-content li a { + display: inline-block; + vertical-align: top; + font-size: 1.6rem; + font-weight: 500; +} + + +/* Site Footer +/* ---------------------------------------------------------- */ .site-footer { position: relative; - margin: 8rem 0 0 0; - padding: 1rem 15px; - font-family: "Open Sans", sans-serif; - font-size: 1rem; - line-height: 1.75em; - color: #BBC7CC; + padding-top: 20px; + padding-bottom: 60px; + color: #fff; + background: color(var(--darkgrey) l(-15%)); } -.site-footer a { - color: #BBC7CC; +.site-footer-content { + display: flex; + justify-content: space-between; + align-items: center; + color: rgba(255,255,255,0.7); + font-size: 1.3rem; +} + +.site-footer-content a { + color: rgba(255,255,255,0.7);; +} + +.site-footer-content a:hover { + color: rgba(255,255,255,1); text-decoration: none; +} + +.site-footer-nav { + display: flex; +} + +.site-footer-nav a { + position: relative; + margin-left: 20px; +} + +.site-footer-nav a:before { + content: ""; + display: block; + height: 2px; + width: 2px; + position: absolute; + top: 11px; + left: -11px; + border-radius: 100%; + background: #fff; +} + +.site-footer-nav a:first-of-type:before { + display: none; +} + + + + + + +/* ========================================================================== + Floating Header + ========================================================================== */ + +.floating-header { + visibility: hidden; + display: flex; + align-items: center; + position: fixed; + height: 48px; + border-bottom: rgba(0,0,0,0.06) 1px solid; + z-index: 1000; + top: 0; + left: 0; + right: 0; + background: rgba(255,255,255,0.95); + transform: translate3d(0, -120%, 0); + transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); +} + +.floating-active { + visibility: visible; + transform: translate3d(0, 0, 0); + transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1); +} + +.floating-header-logo { + margin: 0 0 0 15px; + font-size: 1.5rem; + line-height: 1.3em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.floating-header-logo a { + display: flex; + align-items: center; + color: var(--darkgrey); + font-weight: 700; + line-height: 1em; +} + +.floating-header-logo a:hover { + text-decoration: none; +} + +.floating-header-logo img { + max-height: 20px; + margin-right: 10px; +} + +.floating-header-divider { + margin: 0 5px; + line-height: 1em; +} + +.floating-header-title { + flex: 1; + margin: 0; font-weight: bold; + font-size: 1.5rem; + line-height: 1.3; + color: #2e2e2e; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.site-footer a:hover { - border-bottom: #bbc7cc 1px solid; +.floating-header-share { + display: flex; + justify-content: flex-end; + align-items: center; + padding-left: 2%; + font-size: 1.3rem; + line-height: 1; } -.poweredby { +.floating-header-share a { + display: flex; + align-items: center; + justify-content: center; +} + +.floating-header-share svg { + fill: #fff; + height: 16px; + width: auto; +} + +.floating-header-share-label { + flex-shrink: 0; + display: flex; + align-items: center; + margin-right: 10px; + color: rgba(0,0,0,0.7); + font-weight: 500; +} + +.floating-header-share-label svg { + width: 18px; + height: 18px; + margin: 0 5px 0 10px; + stroke: rgba(0,0,0,0.7); + transform: rotate(90deg); +} + +.floating-header-share-tw, +.floating-header-share-fb { display: block; - width: 45%; - float: right; - text-align: right; + width: 48px; + height: 48px; + line-height: 45px; + align-items: center; + text-align: center; + color: #fff; + transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); } -.copyright { - display: block; - width: 45%; - float: left; +.floating-header-share-tw { + background: #33b1ff; } - -/* ========================================================================== - 12. Media Queries - Smaller than 900px - ========================================================================== */ - -@media only screen and (max-width: 900px) { - - blockquote { - margin-left: 0; - } - - .main-header { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - height: auto; - min-height: 240px; - height: 60vh; - padding: 15% 0; - } - - .scroll-down, - .home-template .main-header:after { display: none; } - - .paged .main-header { - min-height: 180px; - padding: 10% 0; - } - - .blog-logo img { - padding: 4px 0; - } - - .page-title { - font-size: 4rem; - letter-spacing: -1px; - } - - .page-description { - font-size: 1.8rem; - line-height: 1.5em; - } - - .post { - font-size: 0.95em - } - - body:not(.post-template) .post-title { - font-size: 3.2rem; - } - - body.page-template .post-title { - font-size: 4.5rem; - } - - hr { - margin: 2.4em 0; - } - - ol, ul { - padding-left: 2em; - } - - h1 { - font-size: 4.5rem; - text-indent: -2px; - } - - h2 { - font-size: 3.6rem; - } - - h3 { - font-size: 3.1rem; - } - - h4 { - font-size: 2.5rem; - } - - h5 { - font-size: 2.2rem; - } - - h6 { - font-size: 1.8rem; - } - - .author-profile { - padding-bottom: 4rem; - } - - .author-profile .author-bio { - font-size: 1.6rem; - } - - .author-meta span { - display: block; - margin: 1.5rem 0; - } - .author-profile .author-meta span { - font-size: 1.6rem; - } - - .post-head.main-header { - height:45vh; - } - - .tag-head.main-header, - .author-head.main-header { - height: 30vh; - } - - .no-cover.post-head.main-header { - height: 55px; - padding: 0; - } - - .no-cover.author-head.main-header { - padding: 0; - } - - .gh-subscribe { - padding: 2rem; - } - - .gh-subscribe-title { - font-size: 2rem - } - - .gh-subscribe p { - font-size: 1.4rem; - } - - .read-next { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-top: 4rem; - } - - .read-next p { - display: none; - } - - .read-next-story.no-cover + .read-next-story.no-cover { - border-top: rgba(0,0,100,0.06) 1px solid; - border-left: none; - } - +.floating-header-share-fb { + background: #005e99; } - -/* ========================================================================== - 13. Media Queries - Smaller than 500px - ========================================================================== */ - -@media only screen and (max-width: 500px) { - - .main-header { - margin-bottom: 15px; - height: 40vh; - } - - .no-cover.main-header { - height: 30vh; - } - - .paged .main-header { - max-height: 20vh; - min-height: 160px; - padding: 10% 0; - } - - .main-nav { - padding: 5px; - margin-bottom: 2rem; - } - - .blog-logo { - padding: 5px; - } - - .blog-logo img { - height: 30px; - } - - .menu-button { - padding: 0 5px; - border-radius: 0; - border-width: 0; - color: #2e2e2e; - background: transparent; - } - .menu-button:hover { - color: #2e2e2e; - border-color: transparent; - background: none; - } - body.nav-opened .menu-button { - background: none; - border: transparent; - } - - .main-nav.overlay a:hover { - color: #fff; - border-color: transparent; - background: transparent; - } - - .no-cover .main-nav.overlay { - background: none; - } - .no-cover .main-nav.overlay .menu-button { - border: none; - } - - .main-nav.overlay .menu-button { - border-color: transparent; - } - - .nav-title { - top: 25px; - - } - - .nav-close { - position: absolute; - top: 18px; - } - - .nav ul { - padding: 60px 9% 5%; - } - - .inner, - .pagination { - width: auto; - margin: 2rem auto; - } - - .post { - width: auto; - margin-top: 2rem; - margin-bottom: 2rem; - margin-left: 16px; - margin-right: 16px; - padding-bottom: 2rem; - line-height: 1.65em; - } - - .post-date { - display: none; - } - - .post-template .post-header, - .page-template .post-header { - margin-bottom: 2rem; - } - - .post-template .post-date, - .page-template .post-date { - display: inline-block; - } - - hr { - margin: 1.75em 0; - } - - p, ul, ol, dl { - font-size: 0.95em; - margin: 0 0 2.5rem 0; - } - - .page-title { - font-size: 3rem; - } - - .post-excerpt p { - font-size: 0.85em; - } - - .page-description { - font-size: 1.6rem; - } - - h1, h2, h3, - h4, h5, h6 { - margin: 0 0 0.3em 0; - } - - h1 { - font-size: 2.8rem; - letter-spacing: -1px; - } - - h2 { - font-size: 2.4rem; - letter-spacing: 0; - } - - h3 { - font-size: 2.1rem; - } - - h4 { - font-size: 1.9rem; - } - - h5 { - font-size: 1.8rem; - } - - h6 { - font-size: 1.8rem; - } - - body:not(.post-template) .post-title { - font-size: 2.5rem; - } - - body.page-template .post-title { - font-size: 2.8rem; - } - - .post-template .site-footer, - .page-template .site-footer { - margin-top: 0; - } - - .post-content img { - padding: 0; - width: calc(100% + 32px); /* expand with to image + margins */ - min-width: 0; - max-width: 112%; /* fallback when calc doesn't work */ - } - - .post-meta { - font-size: 1.3rem; - margin-top: 1rem; - } - - .post-footer { - padding: 5rem 0 3rem 0; - text-align: center; - } - - .post-footer .author { - margin: 0 0 2rem 0; - padding: 0 0 1.6rem 0; - border-bottom: #EBF2F6 1px dashed; - } - - .post-footer .share { - position: static; - width: auto; - } - - .post-footer .share a { - margin: 1.4rem 0.8rem 0 0.8rem; - } - - .author-meta li { - float: none; - margin: 0; - line-height: 1.75em; - } - - .author-meta li:before { - display: none; - } - - .older-posts, - .newer-posts { - position: static; - margin: 10px 0; - } - - .page-number { - display: block; - } - - .site-footer { - margin-top: 3rem; - } - - .author-profile { - padding-bottom: 2rem; - } - - .post-head.main-header { - height: 30vh; - } - - .tag-head.main-header, - .author-head.main-header { - height: 20vh; - } - - .post-footer .author-image { - top: -60px; - } - - .author-profile .author-image { - margin-top: -70px; - } - - .author-profile .author-meta span { - font-size: 1.4rem; - } - - .paged .main-header .page-description { - display: none; - } - - .gh-subscribe { - padding: 15px; - } - - .gh-subscribe form { - margin-top: 10px; - } - - .read-next { - margin-top: 2rem; - margin-bottom: -37px; - } - - .read-next .post { - width: 100%; - } - -} - - -/* ========================================================================== - 14. Animations - ========================================================================== */ - -/* Used to fade in title/desc on the home page */ -@-webkit-keyframes fade-in-down { - 0% { - opacity: 0; - -webkit-transform: translateY(-10px); - transform: translateY(-10px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} -@keyframes fade-in-down { - 0% { - opacity: 0; - -webkit-transform: translateY(-10px); - transform: translateY(-10px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); +@media (max-width: 900px) { + .floating-header { height: 40px; } + .floating-header-share-tw, + .floating-header-share-fb { + height: 40px; + width: 40px; + line-height: 38px; } } -/* Used to bounce .scroll-down on home page */ -@-webkit-keyframes bounce { - 0%, 10%, 25%, 40%, 50% { - -webkit-transform: translateY(0) rotate(-90deg); - transform: translateY(0) rotate(-90deg); - } - 20% { - -webkit-transform: translateY(-10px) rotate(-90deg); - transform: translateY(-10px) rotate(-90deg); - } - 30% { - -webkit-transform: translateY(-5px) rotate(-90deg); - transform: translateY(-5px) rotate(-90deg); - } -} -@keyframes bounce { - 0%, 10%, 25%, 40%, 50% { - -webkit-transform: translateY(0) rotate(-90deg); - transform: translateY(0) rotate(-90deg); - } - 20% { - -webkit-transform: translateY(-10px) rotate(-90deg); - transform: translateY(-10px) rotate(-90deg); - } - 30% { - -webkit-transform: translateY(-5px) rotate(-90deg); - transform: translateY(-5px) rotate(-90deg); - } +@media (max-width: 800px) { + .floating-header-logo { margin-left: 10px; } + .floating-header-logo a { color: #2e2e2e; } + .floating-header-title, + .floating-header-divider { visibility: hidden; } } - -/* ========================================================================== - End of file. Animations should be the last thing here. Do not add stuff - below this point, or it will probably fuck everything up. - ========================================================================== */ +@media (max-width: 450px) { + .floating-header-share-label { display: none; } +} diff --git a/assets/fonts/casper-icons.eot b/assets/fonts/casper-icons.eot deleted file mode 100755 index 2c0447034d2ba6d99bba32f832ab85d09c84c5e8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2660 zcmai0O>7&-6@G82o#igcT~g$d68}naC6cltiYB>~W%);O(8PvhB(hSsg^^T>tRGjl ztk_B#_fj2tC>j)T(2L_ro=(At%)w`^j_wEuuUa{21gqQ0U11*Te{^H&z%+9aE9fPNWtVPo;i@|~9& zUxD6&kLKpp>sy#7K>w|jQ$QiUNh)NsyaLV(z5YuYq@T)hPXJ@u2Vt7%kZ2p*4GKaA_f&YKcfaa(!Gq2t@^J3{-RSFScmgy`j8T?n z#pfXzCMG?X`+om74=e5N!s#w%p<~gYEO{t$-E?XS_@j zkK-n=56{yDdX3)1j$%GpwkMKp1g=sRsXV8K-B#HtmIRjAJj#bPCy#{*&0n66Hydp? z=GczwxJ|cdH`SxutT948Axd)9IfkxQZdH=Xf>zKl)xJKxFI($RjHfR!;DIP- zjbykq6%*t6n_!H|5GZ_$PmYaEGanxtJH@{mbsC3D@odSMD(1#xv4j~Z>4U8b0@!dk zB+V~$jX^6I3v$dVF6*J=imKo%B(w3p01qZ|6}VM(RaRIp|DuG%V8qFeC6djej0oZu z--}ACJ;gSXBZoln2c7qw23(z&ZE${}RvVxE-sxy?A;P#xXTlVpp|{lg z_r02FcK^*g{0Ythn+lk36S%ed`R{E20B&hlNu zdd~`VzTm--b=xwww+&04JlhoKZT=AFZ4Mq}Rpgb!b)-D(*?t}RHOb`8RO?lIGj6V0 z&B>oXoN;SQ^X>NhQq7(D<49IAvm?@O6Lxp_mo!S>MZO{i$R=dkNu*dR*_ddzkhT^o zQr4U-GEY(|m$Z0|B_D$jF)2e9TP(^_CKCH&WkP;xN6MzqG;uamjcRsK)3US9tZ7-M z>BReoOk3k1*k9ykGHD-8o5hG!IG4=|Pa%@C;+6QE)LFA55iP3gF)Vc@(yQuyoe;Q zkrOD@3QoC+b~E;Mmiu+qG;iwypm%!x|E1S8p$9doq6@7{pnLoLFv=K#nkJO(M0s^9Rx16~vVcCR1x zlnmU3c{+`I_8EpglANOtgxNpTro;l0!rX$$>D@Lt0Ms6b~tD`zoM PzVd3`J^geLpQQf_%H?MW diff --git a/assets/fonts/casper-icons.svg b/assets/fonts/casper-icons.svg deleted file mode 100755 index e0d40ac..0000000 --- a/assets/fonts/casper-icons.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/fonts/casper-icons.ttf b/assets/fonts/casper-icons.ttf deleted file mode 100755 index b67da6b831ce98aee5501f45ed6da39ddda883c7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2504 zcmai0O>7(25uRCU-*T7aE-7+JiGL-z(vq?wiYB>~W%);O(8PvhB(hSsg^^T>q950` zti(zh_fj5uC>j(=(Tn3=dMOa3h*7`?13}l=T)|H(Xr3d&osXRy$c_$ovYV&u}^^hwv|M-tX^IiSa@xb8!GAA5kz$k132&nxY{( zg4v)jDfls!zSR3)_50uvaPo2P|IHX0X!rsQOpH~QZzbTt_ROsB@`2y~%|oR9eK_66 zE_5;}Nh3r_yX=(<><=x^Dccy5azMs+O8{(*DNZwGs$hYT4%>AhBD*Lw4D-8#r4{q7XSXcuiRK(fA3e%UO0Q9Rw-Yc znE&a@F{O7uH$I-rx^A{~{>ICvo?m+Xy&oU?;h1yid7gdl`l)Up%Z*FFGUhm9`6E3J z!es3P&tQbNim+4ZOr5JHOQhmfQw@oj5V_SNw}2dCi8N0r-ZA!|sgPNW$47)!88&N~ z$rB1czEjo0SvxjjG{!VjQw`PVIJqarMNBy79y`6WShcbd{+ZAfqd2U`Le}u{$3#?w z<{HtQnX8+cV0LH2tT2}*>=90ncFtdFhqO>M=U0;WI&T8s;YqqcFVL&_qS#NK?U{53 ziL1IIQ{>FJ*LIz9MIgl1Q9i6WMFb|aAiMx?H9KCyu^rFxT3*X;sYkh0XQX;YRAkfz zhOXwetLaomrUq$pg;wM_Zg*h4O0QNXgqU@Lk$>5Adhb-4oId)U%CBoj@`Zdl9dn{% zIfZXJ&6Uy$p5Aj|D{PqR(2zcquMelDvlkd}Pq=v_9j(kI#B}jZFs5V*6u!YHr>5qa zk55gV;@?g>&BK*szGBRk3)6{2%8XU?(RLLHY&sl~=2!a0s1;6xIboI8^~iBWRq&M3 z`Q%WDM^l9=+^V{Y9y+MMIH52Yd9o9!bgL{gg1jXUveNF%v5n#=AQAkB-aAecuFlIb zyu4DcPtX3~bUeHg<9!+Xfv`{e`)3-BnWqz0?F?$}4bu4~zJo7DO<%Zl_q=h29D(=xhU!y@FROG)nX zyEtzP@F2UQs2pyfqwa}5W=VX)llB!$Ll697REJDVl3{`Bg zaHUM79;}rG`Jo+iO`&PxY@`;~?69Wg7oA1ZvP{!S4v(3(#$m8OFD&G;0h%?-F{yAa zpBKJDtY9Up$t9_?WyfM#T-Os~F>1#(Eo^If!&!_usib2{uzd}73n7@3-m<0^4K$YW z2FyYu7E30VVq;0D_}_4n=J^x8M8l{%oaxCjioixqpjE3l2s5CzF0cI3oelDdgx$pIK^ppzz>068sI~~pBmsQr9lO;2;BXL2Dm|O zT9S9}kPeQt8Q_7<01s>icwjTY1DgRZpgTR#4QyVdHM&aMbdAo_I=zhfqEDCTFx9C6 zY9PP3c6D0{50;<9@=bb$F4HR19`K*^)prrzCRS|wMptPU^NZlUfImPbI^$b8i7(25uRCU-*T7aE-7+JiGLxv5=mJRMU!00vizgCh+{)CTv@4`!bmDb(T`(W zc4Ftpy_AO@iUvgz7!ty0x z8<6KE8Nc{?X?^*!#Qq9du9XyBKYw)%*oQ=-F6rNQKR>*&y8IlG_BH0)k^-*{4sQU2 z$_QkS0(bbEjSE*^1$GSBK1nw5JLfO1$aNjac}e=F_OA=euflKe9moZbY`VI+d|?&X z-{HF{>Bi3+-(9+R`3mCv&;4})Z~=w*4N|dYp0QJUqCb91!}L4IyBkM$OOl@@x~KDY zZ<`7X0>Yr3R`3`Fz4VkoFJ}`p;KgGgLkfOOg?oDMyI#**UARXc&%G~ z%G%`vwx^~&mk<2@e+-fKw&8ReyU@v`I1LfS?V?-EvDYVQ&N#Qql^Q#4K9Cx1B<+N7N@cgz zZt|ZWf9cxd>IZ*(^2~`d)l%{7*z9kX4k+EbnbFZqx?D~dPG5WR$TJJCeenFAUyV3> zp5f`IuO8|6bD2@;SH>JgEbr4}5KPt%@f3P^D+xQ1Ox3tzvSdo-N}?_q6I10%o||Cy zuw)vC6!!qT&{W9GN25c+Dh-;|)c7HVAG=i1f@wQ4WYkAAQ&SDqXgisojf#kHPCa_; z(tO2AhxoTbSB(6i9tl{32Okw-5tylmGiIh{YJ#~u9b|>MFlG;Na=3l^Tq~dj!WplU z#QnSpyoaN7hMuLD@kX(qEZbAbHWF7Ui&UOdqi(D06iWgjHuv*h&B-G$q50wYe6!JZ zV~*{(j@xvbc2nKY%^D-sQ=%lJ&M|bga;uU|q-1K4rn1oTJj1OvtXJse(wGp_j^Fbi z8cz4!QiGHGA1S?A-IvW}lgWq^9?2+t-DxZpmhg0+4q8FOR0jt1foyFsF_}KYXm><8 zYb3*^nV6W&zX4!Era<9qe0XAFmiges#1a0}xYO8Mif2p4OffeZizUoRNgr-ikidq+ zA!&Z8XAE1xSde2@aa9i;R8$2|A(@R21b8@+tH7t@) z=3XbAU*KDKV>FsfXreU9<k7Xs89g}vOu)D=?(K!7Q^@<#znowznQDUiNW2)Uk*;+V} z^32IY=FL>fB`scKiDMBmCg)Ja7K^f+6Nv|FWkG&wN6MzqG;tzSjcRsK)3WoBI*|Ok3k1;IDFXnY7QQ&0<6TKANh!)lLn3xaSQB4clTGnvp zBTgdjn6lZP2A6XIn3LYprWW=!7P1D+LL(B1#}^_aaj1CjaGYlOb3R9ds5{(I@gj=A zMor+TR`8XZYBys)hTI=Rv)s`In%?b?KPjKngdWtSiY~MsLGlei>g*P&Q zZVvt0I`A!pjO&7>Rs{V>kZ&ff49r|CW( z0AA?x1K^+N^C~4F`LPJx{d@YnK`mO4ckX}=MB4Ou-=@#|Hhtc=>GQr#pBK=b?CbhA z&(aEAq)oa^r)ia5#CX<|3$&MNREN}`Kf7{qQ%>$IKZWJ%^b(z?WvD&Ck9z7?5Z*dg iY\n
\n Centered content\n
\n\n\n*/\n\n/* Home page\n/* ---------------------------------------------------------- */\n\n@media (min-width: 900px) {\n .home-template .post-feed {\n margin-top: -100px;\n }\n .home-template .site-nav {\n position: relative;\n top: -70px;\n z-index: 300;\n }\n}\n\n\n/* Site Header\n/* ---------------------------------------------------------- */\n\n.site-header {\n position: relative;\n padding-top: 12px;\n padding-bottom: 12px;\n color: #fff;\n background: color(var(--darkgrey) l(-15%)) no-repeat center center;\n background-size: cover;\n}\n\n.site-header:before {\n display: block;\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n background: rgba(0,0,0,0.18);\n}\n\n.site-header:after {\n display: block;\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 10;\n height: 60px;\n background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));\n}\n\n.site-header.no-cover:before,\n.site-header.no-cover:after {\n display: none;\n}\n\n.site-header-content {\n position: relative;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 10vw 0;\n min-height: 200px;\n max-height: 450px;\n text-align: center;\n}\n\n.site-title {\n margin: 0;\n padding: 0;\n font-size: 3.8rem;\n font-weight: 700;\n}\n\n.site-logo {\n max-height: 45px;\n}\n\n.site-description {\n margin: 0;\n padding: 5px 0;\n font-size: 2.2rem;\n font-weight: 300;\n letter-spacing: 0.5px;\n opacity: 0.8;\n}\n\n\n/* Site Navigation\n/* ---------------------------------------------------------- */\n\n.site-nav {\n position: relative;\n z-index: 100;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n height: 40px;\n font-size: 1.3rem;\n overflow-y: hidden;\n}\n\n.site-nav-left {\n display: flex;\n align-items: center;\n margin-right: 10px;\n padding-bottom: 80px;\n white-space: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-scrolling: touch;\n}\n\n/* Site Nav Hack Explanation (above):\n\nWhat's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them.\n\nThe knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.\n\n*/\n\n.site-nav-logo {\n display: block;\n margin-right: 24px;\n}\n\n.site-nav-logo img {\n display: block;\n height: 21px;\n width: auto;\n}\n\n.nav-menu ul {\n display: flex;\n margin: 0 0 0 -12px;\n padding: 0;\n list-style: none;\n}\n\n.nav-item {\n display: block;\n margin: 0;\n padding: 0;\n text-transform: uppercase;\n}\n\n.nav-item a {\n display: block;\n margin: 0;\n padding: 10px 12px;\n color: #fff;\n opacity: 0.8;\n}\n\n.nav-item a:hover {\n opacity: 1;\n text-decoration: none;\n}\n\n.site-nav-right {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.social-links {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.social-links a:last-of-type {\n padding-right: 20px;\n}\n\n.social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 10px;\n color: #fff;\n opacity: 0.8;\n}\n\n.social-link:hover {\n opacity: 1;\n}\n\n.social-link svg {\n height: 1.8rem;\n fill: #fff;\n}\n\n.social-link-fb svg {\n height: 1.5rem;\n}\n\n.subscribe-button {\n display: block;\n padding: 4px 10px;\n border: #fff 1px solid;\n color: #fff;\n font-size: 1.2rem;\n line-height: 1em;\n border-radius: 10px;\n opacity: 0.8;\n}\n\n.subscribe-button:hover {\n text-decoration: none;\n opacity: 1;\n}\n\n.rss-button {\n opacity: 0.8;\n}\n\n.rss-button:hover {\n opacity: 1;\n}\n\n.rss-button svg {\n height: 2.1rem;\n margin-bottom: 1px;\n fill: #fff;\n}\n\n\n/* Site Navigation\n/* ---------------------------------------------------------- */\n\n.post-feed {\n position: relative;\n z-index: 200;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -15px;\n padding: 30px 0 0 0;\n}\n\n.post-card {\n flex: 1 1 300px;\n margin: 0 15px 30px;\n background: #fff center center;\n background-size: cover;\n box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;\n border-radius: 5px;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n\n.post-card:hover {\n box-shadow: 0 0 1px rgba(39,44,49,0.10), 0 3px 16px rgba(39, 44, 49,0.07);\n transform: translate3D(0, -1px, 0);\n transition: all 0.3s ease;\n}\n\n.post-card-image-link {\n position: relative;\n}\n\n.post-card-image {\n width: auto;\n height: 200px;\n background: var(--lightgrey) no-repeat center center;\n background-size: cover;\n}\n\n.post-card-content-link {\n position: relative;\n display: block;\n padding: 25px 25px 0;\n color: var(--darkgrey);\n}\n\n.post-card-content-link:hover {\n text-decoration: none;\n}\n\n.post-card-title {\n margin-top: 0;\n}\n\n.post-card-content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.post-card-excerpt {\n font-family: Georgia, serif;\n}\n\n.post-card-meta {\n padding: 0 25px 25px;\n}\n\n/* Special Styling for first item (below):\n\nThe first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.\n\n */\n\n@media (min-width: 795px) {\n\n .post-feed .post-card:nth-child(6n+1) {\n flex: 1 1 100%;\n display: flex;\n }\n\n .post-feed .post-card:nth-child(6n+1) .post-card-image-link {\n flex: 1 1 auto;\n }\n\n .post-feed .post-card:nth-child(6n+1) .post-card-image {\n width: 100%;\n height: 100%;\n }\n\n .post-feed .post-card:nth-child(6n+1) .post-card-content {\n flex: 0 1 357px;\n }\n\n .post-feed .post-card:nth-child(6n+1) h2 {\n font-size: 2.6rem;\n }\n\n .post-feed .post-card:nth-child(6n+1) p {\n font-size: 1.8rem;\n line-height: 1.55em;\n }\n\n .post-feed .post-card:nth-child(6n+1) .post-card-content-link {\n padding: 30px 30px 0;\n }\n\n .post-feed .post-card:nth-child(6n+1) .post-card-meta {\n padding: 0 30px 30px;\n }\n\n}\n\n\n\n/* Single Post\n/* ---------------------------------------------------------- */\n\n.post-template .site-main {\n background: #fff;\n}\n\n.post-full {\n position: relative;\n z-index: 50;\n}\n/* ^ Required to make .post-full-content:before/after z-index stacking work */\n\n.post-full-header {\n max-width: 1000px;\n margin: 0 auto;\n padding: 10vw 3vw 6vw;\n text-align: center;\n}\n\n.post-full-meta {\n display: flex;\n align-items: center;\n justify-content: center;\n text-transform: uppercase;\n font-weight: 600;\n font-size: 1.4rem;\n color: var(--midgrey)\n}\n\n.post-full-meta-date {\n color: var(--blue);\n\n}\n\n.post-full-title {\n color: var(--darkgrey);\n}\n\n.date-divider {\n display: inline-block;\n margin: 0 6px 1px;\n}\n\n.post-full-image {\n height: 800px;\n margin: -5vw -10vw -165px;\n background: var(--lightgrey) center center;\n background-size: cover;\n border-radius: 5px;\n}\n\n@media (max-width: 1170px) {\n .post-full-image {\n height: 600px;\n margin: -5vw -4vw -100px;\n background: var(--lightgrey) center center;\n background-size: cover;\n }\n}\n\n.post-full-content {\n position: relative;\n max-width: 920px;\n min-height: 230px;\n padding: 70px 100px 0;\n margin: 0 auto;\n font-size: 2.2rem;\n line-height: 1.55em;\n font-family: Georgia, serif;\n background: #fff;\n}\n\n.post-full-content:before {\n display: block;\n content: \"\";\n width: 20px;\n height: 200px;\n transform: rotate(-5deg);\n position: absolute;\n top: 15px;\n left: -5px;\n z-index: -1;\n background: rgba(39,44,49,0.20);\n filter: blur(5px);\n}\n\n.post-full-content:after {\n display: block;\n content: \"\";\n width: 20px;\n height: 200px;\n transform: rotate(5deg);\n position: absolute;\n top: 15px;\n right: -5px;\n z-index: -1;\n background: rgba(39,44,49,0.20);\n filter: blur(5px);\n}\n\n.post-full-content blockquote {\n padding: 0;\n border: 0;\n text-align: center;\n font-size: 3rem;\n line-height: 1.5em;\n color: var(--blue);\n}\n\n@media (min-width: 1000px) {\n .post-full-content blockquote {\n margin-left: -150px;\n margin-right: -150px;\n }\n}\n\n\n/* Post Footer\n/* ---------------------------------------------------------- */\n\n.post-full-footer {\n display: flex;\n justify-content: space-between;\n // max-width: 700px;\n margin: 0 auto;\n padding: 0 0 6vw 0;\n}\n\n.author-card {\n display: flex;\n align-items: center;\n}\n\n.author-card-image {\n height: 60px;\n width: 60px;\n margin-right: 10px;\n}\n\n.author-card-content h4 {\n margin: 0;\n padding: 0;\n}\n\n.author-card-content h4 a {\n color: var(--darkgrey);\n font-weight: 700;\n}\n\n.author-card-content h4 a:hover {\n text-decoration: none;\n}\n\n.author-card-content p {\n margin: 0;\n}\n\n\n/* Subscribe Form\n/* ---------------------------------------------------------- */\n\n.subscribe-form {\n padding: 6vw 0 8vw 0;\n text-align: center;\n}\n\n.subscribe-form-title {\n margin: 0 0 3px 0;\n padding: 0;\n font-size: 2.9rem;\n font-weight: 700;\n color: var(--darkgrey)\n}\n\n.subscribe-form p {\n font-size: 1.8rem;\n line-height: 1.55em;\n}\n\n.subscribe-form form {\n display: flex;\n justify-content: center;\n align-items: center;\n max-width: 420px;\n margin: 0 auto;\n}\n\n.subscribe-form .form-group {\n flex-grow: 1;\n}\n\n.subscribe-email {\n display: block;\n padding: 10px;\n width: 100%;\n border: color(var(--lightgrey) l(+7%)) 1px solid;\n color: var(--midgrey);\n font-size: 1.8rem;\n line-height: 1em;\n font-weight: normal;\n user-select: text;\n border-radius: 5px;\n transition: border-color 0.15s linear;\n\n -webkit-appearance: none;\n}\n\n.subscribe-email:focus {\n outline: 0;\n border-color: color(var(--lightgrey) l(-2%));\n}\n\n.subscribe-form button {\n display: inline-block;\n outline: none;\n margin: 0 0 0 10px;\n padding: 0 20px;\n height: 41px;\n font-size: 1.3rem;\n line-height: 37px;\n font-weight: 400;\n color: #fff;\n text-shadow: 0 -1px 0 rgba(0,0,0,0.1);\n text-align: center;\n border-radius: 5px;\n background: linear-gradient(\n color(var(--blue) whiteness(+7%)),\n color(var(--blue) lightness(-7%) saturation(-10%)) 60%,\n color(var(--blue) lightness(-7%) saturation(-10%)) 90%,\n color(var(--blue) lightness(-4%) saturation(-10%))\n );\n box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14);\n\n -webkit-font-smoothing: subpixel-antialiased;\n}\n\n.subscribe-form button:active,\n.subscribe-form button:focus {\n background: color(var(--blue) lightness(-9%) saturation(-10%));\n}\n\n\n/* Related posts\n/* ---------------------------------------------------------- */\n\n.read-next-feed {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -15px;\n padding: 30px 0 0 0;\n}\n\n.read-next-card {\n position: relative;\n flex: 1 1 300px;\n margin: 0 15px 30px;\n padding: 25px;\n color: #fff;\n background: var(--darkgrey) center center;\n background-size: cover;\n box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.read-next-card:before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: linear-gradient(135deg, rgba(62,176,239,0.90) 0%,rgba(46,138,172,0.80) 100%);\n}\n\n.read-next-card-header {\n position: relative;\n z-index: 50;\n text-align: center;\n}\n\n.read-next-card-header-title {\n padding: 10px 20px;\n margin: 0;\n font-size: 3rem;\n line-height: 1.2em;\n font-weight: 200;\n letter-spacing: 1px;\n}\n\n.read-next-card-content {\n position: relative;\n z-index: 50;\n font-size: 1.7rem;\n}\n\n.read-next-card-content a {\n color: #fff;\n}\n\n.read-next-card-content ol {\n margin: 0;\n padding: 0 0 0 2em;\n}\n\n.read-next-card-content li {\n padding-left: 5px;\n margin: 20px 0;\n font-size: 1.8rem;\n line-height: 1.8rem;\n font-weight: 200;\n}\n\n.read-next-card-content li a {\n display: inline-block;\n vertical-align: top;\n font-size: 1.6rem;\n font-weight: 500;\n}\n\n\n/* Site Footer\n/* ---------------------------------------------------------- */\n\n.site-footer {\n position: relative;\n padding-top: 20px;\n padding-bottom: 60px;\n color: #fff;\n background: color(var(--darkgrey) l(-15%));\n}\n\n.site-footer-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: rgba(255,255,255,0.7);\n font-size: 1.3rem;\n}\n\n.site-footer-content a {\n color: rgba(255,255,255,0.7);;\n}\n\n.site-footer-content a:hover {\n color: rgba(255,255,255,1);\n text-decoration: none;\n}\n\n.site-footer-nav {\n display: flex;\n}\n\n.site-footer-nav a {\n position: relative;\n margin-left: 20px;\n}\n\n.site-footer-nav a:before {\n content: \"\";\n display: block;\n height: 2px;\n width: 2px;\n position: absolute;\n top: 11px;\n left: -11px;\n border-radius: 100%;\n background: #fff;\n}\n\n.site-footer-nav a:first-of-type:before {\n display: none;\n}\n\n\n\n\n\n\n/* ==========================================================================\n Floating Header\n ========================================================================== */\n\n.floating-header {\n visibility: hidden;\n display: flex;\n align-items: center;\n position: fixed;\n height: 48px;\n border-bottom: rgba(0,0,0,0.06) 1px solid;\n z-index: 1000;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(255,255,255,0.95);\n transform: translate3d(0, -120%, 0);\n transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.floating-active {\n visibility: visible;\n transform: translate3d(0, 0, 0);\n transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);\n}\n\n.floating-header-logo {\n margin: 0 0 0 15px;\n font-size: 1.5rem;\n line-height: 1.3em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.floating-header-logo a {\n display: flex;\n align-items: center;\n color: var(--darkgrey);\n font-weight: 700;\n line-height: 1em;\n}\n\n.floating-header-logo a:hover {\n text-decoration: none;\n}\n\n.floating-header-logo img {\n max-height: 20px;\n margin-right: 10px;\n}\n\n.floating-header-divider {\n margin: 0 5px;\n line-height: 1em;\n}\n\n.floating-header-title {\n flex: 1;\n margin: 0;\n font-weight: bold;\n font-size: 1.5rem;\n line-height: 1.3;\n color: #2e2e2e;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.floating-header-share {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-left: 2%;\n font-size: 1.3rem;\n line-height: 1;\n}\n\n.floating-header-share a {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.floating-header-share svg {\n fill: #fff;\n height: 16px;\n width: auto;\n}\n\n.floating-header-share-label {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n margin-right: 10px;\n color: rgba(0,0,0,0.7);\n font-weight: 500;\n}\n\n.floating-header-share-label svg {\n width: 18px;\n height: 18px;\n margin: 0 5px 0 10px;\n stroke: rgba(0,0,0,0.7);\n transform: rotate(90deg);\n}\n\n.floating-header-share-tw,\n.floating-header-share-fb {\n display: block;\n width: 48px;\n height: 48px;\n line-height: 45px;\n align-items: center;\n text-align: center;\n color: #fff;\n transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.floating-header-share-tw {\n background: #33b1ff;\n}\n\n.floating-header-share-fb {\n background: #005e99;\n}\n\n@media (max-width: 900px) {\n .floating-header { height: 40px; }\n .floating-header-share-tw,\n .floating-header-share-fb {\n height: 40px;\n width: 40px;\n line-height: 38px;\n }\n}\n\n@media (max-width: 800px) {\n .floating-header-logo { margin-left: 10px; }\n .floating-header-logo a { color: #2e2e2e; }\n .floating-header-title,\n .floating-header-divider { visibility: hidden; }\n}\n\n@media (max-width: 450px) {\n .floating-header-share-label { display: none; }\n}\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/default.hbs b/default.hbs index 8dac16c..5ef9993 100644 --- a/default.hbs +++ b/default.hbs @@ -1,55 +1,69 @@ + {{!-- Document Settings --}} - {{!-- Page Meta --}} + {{!-- Base Meta --}} {{meta_title}} - - - {{!-- Mobile Meta --}} - {{!-- Brand icon --}} - - {{!-- Styles'n'Scripts --}} - - + - - {{!-- Ghost outputs important style and meta data with this tag --}} + {{!-- This tag outputes SEO meta+structured data and other important settings --}} {{ghost_head}} - - - {{!-- The blog navigation links --}} - {{navigation}} + +
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} {{{body}}} - {{!-- The tiny footer at the very bottom --}} -
- {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}} + {{!-- jQuery + Fitvids, which makes all video embeds responsive --}} - {{!-- Ghost outputs important scripts and data with this tag --}} - {{ghost_foot}} - {{!-- Fitvids makes video embeds responsive and awesome --}} - {{!-- The main JavaScript file for Casper --}} - + + + {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}} + {{ghost_foot}} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..fed07c4 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,95 @@ +var gulp = require('gulp'); + +// gulp plugins and utils +var csscomb = require('gulp-csscomb'); +var del = require('del'); +var extReplace = require('gulp-ext-replace'); +var gutil = require('gulp-util'); +var livereload = require('gulp-livereload'); +var nodemon = require('gulp-nodemon'); +var postcss = require('gulp-postcss'); +var replace = require('gulp-replace'); +var svgmin = require('gulp-svgmin'); +var sourcemaps = require('gulp-sourcemaps'); + +// postcss plugins +var autoprefixer = require('autoprefixer'); +var colorFunction = require('postcss-color-function'); +var cssnano = require('cssnano'); +var customProperties = require('postcss-custom-properties'); +var easyimport = require('postcss-easy-import'); + +var swallowError = function swallowError(error) { + gutil.log(error.toString()); + gutil.beep(); + this.emit('end'); +}; + +var nodemonServerInit = function () { + livereload.listen(1234); + + return nodemon({ + ignore: ['gulpfile.js', 'assets/', 'public/', 'cachefiles/', 'locales/'] + }).on('restart', function () { + gulp.src('app.js') + .pipe(livereload()); + }); +}; + +gulp.task('build', ['css', 'icons'], function (/* cb */) { + return nodemonServerInit(); +}); + +gulp.task('css', function () { + var processors = [ + easyimport, + customProperties, + colorFunction(), + autoprefixer({browsers: ['last 2 versions']}), + cssnano() + ]; + gulp.src('assets/css/*.css') + .on('error', swallowError) + .pipe(sourcemaps.init()) + .pipe(postcss(processors)) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest('assets/public/')) + .pipe(livereload()); +}); + +gulp.task('comb', function () { + return gulp.src('assets/css/**/*.css') + .pipe(csscomb()) + .pipe(gulp.dest('assets/css/.')); +}); + +gulp.task('clean:icons', function () { + return del(['public/icons', 'views/partials/icons/*.hbs']); +}); + +gulp.task('icons', ['clean:icons'], function () { + gulp.src('assets/icons/**/*.svg') + .pipe(replace(/#(?:[0-9a-f]{3}){1,2}/gi, 'currentColor')) + .pipe(svgmin({ + plugins: [{ + removeDimensions: true + }, { + removeTitle: true + }] + })) + .pipe(gulp.dest('public/icons')) + .pipe(extReplace('.hbs')) + .pipe(gulp.dest('views/partials/icons')) + .on('end', function () { + livereload.reload(); + }); +}); + +gulp.task('watch', function () { + gulp.watch('assets/css/**', ['css']); + gulp.watch('assets/icons/**/*.svg', ['icons']); +}); + +gulp.task('default', ['build'], function () { + gulp.start('watch'); +}); diff --git a/index.hbs b/index.hbs index 8ca8780..1d5445d 100644 --- a/index.hbs +++ b/index.hbs @@ -1,27 +1,52 @@ {{!< default}} -{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} +{{!-- The tag above means: insert everything in this file +into the {body} of the default.hbs template --}} -{{!-- The big featured header --}} -
- -
-
-

{{@blog.title}}

-

{{@blog.description}}

+{{!-- The big featured header, it uses blog cover image as a BG if available --}} +
+
+
+

+ {{#if @blog.logo}} + + {{else}} + {{@blog.title}} + {{/if}} +

+

{{@blog.description}}

+
-
-{{!-- The main content area on the homepage --}} -
+{{!-- The main content area --}} +
+
- {{!-- The tag below includes the post loop - partials/loop.hbs --}} - {{> "loop"}} + {{!-- The tag below includes the post loop - partials/loop.hbs --}} + {{> "loop"}} +
diff --git a/package.json b/package.json index 5791615..cfb36ce 100644 --- a/package.json +++ b/package.json @@ -32,5 +32,30 @@ "url": "https://github.com/TryGhost/Casper.git" }, "bugs": "https://github.com/TryGhost/Casper/issues", - "contributors": "https://github.com/TryGhost/Casper/graphs/contributors" + "contributors": "https://github.com/TryGhost/Casper/graphs/contributors", + "devDependencies": { + "autoprefixer": "6.3.6", + "connect-livereload": "0.5.4", + "cssnano": "3.7.1", + "del": "2.2.1", + "gulp": "3.9.1", + "gulp-csscomb": "3.0.7", + "gulp-ext-replace": "0.3.0", + "gulp-live-server": "0.0.30", + "gulp-livereload": "3.8.1", + "gulp-nodemon": "2.1.0", + "gulp-postcss": "6.1.1", + "gulp-replace": "0.5.4", + "gulp-sourcemaps": "1.6.0", + "gulp-svgmin": "1.2.2", + "gulp-util": "3.0.7", + "gulp-watch": "4.3.8", + "postcss-color-function": "2.0.1", + "postcss-custom-properties": "5.0.1", + "postcss-easy-import": "1.0.1", + "postcss-import": "8.1.2" + }, + "config": { + "posts_per_page": 25 + } } diff --git a/page.hbs b/page.hbs index 9bea823..1790389 100644 --- a/page.hbs +++ b/page.hbs @@ -3,17 +3,38 @@ {{!-- This is a page template. A page outputs content just like any other post, and has all the same attributes by default, but you can also customise it to behave differently if you prefer. --}} +{{!-- The big featured header, it uses blog cover image as a BG if available --}} +
+
+ +
+
+ {{!-- Everything inside the #post tags pulls data from the page --}} {{#post}} -
- -
diff --git a/partials/floating-header.hbs b/partials/floating-header.hbs new file mode 100644 index 0000000..dd05502 --- /dev/null +++ b/partials/floating-header.hbs @@ -0,0 +1,23 @@ +
+ + — +
{{title}}
+
+
Share this {{> "icons/point"}}
+ + {{> "icons/twitter"}} + + + {{> "icons/facebook"}} + +
+
diff --git a/partials/icons/facebook.hbs b/partials/icons/facebook.hbs new file mode 100755 index 0000000..7332072 --- /dev/null +++ b/partials/icons/facebook.hbs @@ -0,0 +1 @@ + diff --git a/partials/icons/ghost-logo.hbs b/partials/icons/ghost-logo.hbs new file mode 100644 index 0000000..637a2b5 --- /dev/null +++ b/partials/icons/ghost-logo.hbs @@ -0,0 +1 @@ +Ghost Logo diff --git a/partials/icons/point.hbs b/partials/icons/point.hbs new file mode 100644 index 0000000..f3c7025 --- /dev/null +++ b/partials/icons/point.hbs @@ -0,0 +1,3 @@ + + + diff --git a/partials/icons/rss.hbs b/partials/icons/rss.hbs new file mode 100644 index 0000000..3840238 --- /dev/null +++ b/partials/icons/rss.hbs @@ -0,0 +1 @@ + diff --git a/partials/icons/twitter.hbs b/partials/icons/twitter.hbs new file mode 100644 index 0000000..19de4af --- /dev/null +++ b/partials/icons/twitter.hbs @@ -0,0 +1 @@ + diff --git a/partials/loop.hbs b/partials/loop.hbs index 0aa0297..5714e02 100644 --- a/partials/loop.hbs +++ b/partials/loop.hbs @@ -1,25 +1,27 @@ -{{!-- Previous/next page links - only displayed on page 2+ --}} -
- {{pagination}} +
+ {{!-- This is the post loop - each post will be output using this markup --}} + {{#foreach posts}} + + {{/foreach}}
- -{{!-- This is the post loop - each post will be output using this markup --}} -{{#foreach posts}} -
-
-

{{title}}

-
-
-

{{excerpt words="26"}} »

-
-
- {{#if author.image}}{{author.name}}{{/if}} - {{author}} - {{tags prefix=" on "}} - -
-
-{{/foreach}} - -{{!-- Previous/next page links - displayed on every page --}} -{{pagination}} diff --git a/partials/navigation.hbs b/partials/navigation.hbs index 1cf8d82..7367950 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,17 +1,7 @@ -
-

Menu

- - - +
- {{#if @labs.subscribers}} - - {{else}} - - {{/if}}
- diff --git a/partials/share.hbs b/partials/share.hbs new file mode 100644 index 0000000..5c75ec4 --- /dev/null +++ b/partials/share.hbs @@ -0,0 +1,36 @@ + diff --git a/post.hbs b/post.hbs index 5d85551..ce0629b 100644 --- a/post.hbs +++ b/post.hbs @@ -1,110 +1,199 @@ {{!< default}} +{{!-- The tag above means: insert everything in this file +into the {body} of the default.hbs template --}} -{{!-- The comment above "< default" means - insert everything in this file into - the {{{body}}} of the default.hbs template, containing the blog header/footer. --}} +{{!-- The big featured header, it uses blog cover image as a BG if available --}} +
+
+ +
+
{{!-- Everything inside the #post tags pulls data from the post --}} {{#post}} -
- -
+{{> floating-header}} -
-
+
+
-
-

{{title}}

-
- {{tags prefix=" on "}} -
-
+
-
- {{content}} -
+
+
+ + {{#if tags}} + / {{tags.[0].name}} + {{/if}} +
+

{{title}}

+
-
- - {{!-- Everything inside the #author tags pulls data from the author --}} - {{#author}} - - {{#if image}} -
- + {{#if feature_image}} +
{{/if}} -
-

{{name}}

- - {{#if bio}} -

{{bio}}

- {{else}} -

Read more posts by this author.

- {{/if}} -
- {{#if location}}{{location}}{{/if}} - {{#if website}}{{website}}{{/if}} -
-
- - {{/author}} - -
+
-
+ {{!-- Everything inside the #author tags pulls data from the author --}} +
+ {{#author}} + + {{#if profile_image}} +
+ +
+ {{/if}} + +
+

{{name}}

+ + {{#if bio}} +

{{bio}}

+ {{else}} +

Read more posts by this author.

+ {{/if}} +
+ {{#if location}}{{location}}{{/if}} + {{#if website}}{{website}}{{/if}} +
+
+ + {{/author}} +
+ + + + + +
+ +
{{!-- Links to Previous/Next posts --}} -