V3 (#626)
* Changed {{code}} to {{statusCode}}
refs 2ebd9feeee
- {{code}} use has been deprecated in canary rule set of gscan
* V3 Update
* Update package and readme for 3.0
* Improve install instructions
* Update to support browserlist
* Upgrade dependencies
* Fix misnamed property
* V3 darkmode (#619)
Added dark mode styles
* Casper final refinements batch 1
* Casper final refinements batch 2
* Fixed bookmark card hover bug
* Fixed header social links
* Updated screenshots
* Updated readme
no issue
- refreshed screenshot
* Udpate screenshot in readme
no issue
* 3.0.0-beta.2
* Fixed cut header for post cards
no issue
* 3.0.0-beta.3
* 3.0.0-beta.4
* Updated current version and previous version logic (#554)
no issue
- Use current version from `package.json` instead of `npm_package_version` env variable
- Use `release.tag_name` instead of `release.name` for previous version
* Updated jQuery to 3.4.1 to avoid known vulnerabilities (#590)
no issue
https://snyk.io/vuln/npm:jquery?lh=3.2.1&utm_source=lighthouse&utm_medium=ref&utm_campaign=audit
* Fixed code cards with long lines from being too wide
no issue
Credits - https://github.com/TryGhost/Casper/pull/602
* Bumped gscan version to v3.0.0 (#621)
* Bumped gscan to v3.0.0
- This also fixes failing CI builds because the default rules that are being checked were for v2
* Added explicit version check for gscan command
* Added member subscription support (#623)
* Added member subscription support
no issue
* Added member subscription success message
no issue
* Added member subscription overlay
* Refined members subscription overlay
* Deleted unused website icon
* Ran CSSComb
* Updated built assets
* 3.0.0-beta.5
* Updated built assets for v3
no issue
* 3.0.0-beta.6
* Remove unused partial
* V3 cleanup (#625)
* Removed unused infinity icon
* Removed unused location icon
* Removed unused 'point' icon
* Removed unused Ghost logo icon
* Removed unused author partials
* Cleaned up index log
* Fixed responsive feature image sizes for page template
This commit is contained in:
Fabien O'Carroll
GitHub
parent
7ad20d1325
commit
b51dd8ce22
34 changed files with 1830 additions and 1223 deletions
30
README.md
30
README.md
|
|
@ -1,10 +1,10 @@
|
|||
# Casper
|
||||
|
||||
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper. If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
|
||||
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -12,20 +12,20 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the la
|
|||
|
||||
Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
|
||||
|
||||
We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
|
||||
This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
|
||||
|
||||
**The main files are:**
|
||||
|
||||
- `default.hbs` - The main template file
|
||||
- `index.hbs` - Used for the home page
|
||||
- `post.hbs` - Used for individual posts
|
||||
- `default.hbs` - The parent template file, which includes your global header/footer
|
||||
- `index.hbs` - The main template to generate a list of posts, usually the home page
|
||||
- `post.hbs` - The template used to render individual posts
|
||||
- `page.hbs` - Used for individual pages
|
||||
- `tag.hbs` - Used for tag archives
|
||||
- `author.hbs` - Used for author archives
|
||||
- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
|
||||
- `author.hbs` - Used for author archives, eg. "all posts written by Jamie"
|
||||
|
||||
One really neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:
|
||||
One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
|
||||
|
||||
- `page-about.hbs` - Custom template for the `/about/` page
|
||||
- `page-about.hbs` - Custom template for an `/about/` page
|
||||
- `tag-news.hbs` - Custom template for `/tag/news/` archive
|
||||
- `author-ali.hbs` - Custom template for `/author/ali/` archive
|
||||
|
||||
|
|
@ -35,8 +35,11 @@ One really neat trick is that you can also create custom one-off templates just
|
|||
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
|
||||
|
||||
```bash
|
||||
$ yarn install
|
||||
$ yarn dev
|
||||
# install dependencies
|
||||
yarn install
|
||||
|
||||
# run development server
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
|
||||
|
|
@ -44,7 +47,8 @@ Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/
|
|||
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
|
||||
|
||||
```bash
|
||||
$ yarn zip
|
||||
# create .zip file
|
||||
yarn zip
|
||||
```
|
||||
|
||||
# PostCSS Features Used
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,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:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}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]{-webkit-box-sizing:border-box;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-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#3c484e;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}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;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 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
|
||||
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,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:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}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;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#313b3f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;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}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
|
||||
/*# sourceMappingURL=global.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,7 @@
|
|||
--whitegrey: #e5eff5;
|
||||
--pink: #fa3a57;
|
||||
--brown: #a3821a;
|
||||
--darkmode: color(var(--darkgrey) l(+2%));
|
||||
}
|
||||
|
||||
/* Reset
|
||||
|
|
@ -280,9 +281,9 @@ html {
|
|||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
color: color(var(--midgrey) l(-25%));
|
||||
color: color(var(--midgrey) l(-30%));
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
|
@ -431,14 +432,14 @@ h5,
|
|||
h6 {
|
||||
margin-top: 0;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-size: 5rem;
|
||||
font-weight: 700;
|
||||
font-size: 5.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h1 {
|
||||
|
|
@ -448,7 +449,7 @@ h1 {
|
|||
|
||||
h2 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 2rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h2 {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
BIN
assets/screenshot-desktop.jpg
Normal file → Executable file
BIN
assets/screenshot-desktop.jpg
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 132 KiB |
BIN
assets/screenshot-mobile.jpg
Normal file → Executable file
BIN
assets/screenshot-mobile.jpg
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 60 KiB |
57
author.hbs
57
author.hbs
|
|
@ -5,34 +5,37 @@
|
|||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
|
||||
|
||||
{{> header background=cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
<div class="site-header-content">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
<h1 class="site-title">{{name}}</h1>
|
||||
{{#if bio}}
|
||||
<h2 class="author-bio">{{bio}}</h2>
|
||||
{{/if}}
|
||||
<div class="author-meta">
|
||||
{{#if location}}
|
||||
<div class="author-location">{{location}} <span class="bull">•</span></div>
|
||||
<header class="site-archive-header">
|
||||
{{> site-header}}
|
||||
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="inner">
|
||||
<div class="site-header-content author-header">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
<div class="author-stats">
|
||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">•</span>
|
||||
<div class="author-header-content">
|
||||
<h1 class="site-title">{{name}}</h1>
|
||||
{{#if bio}}
|
||||
<h2 class="author-bio">{{bio}}</h2>
|
||||
{{/if}}
|
||||
<div class="author-meta">
|
||||
{{#if location}}
|
||||
<div class="author-location">{{location}}</div>
|
||||
{{/if}}
|
||||
<div class="author-stats">
|
||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
||||
</div>
|
||||
{{#if website}}
|
||||
<span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{#if website}}
|
||||
<a class="social-link social-link-wb" href="{{website}}" target="_blank" rel="noopener">{{> "icons/website"}}</a>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||
{{/if}}
|
||||
<a class="social-link social-link-rss" href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +44,7 @@
|
|||
|
||||
{{!-- The main content area --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner">
|
||||
<div class="inner posts">
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
|
|
|||
65
default.hbs
65
default.hbs
|
|
@ -41,16 +41,38 @@
|
|||
</div>
|
||||
|
||||
{{!-- The big email subscribe modal content --}}
|
||||
{{#if @labs.subscribers}}
|
||||
{{#if @labs.members}}
|
||||
<div class="subscribe-success-message">
|
||||
<a class="subscribe-close" href="javascript:;"></a>
|
||||
You've successfully subscribed to {{@site.title}}!
|
||||
</div>
|
||||
|
||||
<div id="subscribe" class="subscribe-overlay">
|
||||
<a class="subscribe-overlay-close" href="#"></a>
|
||||
<a class="subscribe-close" href="#"></a>
|
||||
<div class="subscribe-overlay-content">
|
||||
{{#if @site.logo}}
|
||||
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
|
||||
{{/if}}
|
||||
<h1 class="subscribe-overlay-title">Subscribe to {{@site.title}}</h1>
|
||||
<p class="subscribe-overlay-description">Stay up to date! Get all the latest & greatest posts delivered straight to your inbox</p>
|
||||
{{subscribe_form placeholder="youremail@example.com"}}
|
||||
<div class="subscribe-form">
|
||||
<h1 class="subscribe-overlay-title">Subscribe to {{@site.title}}</h1>
|
||||
<p class="subscribe-overlay-description">Stay up to date! Get all the latest & greatest posts delivered straight to your inbox</p>
|
||||
<form data-members-form="subscribe">
|
||||
<div class="form-group">
|
||||
<input class="subscribe-email" data-members-email placeholder="youremail@example.com"
|
||||
autocomplete="false" />
|
||||
<button class="button primary" type="submit">
|
||||
<span class="button-content">Subscribe</span>
|
||||
<span class="button-loader">{{> "icons/loader"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="message-success">
|
||||
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
|
||||
</div>
|
||||
<div class="message-error">
|
||||
Please enter a valid email address!
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -64,6 +86,39 @@
|
|||
{{!-- Fitvids (for responsive video embeds), infinite scroll, floating header, and gallery card support --}}
|
||||
<script src="{{asset "built/casper.js"}}"></script>
|
||||
|
||||
{{!-- Scripts for Members subscription --}}
|
||||
<script>
|
||||
// Parse the URL parameter
|
||||
function getParameterByName(name, url) {
|
||||
if (!url) url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, "\\$&");
|
||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
// Give the parameter a variable name
|
||||
var action = getParameterByName('action');
|
||||
|
||||
$(document).ready(function () {
|
||||
if (action == 'subscribe') {
|
||||
$('body').addClass("subscribe-success");
|
||||
}
|
||||
|
||||
$('.subscribe-success-message .subscribe-close').click(function () {
|
||||
$('.subscribe-success-message').addClass('close');
|
||||
});
|
||||
|
||||
// Reset form on opening subscrion overlay
|
||||
$('.subscribe-button').click(function() {
|
||||
$('.subscribe-overlay form').removeClass();
|
||||
$('.subscribe-email').val('');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
|
||||
{{{block "scripts"}}}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ It's a good idea to keep this template as minimal as possible in terms of both f
|
|||
<div class="inner">
|
||||
|
||||
<section class="error-message">
|
||||
<h1 class="error-code">{{code}}</h1>
|
||||
<h1 class="error-code">{{statusCode}}</h1>
|
||||
<p class="error-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in
|
|||
<div class="inner">
|
||||
|
||||
<section class="error-message">
|
||||
<h1 class="error-code">{{code}}</h1>
|
||||
<h1 class="error-code">{{statusCode}}</h1>
|
||||
<p class="error-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
||||
</section>
|
||||
|
|
|
|||
89
index.hbs
89
index.hbs
|
|
@ -2,25 +2,27 @@
|
|||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
{{> header background=@site.cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
|
||||
<div class="inner">
|
||||
<div class="site-header-content">
|
||||
<h1 class="site-title">
|
||||
{{#if @site.logo}}
|
||||
<img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
{{/if}}
|
||||
</h1>
|
||||
<h2 class="site-description">{{@site.description}}</h2>
|
||||
<header class="site-home-header">
|
||||
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
<div class="site-header-content">
|
||||
<h1 class="site-title">
|
||||
{{#if @site.logo}}
|
||||
<img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
{{/if}}
|
||||
</h1>
|
||||
<h2 class="site-description">{{@site.description}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
{{> "site-nav"}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{!-- The main content area --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner">
|
||||
<div class="inner posts">
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
|
@ -33,3 +35,64 @@ into the {body} of the default.hbs template --}}
|
|||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> site-header}}
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
|
||||
// NOTE: Scroll performance is poor in Safari
|
||||
// - this appears to be due to the events firing much more slowly in Safari.
|
||||
// Dropping the scroll event and using only a raf loop results in smoother
|
||||
// scrolling but continuous processing even when not scrolling
|
||||
$(document).ready(function () {
|
||||
|
||||
var nav = document.querySelector('.site-nav-main .site-nav');
|
||||
var feed = document.querySelector('.post-feed');
|
||||
|
||||
var lastScrollY = window.scrollY;
|
||||
var lastWindowHeight = window.innerHeight;
|
||||
var lastDocumentHeight = $(document).height();
|
||||
var ticking = false;
|
||||
|
||||
function onScroll() {
|
||||
lastScrollY = window.scrollY;
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
lastWindowHeight = window.innerHeight;
|
||||
lastDocumentHeight = $(document).height();
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function requestTick() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
ticking = true;
|
||||
}
|
||||
|
||||
function update() {
|
||||
var trigger = feed.getBoundingClientRect().top + window.scrollY;
|
||||
var progressMax = lastDocumentHeight - lastWindowHeight;
|
||||
|
||||
// show/hide nav
|
||||
if (lastScrollY >= trigger - 20) {
|
||||
nav.classList.add('fixed-nav-active');
|
||||
} else {
|
||||
nav.classList.remove('fixed-nav-active');
|
||||
}
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onResize, false);
|
||||
|
||||
update();
|
||||
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
13
package.json
13
package.json
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "casper",
|
||||
"description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
|
||||
"description": "A clean, minimal default theme for the Ghost publishing platform",
|
||||
"demo": "https://demo.ghost.io",
|
||||
"version": "2.11.2",
|
||||
"version": "3.0.0-beta.6",
|
||||
"engines": {
|
||||
"ghost": ">=2.0.0",
|
||||
"ghost-api": "v2"
|
||||
"ghost": ">=3.0.0",
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"screenshots": {
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
"scripts": {
|
||||
"dev": "gulp",
|
||||
"zip": "gulp zip",
|
||||
"test": "gscan --v2 .",
|
||||
"test": "gscan --v3 .",
|
||||
"pretest": "gulp build",
|
||||
"preship": "yarn test",
|
||||
"ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version && git push --follow-tags; else echo \"Uncomitted changes found.\" && exit 1; fi",
|
||||
|
|
@ -61,6 +61,9 @@
|
|||
"postcss-easy-import": "3.0.0",
|
||||
"pump": "3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
],
|
||||
"config": {
|
||||
"posts_per_page": 25,
|
||||
"image_sizes": {
|
||||
|
|
|
|||
12
page.hbs
12
page.hbs
|
|
@ -3,9 +3,11 @@
|
|||
into the {body} of the default.hbs template --}}
|
||||
|
||||
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
|
||||
<header class="site-header outer">
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
<header class="site-header">
|
||||
<div class="outer site-nav-main">
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -31,8 +33,8 @@ into the {body} of the default.hbs template --}}
|
|||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 800px) 400px,
|
||||
(max-width: 1170px) 700px,
|
||||
1400px"
|
||||
(max-width: 1170px) 1170px,
|
||||
2000px"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
<section class="post-full-authors">
|
||||
|
||||
<div class="post-full-authors-content">
|
||||
<p>This post was a collaboration between</p>
|
||||
<p>{{authors}}</p>
|
||||
</div>
|
||||
|
||||
<ul class="author-list">
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
|
||||
<div class="author-card">
|
||||
<div class="basic-info">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
{{else}}
|
||||
<div class="author-profile-image">{{> "icons/avatar"}}</div>
|
||||
{{/if}}
|
||||
<h2>{{name}}</h2>
|
||||
</div>
|
||||
<div class="bio">
|
||||
{{#if bio}}
|
||||
<p>{{bio}}</p>
|
||||
<p><a href="{{url}}">More posts</a> by {{name}}.</p>
|
||||
{{else}}
|
||||
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="moving-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
{{/if}}
|
||||
|
||||
</li>
|
||||
{{/foreach}}
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
// Adds delay to author card dropups to disappear. This gives enough
|
||||
// time for the user to interact with the author card while they move
|
||||
// the mouse from the avatar to the card. Also makes space for the
|
||||
// interacted avatar.
|
||||
$(document).ready(function () {
|
||||
|
||||
var hoverTimeout;
|
||||
|
||||
$('.author-list-item').hover(function(){
|
||||
var $this = $(this);
|
||||
|
||||
clearTimeout(hoverTimeout);
|
||||
|
||||
$('.author-card').removeClass('hovered');
|
||||
$(this).children('.author-card').addClass('hovered');
|
||||
|
||||
}, function() {
|
||||
var $this = $(this);
|
||||
|
||||
hoverTimeout = setTimeout(function() {
|
||||
$this.children('.author-card').removeClass('hovered');
|
||||
}, 800);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
{{#primary_author}}
|
||||
|
||||
<section class="author-card">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
{{else}}
|
||||
<span class="avatar-wrapper">{{> "icons/avatar"}}</span>
|
||||
{{/if}}
|
||||
<section class="author-card-content">
|
||||
<h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
|
||||
{{#if bio}}
|
||||
<p>{{bio}}</p>
|
||||
{{else}}
|
||||
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
|
||||
{{/if}}
|
||||
</section>
|
||||
</section>
|
||||
<div class="post-full-footer-right">
|
||||
<a class="author-card-button" href="{{url}}">Read More</a>
|
||||
</div>
|
||||
|
||||
{{/primary_author}}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<div class="floating-header">
|
||||
<div class="floating-header-logo">
|
||||
<a href="{{@site.url}}">
|
||||
{{#if @site.icon}}
|
||||
<img src="{{img_url @site.icon size="xxs"}}" alt="{{@site.title}} icon" />
|
||||
{{/if}}
|
||||
<span>{{@site.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<span class="floating-header-divider">—</span>
|
||||
<div class="floating-header-title">{{title}}</div>
|
||||
<div class="floating-header-share">
|
||||
<div class="floating-header-share-label">Share this {{> "icons/point"}}</div>
|
||||
<a class="floating-header-share-tw" href="https://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
|
||||
onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
|
||||
{{> "icons/twitter"}}
|
||||
</a>
|
||||
<a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
|
||||
onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
|
||||
{{> "icons/facebook"}}
|
||||
</a>
|
||||
</div>
|
||||
<progress id="reading-progress" class="progress" value="0">
|
||||
<div class="progress-container">
|
||||
<span class="progress-bar"></span>
|
||||
</div>
|
||||
</progress>
|
||||
</div>
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
Casper.floatingHeader();
|
||||
})
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
47
partials/header-background.hbs
Normal file
47
partials/header-background.hbs
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
{{!--
|
||||
Wow what the hell is going on in here even?
|
||||
|
||||
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
|
||||
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
|
||||
can only get the image dynamically using Handlebars, and we can only set the image to properly
|
||||
be a background image using CSS, we end up with a handful of inline styles.
|
||||
|
||||
If the template in question has a background image, then we render responsive image styles
|
||||
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
|
||||
{{#if background}}
|
||||
|
||||
<style type="text/css">
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='xl'}});
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="outer site-header-background responsive-header-img">
|
||||
|
||||
{{else}}
|
||||
|
||||
<div class="outer site-header-background no-image">
|
||||
|
||||
{{/if}}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
{{!--
|
||||
Wow what the hell is going on in here even?
|
||||
|
||||
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
|
||||
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
|
||||
can only get the image dynamically using Handlebars, and we can only set the image to properly
|
||||
be a background image using CSS, we end up with a handful of inline styles.
|
||||
|
||||
If the template in question has a background image, then we render responsive image styles
|
||||
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
|
||||
{{#if background}}
|
||||
|
||||
<style type="text/css">
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='xl'}});
|
||||
}
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='l'}});
|
||||
background-image: -webkit-image-set(
|
||||
url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x
|
||||
);
|
||||
background-image: image-set(
|
||||
url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x
|
||||
);
|
||||
}
|
||||
}
|
||||
@media(max-width: 600px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='m'}});
|
||||
background-image: -webkit-image-set(
|
||||
url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x
|
||||
);
|
||||
background-image: image-set(
|
||||
url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<header class="site-header outer responsive-header-img">
|
||||
|
||||
{{else}}
|
||||
|
||||
<header class="site-header outer no-image">
|
||||
|
||||
{{/if}}
|
||||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
|
||||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg>
|
||||
|
Before Width: | Height: | Size: 155 B After Width: | Height: | Size: 350 B |
|
|
@ -1 +0,0 @@
|
|||
<svg class="ghost-svg" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>Ghost Logo</title><g fill="none" fill-rule="evenodd"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74v.07zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34z" fill="#2D3134"/><g opacity=".6" transform="translate(0 36)" fill="#2E3134"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4"/><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4"/><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4"/><rect x=".209" y=".964" width="50.469" height="17.013" rx="4"/><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg>
|
||||
|
Before Width: | Height: | Size: 196 B |
11
partials/icons/loader.hbs
Normal file
11
partials/icons/loader.hbs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
|
||||
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
|
||||
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
|
||||
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
|
||||
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
|
||||
C22.32,8.481,24.301,9.057,26.013,10.047z">
|
||||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
|
||||
dur="0.5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 923 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M19.5 8c0 4.144-7.5 15.5-7.5 15.5S4.5 12.144 4.5 8C4.5 3.858 7.857.5 12 .5c4.142 0 7.5 3.358 7.5 7.5z"/><circle cx="12" cy="8" r="3"/></svg>
|
||||
|
Before Width: | Height: | Size: 329 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 311 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 11.957c0 6.375-5.163 11.544-11.532 11.544C5.599 23.5.5 18.125.5 11.75.5 5.542 5.37.758 11.505.511l.5-.011C18.374.5 23.5 5.582 23.5 11.957zM11.505.511c-6 6.5-6 14.98 0 22.98m1-22.98c6 6.5 6 14.977 0 22.977M2 17.479h20.063m-19.657-12h19.062m-20.968 6h22.938" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" fill="none"/></svg>
|
||||
|
Before Width: | Height: | Size: 413 B |
|
|
@ -1,4 +1,4 @@
|
|||
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
|
||||
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#has index="nth:6"}}post-card-large{{/has}}{{/unless}}">
|
||||
|
||||
{{#if feature_image}}
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
|
|
@ -22,40 +22,46 @@
|
|||
|
||||
<header class="post-card-header">
|
||||
{{#if primary_tag}}
|
||||
<span class="post-card-tags">{{primary_tag.name}}</span>
|
||||
{{#primary_tag}}
|
||||
<div class="post-card-primary-tag">{{name}}</div>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</header>
|
||||
|
||||
<section class="post-card-excerpt">
|
||||
<p>{{excerpt words="33"}}</p>
|
||||
{{#if feature_image}}
|
||||
<p>{{excerpt words="30"}}</p>
|
||||
{{else}}
|
||||
<p>{{excerpt words="44"}}</p>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
</a>
|
||||
|
||||
<footer class="post-card-meta">
|
||||
|
||||
<ul class="author-list">
|
||||
{{#foreach authors}}
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
|
||||
|
||||
<div class="author-name-tooltip">
|
||||
{{name}}
|
||||
</div>
|
||||
|
||||
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="static-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
<a href="{{url}}" class="static-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/foreach}}
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
|
||||
<span class="reading-time">{{reading_time}}</span>
|
||||
|
||||
<div class="post-card-byline-content">
|
||||
<span>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
|
||||
<span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>{{!--/.post-card-content--}}
|
||||
|
|
|
|||
5
partials/site-header.hbs
Normal file
5
partials/site-header.hbs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div class="outer site-nav-main">
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
<nav class="site-nav">
|
||||
<div class="site-nav-left">
|
||||
{{^is "home"}}
|
||||
{{#if @site.logo}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
{{/is}}
|
||||
{{#if @site.navigation}}
|
||||
{{navigation}}
|
||||
{{#if @site.logo}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
<div class="site-nav-content">
|
||||
{{#if @site.navigation}}
|
||||
{{navigation}}
|
||||
{{/if}}
|
||||
{{#is "post"}}
|
||||
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
|
||||
{{/is}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-nav-right">
|
||||
<div class="social-links">
|
||||
|
|
@ -20,7 +23,7 @@
|
|||
<a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if @labs.subscribers}}
|
||||
{{#if @labs.members}}
|
||||
<a class="subscribe-button" href="#subscribe">Subscribe</a>
|
||||
{{else}}
|
||||
<a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
|
||||
|
|
|
|||
19
partials/subscribe-form.hbs
Normal file
19
partials/subscribe-form.hbs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<section class="subscribe-form">
|
||||
<h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
|
||||
<p class="subscribe-form-description">Get the latest posts delivered right to your inbox</p>
|
||||
<form data-members-form="subscribe">
|
||||
<div class="form-group">
|
||||
<input class="subscribe-email" data-members-email placeholder="youremail@example.com" autocomplete="false" />
|
||||
<button class="button primary" type="submit">
|
||||
<span class="button-content">Subscribe</span>
|
||||
<span class="button-loader">{{> "icons/loader"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="message-success">
|
||||
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
|
||||
</div>
|
||||
<div class="message-error">
|
||||
Please enter a valid email address!
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
126
post.hbs
126
post.hbs
|
|
@ -3,10 +3,8 @@
|
|||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
<header class="site-header outer">
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
</div>
|
||||
<header class="site-header">
|
||||
{{> site-header}}
|
||||
</header>
|
||||
|
||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
||||
|
|
@ -18,13 +16,73 @@ into the {body} of the default.hbs template --}}
|
|||
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
|
||||
|
||||
<header class="post-full-header">
|
||||
<section class="post-full-meta">
|
||||
<time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
|
||||
|
||||
{{#if primary_tag}}
|
||||
<section class="post-full-tags">
|
||||
{{#primary_tag}}
|
||||
<span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
|
||||
<a href="{{url}}">{{name}}</a>
|
||||
{{/primary_tag}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
<h1 class="post-full-title">{{title}}</h1>
|
||||
|
||||
{{#if custom_excerpt}}
|
||||
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
|
||||
<div class="post-full-byline">
|
||||
|
||||
<section class="post-full-byline-content">
|
||||
|
||||
<ul class="author-list">
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
|
||||
<div class="author-card">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
{{else}}
|
||||
<div class="author-profile-image">{{> "icons/avatar"}}</div>
|
||||
{{/if}}
|
||||
<div class="author-info">
|
||||
{{#if bio}}
|
||||
<div class="bio">
|
||||
<h2>{{name}}</h2>
|
||||
<p>{{bio}}</p>
|
||||
<p><a href="{{url}}">More posts</a> by {{name}}.</p>
|
||||
</div>
|
||||
{{else}}
|
||||
<h2>{{name}}</h2>
|
||||
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="author-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
{{/if}}
|
||||
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
|
||||
<section class="post-full-byline-meta">
|
||||
<h4 class="author-name">{{authors}}</h4>
|
||||
<div class="byline-meta-content">
|
||||
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
|
||||
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{#if feature_image}}
|
||||
|
|
@ -37,8 +95,8 @@ into the {body} of the default.hbs template --}}
|
|||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 800px) 400px,
|
||||
(max-width: 1170px) 700px,
|
||||
1400px"
|
||||
(max-width: 1170px) 1170px,
|
||||
2000px"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
/>
|
||||
|
|
@ -52,29 +110,10 @@ into the {body} of the default.hbs template --}}
|
|||
</section>
|
||||
|
||||
{{!-- Email subscribe form at the bottom of the page --}}
|
||||
{{#if @labs.subscribers}}
|
||||
<section class="subscribe-form">
|
||||
<h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
|
||||
<p>Get the latest posts delivered right to your inbox</p>
|
||||
{{subscribe_form placeholder="youremail@example.com"}}
|
||||
</section>
|
||||
{{#if @labs.members}}
|
||||
{{> subscribe-form}}
|
||||
{{/if}}
|
||||
|
||||
<footer class="post-full-footer">
|
||||
|
||||
{{!-- There are two options for how we display the byline/author-info.
|
||||
If the post has more than one author, we load a specific template
|
||||
from includes/byline-multiple.hbs, otherwise, we just use the
|
||||
default byline. --}}
|
||||
|
||||
{{#has author="count:>1"}}
|
||||
{{> "byline-multiple"}}
|
||||
{{else}}
|
||||
{{> "byline-single"}}
|
||||
{{/has}}
|
||||
|
||||
</footer>
|
||||
|
||||
{{!--
|
||||
<section class="post-full-comments">
|
||||
If you want to embed comments, this is a good place to do it!
|
||||
|
|
@ -93,30 +132,28 @@ into the {body} of the default.hbs template --}}
|
|||
{{#if primary_tag}}
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
<article class="read-next-card"
|
||||
{{#if ../primary_tag.feature_image}}
|
||||
style="background-image: url({{img_url ../primary_tag.feature_image size="m"}})"
|
||||
{{else}}
|
||||
{{#if @site.cover_image}}
|
||||
style="background-image: url({{img_url @site.cover_image size="m"}})"{{/if}}
|
||||
{{/if}}
|
||||
>
|
||||
<article class="read-next-card">
|
||||
<header class="read-next-card-header">
|
||||
<small class="read-next-card-header-sitetitle">— {{@site.title}} —</small>
|
||||
{{#../primary_tag}}
|
||||
<h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
|
||||
<h3><span>More in</span> <a href="{{url}}">{{name}}</a></h3>
|
||||
{{/../primary_tag}}
|
||||
</header>
|
||||
<div class="read-next-divider">{{> "icons/infinity"}}</div>
|
||||
<div class="read-next-card-content">
|
||||
<ul>
|
||||
{{#foreach related_posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
<li>
|
||||
<h4><a href="{{url}}">{{title}}</a></h4>
|
||||
<div class="read-next-card-meta">
|
||||
<p><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> –
|
||||
{{reading_time}}</p>
|
||||
</div>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="read-next-card-footer">
|
||||
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
|
||||
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}}
|
||||
→</a>
|
||||
</footer>
|
||||
</article>
|
||||
{{/if}}
|
||||
|
|
@ -132,13 +169,12 @@ into the {body} of the default.hbs template --}}
|
|||
{{#prev_post}}
|
||||
{{> "post-card"}}
|
||||
{{/prev_post}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
|
||||
{{> floating-header}}
|
||||
{{!-- {{> floating-header}} --}}
|
||||
|
||||
{{/post}}
|
||||
|
||||
|
|
|
|||
14
tag.hbs
14
tag.hbs
|
|
@ -2,16 +2,16 @@
|
|||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#tag}}
|
||||
{{> header background=feature_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
<div class="site-header-content">
|
||||
<header class="site-archive-header">
|
||||
{{> site-header}}
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="inner site-header-content">
|
||||
<h1 class="site-title">{{name}}</h1>
|
||||
<h2 class="site-description">
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
{{/if}}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
{{!-- The main content area --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner">
|
||||
<div class="inner posts">
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue