First pass 2.0 design

This commit is contained in:
John O'Nolan 2017-05-15 21:03:47 +01:00
parent 26a25208e1
commit eda0ec4db2
26 changed files with 1845 additions and 2403 deletions

View File

@ -4,7 +4,23 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/).
To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page. To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page.
## Development
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the root directory:
`$ npm install`
`$ gulp`
Now you can edit `/assets/css/` files, which will be compiled to `/assets/public/` automatically.
## PostCSS Features Used
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
- Variables - Simple pure CSS variables
- [Color Function](https://github.com/postcss/postcss-color-function)
## Copyright & License ## Copyright & License
Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](LICENSE). Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](LICENSE).

View File

@ -0,0 +1,474 @@
/* Variables
/* ---------------------------------------------------------- */
:root {
/* Colours */
--blue: #3eb0ef;
--green: #a4d037;
--purple: #ad26b4;
--yellow: #fecd35;
--red: #f05230;
--darkgrey: #343f44;
--midgrey: #738a94;
--lightgrey: #c5d2d9;
--whitegrey: #e5eff5;
--pink: #fa3a57;
--brown: #a3821a;
}
/* Reset
/* ---------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
img {
max-width: 100%;
}
html {
box-sizing: border-box;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 3 */
color: inherit; /* 1 */
font: inherit; /* 2 */
}
button {
overflow: visible;
border: none;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
/* 1 */
input[type="reset"],
input[type="submit"] {
cursor: pointer; /* 3 */
-webkit-appearance: button; /* 2 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input:focus {
outline: none;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
box-sizing: content-box; /* 2 */
-webkit-appearance: textfield; /* 1 */
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
legend {
padding: 0; /* 2 */
border: 0; /* 1 */
}
textarea {
overflow: auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
overflow-x: hidden;
overflow-y: scroll;
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
overflow-x: hidden;
color: color(var(--midgrey) l(-25%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.5rem;
line-height: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
text-rendering: optimizeLegibility;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
::selection {
text-shadow: none;
background: color(var(--blue) lightness(+30%));
}
hr {
display: block;
margin: 2em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid var(--whitegrey);
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
textarea {
resize: vertical;
}
p,
ul,
ol,
dl,
blockquote {
margin: 0 0 1.5em 0;
}
ol,
ul {
padding-left: 2.5em;
}
ol ol,
ul ul,
ul ol,
ol ul {
margin: 0.5em 0 1em;
padding-left: 2em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
margin: 0.5em 0;
line-height: 1.6em;
}
dt {
float: left;
margin: 0 20px 0 0;
width: 120px;
color: var(--darkgrey);
font-weight: 500;
text-align: right;
}
dd {
margin: 0 0 5px 0;
text-align: left;
}
blockquote {
margin: 1.6em 0;
padding: 0 1.6em 0 1.6em;
border-left: var(--whitegrey) 0.5em solid;;
}
blockquote p {
margin: 0.8em 0;
font-size: 1.2em;
font-weight: 300;
}
blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
opacity: 0.8;
}
/* Quotation marks */
blockquote small:before {
content: "\2014 \00A0";
}
blockquote cite {
font-weight: bold;
}
blockquote cite a {
font-weight: normal;
}
a {
color: color(var(--blue) l(-5%));
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: 1.15;
font-weight: 700;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0 0 0.5em 0;
font-size: 5rem;
font-weight: 700;
}
@media (max-width: 500px) {
h1 {
font-size: 2.2rem;
}
}
h2 {
margin: 1.5em 0 0.5em 0;
font-size: 1.8rem;
}
@media (max-width: 500px) {
h2 {
font-size: 1.8rem;
}
}
h3 {
margin: 1.5em 0 0.5em 0;
font-size: 1.8rem;
font-weight: 500;
}
@media (max-width: 500px) {
h3 {
font-size: 1.7rem;
}
}
h4 {
margin: 1.5em 0 0.5em 0;
font-size: 1.6rem;
font-weight: 500;
}
h5 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;
}
h6 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

View File

@ -1,20 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="512">
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
<glyph unicode="&#xf600;" d="M0 480v-102.4h307.2v102.4h-307.2zM0 275.2v-102.4h512v102.4h-512zM0 70.4v-102.4h204.8v102.4h-204.8zM307.2 70.4v-102.4h204.8v102.4h-204.8zM409.6 480v-102.4h102.4v102.4h-102.4z" />
<glyph unicode="&#xf601;" d="M421.344-32c-0.4 229.616-200.752 417.264-421.344 417.696v94.304c270.656 0 512-230.304 512-512h-90.656zM343.6-31.968h-90.608c0.304 56.384-28.336 119.488-73.664 166.736-45.072 47.632-124.96 77.648-179.104 77.36v94.272c169.040-3.648 339.936-163.312 343.376-338.368zM64.256 96.048c35.312 0 63.936-28.656 63.936-64 0-35.328-28.624-63.984-63.936-63.984s-63.936 28.656-63.936 63.984c0 35.344 28.624 64 63.936 64z" />
<glyph unicode="&#xf602;" d="M512 382.791c-18.838-8.354-39.082-14.001-60.33-16.54 21.686 13 38.343 33.585 46.186 58.115-20.298-12.039-42.778-20.78-66.705-25.49-19.16 20.415-46.461 33.17-76.673 33.17-58.011 0-105.044-47.029-105.044-105.039 0-8.233 0.929-16.25 2.72-23.939-87.3 4.382-164.701 46.2-216.509 109.753-9.042-15.514-14.223-33.558-14.223-52.809 0-36.444 18.544-68.596 46.73-87.433-17.219 0.546-33.416 5.271-47.577 13.139-0.010-0.438-0.010-0.878-0.010-1.321 0-50.894 36.209-93.348 84.261-103-8.813-2.4-18.094-3.686-27.674-3.686-6.769 0-13.349 0.66-19.764 1.886 13.368-41.73 52.16-72.103 98.126-72.948-35.95-28.175-81.243-44.967-130.458-44.967-8.479 0-16.84 0.497-25.058 1.47 46.486-29.805 101.701-47.197 161.021-47.197 193.211 0 298.868 160.062 298.868 298.872 0 4.554-0.103 9.084-0.305 13.59 20.528 14.81 38.336 33.31 52.418 54.374z" />
<glyph unicode="&#xf603;" d="M0.403 45.168c-0.122 1.266-0.226 2.535-0.292 3.815 0.065-1.28 0.17-2.549 0.292-3.815zM117.954 197.426c46.005-1.369 76.867 46.349 68.931 106.599-7.947 60.24-51.698 108.584-97.704 109.961-46.013 1.365-76.87-44.741-68.926-105 7.941-60.234 51.676-110.187 97.699-111.56zM512 352v42.655c0 46.94-38.391 85.345-85.329 85.345h-341.328c-46.138 0-84.006-37.116-85.282-82.963 29.181 25.693 69.662 47.158 111.437 47.158 44.652 0 178.622 0 178.622 0l-39.974-33.809h-56.634c37.565-14.402 57.578-58.062 57.578-102.861 0-37.624-20.905-69.977-50.444-92.984-28.822-22.451-34.286-31.854-34.286-50.939 0-16.289 30.873-44 47.016-55.394 47.191-33.269 62.458-64.156 62.458-115.728 0-8.214-1.021-16.415-3.033-24.48h153.871c46.937 0 85.328 38.375 85.328 85.345v266.654h-96v-95.999h-32v96h-95.999v32h95.999v96h32v-96h96zM92.943 97.032c10.807 0 20.711 0.295 30.968 0.295-13.573 13.167-24.313 29.3-24.313 49.19 0 11.804 3.782 23.168 9.067 33.26-5.391-0.385-10.895-0.497-16.563-0.497-37.178 0-68.753 12.038-92.102 31.927v-33.621l0.003-100.865c26.72 12.687 58.444 20.311 92.94 20.311zM1.71 36.371c-0.556 2.729-0.983 5.503-1.271 8.317 0.287-2.814 0.715-5.588 1.271-8.317zM227.725 3.577c-7.529 29.403-34.227 43.982-71.444 69.784-13.536 4.366-28.447 6.937-44.447 7.104-44.809 0.482-86.554-17.471-110.108-44.186 7.96-38.853 42.517-68.279 83.617-68.279h143.222c0.908 5.564 1.348 11.316 1.348 17.216 0 6.267-0.767 12.396-2.188 18.361z" />
<glyph unicode="&#xf604;" d="M426.672 480h-341.33c-46.936 0-85.342-38.407-85.342-85.344v-341.313c0-46.969 38.406-85.343 85.342-85.343l341.33 0.001c46.938 0 85.328 38.373 85.328 85.344v341.311c0 46.937-38.391 85.344-85.328 85.344zM435.296 224h-83.296v-224h-96v224h-46.263v73.282h46.263v47.593c0 64.671 27.896 103.125 103.935 103.125h87.622v-79.285h-71.565c-21.241 0.035-23.876-11.076-23.876-31.756l-0.116-39.677h96l-12.704-73.282z" />
<glyph unicode="&#xf605;" d="M368.615 34.099c6.861-6.938 6.861-18.125 0-25.063s-17.945-6.938-24.807 0l-200.448 202.419c-6.861 6.938-6.861 18.15 0 25.063l200.448 202.445c6.861 6.938 17.945 6.938 24.807 0s6.861-18.125 0-25.063l-182.784-189.901 182.784-189.901z" />
<glyph unicode="&#xf606;" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" />
<glyph unicode="&#xf607;" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" />
<glyph unicode="&#xf608;" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" />
<glyph unicode="&#xf609;" d="M64 362.667h384q8.834 0 15.084-6.25t6.25-15.083-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.083 15.084 6.25zM64 106.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25zM64 234.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25z" />
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Binary file not shown.

View File

@ -1,56 +0,0 @@
/**
* Main JS file for Casper behaviours
*/
/* globals jQuery, document */
(function ($, undefined) {
"use strict";
var $document = $(document);
$document.ready(function () {
var $postContent = $(".post-content");
$postContent.fitVids();
$(".scroll-down").arctic_scroll();
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){
e.preventDefault();
$("body").toggleClass("nav-opened nav-closed");
});
});
// Arctic Scroll by Paul Adam Davis
// https://github.com/PaulAdamDavis/Arctic-Scroll
$.fn.arctic_scroll = function (options) {
var defaults = {
elem: $(this),
speed: 500
},
allOptions = $.extend(defaults, options);
allOptions.elem.click(function (event) {
event.preventDefault();
var $this = $(this),
$htmlBody = $('html, body'),
offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false,
position = ($this.attr('data-position')) ? $this.attr('data-position') : false,
toMove;
if (offset) {
toMove = parseInt(offset);
$htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
} else if (position) {
toMove = parseInt(position);
$htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
} else {
$htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
}
});
};
})(jQuery);

2
assets/public/screen.css Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,55 +1,69 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{{!-- Document Settings --}} {{!-- Document Settings --}}
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
{{!-- Page Meta --}} {{!-- Base Meta --}}
<title>{{meta_title}}</title> <title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}" />
{{!-- Mobile Meta --}}
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Brand icon --}}
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
{{!-- Styles'n'Scripts --}} {{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" /> <link rel="stylesheet" type="text/css" href="{{asset "assets/public/screen.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
{{!-- This tag outputes SEO meta+structured data and other important settings --}}
{{!-- Ghost outputs important style and meta data with this tag --}}
{{ghost_head}} {{ghost_head}}
</head>
<body class="{{body_class}} nav-closed">
{{!-- The blog navigation links --}} </head>
{{navigation}} <body class="{{body_class}}">
<div class="site-wrapper"> <div class="site-wrapper">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
{{{body}}} {{{body}}}
{{!-- The tiny footer at the very bottom --}} {{!-- The footer at the very bottom of the screen --}}
<footer class="site-footer clearfix"> <footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section> <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
<section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section> <nav class="site-footer-nav">
<a href="{{@blog.url}}">Latest Posts</a>
{{#if @blog.facebook}}<a href="{{facebook_url}}">Facebook</a>{{/if}}
{{#if @blog.twitter}}<a href="{{twitter_url}}">Twitter</a>{{/if}}
<a href="https://ghost.org" target="_blank">About Ghost</a>
</nav>
</div>
</footer> </footer>
</div> </div>
{{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}} {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
{{!-- Ghost outputs important scripts and data with this tag --}}
{{ghost_foot}}
{{!-- Fitvids makes video embeds responsive and awesome --}}
<script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
{{!-- The main JavaScript file for Casper --}} <script>
<script type="text/javascript" src="{{asset "js/index.js"}}"></script>
// TODO: Only include this on post.hbs - preferably put in floating-header.hbs and pass up to ghost_foot via block helper or similar.
$(function() {
$(window).scroll(function() {
var header = $(".floating-header");
var title = $(".post-full-title");
var trigger = title.offset().top;
var scroll = $(window).scrollTop();
if (scroll >= trigger + title.height() + 35 ) {
header.addClass("floating-active");
} else {
header.removeClass("floating-active");
}
});
});
</script>
{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
{{ghost_foot}}
</body> </body>
</html> </html>

95
gulpfile.js Normal file
View File

@ -0,0 +1,95 @@
var gulp = require('gulp');
// gulp plugins and utils
var csscomb = require('gulp-csscomb');
var del = require('del');
var extReplace = require('gulp-ext-replace');
var gutil = require('gulp-util');
var livereload = require('gulp-livereload');
var nodemon = require('gulp-nodemon');
var postcss = require('gulp-postcss');
var replace = require('gulp-replace');
var svgmin = require('gulp-svgmin');
var sourcemaps = require('gulp-sourcemaps');
// postcss plugins
var autoprefixer = require('autoprefixer');
var colorFunction = require('postcss-color-function');
var cssnano = require('cssnano');
var customProperties = require('postcss-custom-properties');
var easyimport = require('postcss-easy-import');
var swallowError = function swallowError(error) {
gutil.log(error.toString());
gutil.beep();
this.emit('end');
};
var nodemonServerInit = function () {
livereload.listen(1234);
return nodemon({
ignore: ['gulpfile.js', 'assets/', 'public/', 'cachefiles/', 'locales/']
}).on('restart', function () {
gulp.src('app.js')
.pipe(livereload());
});
};
gulp.task('build', ['css', 'icons'], function (/* cb */) {
return nodemonServerInit();
});
gulp.task('css', function () {
var processors = [
easyimport,
customProperties,
colorFunction(),
autoprefixer({browsers: ['last 2 versions']}),
cssnano()
];
gulp.src('assets/css/*.css')
.on('error', swallowError)
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/public/'))
.pipe(livereload());
});
gulp.task('comb', function () {
return gulp.src('assets/css/**/*.css')
.pipe(csscomb())
.pipe(gulp.dest('assets/css/.'));
});
gulp.task('clean:icons', function () {
return del(['public/icons', 'views/partials/icons/*.hbs']);
});
gulp.task('icons', ['clean:icons'], function () {
gulp.src('assets/icons/**/*.svg')
.pipe(replace(/#(?:[0-9a-f]{3}){1,2}/gi, 'currentColor'))
.pipe(svgmin({
plugins: [{
removeDimensions: true
}, {
removeTitle: true
}]
}))
.pipe(gulp.dest('public/icons'))
.pipe(extReplace('.hbs'))
.pipe(gulp.dest('views/partials/icons'))
.on('end', function () {
livereload.reload();
});
});
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['css']);
gulp.watch('assets/icons/**/*.svg', ['icons']);
});
gulp.task('default', ['build'], function () {
gulp.start('watch');
});

View File

@ -1,27 +1,52 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The big featured header --}} {{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}"> <header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
<nav class="main-nav overlay clearfix"> <div class="inner">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}} <div class="site-header-content">
{{#if @blog.navigation}} <h1 class="site-title">
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a> {{#if @blog.logo}}
<img class="site-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
{{else}}
{{@blog.title}}
{{/if}} {{/if}}
</h1>
<h2 class="site-description">{{@blog.description}}</h2>
</div>
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav> </nav>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title">{{@blog.title}}</h1>
<h2 class="page-description">{{@blog.description}}</h2>
</div> </div>
</div>
<a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
</header> </header>
{{!-- The main content area on the homepage --}} {{!-- The main content area --}}
<main id="content" class="content" role="main"> <main id="site-main" class="site-main outer" role="main">
<div class="inner">
{{!-- The tag below includes the post loop - partials/loop.hbs --}} {{!-- The tag below includes the post loop - partials/loop.hbs --}}
{{> "loop"}} {{> "loop"}}
</div>
</main> </main>

View File

@ -32,5 +32,30 @@
"url": "https://github.com/TryGhost/Casper.git" "url": "https://github.com/TryGhost/Casper.git"
}, },
"bugs": "https://github.com/TryGhost/Casper/issues", "bugs": "https://github.com/TryGhost/Casper/issues",
"contributors": "https://github.com/TryGhost/Casper/graphs/contributors" "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
"devDependencies": {
"autoprefixer": "6.3.6",
"connect-livereload": "0.5.4",
"cssnano": "3.7.1",
"del": "2.2.1",
"gulp": "3.9.1",
"gulp-csscomb": "3.0.7",
"gulp-ext-replace": "0.3.0",
"gulp-live-server": "0.0.30",
"gulp-livereload": "3.8.1",
"gulp-nodemon": "2.1.0",
"gulp-postcss": "6.1.1",
"gulp-replace": "0.5.4",
"gulp-sourcemaps": "1.6.0",
"gulp-svgmin": "1.2.2",
"gulp-util": "3.0.7",
"gulp-watch": "4.3.8",
"postcss-color-function": "2.0.1",
"postcss-custom-properties": "5.0.1",
"postcss-easy-import": "1.0.1",
"postcss-import": "8.1.2"
},
"config": {
"posts_per_page": 25
}
} }

View File

@ -3,17 +3,38 @@
{{!-- This is a page template. A page outputs content just like any other post, and has all the same {{!-- 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. --}} attributes by default, but you can also customise it to behave differently if you prefer. --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div>
</header>
{{!-- Everything inside the #post tags pulls data from the page --}} {{!-- Everything inside the #post tags pulls data from the page --}}
{{#post}} {{#post}}
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
{{#if @blog.navigation}}
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}}
</nav>
</header>
<main class="content" role="main"> <main class="content" role="main">
<article class="{{post_class}}"> <article class="{{post_class}}">

View File

@ -0,0 +1,23 @@
<div class="floating-header">
<div class="floating-header-logo">
<a href="{{@blog.url}}">
{{#if @blog.icon}}
<img src="{{@blog.icon}}" alt="{{@blog.title}} icon" />
{{/if}}
<span>{{@blog.title}}</span>
</a>
</div>
<span class="floating-header-divider">&mdash;</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}}&amp;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>
</div>

1
partials/icons/facebook.hbs Executable file
View File

@ -0,0 +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>

After

Width:  |  Height:  |  Size: 155 B

View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 3.3 KiB

3
partials/icons/point.hbs Normal file
View File

@ -0,0 +1,3 @@
<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>

After

Width:  |  Height:  |  Size: 311 B

1
partials/icons/rss.hbs Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>

After

Width:  |  Height:  |  Size: 263 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>

After

Width:  |  Height:  |  Size: 888 B

View File

@ -1,25 +1,27 @@
{{!-- Previous/next page links - only displayed on page 2+ --}} <div class="post-feed">
<div class="extra-pagination inner"> {{!-- This is the post loop - each post will be output using this markup --}}
{{pagination}} {{#foreach posts}}
</div> <article class="post-card {{post_class}}">
{{#if feature_image}}
{{!-- This is the post loop - each post will be output using this markup --}} <a class="post-card-image-link" href="{{url}}">
{{#foreach posts}} <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
<article class="{{post_class}}"> </a>
<header class="post-header"> {{/if}}
<h2 class="post-title"><a href="{{url}}">{{title}}</a></h2> <div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header> </header>
<section class="post-excerpt"> <section class="post-card-excerpt">
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p> <p>{{excerpt words="33"}}</p>
</section> </section>
<footer class="post-meta"> </a>
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}} <footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}} {{author}}
{{tags prefix=" on "}} <time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
<time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer> </footer>
</article> </div>
{{/foreach}} </article>
{{/foreach}}
{{!-- Previous/next page links - displayed on every page --}} </div>
{{pagination}}

View File

@ -1,17 +1,7 @@
<div class="nav"> <div class="nav-menu">
<h3 class="nav-title">Menu</h3>
<a href="#" class="nav-close">
<span class="hidden">Close</span>
</a>
<ul> <ul>
{{#foreach navigation}} {{#foreach navigation}}
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li> <li class="nav-item nav-item-{{slug}}{{#if current}} nav-item-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
{{/foreach}} {{/foreach}}
</ul> </ul>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
{{/if}}
</div> </div>
<span class="nav-cover"></span>

36
partials/share.hbs Normal file
View File

@ -0,0 +1,36 @@
<section class="share">
<ul class="">
<li>
<a class="share-facebook" 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;"><span class="share-label">Share</span><svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 23C5.935 23 1 18.065 1 12S5.935 1 12 1s11 4.935 11 11-4.935 11-11 11zm3.839-14H14v-.523c0-.087.017-.127.092-.147H15.5c.276 0 .5-.224.5-.5V5.524c0-.275-.223-.499-.499-.5l-2.352-.007C11.148 5.018 10 6.227 10 8.336V9H8.5c-.276 0-.5.224-.5.5v2c0 .276.224.5.5.5H10v6.5c0 .276.224.5.5.5h3c.276 0 .5-.224.5-.5V12h1.595c.253 0 .466-.189.496-.439l.244-2c.018-.142-.026-.285-.122-.392-.095-.108-.231-.169-.374-.169zm-.687 2H13.5c-.276 0-.5.224-.5.5V18h-2v-6.5c0-.276-.224-.5-.5-.5H9v-1h1.5c.276 0 .5-.224.5-.5V8.336c0-2.319 1.618-2.319 2.148-2.319L15 6.023V7.33h-.908c-.526 0-1.092.359-1.092 1.147V9.5c0 .276.224.5.5.5h1.774l-.122 1z"/></a>
</svg>
</li>
<li>
<a class="share-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;"><span class="share-label">Tweet</span><svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M18.446 6.856c-.049.005-1.066.116-1.732.226-.57-.508-1.315-.795-2.085-.795-1.727 0-3.133 1.405-3.133 3.132v.045C9.755 9.227 8.15 8.332 7.027 6.953c-.104-.127-.265-.195-.426-.182-.164.013-.311.105-.394.247-.277.478-.424 1.022-.424 1.575 0 .494.115.971.329 1.399l-.104.049c-.152.09-.246.271-.246.448 0 .906.393 1.739 1.028 2.318-.102.13-.132.301-.082.459.271.846.879 1.515 1.648 1.877-.783.356-1.664.494-2.553.391-.243-.032-.451.109-.528.328-.078.219.005.464.201.589 1.288.826 2.776 1.263 4.305 1.263 5 0 7.988-4.062 7.988-7.989l-.001-.123c.324-.336.565-.833.801-1.316.121-.25.234-.487.347-.656.107-.162.112-.371.012-.537-.101-.164-.288-.257-.482-.237zm-1.477 2.123c-.138.1-.215.262-.206.431l.007.314c0 3.436-2.614 6.989-6.988 6.989-.697 0-1.385-.104-2.043-.306.8-.191 1.55-.553 2.213-1.073.166-.13.232-.351.166-.552-.067-.2-.254-.337-.465-.341-.647-.013-1.238-.315-1.627-.801.163-.018.323-.048.481-.092.224-.062.375-.269.367-.5-.009-.231-.175-.427-.402-.472-.736-.147-1.322-.67-1.575-1.36.179.038.36.06.542.065.232.024.424-.133.492-.346.068-.212-.012-.445-.197-.569-.596-.396-.951-1.06-.951-1.773 0-.129.012-.257.035-.384 1.392 1.381 3.253 2.212 5.222 2.309.16.007.309-.059.408-.179.101-.121.139-.282.103-.435-.036-.156-.055-.319-.055-.485 0-1.176.957-2.132 2.133-2.132.596 0 1.148.239 1.556.674.118.126.293.183.463.148.24-.047.614-.101.967-.146-.198.405-.433.862-.646 1.016zM12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 23C5.935 23 1 18.065 1 12S5.935 1 12 1s11 4.935 11 11-4.935 11-11 11z"/></a>
</svg>
</li>
<li>
<a class="share-mail" href="mailto:?subject={{title}}&body=Hey, saw this on {{@blog.title}} and thought of you! - {{url absolute="true"}}"><span class="share-label">Send</span><svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M18 6H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2zm1 10c0 .551-.449 1-1 1H6c-.551 0-1-.449-1-1V8c0-.551.449-1 1-1h12c.551 0 1 .449 1 1v8zm-1.113-7.816c-.175-.214-.49-.245-.704-.071L12 12.354 6.816 8.113c-.214-.174-.528-.143-.703.071-.175.213-.143.528.071.703l3.618 2.96-3.566 2.229c-.234.146-.305.455-.159.689.094.152.257.235.424.235.09 0 .182-.024.265-.076l3.853-2.408 1.065.872c.091.074.204.112.316.112s.225-.038.316-.113l1.065-.872 3.853 2.408c.083.053.175.077.266.077.167 0 .33-.083.424-.235.146-.234.075-.543-.159-.689l-3.566-2.229 3.618-2.96c.213-.175.245-.49.07-.703zM12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 23C5.935 23 1 18.065 1 12S5.935 1 12 1s11 4.935 11 11-4.935 11-11 11z"/></a>
</svg>
</li>
<li>
<a class="share-tumblr" href="https://www.tumblr.com/share?v=3&u={{url absolute="true"}}&t={{title}}" onclick="window.open(this.href, 'share-tumblr', 'width=450,height=483');return false;"><span class="share-label">Reblog</span><svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 23C5.935 23 1 18.065 1 12S5.935 1 12 1s11 4.935 11 11-4.935 11-11 11zm3.729-8.521c-.161-.087-.357-.079-.512.022-.459.302-.905.468-1.256.468-.795 0-.962-.952-.962-1.751V10h1.5c.276 0 .5-.224.5-.5v-2C15 7.224 14.776 7 14.5 7H13V4.5c0-.276-.224-.5-.5-.5h-1.939c-.253 0-.466.188-.496.439-.075.606-.202 1.043-.441 1.51-.204.403-.48.755-.821 1.045-.252.214-.742.441-1.457.673-.206.066-.346.258-.346.475V9.5c0 .276.224.5.5.5H9v4.031c0 1.271.33 2.429.929 3.264.7.977 1.728 1.493 2.973 1.493.849 0 1.792-.242 2.804-.72.176-.083.287-.259.287-.452V14.92c-.001-.184-.101-.354-.264-.441zm-.737 2.813c-1.898.814-3.394.616-4.251-.581-.478-.665-.741-1.617-.741-2.68V9.5c0-.276-.224-.5-.5-.5H8v-.5c.674-.24 1.14-.48 1.451-.745.442-.377.801-.832 1.064-1.354.229-.447.379-.884.474-1.401H12v2.5c0 .276.224.5.5.5H14v1h-1.5c-.276 0-.5.224-.5.5v3.719c0 2.552 1.502 2.751 1.962 2.751.323 0 .671-.075 1.03-.22v1.542z"/></a>
</svg>
</li>
<li>
<a class="share-pinterest" href="https://www.pinterest.com/pin/create/bookmarklet/?media={{image absolute="true"}}&url={{url absolute="true"}}&description={{title}}" onclick="window.open(this.href, 'share-pinterest', 'width=770,height=560');return false;"><span class="share-label">Pin</span><svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 23C5.935 23 1 18.065 1 12S5.935 1 12 1s11 4.935 11 11-4.935 11-11 11zm.531-19.5c-4.425 0-7.068 3.173-7.068 6.24 0 .958.204 1.831.591 2.523.134.238.435.325.671.197l1.513-.805c.234-.124.331-.409.22-.65-.137-.297-.203-.637-.203-1.037 0-1.938 1.383-3.9 4.025-3.9 2.051 0 3.324 1.158 3.324 3.021 0 2.46-1.061 4.388-2.414 4.388-.33 0-.625-.133-.809-.365-.17-.215-.226-.496-.156-.791.098-.408.227-.829.354-1.238.242-.784.472-1.525.472-2.139 0-1.123-.699-1.878-1.74-1.878-1.274 0-2.272 1.264-2.272 2.878 0 .691.168 1.232.269 1.498l-1.144 4.85c-.31 1.31-.158 2.842-.037 3.672.042.312.3.537.614.537.197 0 .379-.091.514-.268.398-.507 1.361-1.829 1.729-3.158.064-.231.263-1.012.424-1.645.539.39 1.262.633 1.984.633 3.163 0 5.459-2.858 5.459-6.797-.001-2.834-2.365-5.766-6.32-5.766zm.86 11.562c-.83 0-1.581-.455-1.801-.876-.096-.184-.297-.287-.502-.266-.206.024-.375.174-.426.375 0 0-.533 2.109-.644 2.516-.201.73-.626 1.478-1.008 2.053-.053-.711-.054-1.581.126-2.344l1.183-5.007c.026-.112.013-.232-.038-.336-.002-.005-.242-.508-.242-1.233 0-1.053.559-1.878 1.272-1.878.645 0 .74.55.74.878 0 .463-.208 1.134-.427 1.844-.134.43-.269.872-.372 1.302-.142.6-.02 1.184.345 1.644.374.473.955.744 1.593.744 1.946 0 3.414-2.316 3.414-5.388 0-2.405-1.737-4.021-4.324-4.021-2.865 0-5.025 2.106-5.025 4.9 0 .365.043.699.131 1.009l-.662.352c-.171-.462-.26-1.002-.26-1.589 0-2.54 2.127-5.24 6.068-5.24 3.329 0 5.318 2.423 5.318 4.766 0 3.412-1.834 5.795-4.459 5.795z"/>
</svg></a>
</li>
<li>
<a class="share-whatsapp" href="whatsapp://send?text={{url absolute="true"}}"><span class="share-label">WhatsApp</span><svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M18.652 14.46l-.166-.08c-.019-.01-1.964-.968-2.344-1.104-.435-.16-1.003-.144-1.34.357-.179.268-.722.91-1.006 1.273l-.144-.055-.245-.109c-.465-.2-1.33-.572-2.342-1.467-.938-.831-1.587-1.881-1.795-2.147l.097-.106c.593-.585.777-.956.932-1.266.165-.322.156-.671-.026-1.036-.058-.117-.358-.843-.635-1.511l-.385-.924c-.234-.56-.852-.908-1.612-.908-.601 0-1.165.221-1.509.593-1.806 1.96-1.748 4.33.165 6.856l.059.086c1.673 2.46 3.763 4.271 5.886 5.102 2.213.864 2.989.981 3.457.981.261 0 .44-.043.583-.077l.211-.04c1.317-.119 2.28-1.137 2.705-1.973.38-.749.431-1.458.136-1.949-.147-.241-.383-.354-.682-.496zm-.346 1.99c-.309.608-.993 1.348-1.903 1.43l-.354.063c-.116.028-.207.05-.35.05-.509 0-1.521-.298-3.093-.912-1.937-.757-3.862-2.438-5.423-4.733l-.088-.126c-1.606-2.12-1.683-3.996-.227-5.574.152-.165.456-.271.774-.271.339 0 .616.118.69.295l.383.92c.29.703.608 1.468.664 1.577.048.096.039.111.005.181-.12.242-.245.492-.72.961-.17.168-.623.615-.227 1.285.25.429.944 1.523 1.965 2.428 1.133 1.001 2.13 1.431 2.609 1.637l.196.087c.556.275.978.192 1.325-.202.008-.01.823-.94 1.08-1.386l.191.057c.254.091 1.762.822 2.239 1.06l.179.087.256.109c.088.145.057.528-.171.977zM11.999.18c-6.617 0-12 5.343-12 11.909 0 2.438.737 4.774 2.136 6.772L.78 22.857c-.061.179-.015.376.117.511.132.134.328.183.508.126L5.6 22.161C7.517 23.365 9.724 24 12 24c6.616 0 11.999-5.343 11.999-11.91S18.616.18 11.999.18zM12 23c-2.161 0-4.254-.624-6.053-1.805-.083-.054-.178-.082-.274-.082l-.151.023-3.477 1.104 1.119-3.302c.052-.154.026-.324-.07-.455-1.37-1.872-2.095-4.084-2.095-6.396 0-6.016 4.935-10.909 11-10.909 6.066 0 11 4.895 11 10.91C22.999 18.105 18.065 23 12 23z"/>
</svg></a>
</li>
</ul>
</section>

201
post.hbs
View File

@ -1,46 +1,90 @@
{{!< default}} {{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The comment above "< default" means - insert everything in this file into {{!-- The big featured header, it uses blog cover image as a BG if available --}}
the {{{body}}} of the default.hbs template, containing the blog header/footer. --}} <header class="site-header outer">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div>
</header>
{{!-- Everything inside the #post tags pulls data from the post --}} {{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}} {{#post}}
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}"> {{> floating-header}}
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}} <main id="site-main" class="site-main outer" role="main">
{{#if @blog.navigation}} <div class="inner">
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
<article class="post-full {{post_class}}">
<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 tags}}
<span class="date-divider">/</span> <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a>
{{/if}} {{/if}}
</nav>
</header>
<main class="content" role="main">
<article class="{{post_class}}">
<header class="post-header">
<h1 class="post-title">{{title}}</h1>
<section class="post-meta">
<time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time> {{tags prefix=" on "}}
</section> </section>
<h1 class="post-full-title">{{title}}</h1>
</header> </header>
<section class="post-content"> {{#if feature_image}}
{{content}} <figure class="post-full-image" style="background-image: url({{feature_image}})">
</section>
<footer class="post-footer">
{{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}}
{{#if image}}
<figure class="author-image">
<a class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
</figure> </figure>
{{/if}} {{/if}}
<section class="author"> <section class="post-full-content">
{{content}}
</section>
{{!-- Email subscribe form at the bottom of the page --}}
{{#if @labs.subscribers}}
<section class="subscribe-form">
<h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
<p>Get the latest posts delivered right to your inbox</p>
{{subscribe_form placeholder="youremail@example.com"}}
</section>
{{/if}}
<footer class="post-full-footer">
{{!-- Everything inside the #author tags pulls data from the author --}}
<section class="author-card">
{{#author}}
{{#if profile_image}}
<figure class="author-card-image">
<a class="img" href="{{url}}" style="background-image: url({{profile_image}})"><span class="hidden">{{name}}'s Picture</span></a>
</figure>
{{/if}}
<section class="author-card-content">
<h4><a href="{{url}}">{{name}}</a></h4> <h4><a href="{{url}}">{{name}}</a></h4>
{{#if bio}} {{#if bio}}
@ -48,13 +92,14 @@
{{else}} {{else}}
<p>Read <a href="{{url}}">more posts</a> by this author.</p> <p>Read <a href="{{url}}">more posts</a> by this author.</p>
{{/if}} {{/if}}
<div class="author-meta"> <div class="author-card-meta">
{{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}} {{#if location}}<span class="author-card-location">{{location}}</span>{{/if}}
{{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}} {{#if website}}<span class="author-card-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
</div> </div>
</section> </section>
{{/author}} {{/author}}
</section>
<section class="share"> <section class="share">
<h4>Share this post</h4> <h4>Share this post</h4>
@ -66,45 +111,89 @@
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"> onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span> <span class="hidden">Facebook</span>
</a> </a>
<a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<span class="hidden">Google+</span>
</a>
</section> </section>
{{!-- Email subscribe form at the bottom of the page --}}
{{#if @labs.subscribers}}
<section class="gh-subscribe">
<h3 class="gh-subscribe-title">Subscribe to {{@blog.title}}</h3>
<p>Get the latest posts delivered right to your inbox.</p>
{{subscribe_form placeholder="Your email address"}}
<span class="gh-subscribe-rss">or subscribe <a href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/">via RSS</a> with Feedly!</span>
</section>
{{/if}}
</footer> </footer>
</article> </article>
</div>
</main> </main>
{{!-- Links to Previous/Next posts --}} {{!-- Links to Previous/Next posts --}}
<aside class="read-next"> <aside class="read-next outer">
<div class="inner">
<div class="read-next-feed">
{{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
<article class="read-next-card read-next-card {{post_class}}"{{#if ../tags.[0].feature_image}} style="background-image: url({{../tags.[0].feature_image}})"{{/if}}>
<header class="read-next-card-header">
<h3 class="read-next-card-header-title">Read more posts like this</h3>
</header>
<div class="read-next-card-content">
<ol>
{{#foreach posts}}
<li><a href="{{url}}">{{title}}</a></li>
{{/foreach}}
</ol>
</div>
</article>
{{/get}}
{{#next_post}} {{#next_post}}
<a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}"> <article class="post-card {{post_class}}">
<section class="post"> {{#if feature_image}}
<h2>{{title}}</h2> <a class="post-card-image-link" href="{{url}}">
<p>{{excerpt words="19"}}&hellip;</p> <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="28"}}</p>
</section> </section>
</a> </a>
<footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</div>
</article>
{{/next_post}} {{/next_post}}
{{#prev_post}} {{#prev_post}}
<a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}"> <article class="post-card {{post_class}}">
<section class="post"> {{#if feature_image}}
<h2>{{title}}</h2> <a class="post-card-image-link" href="{{url}}">
<p>{{excerpt words="19"}}&hellip;</p> <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="28"}}</p>
</section> </section>
</a> </a>
<footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</div>
</article>
{{/prev_post}} {{/prev_post}}
</div>
</div>
</aside> </aside>
{{/post}} {{/post}}

41
tag.hbs
View File

@ -1,14 +1,37 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div>
</header>
{{!-- If we have a tag cover, display that - else blog cover - else nothing --}} {{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}"> <header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
<nav class="main-nav overlay clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
{{#if @blog.navigation}}
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}}
</nav>
<div class="vertical"> <div class="vertical">
{{#tag}} {{#tag}}
<div class="main-header-content inner"> <div class="main-header-content inner">
@ -25,10 +48,12 @@
</div> </div>
</header> </header>
{{!-- The main content area on the homepage --}} {{!-- The main content area --}}
<main class="content" role="main"> <main id="site-main" class="site-main outer" role="main">
<div class="inner">
{{!-- The tag below includes the post loop - partials/loop.hbs --}} {{!-- The tag below includes the post loop - partials/loop.hbs --}}
{{> "loop"}} {{> "loop"}}
</div>
</main> </main>