initial commit

This commit is contained in:
giles bradshaw 2024-02-12 12:39:05 +00:00
commit 86c750cb19
84 changed files with 5647 additions and 0 deletions

22
LICENSE Normal file
View File

@ -0,0 +1,22 @@
Copyright (c) 2013-2023 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.

38
README.md Normal file
View File

@ -0,0 +1,38 @@
# Edition
The newsletter theme for [Ghost](https://github.com/TryGhost/Ghost). A beautiful way to share stories with your growing audience.
**Demo: https://edition.ghost.io**
# Instructions
1. [Download this theme](https://github.com/TryGhost/Edition/archive/main.zip)
2. Log into Ghost, and go to the `Design` settings area to upload the zip file
# Development
Edition 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
# Install
yarn
# Run build & watch for changes
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/edition.zip`, which you can then upload to your site.
```bash
yarn zip
```
# Contribution
This repo is synced automatically with [TryGhost/Themes](https://github.com/TryGhost/Themes) monorepo. If you're looking to contribute or raise an issue, head over to the main repository [TryGhost/Themes](https://github.com/TryGhost/Themes) where our official themes are developed.
# Copyright & License
Copyright (c) 2013-2023 Ghost Foundation - Released under the [MIT license](LICENSE).

2
assets/built/main.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
assets/built/screen.css Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,50 @@
.author-meta {
margin-top: 0.5rem;
font-size: 1.2rem;
font-weight: 800;
color: var(--secondary-text-color);
text-transform: uppercase;
letter-spacing: 0.02rem;
}
.author-social {
justify-content: center;
margin-top: 2.5rem;
}
.author-list {
display: flex;
}
.author-list .author-image-placeholder {
flex-shrink: 0;
width: 54px;
margin: 0 -4px;
overflow: hidden;
border: 2px solid var(--white-color);
border-radius: 50%;
}
.author-list .author-image-placeholder:first-child {
z-index: 10;
}
.author-list .author-image-placeholder:nth-child(2) {
z-index: 9;
}
.author-list .author-image-placeholder:nth-child(3) {
z-index: 8;
}
.author-list .author-image-placeholder:nth-child(4) {
z-index: 7;
}
.author-list .author-image-placeholder:nth-child(5) {
z-index: 6;
}
.author-list .author-image-placeholder span {
background-color: var(--light-gray-color);
}

View File

@ -0,0 +1,42 @@
.featured-wrapper {
padding-top: 6vmin;
margin-top: 3rem;
}
.featured-wrapper .post {
position: relative;
}
.featured-wrapper .u-placeholder {
margin-bottom: 2rem;
}
.featured-wrapper .post-title {
margin-bottom: 0;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.005em;
word-break: break-word;
}
.has-serif-title .featured-wrapper .post-title {
font-family: var(--font-serif);
}
.featured-title {
padding-bottom: 1rem;
margin-bottom: 4.5rem;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
border-bottom: 1px solid var(--light-gray-color);
}
.featured-feed {
opacity: 0;
}
.featured-feed.tns-slider {
opacity: 1;
}

284
assets/css/blog/feed.css Normal file
View File

@ -0,0 +1,284 @@
.feed-header {
margin-top: 3vmin;
margin-bottom: 4.5rem;
}
.feed-header-wrapper {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-bottom: 1rem;
border-bottom: 1px solid var(--light-gray-color);
}
.feed-header-title {
margin-bottom: 0;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
.post-feed {
margin-top: -1.5rem;
}
.post-feed.expanded {
margin-top: -2.5rem;
}
.post-feed.text-only {
margin-top: -3rem;
}
.feed {
position: relative;
display: flex;
align-items: center;
padding: 1.5rem 0;
overflow: hidden;
line-height: 1;
}
.feed:hover .feed-title {
opacity: 0.8;
}
.feed:hover .feed-right {
margin-right: 1.6rem;
}
.post-feed.expanded .feed:hover .feed-right {
margin-right: 0;
}
.feed:hover .feed-icon {
transform: translateX(0.4rem);
}
.feed + .feed {
border-top: 1px solid var(--light-gray-color);
}
.post-feed > .feed + .feed.feed-paged {
margin-top: 3rem;
border-top: 0;
}
.post-feed.expanded .feed {
align-items: flex-start;
padding: 3rem 0;
}
.post-feed.expanded:not(.text-only) .feed {
padding: 2.5rem 0;
border-top: 0;
}
.post-feed.right-thumbnail .feed {
flex-direction: row-reverse;
}
.feed-calendar {
display: flex;
margin-right: 1.5rem;
font-size: 1.1rem;
font-weight: 800;
line-height: 1.5;
color: var(--brand-color);
white-space: nowrap;
}
.post-feed.expanded .feed-calendar {
display: none;
}
.feed-calendar-month {
margin-right: 0.4rem;
text-transform: uppercase;
}
.feed-image {
flex-shrink: 0;
width: 160px;
margin-right: 2.5rem;
}
.post-feed.right-thumbnail .feed-image {
margin-right: 0;
margin-left: 2.5rem;
}
.post-feed:not(.expanded) .feed-image {
display: none;
}
.feed-wrapper {
display: flex;
flex-grow: 1;
overflow: hidden;
}
.post-feed.expanded .feed-wrapper {
flex-direction: column;
}
.post-feed.expanded:not(.text-only) .feed-wrapper {
margin-top: -2px;
}
.feed-title {
flex-grow: 1;
padding-right: 1rem;
margin-bottom: 0;
overflow: hidden;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.3;
text-overflow: ellipsis;
letter-spacing: 0;
white-space: nowrap;
}
.post-feed.expanded .feed-title {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
word-break: break-word;
white-space: normal;
}
.has-serif-title .feed-title {
font-family: var(--font-serif);
}
.feed-excerpt {
display: -webkit-box;
margin-top: 0.8rem;
overflow-y: hidden;
font-size: 1.5rem;
line-height: 1.4;
word-break: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.has-serif-body .feed-excerpt {
font-family: var(--font-serif);
}
.post-feed:not(.expanded) .feed-excerpt {
display: none;
}
.feed-right {
display: flex;
align-items: center;
font-size: 1.3rem;
color: var(--secondary-text-color);
transition: margin-right 0.2s var(--animation-base);
}
.post-feed.expanded .feed-right {
margin-top: 1.5rem;
}
.post-feed:not(.expanded) :is(.feed-date, .feed-comments) {
display: none;
}
.feed-visibility {
margin-right: 1rem;
line-height: 0;
color: var(--orange-color);
}
.post-feed.expanded .feed-visibility {
order: 1;
margin-left: 1rem;
}
.feed-visibility-public {
display: none;
}
.feed-visibility .icon {
width: 14px;
height: 14px;
}
.feed-length {
white-space: nowrap;
}
.post-feed.expanded .feed-length {
display: flex;
align-items: center;
}
.post-feed.expanded :is(.feed-length, .feed-comments)::before {
padding: 0 0.7rem;
font-family: serif;
font-size: 1rem;
line-height: 1;
content: "\02022";
}
.feed-icon {
position: absolute;
right: 0;
line-height: 0;
color: var(--secondary-text-color);
transition: transform 0.2s var(--animation-base);
transform: translateX(2rem);
}
.post-feed.expanded .feed-icon {
display: none;
}
.feed-icon .icon {
width: 16px;
height: 16px;
}
.feed-group::after {
display: block;
height: 4.5vmin;
content: "";
}
.feed-month {
position: sticky;
top: 0;
z-index: 30;
width: inherit;
padding: 1rem 1.5rem;
margin: 0 -1.5rem;
font-size: 1.5rem;
font-weight: 800;
color: var(--darker-gray-color);
text-transform: uppercase;
letter-spacing: 0.05rem;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(3px);
}
.feed-group:first-child .feed-month {
display: none;
}
@media (max-width: 575px) {
.post-feed.expanded .feed {
flex-direction: column;
}
.post-feed.expanded .feed-image {
width: 100%;
margin: 0 0 3rem;
}
.post-feed.expanded .feed-title {
font-size: 1.8rem;
}
}

View File

@ -0,0 +1,21 @@
.navigation-link {
display: flex;
align-items: center;
}
.navigation-icon {
display: flex;
align-items: center;
width: 30px;
height: 30px;
margin: 0 -2px;
}
.navigation-next .navigation-icon {
justify-content: flex-end;
}
.navigation-icon .icon {
width: 30px;
height: 30px;
}

View File

@ -0,0 +1,5 @@
.load-more {
display: flex;
justify-content: center;
margin-top: 32px;
}

View File

@ -0,0 +1,14 @@
.related-wrapper {
padding: 56px 0 32px;
margin-top: 80px;
background-color: var(--lighter-gray-color);
}
.related-title {
margin-bottom: 20px;
font-size: 2.1rem;
}
.related-wrapper .post-feed {
margin-top: 0;
}

38
assets/css/blog/share.css Normal file
View File

@ -0,0 +1,38 @@
.share {
display: flex;
}
.share-link {
display: flex;
align-items: center;
height: 2.6rem;
padding: 0 0.8rem;
margin: 0 0.6rem;
font-size: 1.1rem;
font-weight: 800;
line-height: 0;
color: var(--white-color);
text-transform: uppercase;
letter-spacing: 0.04rem;
border-radius: 3px;
}
.share-link .icon {
width: 14px;
height: 14px;
margin-right: 0.4rem;
fill: currentColor;
}
.share-link .icon-facebook {
margin-right: 0.2rem;
margin-left: -0.3rem;
}
.share-link-facebook {
background-color: var(--facebook-color);
}
.share-link-twitter {
background-color: var(--twitter-color);
}

130
assets/css/blog/single.css Normal file
View File

@ -0,0 +1,130 @@
.single-header {
margin-bottom: 4.5rem;
text-align: center;
}
.page-template .single-header {
margin-top: var(--header-spacing);
}
.single-meta {
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary-text-color);
text-transform: uppercase;
}
.single-meta-item + .single-meta-item::before {
padding: 0 0.3rem;
font-family: serif;
content: "\02022";
}
.single-title {
margin-bottom: 0;
font-size: 4rem;
line-height: 1.2;
letter-spacing: -0.1rem;
word-break: break-word;
}
.has-serif-title .single-title {
font-family: var(--font-serif);
}
.single-excerpt {
margin-top: 2rem;
font-size: 1.8rem;
word-break: break-word;
}
.has-serif-body .single-excerpt {
font-family: var(--font-serif);
}
.single-media {
margin-top: 4.5rem;
margin-bottom: 0;
}
.single-media img {
width: 100%;
}
.single-cta {
padding: 3rem;
margin-top: 4rem !important;
text-align: center;
border-top: 5px solid var(--brand-color);
border-bottom: 1px solid var(--light-gray-color);
}
.single-cta-title {
margin: 0 0 3rem !important;
}
.single-cta-button {
margin-bottom: 1rem;
font-weight: 800 !important;
}
.single-cta-footer {
font-size: 1.4rem;
font-weight: 400 !important;
letter-spacing: -0.02rem;
}
.single-footer {
display: flex;
align-items: center;
margin-top: 4.5rem;
}
.single-footer-left,
.single-footer-right {
display: flex;
flex: 2;
}
.single-footer-right {
justify-content: flex-end;
}
.single-footer-middle {
display: flex;
flex-direction: column;
}
.single-footer-top {
display: flex;
flex-direction: column;
align-items: center;
}
.single-footer-title {
margin-bottom: 1rem;
font-size: 1.8rem;
}
.single-footer-top + .single-footer-bottom {
margin-top: 2rem;
}
@media (max-width: 767px) {
.single-header {
margin-bottom: 3rem;
}
.single-title {
font-size: 2.6rem;
}
.single-excerpt {
font-size: 1.7rem;
}
.single-media {
margin-top: 3rem;
}
}

View File

@ -0,0 +1,10 @@
.taxonomy {
margin-bottom: 6vmin;
}
.taxonomy-media {
width: 90px;
margin: 0 auto 3rem;
overflow: hidden;
border-radius: 50%;
}

View File

@ -0,0 +1,32 @@
:root {
--brand-color: var(--ghost-accent-color, #ff572f);
--primary-text-color: #333;
--secondary-text-color: #999;
--white-color: #fff;
--lighter-gray-color: #f6f6f6;
--light-gray-color: #e6e6e6;
--mid-gray-color: #ccc;
--dark-gray-color: #444;
--darker-gray-color: #1a1a1a;
--black-color: #000;
--green-color: #28a745;
--orange-color: #ffc107;
--red-color: #dc3545;
--facebook-color: #3b5998;
--twitter-color: #1da1f2;
--rss-color: #f26522;
--animation-base: ease-in-out;
--font-sans: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
--font-serif: Lora, Times, serif;
--navbar-height: 80px;
--content-font-size: 1.7rem;
--header-spacing: 6vmin;
}
.is-head-brand {
--header-spacing: 8vmin;
}
:where(h1, h2, h3, h4, h5, h6) {
font-weight: 800;
}

View File

@ -0,0 +1,55 @@
.button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 15px;
font-family: var(--font-base);
font-size: 11px;
font-weight: 800;
color: var(--brand-color);
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
background-color: var(--white-color);
border: 1px solid var(--light-gray-color);
border-radius: 3px;
outline: none;
}
.button:hover {
border-color: var(--mid-gray-color);
opacity: 1;
}
.button-secondary {
color: var(--darker-gray-color);
}
.button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
color: var(--darker-gray-color);
cursor: pointer;
background-color: transparent;
border: 0;
outline: none;
}
.button-icon:hover .icon {
opacity: 0.8;
}
.button-text {
padding: 0;
line-height: inherit;
color: var(--darker-gray-color);
cursor: pointer;
background-color: transparent;
border: 0;
outline: none;
}

View File

@ -0,0 +1,62 @@
@font-face {
font-family: Mulish;
font-style: normal;
font-weight: 400;
src: local(""), url("../fonts/mulish-v10-latin-regular.woff2") format("woff2"), url("../fonts/mulish-v10-latin-regular.woff") format("woff");
}
@font-face {
font-family: Mulish;
font-style: normal;
font-weight: 700;
src: local(""), url("../fonts/mulish-v10-latin-700.woff2") format("woff2"), url("../fonts/mulish-v10-latin-700.woff") format("woff");
}
@font-face {
font-family: Mulish;
font-style: normal;
font-weight: 800;
src: local(""), url("../fonts/mulish-v10-latin-800.woff2") format("woff2"), url("../fonts/mulish-v10-latin-800.woff") format("woff");
}
@font-face {
font-family: Mulish;
font-style: italic;
font-weight: 400;
src: local(""), url("../fonts/mulish-v10-latin-italic.woff2") format("woff2"), url("../fonts/mulish-v10-latin-italic.woff") format("woff");
}
@font-face {
font-family: Mulish;
font-style: italic;
font-weight: 700;
src: local(""), url("../fonts/mulish-v10-latin-700italic.woff2") format("woff2"), url("../fonts/mulish-v10-latin-700italic.woff") format("woff");
}
@font-face {
font-family: Lora;
font-style: normal;
font-weight: 400;
src: local(""), url("../fonts/lora-v23-latin-regular.woff2") format("woff2"), url("../fonts/lora-v23-latin-regular.woff") format("woff");
}
@font-face {
font-family: Lora;
font-style: normal;
font-weight: 700;
src: local(""), url("../fonts/lora-v23-latin-700.woff2") format("woff2"), url("../fonts/lora-v23-latin-700.woff") format("woff");
}
@font-face {
font-family: Lora;
font-style: italic;
font-weight: 400;
src: local(""), url("../fonts/lora-v23-latin-italic.woff2") format("woff2"), url("../fonts/lora-v23-latin-italic.woff") format("woff");
}
@font-face {
font-family: Lora;
font-style: italic;
font-weight: 700;
src: local(""), url("../fonts/lora-v23-latin-700italic.woff2") format("woff2"), url("../fonts/lora-v23-latin-700italic.woff") format("woff");
}

104
assets/css/general/form.css Normal file
View File

@ -0,0 +1,104 @@
label {
display: block;
font-size: 1.4rem;
font-weight: 700;
color: var(--darker-gray-color);
}
label + label {
margin-top: 2rem;
}
label input,
label textarea {
margin-top: 0.7rem;
}
input,
textarea {
width: 100%;
height: 44px;
padding: 0 1.5rem;
font-size: 1.6rem;
color: var(--darker-gray-color);
appearance: none;
background-color: var(--white-color);
border: 1px solid var(--light-gray-color);
border-radius: 6px;
outline: none;
}
input:focus,
textarea:focus {
border-color: var(--mid-gray-color);
}
textarea {
height: 100%;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
resize: vertical;
}
.form-wrapper {
position: relative;
}
.form-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 15px;
font-size: 1.3rem;
font-weight: 800;
color: var(--white-color);
text-transform: uppercase;
cursor: pointer;
background-color: var(--brand-color);
border: 0;
border-radius: 4px;
outline: none;
}
.form-button.with-icon {
width: 40px;
padding: 0;
border-radius: 0 4px 4px 0;
}
.form-wrapper .loader,
.form-wrapper .success {
display: none;
}
.form-wrapper .loader .icon {
width: 28px;
height: 28px;
}
.form-wrapper.loading .default,
.form-wrapper.success .default,
.form-wrapper.success .loader {
display: none;
}
.form-wrapper.loading .loader {
display: block;
}
.form-wrapper.success .success {
display: flex;
align-items: center;
}
.contact-form {
margin-top: 3rem;
}
.contact-form .button {
margin-top: 1.5rem;
}

View File

@ -0,0 +1,10 @@
.icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.icon-loading {
width: 26px;
height: 26px;
}

View File

@ -0,0 +1,54 @@
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.7, 0.7, 0.7);
}
40% {
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.animate__bounceIn {
animation-name: bounceIn;
animation-duration: 0.3s;
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.7, 0.7, 0.7);
}
to {
opacity: 0;
}
}
.animate__zoomOut {
animation-name: zoomOut;
animation-duration: 0.3s;
}

View File

@ -0,0 +1,4 @@
.home-template.with-full-cover:not(.portal-visible) .gh-portal-triggerbtn-iframe {
pointer-events: none;
opacity: 0;
}

View File

@ -0,0 +1,202 @@
.tns-outer {
position: relative;
padding: 0 !important;
}
.tns-outer [hidden] {
display: none !important;
}
.tns-outer [aria-controls],
.tns-outer [data-action] {
cursor: pointer;
}
.tns-slider {
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s;
}
.tns-slider > .tns-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tns-horizontal.tns-subpixel {
white-space: nowrap;
}
.tns-horizontal.tns-subpixel > .tns-item {
display: inline-block;
white-space: normal;
vertical-align: top;
}
.tns-horizontal.tns-no-subpixel::after {
display: table;
clear: both;
content: "";
}
.tns-horizontal.tns-no-subpixel > .tns-item {
float: left;
}
.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
margin-right: -100%;
}
.tns-no-calc {
position: relative;
left: 0;
}
.tns-gallery {
position: relative;
left: 0;
min-height: 1px;
}
.tns-gallery > .tns-item {
position: absolute;
left: -100%;
-webkit-transition: transform 0s, opacity 0s;
-moz-transition: transform 0s, opacity 0s;
transition: transform 0s, opacity 0s;
}
.tns-gallery > .tns-slide-active {
position: relative;
left: auto !important;
}
.tns-gallery > .tns-moving {
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
}
.tns-autowidth {
display: inline-block;
}
.tns-lazy-img {
opacity: 0.6;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.tns-lazy-img.tns-complete {
opacity: 1;
}
.tns-ah {
-webkit-transition: height 0s;
-moz-transition: height 0s;
transition: height 0s;
}
.tns-ovh {
overflow: hidden;
}
.tns-visually-hidden {
position: absolute;
left: -10000em;
}
.tns-transparent {
visibility: hidden;
opacity: 0;
}
.tns-fadeIn {
z-index: 0;
opacity: 1;
}
.tns-normal,
.tns-fadeOut {
z-index: -1;
opacity: 0;
}
.tns-vpfix {
white-space: nowrap;
}
.tns-vpfix > div,
.tns-vpfix > li {
display: inline-block;
}
.tns-t-subp2 {
position: relative;
width: 310px;
height: 10px;
margin: 0 auto;
overflow: hidden;
}
.tns-t-ct {
position: absolute;
right: 0;
width: 2333.3333333%;
width: -webkit-calc(100% * 70 / 3);
width: -moz-calc(100% * 70 / 3);
width: calc(100% * 70 / 3);
}
.tns-t-ct::after {
display: table;
clear: both;
content: "";
}
.tns-t-ct > div {
float: left;
width: 1.4285714%;
width: -webkit-calc(100% / 70);
width: -moz-calc(100% / 70);
width: calc(100% / 70);
height: 10px;
}
.tns-controls button {
position: absolute;
top: -86px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
color: var(--dark-gray-color);
text-align: center;
background-color: var(--white-color);
border: 1px solid var(--light-gray-color);
border-radius: 3px;
outline: none;
transition: color 0.5s var(--animation-base);
}
.tns-controls button[disabled] {
color: var(--mid-gray-color);
cursor: default;
}
.tns-controls button svg {
width: 18px;
height: 18px;
}
.tns-controls button[data-controls="prev"] {
right: 34px;
}
.tns-controls button[data-controls="next"] {
right: 0;
}

41
assets/css/misc/utils.css Normal file
View File

@ -0,0 +1,41 @@
.u-permalink {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
outline: none;
}
.u-placeholder {
position: relative;
z-index: 10;
background-color: var(--lighter-gray-color);
}
.u-placeholder::before {
display: block;
content: "";
}
.u-placeholder.horizontal::before {
padding-bottom: 50%;
}
.u-placeholder.rectangle::before {
padding-bottom: 62.5%;
}
.u-placeholder.square::before {
padding-bottom: 100%;
}
.u-object-fit {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

22
assets/css/screen.css Normal file
View File

@ -0,0 +1,22 @@
@import "@tryghost/shared-theme-assets/assets/css/v1/screen.css";
@import "general/fonts.css";
@import "general/basics.css";
@import "general/button.css";
@import "general/form.css";
@import "general/icons.css";
@import "site/layout.css";
@import "site/header.css";
@import "site/cover.css";
@import "blog/feed.css";
@import "blog/featured.css";
@import "blog/pagination.css";
@import "blog/single.css";
@import "blog/author.css";
@import "blog/share.css";
@import "blog/navigation.css";
@import "blog/related.css";
@import "blog/taxonomy.css";
@import "misc/tiny-slider.css";
@import "misc/utils.css";
@import "misc/portal.css";
@import "misc/animations.css";

128
assets/css/site/cover.css Normal file
View File

@ -0,0 +1,128 @@
body:not(.with-full-cover) .cover {
margin-top: 9vmin;
}
.with-full-cover .cover {
position: relative;
display: flex;
height: 100vh;
overflow: hidden;
}
.with-full-cover .cover.half {
height: 60vh;
}
.with-full-cover .cover::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
content: "";
background-color: #000;
opacity: 0.3;
transition: opacity 1.5s ease;
}
.cover.image-loading::before {
opacity: 1;
}
.cover-image {
transition: transform 2s ease;
}
.cover.image-loading .cover-image {
transform: scale(1.02);
}
.cover-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 720px;
margin: auto;
text-align: center;
}
.cover-description {
font-size: 3.6rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
word-break: break-word;
}
.has-serif-title .cover-description {
font-family: var(--font-serif);
}
.with-full-cover .cover-description {
color: #fff;
}
.cover-cta {
display: flex;
margin-top: 2rem;
}
.cover-cta .button {
margin: 0 0.5rem;
}
.cover-form {
width: 100%;
max-width: 480px;
margin-top: 4.5rem;
}
.cover-form input {
height: 50px;
}
.with-full-cover .cover-form input {
background-color: #fff;
border-color: transparent;
}
.cover-form .form-button {
min-width: 110px;
}
.cover-arrow {
position: absolute;
bottom: 40px;
left: 50%;
z-index: 10;
display: none;
width: 40px;
height: 40px;
margin-left: -20px;
}
.with-full-cover .cover-arrow {
display: inline-flex;
}
.cover-arrow .icon {
width: 28px;
height: 28px;
color: #fff;
}
@media (max-width: 767px) {
.cover-description {
font-size: 2.7rem;
}
}
@media (max-width: 991px) {
.menu-opened .cover {
margin-top: 0;
}
}

View File

@ -0,0 +1,21 @@
.is-head-left-logo .gh-head-inner {
grid-template-columns: 1fr 50% 1fr;
}
.gh-head-logo {
font-size: 2.2rem;
font-weight: 800;
}
.gh-head-menu,
.gh-head-actions {
font-size: 1.5rem;
font-weight: 700;
}
@media (min-width: 992px) {
.is-head-left-logo .gh-head-menu {
justify-content: center;
margin: 0;
}
}

View File

@ -0,0 +1,18 @@
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6vmin 0;
}
.is-head-brand .site-content {
padding-top: max(8vmin, 5rem);
}
.page-template .site-content {
padding-block: 0;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
assets/images/default-skin.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 547 B

1
assets/images/default-skin.svg Executable file
View File

@ -0,0 +1 @@
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/images/preloader.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 B

3214
assets/js/lib/tiny-slider.js Normal file

File diff suppressed because it is too large Load Diff

76
assets/js/main.js Normal file
View File

@ -0,0 +1,76 @@
var html = document.documentElement;
var body = document.body;
var timeout;
var st = 0;
cover();
featured();
pagination(false);
window.addEventListener('scroll', function () {
'use strict';
if (body.classList.contains('home-template') && body.classList.contains('with-full-cover') && !document.querySelector('.cover').classList.contains('half')) {
if (timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(portalButton);
}
});
if (document.querySelector('.cover') && document.querySelector('.cover').classList.contains('half')) {
body.classList.add('portal-visible');
}
function portalButton() {
'use strict';
st = window.scrollY;
if (st > 300) {
body.classList.add('portal-visible');
} else {
body.classList.remove('portal-visible');
}
}
function cover() {
'use strict';
var cover = document.querySelector('.cover');
if (!cover) return;
imagesLoaded(cover, function () {
cover.classList.remove('image-loading');
});
document.querySelector('.cover-arrow').addEventListener('click', function () {
var element = cover.nextElementSibling;
element.scrollIntoView({behavior: 'smooth', block: 'start'});
});
}
function featured() {
'use strict';
var feed = document.querySelector('.featured-feed');
if (!feed) return;
tns({
container: feed,
controlsText: [
'<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M20.547 22.107L14.44 16l6.107-6.12L18.667 8l-8 8 8 8 1.88-1.893z"></path></svg>',
'<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M11.453 22.107L17.56 16l-6.107-6.12L13.333 8l8 8-8 8-1.88-1.893z"></path></svg>',
],
gutter: 30,
loop: false,
nav: false,
responsive: {
0: {
items: 1,
},
768: {
items: 2,
},
992: {
items: 3,
},
},
});
}

58
author.hbs Normal file
View File

@ -0,0 +1,58 @@
{{!< default}}
<main class="site-main">
{{#author}}
<section class="taxonomy gh-canvas">
{{#if profile_image}}
<div class="taxonomy-media u-placeholder square">
<img class="u-object-fit" src="{{img_url profile_image size="s"}}" alt="{{name}}">
</div>
{{/if}}
<header class="single-header">
{{#if website}}
<h1 class="single-title">
<a href="{{website}}" target="_blank" rel="noopener noreferrer">{{name}}</a>
</h1>
{{else}}
<h1 class="single-title">{{name}}</h1>
{{/if}}
{{#if location}}
<span class="author-meta">{{location}}</span>
{{/if}}
<div class="single-excerpt">{{bio}}</div>
<div class="share author-social">
{{#if facebook}}
<a class="share-link share-link-facebook author-social-item" href="https://www.facebook.com/{{facebook}}" target="_blank" rel="noopener noreferrer">
{{> "icons/facebook"}}
Facebook
</a>
{{/if}}
{{#if twitter}}
<a class="share-link share-link-twitter author-social-item" href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener noreferrer">
{{> "icons/twitter"}}
Twitter
</a>
{{/if}}
</div>
</header>
</section>
{{/author}}
<div class="post-feed gh-feed gh-canvas">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
{{pagination}}
</main>

46
custom-authors.hbs Normal file
View File

@ -0,0 +1,46 @@
{{!< default}}
<header class="site-header">
<div class="outer site-nav-main">
<div class="inner">
<h1>site nav</h1>
</div>
</div>
</header>
{{#post}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<header class="post-full-header">
<h1 class="post-full-title">{{title}}</h1>
</header>
{{#get 'authors' limit='all' include='count.posts' order='count.posts desc'}}
<div class="post-feed">
{{#foreach authors}}
<article class="post-card {{#unless profile_image}} no-image{{/unless}}">
{{#if profile_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{profile_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{name}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{bio}}</p>
</section>
</a>
</div>
</article>
{{/foreach}}
</div>
{{/get}}
</div>
</main>
{{/post}}

View File

@ -0,0 +1,19 @@
{{!< default}}
<main class="site-main">
{{#post}}
{{> "content" width="full"}}
{{/post}}
{{#is "post"}}
{{#if @custom.show_related_posts}}
{{> "related-posts"}}
{{/if}}
{{#post}}
{{> "comments"}}
{{/post}}
{{/is}}
</main>

View File

@ -0,0 +1,19 @@
{{!< default}}
<main class="site-main">
{{#post}}
{{> "content" width="narrow"}}
{{/post}}
{{#is "post"}}
{{#if @custom.show_related_posts}}
{{> "related-posts"}}
{{/if}}
{{#post}}
{{> "comments"}}
{{/post}}
{{/is}}
</main>

View File

@ -0,0 +1,19 @@
{{!< default}}
<main class="site-main">
{{#post}}
{{> "content" no_image=true}}
{{/post}}
{{#is "post"}}
{{#if @custom.show_related_posts}}
{{> "related-posts"}}
{{/if}}
{{#post}}
{{> "comments"}}
{{/post}}
{{/is}}
</main>

21
custom-tags.hbs Normal file
View File

@ -0,0 +1,21 @@
{{!< default}}
{{#post}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<header class="post-full-header">
<h1 class="post-full-title">{{title}}</h1>
</header>
{{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
{{#foreach tags}}
<a href='{{ url }}'>
<h2>{{ name }} <small>({{ count.posts }})</small></h2>
</a>
{{/foreach}}
{{/get}}
</div>
</main>
{{/post}}

111
default.hbs Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
{{ghost_head}}
</head>
<body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}{{^is "home"}}{{#if @site.cover_image}} is-head-brand{{/if}}{{/is}}">
<div class="site">
<header id="gh-head" class="gh-head gh-outer">
<div class="gh-head-inner">
<div class="gh-head-brand">
<div class="gh-head-brand-wrapper">
<a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
{{@site.title}}
{{/if}}
</a>
</div>
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<button class="gh-burger"></button>
</div>
<nav class="gh-head-menu">
{{navigation}}
{{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{/unless}}
</nav>
<div class="gh-head-actions">
{{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{else}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-head-members">
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Sign in</a>
{{/unless}}
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
{{/unless}}
</div>
{{/unless}}
</div>
</div>
</header>
{{#is "home"}}
{{> "cover"}}
{{#if @custom.show_featured_posts}}
{{> "featured-posts"}}
{{/if}}
{{/is}}
<div class="site-content">
{{{body}}}
</div>
<footer class="gh-foot{{#unless @site.secondary_navigation}} no-menu{{/unless}} gh-outer">
<div class="gh-foot-inner gh-inner">
<div class="gh-copyright">
{{@site.title}} © {{date format="YYYY"}}
</div>
{{#if @site.secondary_navigation}}
<nav class="gh-foot-menu">
{{navigation type="secondary"}}
</nav>
{{/if}}
<div class="gh-powered-by">
<a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
</div>
</div>
</footer>
</div>
{{#is "post, page"}}
{{> "pswp"}}
{{/is}}
{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
<script>
if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
document.getElementsByClassName('cover')[0].style.height = window.innerHeight + 'px';
}
</script>
<script src="{{asset "built/main.min.js"}}"></script>
{{ghost_foot}}
</body>
</html>

89
gulpfile.js Normal file
View File

@ -0,0 +1,89 @@
const {series, parallel, watch, src, dest} = require('gulp');
const pump = require('pump');
// gulp plugins and utils
const livereload = require('gulp-livereload');
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const beeper = require('beeper');
const zip = require('gulp-zip');
// postcss plugins
const easyimport = require('postcss-easy-import');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
function serve(done) {
livereload.listen();
done();
}
function handleError(done) {
return function (err) {
if (err) {
beeper();
}
return done(err);
};
};
function hbs(done) {
pump([
src(['*.hbs', 'partials/**/*.hbs']),
livereload()
], handleError(done));
}
function css(done) {
pump([
src('assets/css/screen.css', {sourcemaps: true}),
postcss([
easyimport,
autoprefixer(),
cssnano()
]),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
function js(done) {
pump([
src([
'node_modules/@tryghost/shared-theme-assets/assets/js/v1/lib/**/*.js',
'node_modules/@tryghost/shared-theme-assets/assets/js/v1/main.js',
'assets/js/lib/*.js',
'assets/js/main.js'
], {sourcemaps: true}),
concat('main.min.js'),
uglify(),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
function zipper(done) {
const filename = require('./package.json').name + '.zip';
pump([
src([
'**',
'!node_modules', '!node_modules/**',
'!dist', '!dist/**',
'!yarn-error.log'
]),
zip(filename),
dest('dist/')
], handleError(done));
}
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const cssWatcher = () => watch('assets/css/**/*.css', css);
const jsWatcher = () => watch('assets/js/**/*.js', js);
const watcher = parallel(hbsWatcher, cssWatcher, jsWatcher);
const build = series(css, js);
exports.build = build;
exports.zip = series(build, zipper);
exports.default = series(build, serve, watcher);

23
index.hbs Normal file
View File

@ -0,0 +1,23 @@
{{!< default}}
<main class="site-main">
<header class="feed-header gh-canvas">
{{#if @custom.feed_title}}
<div class="feed-header-wrapper">
<h2 class="feed-header-title">{{@custom.feed_title}}</h2>
</div>
{{/if}}
</header>
<div class="post-feed{{#match @custom.feed_layout "!=" "Minimal"}} expanded{{/match}}{{#match @custom.feed_layout "Right thumbnail"}} right-thumbnail{{/match}}{{#match @custom.feed_layout "Text-only"}} text-only{{/match}} gh-feed gh-canvas">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
{{pagination}}
</main>
{{#contentFor "body_class"}}{{#if @site.cover_image}} with-full-cover is-head-transparent{{/if}}{{#if @member}} logged-in{{/if}}{{/contentFor}}

138
package.json Normal file
View File

@ -0,0 +1,138 @@
{
"name": "edition",
"description": "A clean, minimal newsletter theme for the Ghost publishing platform",
"version": "1.0.0",
"private": true,
"engines": {
"ghost": ">=5.0.0"
},
"license": "MIT",
"author": {
"name": "Ghost Foundation",
"email": "hello@ghost.org",
"url": "https://ghost.org"
},
"keywords": [
"ghost",
"theme",
"ghost-theme"
],
"docs": "https://edition.ghost.io/about/",
"config": {
"posts_per_page": 10,
"image_sizes": {
"xs": {
"width": 150
},
"s": {
"width": 400
},
"m": {
"width": 750
},
"l": {
"width": 960
},
"xl": {
"width": 1140
},
"xxl": {
"width": 1920
}
},
"card_assets": true,
"custom": {
"navigation_layout": {
"type": "select",
"options": ["Logo on the left", "Logo in the middle", "Stacked"],
"default": "Logo on the left"
},
"title_font": {
"type": "select",
"options": [
"Modern sans-serif",
"Elegant serif"
],
"default": "Modern sans-serif"
},
"body_font": {
"type": "select",
"options": [
"Modern sans-serif",
"Elegant serif"
],
"default": "Modern sans-serif"
},
"email_signup_text": {
"type": "text",
"group": "homepage"
},
"publication_cover_style": {
"type": "select",
"options": [
"Fullscreen",
"Half screen"
],
"default": "Fullscreen",
"group": "homepage"
},
"show_featured_posts": {
"type": "boolean",
"default": true,
"group": "homepage"
},
"featured_title": {
"type": "text",
"default": "Featured articles",
"group": "homepage"
},
"feed_title": {
"type": "text",
"default": "Latest",
"group": "homepage"
},
"feed_layout": {
"type": "select",
"options": [
"Expanded",
"Right thumbnail",
"Text-only",
"Minimal"
],
"default": "Expanded",
"group": "homepage"
},
"show_author": {
"type": "boolean",
"default": true,
"group": "post"
},
"show_related_posts": {
"type": "boolean",
"default": true,
"group": "post"
}
}
},
"scripts": {
"dev": "gulp",
"test": "gscan .",
"zip": "gulp zip"
},
"devDependencies": {
"@tryghost/shared-theme-assets": "2.4.2",
"autoprefixer": "10.4.16",
"beeper": "2.1.0",
"cssnano": "6.0.1",
"gscan": "4.42.0",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2",
"gulp-postcss": "9.0.1",
"gulp-uglify": "3.0.2",
"gulp-zip": "5.1.0",
"postcss": "8.4.32",
"postcss-easy-import": "4.0.0",
"pump": "3.0.0"
}
}

9
page.hbs Normal file
View File

@ -0,0 +1,9 @@
{{!< default}}
<main class="site-main">
{{#post}}
{{> "content" width="wide"}}
{{/post}}
</main>

9
partials/comments.hbs Normal file
View File

@ -0,0 +1,9 @@
{{#if comments}}
<section class="gh-comments gh-canvas">
<header class="gh-comments-header">
<h3 class="gh-comments-title related-title">Member discussion</h3>
{{comment_count class="gh-comments-count"}}
</header>
{{comments title="" count=false}}
</section>
{{/if}}

20
partials/content-cta.hbs Normal file
View File

@ -0,0 +1,20 @@
{{{html}}}
<section class="single-cta">
{{#has visibility="paid"}}
<h2 class="single-cta-title">This post is for paying subscribers only</h2>
{{/has}}
{{#has visibility="members"}}
<h2 class="single-cta-title">This post is for subscribers only</h2>
{{/has}}
{{#has visibility="filter"}}
<h2 class="single-cta-title">This post is for subscribers on the {{tiers}} only</h2>
{{/has}}
{{#if @member}}
<button class="button single-cta-button" data-portal="account/plans">Upgrade now</button>
{{else}}
<button class="button single-cta-button" data-portal="signup">Subscribe now</button>
<br>
<button class="button-text single-cta-footer" data-portal="signin">Already have an account? Sign in</button>
{{/if}}
</section>

97
partials/content.hbs Normal file
View File

@ -0,0 +1,97 @@
<article class="single {{post_class}}">
{{#match @page.show_title_and_feature_image}}
<header class="single-header gh-canvas">
{{#is "post"}}
<div class="single-meta">
<span class="single-meta-item single-meta-date">
<time datetime="{{date format="YYYY-MM-DD"}}">
{{date published_at}}
</time>
</span>
<span class="single-meta-item single-meta-length">
{{reading_time}}
</span>
{{#primary_tag}}
<span class="single-meta-item single-meta-tag">
<a class="post-tag post-tag-{{slug}}" href="{{url}}">{{name}}</a>
</span>
{{/primary_tag}}
</div>
{{/is}}
<h1 class="single-title">{{title}}</h1>
{{#if custom_excerpt}}
<div class="single-excerpt">
{{custom_excerpt}}
</div>
{{/if}}
{{#if feature_image}}
{{#unless no_image}}
<figure class="single-media kg-width-{{width}}">
<img srcset="{{> "srcset"}}" sizes="(min-width: 1023px) 920px, calc(90vw)" src="{{img_url feature_image size="l"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}">
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/unless}}
{{/if}}
</header>
{{/match}}
<div class="single-content gh-content gh-canvas">
{{content}}
</div>
{{#is "post"}}
<div class="gh-canvas">
<footer class="single-footer">
<div class="single-footer-left">
{{#prev_post}}
<div class="navigation navigation-previous">
<a class="navigation-link" href="{{url}}" aria-label="Previous post">
<span class="navigation-icon">{{> "icons/arrow-left"}}</span>
</a>
</div>
{{/prev_post}}
</div>
<div class="single-footer-middle">
{{#if @custom.show_author}}
<div class="single-footer-top">
<h3 class="single-footer-title">Published by:</h3>
<div class="author-list">
{{#foreach authors}}
<div class="author-image-placeholder u-placeholder square">
<a href="{{url}}" title="{{name}}">
{{#if profile_image}}
<img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
{{else}}
<span class="u-object-fit">{{> "icons/avatar"}}</span>
{{/if}}
</a>
</div>
{{/foreach}}
</div>
</div>
{{/if}}
</div>
<div class="single-footer-right">
{{#next_post}}
<div class="navigation navigation-next">
<a class="navigation-link" href="{{url}}" aria-label="Next post">
<span class="navigation-icon">{{> "icons/arrow-right"}}</span>
</a>
</div>
{{/next_post}}
</div>
</footer>
</div>
{{/is}}
</article>

40
partials/cover.hbs Normal file
View File

@ -0,0 +1,40 @@
<div class="cover{{#if @site.cover_image}} image-loading{{/if}}{{#match @custom.publication_cover_style "Half screen"}} half{{/match}} gh-outer">
{{#if @site.cover_image}}
<img class="cover-image u-object-fit" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
<div class="cover-content">
{{#if @site.description}}
<div class="cover-description">
{{#unless @member}}
{{#if @custom.email_signup_text}}
{{@custom.email_signup_text}}
{{else}}
{{@site.description}}
{{/if}}
{{else}}
{{@site.description}}
{{/unless}}
</div>
{{/if}}
{{#if @site.members_enabled}}
{{#unless @site.members_invite_only}}
{{#unless @member}}
<form class="form-wrapper cover-form" data-members-form>
<input class="auth-email" type="email" data-members-email placeholder="Your email address" required="true" autocomplete="false">
<button class="form-button" type="submit" aria-label="Submit">
<span class="default">Subscribe</span>
<span class="loader">{{> "icons/loader"}}</span>
<span class="success">Email sent</span>
</button>
</form>
{{/unless}}
{{/unless}}
{{/if}}
</div>
<button class="button-icon cover-arrow">
{{> "icons/caret-down"}}
</button>
</div>

View File

@ -0,0 +1,34 @@
{{#get "posts" filter="featured:true" limit="all" as |featured|}}
{{#if featured}}
<div class="gh-outer">
<section class="featured-wrapper gh-inner">
{{#if @custom.featured_title}}
<h2 class="featured-title">{{@custom.featured_title}}</h2>
{{/if}}
<div class="featured-feed">
{{#foreach featured}}
<article class="{{post_class}}">
<div class="u-placeholder horizontal">
{{#if feature_image}}
<img
class="u-object-fit"
srcset="{{> "srcset"}}"
sizes="(min-width: 1256px) calc((1130px - 60px) / 3), (min-width: 992px) calc((90vw - 60px) / 3), (min-width: 768px) calc((90vw - 30px) / 2), 90vw"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
loading="lazy"
>
{{/if}}
</div>
<h3 class="post-title">{{title}}</h3>
<a class="u-permalink" href={{url}} aria-label="{{title}}"></a>
</article>
{{/foreach}}
</div>
</section>
</div>
{{/if}}
{{/get}}

View File

@ -0,0 +1,3 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M26.667 14.667v2.667h-16L18 24.667l-1.893 1.893L5.547 16l10.56-10.56L18 7.333l-7.333 7.333h16z"></path>
</svg>

After

Width:  |  Height:  |  Size: 197 B

View File

@ -0,0 +1,3 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M5.333 14.667v2.667h16L14 24.667l1.893 1.893L26.453 16 15.893 5.44 14 7.333l7.333 7.333h-16z"></path>
</svg>

After

Width:  |  Height:  |  Size: 195 B

View File

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>

After

Width:  |  Height:  |  Size: 308 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256" class="icon">
<rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline>
</svg>

After

Width:  |  Height:  |  Size: 332 B

View File

@ -0,0 +1,3 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M11.453 22.107L17.56 16l-6.107-6.12L13.333 8l8 8-8 8-1.88-1.893z"></path>
</svg>

After

Width:  |  Height:  |  Size: 167 B

View File

@ -0,0 +1 @@
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>

After

Width:  |  Height:  |  Size: 511 B

View File

@ -0,0 +1,6 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path opacity="0.3" fill="currentColor" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="currentColor" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite" />
</path>
</svg>

After

Width:  |  Height:  |  Size: 767 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>

After

Width:  |  Height:  |  Size: 248 B

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

@ -0,0 +1,3 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 23.027L24.24 28l-2.187-9.373 7.28-6.307-9.587-.827-3.747-8.827-3.747 8.827-9.587.827 7.267 6.307L7.759 28l8.24-4.973z"></path>
</svg>

After

Width:  |  Height:  |  Size: 224 B

View File

@ -0,0 +1 @@
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

After

Width:  |  Height:  |  Size: 732 B

57
partials/loop.hbs Normal file
View File

@ -0,0 +1,57 @@
<article class="feed {{post_class}}" data-month="{{date format="MMMM YYYY"}}">
<div class="feed-calendar">
<div class="feed-calendar-month">
{{date published_at format="MMM"}}
</div>
<div class="feed-calendar-day">
{{date published_at format="DD"}}
</div>
</div>
{{#match @custom.feed_layout "!=" "Text-only"}}
{{#match @custom.feed_layout "!=" "Minimal"}}
<div class="feed-image u-placeholder rectangle">
{{#if feature_image}}
<img
class="u-object-fit"
srcset="{{> "srcset"}}"
sizes="(min-width: 576px) 160px, 90vw"
src="{{img_url feature_image size="m"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
loading="lazy"
>
{{/if}}
</div>
{{/match}}
{{/match}}
<div class="feed-wrapper">
<h2 class="feed-title">{{title}}</h2>
{{#if excerpt}}
<div class="feed-excerpt">{{excerpt words="20"}}</div>
{{/if}}
<div class="feed-right">
<time class="feed-date" datetime="{{date format="YYYY-MM-DD"}}">
{{date published_at}}
</time>
<div class="feed-visibility feed-visibility-{{visibility}}">
{{> "icons/star"}}
</div>
{{#if reading_time}}
<div class="feed-length">
{{reading_time}}
</div>
{{/if}}
{{#if @site.comments_enabled}}
{{comment_count autowrap="div" class="feed-comments"}}
{{/if}}
<div class="feed-icon">
{{> "icons/chevron-right"}}
</div>
</div>
</div>
<a class="u-permalink" href="{{url}}" aria-label="{{title}}"></a>
</article>

3
partials/pagination.hbs Normal file
View File

@ -0,0 +1,3 @@
<nav class="load-more">
<button class="button button-secondary gh-loadmore">Load more</button>
</nav>

41
partials/pswp.hbs Normal file
View File

@ -0,0 +1,41 @@
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,12 @@
{{#get "posts" limit="5" filter="tags:[{{post.tags}}]+id:-{{post.id}}" as |related|}}
{{#if related}}
<section class="related-wrapper gh-canvas">
<h3 class="related-title">You might also like...</h3>
<div class="post-feed related-feed">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
</section>
{{/if}}
{{/get}}

4
partials/srcset.hbs Normal file
View File

@ -0,0 +1,4 @@
{{img_url feature_image size="s"}} 400w,
{{img_url feature_image size="m"}} 750w,
{{img_url feature_image size="l"}} 960w,
{{img_url feature_image size="xl"}} 1140w

17
post.hbs Normal file
View File

@ -0,0 +1,17 @@
{{!< default}}
<main class="site-main">
{{#post}}
{{> "content" width="wide"}}
{{/post}}
{{#if @custom.show_related_posts}}
{{> "related-posts"}}
{{/if}}
{{#post}}
{{> "comments"}}
{{/post}}
</main>

32
tag.hbs Normal file
View File

@ -0,0 +1,32 @@
{{!< default}}
<main class="site-main">
{{#tag}}
<section class="taxonomy">
{{#if feature_image}}
<div class="taxonomy-media u-placeholder square">
<img class="u-object-fit" src="{{img_url feature_image size="s"}}" alt="{{name}}">
</div>
{{/if}}
<header class="single-header gh-canvas">
<h1 class="single-title">{{name}}</h1>
{{#if description}}
<div class="single-excerpt">{{description}}</div>
{{/if}}
</header>
</section>
{{/tag}}
<div class="post-feed gh-feed gh-canvas">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
{{pagination}}
</main>