Initial commit
This commit is contained in:
John O'Nolan
parent
92d12e1072
commit
31be8a2291
31 changed files with 7372 additions and 2 deletions
17
.editorconfig
Normal file
17
.editorconfig
Normal file
|
|
@ -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
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -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/
|
||||||
6
.travis.yml
Normal file
6
.travis.yml
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
language: node_js
|
||||||
|
sudo: false
|
||||||
|
node_js:
|
||||||
|
- "8"
|
||||||
|
|
||||||
|
|
||||||
22
LICENSE
Normal file
22
LICENSE
Normal file
|
|
@ -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
|
# Ghost Starter Theme
|
||||||
A development starter theme for Ghost
|
|
||||||
|
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).
|
||||||
|
|
|
||||||
2
assets/built/infinitescroll.js
Normal file
2
assets/built/infinitescroll.js
Normal file
|
|
@ -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
|
||||||
1
assets/built/infinitescroll.js.map
Normal file
1
assets/built/infinitescroll.js.map
Normal file
File diff suppressed because one or more lines are too long
2
assets/built/screen.css
Normal file
2
assets/built/screen.css
Normal file
File diff suppressed because one or more lines are too long
1
assets/built/screen.css.map
Normal file
1
assets/built/screen.css.map
Normal file
File diff suppressed because one or more lines are too long
110
assets/css/components/buttons.css
Normal file
110
assets/css/components/buttons.css
Normal file
|
|
@ -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%));
|
||||||
|
}
|
||||||
158
assets/css/components/forms.css
Normal file
158
assets/css/components/forms.css
Normal file
|
|
@ -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%;
|
||||||
|
}
|
||||||
99
assets/css/components/ghost.css
Normal file
99
assets/css/components/ghost.css
Normal file
|
|
@ -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 );
|
||||||
|
}
|
||||||
406
assets/css/components/global.css
Normal file
406
assets/css/components/global.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
126
assets/css/components/grid.css
Normal file
126
assets/css/components/grid.css
Normal file
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
51
assets/css/components/lists.css
Normal file
51
assets/css/components/lists.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
51
assets/css/components/tables.css
Normal file
51
assets/css/components/tables.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
24
assets/css/screen.css
Normal file
24
assets/css/screen.css
Normal file
|
|
@ -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 */
|
||||||
33
assets/css/vars.css
Normal file
33
assets/css/vars.css
Normal file
|
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
115
assets/js/infinitescroll.js
Normal file
115
assets/js/infinitescroll.js
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
BIN
assets/screenshot-desktop.jpg
Normal file
BIN
assets/screenshot-desktop.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
35
author.hbs
Normal file
35
author.hbs
Normal file
|
|
@ -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>
|
||||||
|
|
||||||
88
default.hbs
Normal file
88
default.hbs
Normal file
|
|
@ -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>
|
||||||
27
error.hbs
Normal file
27
error.hbs
Normal file
|
|
@ -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}}
|
||||||
87
gulpfile.js
Normal file
87
gulpfile.js
Normal file
|
|
@ -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');
|
||||||
|
});
|
||||||
21
index.hbs
Normal file
21
index.hbs
Normal file
|
|
@ -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>
|
||||||
|
|
||||||
82
package.json
Normal file
82
package.json
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
26
page.hbs
Normal file
26
page.hbs
Normal file
|
|
@ -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}}
|
||||||
11
partials/post-card.hbs
Normal file
11
partials/post-card.hbs
Normal file
|
|
@ -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>
|
||||||
64
post.hbs
Normal file
64
post.hbs
Normal file
|
|
@ -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}}
|
||||||
25
tag.hbs
Normal file
25
tag.hbs
Normal file
|
|
@ -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…
Add table
Add a link
Reference in a new issue