Initial commit
This commit is contained in:
John O'Nolan
parent
92d12e1072
commit
31be8a2291
|
|
@ -0,0 +1,17 @@
|
|||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.hbs]
|
||||
insert_final_newline = false
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
b-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
.idea/*
|
||||
*.iml
|
||||
projectFilesBackup
|
||||
|
||||
.DS_Store
|
||||
|
||||
dist/
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
language: node_js
|
||||
sudo: false
|
||||
node_js:
|
||||
- "8"
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Copyright (c) 2013-2018 Ghost Foundation
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
57
README.md
57
README.md
|
|
@ -1,2 +1,55 @@
|
|||
# Starter
|
||||
A development starter theme for Ghost
|
||||
# Ghost Starter Theme
|
||||
|
||||
A starter framework for Ghost themes! Fork this repository and start your development here with all the main things you need to develop a custom Ghost theme.
|
||||
|
||||
|
||||
|
||||
# First time using a Ghost theme?
|
||||
|
||||
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://themes.ghost.org) 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
|
||||
- `page.hbs` - Used for individual pages
|
||||
- `tag.hbs` - Used for tag archives
|
||||
- `author.hbs` - Used for author archives
|
||||
|
||||
One 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:
|
||||
|
||||
- `page-about.hbs` - Custom template for the `/about/` page
|
||||
- `tag-news.hbs` - Custom template for `/tag/news/` archive
|
||||
- `author-ali.hbs` - Custom template for `/author/ali/` archive
|
||||
|
||||
|
||||
# Development
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
|
||||
|
||||
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
|
||||
|
||||
```bash
|
||||
$ yarn zip
|
||||
```
|
||||
|
||||
# PostCSS Features Used
|
||||
|
||||
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
|
||||
- Variables - Simple pure CSS variables
|
||||
- [Color Function](https://github.com/postcss/postcss-color-function)
|
||||
|
||||
|
||||
# Copyright & License
|
||||
|
||||
Copyright (c) 2013-2018 Ghost Foundation - Released under the [MIT license](LICENSE).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
$(function(t){var o=1,r=window.location.pathname,a=t(document),s=t(".post-feed"),c=300,l=!1,w=!1,d=window.scrollY,v=window.innerHeight,u=a.height();function f(){d=window.scrollY,e()}function g(){v=window.innerHeight,u=a.height(),e()}function e(){l||requestAnimationFrame(n),l=!0}function n(){var e,n;if(n=/(?:page\/)(\d)(?:\/)$/i,(e=(e=r).replace(/#(.*)$/g,"").replace("////g","/")).match(n)&&(o=parseInt(e.match(n)[1]),e=e.replace(n,"")),r=e,!w)if(d+v<=u-c)l=!1;else{if(o>=maxPages)return window.removeEventListener("scroll",f,{passive:!0}),void window.removeEventListener("resize",g);w=!0;var i=r+"page/"+(o+=1)+"/";t.get(i,function(e){var n=document.createRange().createContextualFragment(e).querySelectorAll(".post");n.length&&[].forEach.call(n,function(e){s[0].appendChild(e)})}).fail(function(e){404===e.status&&(window.removeEventListener("scroll",f,{passive:!0}),window.removeEventListener("resize",g))}).always(function(){u=a.height(),l=w=!1})}}window.addEventListener("scroll",f,{passive:!0}),window.addEventListener("resize",g),n()});
|
||||
//# sourceMappingURL=infinitescroll.js.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
|
|
@ -0,0 +1,110 @@
|
|||
/* Buttons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button,
|
||||
.button {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
padding: 0 2rem;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-sans-serif);
|
||||
font-size: 1.4rem;
|
||||
font-weight: var(--font-normal);
|
||||
line-height: var(--height);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
appearance: none;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
input[type="submit"].fit,
|
||||
input[type="reset"].fit,
|
||||
input[type="button"].fit,
|
||||
button.fit,
|
||||
.button.fit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="submit"].small,
|
||||
input[type="reset"].small,
|
||||
input[type="button"].small,
|
||||
button.small,
|
||||
.button.small {
|
||||
height: calc(var(--height) * 0.9);
|
||||
line-height: calc(var(--height) * 0.9);
|
||||
padding: 0 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
input[type="submit"].large,
|
||||
input[type="reset"].large,
|
||||
input[type="button"].large,
|
||||
button.large,
|
||||
.button.large {
|
||||
height: calc(var(--height) * 1.14);
|
||||
line-height: calc(var(--height) * 1.14);
|
||||
padding: 0 3rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
|
||||
input[type="submit"].disabled,
|
||||
input[type="submit"]:disabled,
|
||||
input[type="reset"].disabled,
|
||||
input[type="reset"]:disabled,
|
||||
input[type="button"].disabled,
|
||||
input[type="button"]:disabled,
|
||||
button.disabled,
|
||||
button:disabled,
|
||||
.button.disabled,
|
||||
.button:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button,
|
||||
.button {
|
||||
color: var(--color-primary) !important;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 2px var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
button:hover,
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
color: color(var(--color-primary) l(-15%)) !important;
|
||||
box-shadow: inset 0 0 0 2px color(var(--color-primary) l(-10%));
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="submit"].primary,
|
||||
input[type="reset"].primary,
|
||||
input[type="button"].primary,
|
||||
button.primary,
|
||||
.button.primary {
|
||||
color: #fff !important;
|
||||
background-color: var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="submit"].primary:hover,
|
||||
input[type="reset"].primary:hover,
|
||||
input[type="button"].primary:hover,
|
||||
button.primary:hover,
|
||||
.button.primary:hover {
|
||||
background-color: color(var(--color-primary) l(-10%));
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/* Forms
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
form {
|
||||
margin: 0 0 var(--margin) 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--color-primary);
|
||||
play: block;
|
||||
font-size: 0.9em;
|
||||
font-weight: var(--font-bold);
|
||||
margin: 0 0 (var(--margin) * 0.5) 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea {
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
border: solid 1px var(--color-border);
|
||||
color: inherit;
|
||||
display: block;
|
||||
outline: 0;
|
||||
padding: 0 0.6em;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="text"]:invalid,
|
||||
input[type="password"]:invalid,
|
||||
input[type="email"]:invalid,
|
||||
input[type="tel"]:invalid,
|
||||
input[type="search"]:invalid,
|
||||
input[type="url"]:invalid,
|
||||
select:invalid,
|
||||
textarea:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="url"]:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 1px var(--color-primary);
|
||||
}
|
||||
|
||||
select {
|
||||
height: var(--height);
|
||||
padding-right: var(--height);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
select option {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
select:focus::-ms-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
select {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 0.3em 0.6em;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: block;
|
||||
margin-right: -2em;
|
||||
opacity: 0;
|
||||
width: 1em;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label,
|
||||
input[type="radio"] + label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-base);
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: var(--font-normal);
|
||||
padding-left: calc(var(--height) * 0.6) + 0.75em;
|
||||
padding-right: 2rem;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label:before,
|
||||
input[type="radio"] + label:before {
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px var(--color-border);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: calc(var(--height) * 0.6);
|
||||
line-height: calc(var(--height) * 0.56);
|
||||
text-align: center;
|
||||
width: calc(var(--height) * 0.6);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label:before,
|
||||
input[type="radio"]:checked + label:before {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
content: '✓';
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus + label:before,
|
||||
input[type="radio"]:focus + label:before {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 1px var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"] + label:before {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
input[type="radio"] + label:before {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/* Styling for Ghost-specific elements
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-card {
|
||||
margin: 7vw 0;
|
||||
}
|
||||
|
||||
.kg-embed-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.kg-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.kg-card figcaption {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: 600;
|
||||
color: var(--color-base);
|
||||
text-align: center;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.kg-width-wide {
|
||||
position: relative;
|
||||
width: 75vw;
|
||||
min-width: 100%;
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
transform: translateX(calc(50vw - 50%));
|
||||
}
|
||||
|
||||
.kg-width-full {
|
||||
position: relative;
|
||||
width: 94vw;
|
||||
min-width: 100%;
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
transform: translateX(calc(50vw - 50%));
|
||||
}
|
||||
|
||||
.kg-width-full figcaption {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.kg-width-full {
|
||||
width: 100vw;
|
||||
}
|
||||
.kg-width-full figcaption {
|
||||
padding-left: 6vw;
|
||||
}
|
||||
}
|
||||
|
||||
.kg-gallery-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 75vw;
|
||||
min-width: 100%;
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
transform: translateX(calc(50vw - 50%));
|
||||
}
|
||||
|
||||
.kg-gallery-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.kg-gallery-image img {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kg-gallery-row:not(:first-of-type) {
|
||||
margin: 0.75em 0 0 0;
|
||||
}
|
||||
|
||||
.kg-gallery-image:not(:first-of-type) {
|
||||
margin: 0 0 0 0.75em;
|
||||
}
|
||||
|
||||
.kg-gallery-card + .kg-image-card.kg-width-wide,
|
||||
.kg-gallery-card + .kg-gallery-card,
|
||||
.kg-image-card.kg-width-wide + .kg-gallery-card,
|
||||
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
|
||||
margin-top: calc( -7vw + 0.75em );
|
||||
}
|
||||
|
|
@ -0,0 +1,406 @@
|
|||
/* 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;
|
||||
}
|
||||
i,
|
||||
em,
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
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(--color-base) l(+20%));
|
||||
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: #cbeafb;
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2.5em 0 3.5em;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid color(var(--color-border) l(+10%));
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1.5em 0;
|
||||
padding: 0 1.6em 0 1.6em;
|
||||
border-left: var(--color-bg) 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(--color-primary) l(-5%));
|
||||
text-decoration: none;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-size: 5.7rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h1 {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 4rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 1.5em 0 1em 0;
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h3 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 1.5em 0 1em 0;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1.5em 0 1em 0;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin: 1.5em 0 1em 0;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/* Grid
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
|
||||
.col,
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
flex-basis: 8.3333333%;
|
||||
max-width: 8.3333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex-basis: 16.6666666%;
|
||||
max-width: 16.6666666%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
flex-basis: 33.3333333%;
|
||||
max-width: 33.3333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex-basis: 41.6666666%;
|
||||
max-width: 41.6666666%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
flex-basis: 58.3333333%;
|
||||
max-width: 58.3333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex-basis: 66.6666666%;
|
||||
max-width: 66.6666666%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
flex-basis: 83.3333333%;
|
||||
max-width: 83.3333333%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex-basis: 91.6666666%;
|
||||
max-width: 91.6666666%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11 {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11 {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/* Lists
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
margin: 0 0 var(--margin) 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 1.3em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul {
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 0.3em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
|
||||
dt {
|
||||
display: block;
|
||||
font-weight: var(--font-bold);
|
||||
margin: 0 0 calc(var(--margin) * 0.5) 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: var(--margin);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/* Tables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
margin: 0 0 var(--margin) 0;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--color-base);
|
||||
font-size: 0.9em;
|
||||
font-weight: var(--font-bold);
|
||||
padding: 0 0.7em 0.4em 0.7em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.4em 0.7em;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border: solid 1px var(--color-border);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
tbody tr:first-child td {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2n + 1) {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border: solid 1px var(--color-border);
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-width: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
|
||||
This is a development CSS file which is built to a minified
|
||||
production stylesheet in assets/built/screen.css using gulp dev
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* Lib - Local component imports
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "vars.css";
|
||||
@import "components/global.css";
|
||||
@import "components/ghost.css";
|
||||
@import "components/lists.css";
|
||||
@import "components/grid.css";
|
||||
@import "components/tables.css";
|
||||
@import "components/forms.css";
|
||||
@import "components/buttons.css";
|
||||
|
||||
|
||||
/* Main - Theme styles
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Your styles here */
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/* Variables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
|
||||
/* Colours */
|
||||
--color-primary: #3eb0ef;
|
||||
--color-base: #131313;
|
||||
--color-border: #ddd;
|
||||
--color-bg: #f5f5f5;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--font-serif: Georgia, Times, serif;
|
||||
--font-mono: Menlo, Courier, monospace;
|
||||
--font-light: 100;
|
||||
--font-normal: 400;
|
||||
--font-bold: 700;
|
||||
--font-heavy: 800;
|
||||
|
||||
/* Breakpoints */
|
||||
--xlarge: 1680px;
|
||||
--large: 1280px;
|
||||
--medium: 980px;
|
||||
--small: 740px;
|
||||
--xsmall: 480px;
|
||||
|
||||
/* Sizes */
|
||||
--height: 4rem;
|
||||
--margin: 2rem;
|
||||
--radius: 0.5rem;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
/* global maxPages */
|
||||
|
||||
// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
|
||||
$(function ($) {
|
||||
var currentPage = 1;
|
||||
var pathname = window.location.pathname;
|
||||
var $document = $(document);
|
||||
var $result = $('.post-feed');
|
||||
var buffer = 300;
|
||||
|
||||
var ticking = false;
|
||||
var isLoading = false;
|
||||
|
||||
var lastScrollY = window.scrollY;
|
||||
var lastWindowHeight = window.innerHeight;
|
||||
var lastDocumentHeight = $document.height();
|
||||
|
||||
function onScroll() {
|
||||
lastScrollY = window.scrollY;
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
lastWindowHeight = window.innerHeight;
|
||||
lastDocumentHeight = $document.height();
|
||||
requestTick();
|
||||
}
|
||||
|
||||
function requestTick() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(infiniteScroll);
|
||||
}
|
||||
ticking = true;
|
||||
}
|
||||
|
||||
function sanitizePathname(path) {
|
||||
var paginationRegex = /(?:page\/)(\d)(?:\/)$/i;
|
||||
|
||||
// remove hash params from path
|
||||
path = path.replace(/#(.*)$/g, '').replace('////g', '/');
|
||||
|
||||
// remove pagination from the path and replace the current pages
|
||||
// with the actual requested page. E. g. `/page/3/` indicates that
|
||||
// the user actually requested page 3, so we should request page 4
|
||||
// next, unless it's the last page already.
|
||||
if (path.match(paginationRegex)) {
|
||||
currentPage = parseInt(path.match(paginationRegex)[1]);
|
||||
|
||||
path = path.replace(paginationRegex, '');
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
function infiniteScroll() {
|
||||
// sanitize the pathname from possible pagination or hash params
|
||||
pathname = sanitizePathname(pathname);
|
||||
|
||||
// return if already loading
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
// return if not scroll to the bottom
|
||||
if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
|
||||
ticking = false;
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* maxPages is defined in default.hbs and is the value
|
||||
* of the amount of pagination pages.
|
||||
* If we reached the last page or are past it,
|
||||
* we return and disable the listeners.
|
||||
*/
|
||||
if (currentPage >= maxPages) {
|
||||
window.removeEventListener('scroll', onScroll, {passive: true});
|
||||
window.removeEventListener('resize', onResize);
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
// next page
|
||||
currentPage += 1;
|
||||
|
||||
// Load more
|
||||
var nextPage = pathname + 'page/' + currentPage + '/';
|
||||
|
||||
$.get(nextPage, function (content) {
|
||||
var parse = document.createRange().createContextualFragment(content);
|
||||
var posts = parse.querySelectorAll('.post');
|
||||
if (posts.length) {
|
||||
[].forEach.call(posts, function (post) {
|
||||
$result[0].appendChild(post);
|
||||
});
|
||||
}
|
||||
}).fail(function (xhr) {
|
||||
// 404 indicates we've run out of pages
|
||||
if (xhr.status === 404) {
|
||||
window.removeEventListener('scroll', onScroll, {passive: true});
|
||||
window.removeEventListener('resize', onResize);
|
||||
}
|
||||
}).always(function () {
|
||||
lastDocumentHeight = $document.height();
|
||||
isLoading = false;
|
||||
ticking = false;
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, {passive: true});
|
||||
window.addEventListener('resize', onResize);
|
||||
|
||||
infiniteScroll();
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#author}}
|
||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
<header class="page-head">
|
||||
<h1 class="page-head-title">{{name}}</h1>
|
||||
{{#if bio}}<p class="page-head-description">{{bio}}</p>{{/if}}
|
||||
|
||||
<div class="author-meta">
|
||||
<div class="author-links">
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" rel="noopener">Website</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
<a href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">RSS</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{{/author}}
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{lang}}">
|
||||
<head>
|
||||
|
||||
{{!-- Document Settings --}}
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
{{!-- Base Meta --}}
|
||||
<title>{{meta_title}}</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
{{!-- Styles'n'Scripts --}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
|
||||
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
|
||||
{{ghost_head}}
|
||||
|
||||
</head>
|
||||
<body class="{{body_class}}">
|
||||
|
||||
<div class="site-wrapper">
|
||||
|
||||
<header class="site-head">
|
||||
<div class="site-head-container">
|
||||
<nav id="swup" class="site-head-left">
|
||||
{{navigation}}
|
||||
</nav>
|
||||
<div class="site-head-center">
|
||||
{{#if @blog.logo}}
|
||||
<a class="site-head-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-head-logo" href="{{@blog.url}}">{{@blog.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="site-head-right">
|
||||
<div class="social-links">
|
||||
{{#if @blog.facebook}}
|
||||
<a href="{{facebook_url @blog.facebook}}" title="Facebook" target="_blank" rel="noopener">Facebook</a>
|
||||
{{/if}}
|
||||
{{#if @blog.twitter}}
|
||||
<a href="{{twitter_url @blog.twitter}}" title="Twitter" target="_blank" rel="noopener">Twitter</a>
|
||||
{{/if}}
|
||||
<a href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="site-main" class="site-main">
|
||||
|
||||
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
|
||||
{{{body}}}
|
||||
|
||||
</main>
|
||||
|
||||
{{!-- The footer at the very bottom of the screen --}}
|
||||
<footer class="site-foot">
|
||||
© {{date format="YYYY"}} <a href="{{@blog.url}}">{{@blog.title}}</a> — Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
{{#if pagination.pages}}
|
||||
<script>
|
||||
// maxPages is a global variable that is needed to determine
|
||||
// if we need to load more pages for the infinitescroll, or if
|
||||
// we reached the last page already.
|
||||
var maxPages = parseInt('{{pagination.pages}}');
|
||||
</script>
|
||||
<script src="{{asset "built/infinitescroll.js"}}"></script>
|
||||
{{/if}}
|
||||
|
||||
{{!-- 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"}}}
|
||||
|
||||
{{!-- 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{{!< default}}
|
||||
|
||||
<header class="page-head error-head">
|
||||
<h1 class="page-head-title">{{code}}</h1>
|
||||
<p class="page-head-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
|
||||
</header>
|
||||
|
||||
{{#if errorDetails}}
|
||||
<div class="post-content-body">
|
||||
<section class="error-stack">
|
||||
<h3>Theme errors</h3>
|
||||
<ul class="error-stack-list">
|
||||
{{#each errorDetails}}
|
||||
<li>
|
||||
<em class="error-stack-function">{{{rule}}}</em>
|
||||
|
||||
{{#each failures}}
|
||||
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
|
||||
<p><span class="error-stack-file">Message: {{message}}</span></p>
|
||||
{{/each}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
var gulp = require('gulp');
|
||||
|
||||
// gulp plugins and utils
|
||||
var gutil = require('gulp-util');
|
||||
var livereload = require('gulp-livereload');
|
||||
var postcss = require('gulp-postcss');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var zip = require('gulp-zip');
|
||||
var uglify = require('gulp-uglify');
|
||||
var filter = require('gulp-filter');
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
gulp.task('build', ['css', 'js'], function (/* cb */) {
|
||||
return nodemonServerInit();
|
||||
});
|
||||
|
||||
gulp.task('generate', ['css', 'js']);
|
||||
|
||||
gulp.task('css', function () {
|
||||
var processors = [
|
||||
easyimport,
|
||||
customProperties,
|
||||
colorFunction(),
|
||||
autoprefixer({browsers: ['last 2 versions']}),
|
||||
cssnano()
|
||||
];
|
||||
|
||||
return gulp.src('assets/css/screen.css')
|
||||
.on('error', swallowError)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(postcss(processors))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('assets/built/'))
|
||||
.pipe(livereload());
|
||||
});
|
||||
|
||||
gulp.task('js', function () {
|
||||
var jsFilter = filter(['**/*.js'], {restore: true});
|
||||
|
||||
return gulp.src('assets/js/*.js')
|
||||
.on('error', swallowError)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(jsFilter)
|
||||
.pipe(uglify())
|
||||
.pipe(jsFilter.restore)
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('assets/built/'))
|
||||
.pipe(livereload());
|
||||
});
|
||||
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch('assets/css/**/*.css', ['css']);
|
||||
});
|
||||
|
||||
gulp.task('zip', ['css', 'js'], function () {
|
||||
var targetDir = 'dist/';
|
||||
var themeName = require('./package.json').name;
|
||||
var filename = themeName + '.zip';
|
||||
|
||||
return gulp.src([
|
||||
'**',
|
||||
'!node_modules', '!node_modules/**',
|
||||
'!dist', '!dist/**'
|
||||
])
|
||||
.pipe(zip(filename))
|
||||
.pipe(gulp.dest(targetDir));
|
||||
});
|
||||
|
||||
gulp.task('default', ['build'], function () {
|
||||
gulp.start('watch');
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#is "home"}}
|
||||
{{#if @blog.description}}
|
||||
<header class="page-head">
|
||||
<h2 class="page-head-title">{{@blog.description}}</h2>
|
||||
</header>
|
||||
{{/if}}
|
||||
{{/is}}
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"name": "london",
|
||||
"description": "A minimum, image-centric theme for Ghost.",
|
||||
"demo": "https://london.ghost.io",
|
||||
"version": "1.0.0",
|
||||
"engines": {
|
||||
"ghost": ">=2.0.0"
|
||||
},
|
||||
"license": "MIT",
|
||||
"screenshots": {
|
||||
"desktop": "assets/screenshot-desktop.jpg",
|
||||
"mobile": "assets/screenshot-mobile.jpg"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "gulp",
|
||||
"zip": "gulp zip",
|
||||
"test": "gscan ."
|
||||
},
|
||||
"author": {
|
||||
"name": "Ghost Foundation",
|
||||
"email": "hello@ghost.org",
|
||||
"url": "https://ghost.org"
|
||||
},
|
||||
"gpm": {
|
||||
"type": "theme",
|
||||
"categories": [
|
||||
"Minimal",
|
||||
"Magazine"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"ghost",
|
||||
"theme",
|
||||
"ghost-theme"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/TryGhost/London.git"
|
||||
},
|
||||
"bugs": "https://github.com/TryGhost/London/issues",
|
||||
"contributors": "https://github.com/TryGhost/London/graphs/contributors",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "6.3.6",
|
||||
"cssnano": "3.7.1",
|
||||
"gscan": "^2.0.0",
|
||||
"gulp": "3.9.1",
|
||||
"gulp-livereload": "3.8.1",
|
||||
"gulp-postcss": "6.1.1",
|
||||
"gulp-sourcemaps": "1.6.0",
|
||||
"gulp-util": "3.0.7",
|
||||
"gulp-watch": "4.3.8",
|
||||
"gulp-zip": "4.0.0",
|
||||
"postcss-color-function": "2.0.1",
|
||||
"postcss-custom-properties": "5.0.1",
|
||||
"postcss-easy-import": "1.0.1",
|
||||
"gulp-filter": "5.1.0",
|
||||
"gulp-uglify": "3.0.1"
|
||||
},
|
||||
"config": {
|
||||
"posts_per_page": 15,
|
||||
"image_sizes": {
|
||||
"xxs": {
|
||||
"width": 30
|
||||
},
|
||||
"xs": {
|
||||
"width": 100
|
||||
},
|
||||
"s": {
|
||||
"width": 300
|
||||
},
|
||||
"m": {
|
||||
"width": 600
|
||||
},
|
||||
"l": {
|
||||
"width": 1200
|
||||
},
|
||||
"xl": {
|
||||
"width": 2000
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<article class="post-content {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
|
||||
|
||||
<div class="post-content-body">
|
||||
{{content}}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
{{/post}}
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
// Layout Script for Ghost Gallery Cards
|
||||
var images = document.querySelectorAll('.kg-gallery-image img');
|
||||
images.forEach(function (image) {
|
||||
var container = image.closest('.kg-gallery-image');
|
||||
var width = image.attributes.width.value;
|
||||
var height = image.attributes.height.value;
|
||||
var ratio = width / height;
|
||||
container.style.flex = ratio + ' 1 0%';
|
||||
})
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{{!--
|
||||
Re-usable card for linking to posts
|
||||
--}}
|
||||
|
||||
<article class="post-card {{post_class}} {{#if feature_image}}with-image" style="background-image: url({{img_url feature_image size="l"}}){{else}}no-image{{/if}}">
|
||||
<a class="post-card-link" href="{{url}}">
|
||||
<div class="post-card-content">
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<article class="post-content {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
|
||||
|
||||
<header class="post-content-header">
|
||||
<h1 class="post-content-title">{{title}}</h1>
|
||||
</header>
|
||||
|
||||
{{#if custom_excerpt}}
|
||||
<p class="post-content-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if feature_image}}
|
||||
<div class="post-content-image">
|
||||
<img class="kg-image" src="{{feature_image}}" alt="{{title}}" />
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="post-content-body">
|
||||
{{content}}
|
||||
</div>
|
||||
|
||||
{{!-- 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-content-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. --}}
|
||||
|
||||
</footer>
|
||||
|
||||
{{!--
|
||||
<section class="post-content-comments">
|
||||
If you want to embed comments, this is a good place to do it!
|
||||
</section>
|
||||
--}}
|
||||
|
||||
</article>
|
||||
{{/post}}
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
// Layout Script for Ghost Gallery Cards
|
||||
var images = document.querySelectorAll('.kg-gallery-image img');
|
||||
images.forEach(function (image) {
|
||||
var container = image.closest('.kg-gallery-image');
|
||||
var width = image.attributes.width.value;
|
||||
var height = image.attributes.height.value;
|
||||
var ratio = width / height;
|
||||
container.style.flex = ratio + ' 1 0%';
|
||||
})
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#tag}}
|
||||
<header class="page-head">
|
||||
<h1 class="page-head-title">{{name}}</h1>
|
||||
<p class="page-head-description">
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
{{/if}}
|
||||
</p>
|
||||
</header>
|
||||
{{/tag}}
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
Loading…
Reference in New Issue