From 7345d0dbe7b94cc5afd042bb36bc8f04fc5cf2b9 Mon Sep 17 00:00:00 2001 From: Christiaan Goossens Date: Thu, 8 Jun 2017 14:36:32 +0200 Subject: [PATCH] The beginnings of building a new theme from the casper base. --- assets/css/screen.css | 2253 ++++++++++++++++++++++++++++++++ assets/fonts/casper-icons.eot | Bin 0 -> 2660 bytes assets/fonts/casper-icons.svg | 20 + assets/fonts/casper-icons.ttf | Bin 0 -> 2504 bytes assets/fonts/casper-icons.woff | Bin 0 -> 2580 bytes assets/js/index.js | 56 + assets/js/jquery.fitvids.js | 67 + author.hbs | 41 + default.hbs | 49 + index.hbs | 27 + package.json | 15 + page.hbs | 31 + partials/loop.hbs | 25 + partials/navigation.hbs | 17 + post.hbs | 110 ++ tag.hbs | 34 + 16 files changed, 2745 insertions(+) create mode 100644 assets/css/screen.css create mode 100644 assets/fonts/casper-icons.eot create mode 100644 assets/fonts/casper-icons.svg create mode 100644 assets/fonts/casper-icons.ttf create mode 100644 assets/fonts/casper-icons.woff create mode 100644 assets/js/index.js create mode 100644 assets/js/jquery.fitvids.js create mode 100644 author.hbs create mode 100644 default.hbs create mode 100644 index.hbs create mode 100644 package.json create mode 100644 page.hbs create mode 100644 partials/loop.hbs create mode 100644 partials/navigation.hbs create mode 100644 post.hbs create mode 100644 tag.hbs diff --git a/assets/css/screen.css b/assets/css/screen.css new file mode 100644 index 0000000..88fb487 --- /dev/null +++ b/assets/css/screen.css @@ -0,0 +1,2253 @@ +/* ========================================================================== + 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); +} + +body { + 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; +} + +::-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 { + text-indent: -9999px; + visibility: hidden; + display: none; +} + +/* Creates a responsive wrapper that makes our content scale nicely */ +.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; + 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%; +} + +.main-nav { + position: relative; + padding: 35px 40px; + margin: 0 0 30px 0; +} + +.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; + 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; +} + +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 { + 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; +} +.nav li { + margin: 0; +} +.nav li a { + text-decoration: none; + line-height: 1.4; + font-size: 1.4rem; + display: block; + padding: 0.6rem 4%; + overflow: hidden; + 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; +} + +.nav a:link, +.nav a:visited { + color: #B8B8B8; +} + +.nav li.nav-current a, +.nav a:hover, +.nav a:active, +.nav a:focus { + color: #fff; +} + +.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 { + color: #fff; + -webkit-animation: none; + animation: none; +} + +/* 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; + opacity: 1; + text-align: center; + font-size: 12px; + text-transform: uppercase; + line-height: 35px; + white-space: nowrap; + border-radius: 3px; + 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); + 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 { + 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 { + width: auto; +} + +/* 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 { + display: block; +} + + +/* ========================================================================== + 10. Subscribe - Generate those email subscribers + ========================================================================== */ + +.gh-subscribe { + border: #e7eef2 1px solid; + padding: 3rem; + margin-top: 3rem; + text-align: center; + background: #f5f8fa; + border-radius: 5px; +} + +.gh-subscribe-title { + margin-bottom: 0; + font-size: 2.4rem +} + +.gh-subscribe p { + margin-top: 0; + font-size: 1.5rem; +} + +.gh-subscribe form { + display: flex; + justify-content: center; + margin: 20px 0 0 0; +} + +.gh-subscribe .form-group { + flex-grow: 1; + max-width: 300px; +} + +.gh-subscribe .subscribe-email { + box-sizing: border-box; + width: 100%; + margin: 0; + border-radius: 4px 0 0 4px; + transition: all ease 0.5s; +} + +.gh-subscribe .subscribe-email:focus { + border: #5ba4e5 1px solid; + transition: all ease 0.2s; +} + +.gh-subscribe button { + margin-left: -1px; + border-radius: 0 4px 4px 0; +} + +.gh-subscribe-rss { + font-family: 'Open Sans', sans-serif; + font-size: 1.2rem; + line-height: 1.4em; +} + +/* ========================================================================== + 11. Footer - The bottom of every page + ========================================================================== */ + +.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; +} + +.site-footer a { + color: #BBC7CC; + text-decoration: none; + font-weight: bold; +} + +.site-footer a:hover { + border-bottom: #bbc7cc 1px solid; +} + +.poweredby { + display: block; + width: 45%; + float: right; + text-align: right; +} + +.copyright { + display: block; + width: 45%; + float: left; +} + + +/* ========================================================================== + 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; + } + +} + + +/* ========================================================================== + 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); + } +} + +/* 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); + } +} + + +/* ========================================================================== + End of file. Animations should be the last thing here. Do not add stuff + below this point, or it will probably fuck everything up. + ========================================================================== */ diff --git a/assets/fonts/casper-icons.eot b/assets/fonts/casper-icons.eot new file mode 100644 index 0000000000000000000000000000000000000000..2c0447034d2ba6d99bba32f832ab85d09c84c5e8 GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/assets/fonts/casper-icons.svg b/assets/fonts/casper-icons.svg new file mode 100644 index 0000000..e0d40ac --- /dev/null +++ b/assets/fonts/casper-icons.svg @@ -0,0 +1,20 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/casper-icons.ttf b/assets/fonts/casper-icons.ttf new file mode 100644 index 0000000000000000000000000000000000000000..b67da6b831ce98aee5501f45ed6da39ddda883c7 GIT binary patch literal 2504 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 iY'; + head.appendChild(div.childNodes[1]); + } + + if ( options ) { + $.extend( settings, options ); + } + + return this.each(function(){ + var selectors = [ + "iframe[src*='player.vimeo.com']", + "iframe[src*='youtube.com']", + "iframe[src*='youtube-nocookie.com']", + "iframe[src*='kickstarter.com'][src*='video.html']", + "object", + "embed" + ]; + + if (settings.customSelector) { + selectors.push(settings.customSelector); + } + + var $allVideos = $(this).find(selectors.join(',')); + $allVideos = $allVideos.not("object object"); // SwfObj conflict patch + + $allVideos.each(function(){ + var $this = $(this); + if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } + var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), + width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), + aspectRatio = height / width; + if(!$this.attr('id')){ + var videoID = 'fitvid' + Math.floor(Math.random()*999999); + $this.attr('id', videoID); + } + $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); + $this.removeAttr('height').removeAttr('width'); + }); + }); + }; +// Works with either jQuery or Zepto +})( window.jQuery || window.Zepto ); diff --git a/author.hbs b/author.hbs new file mode 100644 index 0000000..eb7b1de --- /dev/null +++ b/author.hbs @@ -0,0 +1,41 @@ +{{!< default}} +{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} + +{{!-- The big featured header --}} + +{{!-- Everything inside the #author tags pulls data from the author --}} +{{#author}} +
+ +
+ +
+ {{#if image}} +
+
+
+ {{/if}} +

{{name}}

+ {{#if bio}} +

{{bio}}

+ {{/if}} +
+ {{#if location}}{{location}}{{/if}} + {{#if website}}{{website}}{{/if}} + {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} +
+
+{{/author}} + +{{!-- The main content area on the homepage --}} +
+ + {{!-- The tag below includes the post loop - partials/loop.hbs --}} + {{> "loop"}} + +
diff --git a/default.hbs b/default.hbs new file mode 100644 index 0000000..1f6de69 --- /dev/null +++ b/default.hbs @@ -0,0 +1,49 @@ + + + + {{!-- Document Settings --}} + + + + {{!-- Page Meta --}} + {{meta_title}} + + + {{!-- Mobile Meta --}} + + + + {{!-- Brand icon --}} + + + {{!-- Styles'n'Scripts --}} + + + + + {{!-- Ghost outputs important style and meta data with this tag --}} + {{ghost_head}} + + + + {{!-- The blog navigation links --}} + {{navigation}} + +
+ + {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} + {{{body}}} + +
+ + {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}} + + {{!-- Ghost outputs important scripts and data with this tag --}} + {{ghost_foot}} + {{!-- Fitvids makes video embeds responsive and awesome --}} + + {{!-- The main JavaScript file for Casper --}} + + + + diff --git a/index.hbs b/index.hbs new file mode 100644 index 0000000..8ca8780 --- /dev/null +++ b/index.hbs @@ -0,0 +1,27 @@ +{{!< default}} +{{!-- 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 main content area on the homepage --}} +
+ + {{!-- The tag below includes the post loop - partials/loop.hbs --}} + {{> "loop"}} + +
diff --git a/package.json b/package.json new file mode 100644 index 0000000..18676dc --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "christiaangoossens/chrg.nl", + "description": "The theme for chrg.nl", + "version": "0.0.1", + "engines": { + "ghost": ">=0.9.0 <1.0.0" + }, + "author": { + "name": "Christiaan Goossens", + "email": "contact@christiaangoossens.nl" + }, + "gpm": { + "type": "theme" + } +} diff --git a/page.hbs b/page.hbs new file mode 100644 index 0000000..9bea823 --- /dev/null +++ b/page.hbs @@ -0,0 +1,31 @@ +{{!< default}} + +{{!-- 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. --}} + +{{!-- Everything inside the #post tags pulls data from the page --}} +{{#post}} + +
+ +
+ +
+
+ +
+

{{title}}

+
+ +
+ {{content}} +
+ +
+
+{{/post}} diff --git a/partials/loop.hbs b/partials/loop.hbs new file mode 100644 index 0000000..0aa0297 --- /dev/null +++ b/partials/loop.hbs @@ -0,0 +1,25 @@ +{{!-- 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}} +
+
+

{{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 new file mode 100644 index 0000000..1cf8d82 --- /dev/null +++ b/partials/navigation.hbs @@ -0,0 +1,17 @@ +
+

Menu

+ + + +
    + {{#foreach navigation}} +
  • {{label}}
    • + {{/foreach}} +
+ {{#if @labs.subscribers}} + + {{else}} + + {{/if}} +
+ diff --git a/post.hbs b/post.hbs new file mode 100644 index 0000000..5d85551 --- /dev/null +++ b/post.hbs @@ -0,0 +1,110 @@ +{{!< default}} + +{{!-- The comment above "< default" means - insert everything in this file into + the {{{body}}} of the default.hbs template, containing the blog header/footer. --}} + +{{!-- Everything inside the #post tags pulls data from the post --}} +{{#post}} + +
+ +
+ +
+
+ +
+

{{title}}

+
+ {{tags prefix=" on "}} +
+
+ +
+ {{content}} +
+ +
+ + {{!-- Everything inside the #author tags pulls data from the author --}} + {{#author}} + + {{#if image}} +
+ +
+ {{/if}} + +
+

{{name}}

+ + {{#if bio}} +

{{bio}}

+ {{else}} +

Read more posts by this author.

+ {{/if}} +
+ {{#if location}}{{location}}{{/if}} + {{#if website}}{{website}}{{/if}} +
+
+ + {{/author}} + + + + {{!-- Email subscribe form at the bottom of the page --}} + {{#if @labs.subscribers}} +
+

Subscribe to {{@blog.title}}

+

Get the latest posts delivered right to your inbox.

+ {{subscribe_form placeholder="Your email address"}} + or subscribe via RSS with Feedly! +
+ {{/if}} + +
+ +
+
+ +{{!-- Links to Previous/Next posts --}} + + +{{/post}} diff --git a/tag.hbs b/tag.hbs new file mode 100644 index 0000000..0ed7187 --- /dev/null +++ b/tag.hbs @@ -0,0 +1,34 @@ +{{!< default}} +{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} + +{{!-- If we have a tag cover, display that - else blog cover - else nothing --}} +
+ +
+ {{#tag}} +
+

{{name}}

+

+ {{#if description}} + {{description}} + {{else}} + A {{../pagination.total}}-post collection + {{/if}} +

+
+ {{/tag}} +
+
+ +{{!-- The main content area on the homepage --}} +
+ + {{!-- The tag below includes the post loop - partials/loop.hbs --}} + {{> "loop"}} + +