Initial commit
This commit is contained in:
commit
1b10a2e2a7
|
|
@ -0,0 +1,17 @@
|
|||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.hbs]
|
||||
insert_final_newline = false
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
name: Deploy Theme
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-18.04
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Deploy Ghost Theme
|
||||
uses: TryGhost/action-deploy-theme@v1.4.0
|
||||
with:
|
||||
api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
|
||||
api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
b-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
.idea/*
|
||||
*.iml
|
||||
projectFilesBackup
|
||||
|
||||
.DS_Store
|
||||
|
||||
dist/
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Copyright (c) 2013-2020 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.
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
# Ghost Starter Theme
|
||||
|
||||
A starter framework for Ghost themes! Fork this repository and start your development here with all the main things you need to develop a custom Ghost theme.
|
||||
|
||||
|
||||
|
||||
# First time using a Ghost theme?
|
||||
|
||||
Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
|
||||
|
||||
We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://themes.ghost.org) which explains every possible Handlebars helper and template.
|
||||
|
||||
**The main files are:**
|
||||
|
||||
- `default.hbs` - The main template file
|
||||
- `index.hbs` - Used for the home page
|
||||
- `post.hbs` - Used for individual posts
|
||||
- `page.hbs` - Used for individual pages
|
||||
- `tag.hbs` - Used for tag archives
|
||||
- `author.hbs` - Used for author archives
|
||||
|
||||
One neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:
|
||||
|
||||
- `page-about.hbs` - Custom template for the `/about/` page
|
||||
- `tag-news.hbs` - Custom template for `/tag/news/` archive
|
||||
- `author-ali.hbs` - Custom template for `/author/ali/` archive
|
||||
|
||||
|
||||
|
||||
# Development
|
||||
|
||||
Styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
|
||||
|
||||
```bash
|
||||
# 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/<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.
|
||||
- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
|
||||
|
||||
|
||||
|
||||
# Copyright & License
|
||||
|
||||
Copyright (c) 2013-2020 Ghost Foundation - Released under the [MIT license](LICENSE).
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$(function(t){var o=1,r=window.location.pathname,a=t(document),s=t(".gh-postfeed"),c=300,l=!1,w=!1,d=window.scrollY,v=window.innerHeight,u=a.height();function f(){d=window.scrollY,e()}function g(){v=window.innerHeight,u=a.height(),e()}function e(){l||requestAnimationFrame(n),l=!0}function n(){var e,n;if(n=/(?:page\/)(\d)(?:\/)$/i,(e=(e=r).replace(/#(.*)$/g,"").replace("////g","/")).match(n)&&(o=parseInt(e.match(n)[1]),e=e.replace(n,"")),r=e,!w)if(d+v<=u-c)l=!1;else{if(o>=maxPages)return window.removeEventListener("scroll",f,{passive:!0}),void window.removeEventListener("resize",g);w=!0;var i=r+"page/"+(o+=1)+"/";t.get(i,function(e){var n=document.createRange().createContextualFragment(e).querySelectorAll(".post");n.length&&[].forEach.call(n,function(e){s[0].appendChild(e)})}).fail(function(e){404===e.status&&(window.removeEventListener("scroll",f,{passive:!0}),window.removeEventListener("resize",g))}).always(function(){u=a.height(),l=w=!1})}}window.addEventListener("scroll",f,{passive:!0}),window.addEventListener("resize",g),n()});
|
||||
//# sourceMappingURL=infinitescroll.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
!function(o){"use strict";o.fn.fitVids=function(t){var e,i,d={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(e=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',e.appendChild(i.childNodes[1])),t&&o.extend(d,t),this.each(function(){var t=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];d.customSelector&&t.push(d.customSelector);var r=".fitvidsignore";d.ignore&&(r=r+", "+d.ignore);var e=o(this).find(t.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var t,e,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),t=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(e="fitvid"+o.fn.fitVids._count,i.attr("name",e),o.fn.fitVids._count++),i.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*t+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto);
|
||||
//# sourceMappingURL=jquery.fitvids.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
:root{--color-primary:#3eb0ef;--color-base:#131313;--color-border:#ddd;--color-bg:#f5f5f5;--color-success:#80b912;--color-error:#f05230;--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;--xlarge:1680px;--large:1280px;--medium:980px;--small:740px;--xsmall:480px;--height:4rem;--margin:2rem;--radius:0.5rem}
|
||||
/*# sourceMappingURL=vars.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["vars.css"],"names":[],"mappings":"AAGA,MAGI,uBAAwB,CACxB,oBAAqB,CACrB,mBAAoB,CACpB,kBAAmB,CACnB,uBAAwB,CACxB,qBAAsB,CAGtB,yJAAoK,CACpK,gCAAmC,CACnC,mCAAsC,CACtC,gBAAiB,CACjB,iBAAkB,CAClB,eAAgB,CAChB,gBAAiB,CAGjB,eAAgB,CAChB,cAAe,CACf,cAAe,CACf,aAAc,CACd,cAAe,CAGf,aAAc,CACd,aAAc,CACd,eAEJ","file":"vars.css","sourcesContent":["/* Variables\n/* ---------------------------------------------------------- */\n\n:root {\n\n /* Colours */\n --color-primary: #3eb0ef;\n --color-base: #131313;\n --color-border: #ddd;\n --color-bg: #f5f5f5;\n --color-success: #80b912;\n --color-error: #f05230;\n\n /* Fonts */\n --font-sans-serif: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n --font-serif: Georgia, Times, serif;\n --font-mono: Menlo, Courier, monospace;\n --font-light: 100;\n --font-normal: 400;\n --font-bold: 700;\n --font-heavy: 800;\n\n /* Breakpoints */\n --xlarge: 1680px;\n --large: 1280px;\n --medium: 980px;\n --small: 740px;\n --xsmall: 480px;\n\n /* Sizes */\n --height: 4rem;\n --margin: 2rem;\n --radius: 0.5rem;\n\n}\n"]}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
/* Buttons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-button {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
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;
|
||||
}
|
||||
|
||||
.gh-button.gh-button-fit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-button.gh-button-small {
|
||||
height: calc(var(--height) * 0.9);
|
||||
line-height: calc(var(--height) * 0.9);
|
||||
padding: 0 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.gh-button.gh-button-large {
|
||||
height: calc(var(--height) * 1.2);
|
||||
line-height: calc(var(--height) * 1.2);
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.gh-button.gh-button-disabled,
|
||||
.gh-button:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.gh-button {
|
||||
color: var(--color-primary) !important;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 2px var(--color-primary);
|
||||
}
|
||||
|
||||
.gh-button:hover {
|
||||
text-decoration: none;
|
||||
color: color-mod(var(--color-primary) l(-15%)) !important;
|
||||
box-shadow: inset 0 0 0 2px color-mod(var(--color-primary) l(-10%));
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.gh-button.gh-button-primary {
|
||||
color: #fff !important;
|
||||
background-color: var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-button.gh-button-primary:hover {
|
||||
background-color: color-mod(var(--color-primary) l(-10%));
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
/* Forms
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-input,
|
||||
.gh-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%;
|
||||
}
|
||||
|
||||
.gh-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.gh-select {
|
||||
height: var(--height);
|
||||
padding-right: var(--height);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gh-select option {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.gh-select:focus::-ms-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.gh-select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-input,
|
||||
.gh-select {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.gh-textarea {
|
||||
padding: 0.3em 0.6em;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.gh-check {
|
||||
display: block;
|
||||
margin-right: -2em;
|
||||
opacity: 0;
|
||||
width: 1em;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.gh-check + label,
|
||||
.gh-check + 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;
|
||||
}
|
||||
|
||||
.gh-check + label:before,
|
||||
.gh-check + 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;
|
||||
}
|
||||
|
||||
.gh-check:checked + label:before,
|
||||
.gh-check:checked + label:before {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
content: '✓';
|
||||
}
|
||||
|
||||
.gh-check:focus + label:before,
|
||||
.gh-check:focus + label:before {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 1px var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
.gh-check + label:before {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.gh-check + label:before {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
/* Reset
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: color-mod(var(--color-base) l(+20%));
|
||||
font-family: var(--font-sans-serif);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
background: #fff;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
dl,
|
||||
dd,
|
||||
hr,
|
||||
pre,
|
||||
form,
|
||||
table,
|
||||
video,
|
||||
figure,
|
||||
figcaption,
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul[class],
|
||||
ol[class] {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid currentcolor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
::selection {
|
||||
text-shadow: none;
|
||||
background: #cbeafb;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
ul:not([class]) li + li {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
color: color-mod(var(--color-primary) l(-5%));
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
a[class] {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
a[class]:hover {
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
line-height: 1.15em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.6rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h1 {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h3 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
a.gh-powered,
|
||||
a.gh-powered:hover {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 9px 6px 6px;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
letter-spacing: -0.3px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: #383838;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.gh-powered svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
|
||||
|
||||
/* Content grid
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-canvas {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
minmax(calc(calc(100% - 1200px) / 2), 1fr)
|
||||
[wide-start]
|
||||
auto
|
||||
[main-start]
|
||||
720px
|
||||
[main-end]
|
||||
auto
|
||||
[wide-end]
|
||||
minmax(calc(calc(100% - 1200px) / 2), 1fr)
|
||||
[full-end]
|
||||
;
|
||||
}
|
||||
|
||||
@media (max-width: 1296px) {
|
||||
.gh-canvas {
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
4vmin
|
||||
[wide-start]
|
||||
auto
|
||||
[main-start]
|
||||
720px
|
||||
[main-end]
|
||||
auto
|
||||
[wide-end]
|
||||
4vmin
|
||||
[full-end]
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 778px) {
|
||||
.gh-canvas {
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
4vmin
|
||||
[wide-start]
|
||||
0
|
||||
[main-start]
|
||||
auto
|
||||
[main-end]
|
||||
0
|
||||
[wide-end]
|
||||
4vmin
|
||||
[full-end]
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-canvas > * {
|
||||
grid-column: main-start / main-end;
|
||||
}
|
||||
|
||||
.kg-width-wide {
|
||||
grid-column: wide-start / wide-end;
|
||||
}
|
||||
|
||||
.kg-width-full {
|
||||
grid-column: full-start / full-end;
|
||||
}
|
||||
|
||||
.kg-width-full img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Content & Typography
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-content > * + * {
|
||||
margin-top: 4vmin;
|
||||
}
|
||||
|
||||
.gh-content [id]:not(:first-child) {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
.gh-content > [id] + * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-content [id] + .kg-card,
|
||||
.gh-content blockquote + .kg-card {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.gh-canvas > blockquote,
|
||||
.gh-canvas > ol,
|
||||
.gh-canvas > ul,
|
||||
.gh-canvas > dl,
|
||||
.gh-canvas > p {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.gh-content > ul,
|
||||
.gh-content > ol,
|
||||
.gh-content > dl {
|
||||
padding-left: 1.9em;
|
||||
}
|
||||
|
||||
.gh-content hr {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.gh-content hr + * {
|
||||
margin-top: 6vmin !important;
|
||||
}
|
||||
|
||||
.gh-content blockquote {
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gh-content blockquote::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1.5em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0.3rem;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.gh-canvas blockquote,
|
||||
.gh-canvas ol,
|
||||
.gh-canvas ul,
|
||||
.gh-canvas dl,
|
||||
.gh-canvas p {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-content blockquote::before {
|
||||
left: -4vmin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Cards
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-content :not(.kg-card):not([id]) + .kg-card {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.gh-content .kg-card + :not(.kg-card) {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.kg-card figcaption {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.5);
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.kg-card figcaption strong {
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.gh-canvas :not(pre) code {
|
||||
vertical-align: middle;
|
||||
padding: 0.15em 0.4em 0.15em;
|
||||
border: #e1eaef 1px solid;
|
||||
font-weight: 400 !important;
|
||||
font-size: 0.9em;
|
||||
line-height: 1em;
|
||||
color: #dc0050;
|
||||
background: #f0f6f9;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.gh-canvas > pre {
|
||||
overflow: scroll;
|
||||
padding: 16px 20px;
|
||||
background: rgba(255,255,255,0.8);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.kg-embed-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kg-image-card img {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
/* Galleries
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-gallery-card + .kg-gallery-card {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.kg-gallery-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* Bookmark Cards
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-bookmark-card,
|
||||
.kg-bookmark-publisher {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.kg-bookmark-container,
|
||||
.kg-bookmark-container:hover {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
color: currentColor;
|
||||
background: rgba(255,255,255,0.6);
|
||||
font-family: var(--font-sans-serif);
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kg-bookmark-content {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
padding: 20px;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.kg-bookmark-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
display: -webkit-box;
|
||||
max-height: 45px;
|
||||
margin: 0.5em 0 0 0;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.55em;
|
||||
overflow: hidden;
|
||||
opacity: 0.8;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.kg-bookmark-metadata {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.kg-bookmark-metadata {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.3em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kg-bookmark-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail {
|
||||
display: flex;
|
||||
flex-basis: 24rem;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: bottom;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.kg-bookmark-author {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kg-bookmark-publisher::before {
|
||||
content: "•";
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
|
||||
/* Card captions
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-width-full.kg-card-hascaption {
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.kg-width-wide.kg-card-hascaption img {
|
||||
grid-column: wide-start / wide-end;
|
||||
}
|
||||
.kg-width-full.kg-card-hascaption img {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.kg-width-full.kg-card-hascaption figcaption {
|
||||
grid-column: main-start / main-end;
|
||||
}
|
||||
|
||||
|
||||
/* Tables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-content th {
|
||||
padding: 0.5em 0.8em;
|
||||
text-align: left;
|
||||
font-size: .75em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gh-content td {
|
||||
padding: 0.4em 0.7em;
|
||||
}
|
||||
|
||||
.gh-content tbody tr:nth-child(2n + 1) {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.gh-content tbody tr:nth-child(2n + 2) td:last-child {
|
||||
box-shadow:
|
||||
inset 1px 0 rgba(0,0,0,0.1),
|
||||
inset -1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.gh-content tbody tr:nth-child(2n + 2) td {
|
||||
box-shadow: inset 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.gh-content tbody tr:last-child {
|
||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/* Error Templates
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-error {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-bottom: 2vmin;
|
||||
}
|
||||
|
||||
.gh-error-content {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-error-code {
|
||||
margin: 0;
|
||||
font-size: 14vmin;
|
||||
}
|
||||
|
||||
.gh-error-description {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
font-size: 4vmin;
|
||||
line-height: 1.2em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.gh-error-link {
|
||||
display: block;
|
||||
margin-top: 4vmin;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-error-stack {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0;
|
||||
padding: 8vmin 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-error-stack-list {
|
||||
margin: 4vmin 0 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-error-stack-list > li {
|
||||
padding: 2rem 0;
|
||||
margin: 0;
|
||||
border-top: rgba(0,0,0,0.1) 1px solid;
|
||||
}
|
||||
|
||||
.gh-error-stack-function {
|
||||
margin: 0 0 0.5em;
|
||||
font-size: 1.8rem;
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
/* Global Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8vmin 4vmin;
|
||||
}
|
||||
|
||||
.gh-foot .gh-container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.gh-foot a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.gh-foot-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav li {
|
||||
margin: 0 1.5vmin;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
.gh-foot-meta {
|
||||
margin: 2rem 0;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-foot-menu .nav {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
/* Global Header
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head {
|
||||
padding: 3vmin 4vmin;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3em;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.gh-head a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-head-inner {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
|
||||
/* Brand
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-brand {
|
||||
grid-column-start: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* Primary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav li {
|
||||
margin: 0 1.5vmin 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav-current a {
|
||||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
|
||||
/* Secondary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-head-actions-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-head-actions-list a:not([class]) {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5vmin;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Menu Trigger
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-burger {
|
||||
position: relative;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-burger-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.gh-burger-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gh-burger-box::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentcolor;
|
||||
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.gh-burger-inner::before,
|
||||
.gh-burger-inner::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentcolor;
|
||||
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.gh-burger-inner::before {
|
||||
transform: translatey(-6px);
|
||||
}
|
||||
.gh-burger-inner::after {
|
||||
transform: translatey(6px);
|
||||
}
|
||||
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
|
||||
transform: translatey(-8px);
|
||||
}
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
transform: translatey(8px);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-box::before {
|
||||
width: 0;
|
||||
transform: translatex(19px);
|
||||
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::before {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(135deg);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::after {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(-135deg);
|
||||
}
|
||||
|
||||
|
||||
/* Layout Variants
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-brandnavactions .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.gh-head-brandnav .gh-container {
|
||||
grid-gap: 0;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-menu {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-menu .nav li {
|
||||
margin: 0 0 0 1.5vmin;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Center Stacked */
|
||||
.gh-head-stacked .gh-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 2vmin;
|
||||
}
|
||||
.gh-head-stacked .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.gh-head-stacked .gh-head-menu,
|
||||
.gh-head-stacked .gh-head-actions,
|
||||
.gh-head-stacked .gh-head-actions-list {
|
||||
justify-content: center;
|
||||
}
|
||||
.gh-head-stacked .gh-head-actions a:first-child svg {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
/* IDs needed to ensure sufficient specificity */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gh-burger {
|
||||
display: inline-block;
|
||||
}
|
||||
#gh-head {
|
||||
transition: all 0.4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
#gh-head .gh-head-inner {
|
||||
height: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#gh-head .gh-head-brand {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
grid-column-start: auto;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
#gh-head .gh-head-logo {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
#gh-head .gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
#gh-head .gh-head-menu {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 0 10vh 0;
|
||||
font-weight: 300;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav a {
|
||||
padding: 8px 0;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#gh-head .gh-head-actions {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
}
|
||||
#gh-head .gh-head-actions a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
/* Hide collapsed content */
|
||||
#gh-head .gh-head-actions,
|
||||
#gh-head .gh-head-menu {
|
||||
display: none;
|
||||
}
|
||||
/* Open the menu */
|
||||
.gh-head-open {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.gh-head-open #gh-head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 900;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.gh-head-open #gh-head .gh-head-inner {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.gh-head-open #gh-head .gh-head-actions,
|
||||
.gh-head-open #gh-head .gh-head-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#gh-head .gh-head-menu {
|
||||
font-size: 6vmin;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
/* Members Auth Template
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-auth-form {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 10vmin;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-auth-title {
|
||||
margin: 0 0 0.1em;
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
|
||||
.gh-auth-form p {
|
||||
margin: 10px 0 4vmin 0;
|
||||
font-size: 1.7rem;
|
||||
color: rgba(0,0,0,0.6)
|
||||
}
|
||||
|
||||
.gh-auth-form p small {
|
||||
display: inline-block;
|
||||
margin: 15px 0 0 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-auth-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-auth-box .gh-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.gh-auth-box {
|
||||
flex-direction: column;
|
||||
max-width: 400px;
|
||||
}
|
||||
.gh-auth-box .gh-button {
|
||||
width: 100%;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Members Forms
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
form[data-members-form] .gh-button-loader,
|
||||
form[data-members-form] .message-success,
|
||||
form[data-members-form] .message-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-button-content {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.message-success svg,
|
||||
.message-error svg {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
.message-success svg {
|
||||
fill: #fff;
|
||||
}
|
||||
.message-error svg {
|
||||
fill: var(--color-error);
|
||||
}
|
||||
|
||||
form[data-members-form].success .message-success,
|
||||
form[data-members-form].error .message-error {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 4vmin;
|
||||
right: 4vmin;
|
||||
z-index: 9999;
|
||||
max-width: calc(1400px - 8vmin);
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
background: var(--color-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
form[data-members-form].success .message-success {
|
||||
background: var(--color-success);
|
||||
}
|
||||
form[data-members-form].error .message-error {
|
||||
color: var(--color-error);
|
||||
background: #fff;
|
||||
box-shadow: var(--color-error) 0 0 0 1px;
|
||||
}
|
||||
|
||||
form[data-members-form] .gh-button {
|
||||
position: relative;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/*-- Loading --*/
|
||||
|
||||
/* Hide button text */
|
||||
form[data-members-form].loading .gh-button-content {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Show loading spinner */
|
||||
form[data-members-form].loading .gh-button-loader {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -30%;
|
||||
margin: 0 0 0 -19px;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.gh-button-loader svg path,
|
||||
.gh-button-loader svg rect{
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/*-- Show success message on success --*/
|
||||
form[data-members-form].success .message-success {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*-- Show error message on error --*/
|
||||
form[data-members-form].error .message-error {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/* Read More
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-readmore {
|
||||
padding: 8vmin 4vmin;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.gh-readmore-inner {
|
||||
display: grid;
|
||||
grid-gap: 8vmin;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.gh-readmore-prev {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-readmore a {
|
||||
display: flex;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-readmore h4 {
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.gh-readmore svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 1em;
|
||||
margin: 0.15em 0 0;
|
||||
}
|
||||
|
||||
.gh-readmore svg + h4,
|
||||
.gh-readmore h4 + svg {
|
||||
margin-left: 2vmin;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-readmore {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.gh-readmore svg {
|
||||
margin: 0.1em 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
/*
|
||||
|
||||
This is a development CSS file which is compiled to a minified
|
||||
production stylesheet in assets/built/screen.css using: gulp dev
|
||||
|
||||
*/
|
||||
|
||||
/* Lib - Local component imports
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Base components */
|
||||
@import "vars.css";
|
||||
@import "components/global.css";
|
||||
@import "components/forms.css";
|
||||
@import "components/buttons.css";
|
||||
|
||||
/* Ghost components */
|
||||
@import "ghost/header.css";
|
||||
@import "ghost/content.css";
|
||||
@import "ghost/readmore.css";
|
||||
@import "ghost/members.css";
|
||||
@import "ghost/errors.css";
|
||||
@import "ghost/footer.css";
|
||||
@import "ghost/badge.css";
|
||||
|
||||
|
||||
|
||||
/* Main - Your styles here! Edit below
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
html,
|
||||
.gh-viewport {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.gh-main {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-page {
|
||||
padding: 0 4vmin;
|
||||
}
|
||||
|
||||
.gh-article {
|
||||
padding: 8vmin 0;
|
||||
}
|
||||
|
||||
.gh-postfeed {
|
||||
padding: 8vmin 0;
|
||||
}
|
||||
|
||||
.gh-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-head-actions a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.gh-head-actions a svg {
|
||||
height: 1.8rem;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.gh-head-actions a:first-child svg {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.gh-head-actions a:last-child svg {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
/* Index
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-card:not(:first-child) {
|
||||
margin: 8vmin auto 0;
|
||||
}
|
||||
|
||||
.gh-card-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-card-image {
|
||||
width: 100%;
|
||||
max-height: 700px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 4vmin;
|
||||
}
|
||||
|
||||
.gh-card-meta {
|
||||
display: block;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.gh-card-content {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-card-content p {
|
||||
margin: 1.2rem 0;
|
||||
padding: 0 6vmin;
|
||||
}
|
||||
|
||||
.gh-card-content > strong {
|
||||
display: inline-block;
|
||||
padding: 1px 0;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 -1px 0 0 inset currentColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/* Page
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-page-head {
|
||||
margin: 0 auto;
|
||||
padding: 8vmin 0 4vmin;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-page-image {
|
||||
margin: 4vmin 0 0 0;
|
||||
}
|
||||
|
||||
.gh-page-head > p {
|
||||
max-width: 720px;
|
||||
margin: 0.3em auto 0;
|
||||
padding: 0 6vmin;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.4em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-page-head > p {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Post
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-header {
|
||||
padding: 0 0 8vmin 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-post-meta {
|
||||
display: block;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.gh-excerpt {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
.gh-feature-image {
|
||||
grid-column: wide-start / wide-end;
|
||||
width: 100%;
|
||||
margin: 8vmin 0 0;
|
||||
}
|
||||
|
||||
.gh-post-footer {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
/* Author Archive
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-author-image {
|
||||
height: 12vmin;
|
||||
width: 12vmin;
|
||||
margin: 0 auto 1.5em;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.gh-author-meta {
|
||||
margin: 2vmin 0 0 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.gh-author-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-author-links a {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 0.75vmin;
|
||||
}
|
||||
|
||||
.gh-author-links a + a:before {
|
||||
display: block;
|
||||
content: "";
|
||||
margin: 0 1.25vmin 0 0;
|
||||
height: 1em;
|
||||
width: 1px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-author-meta {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/* Variables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
|
||||
/* Colours */
|
||||
--color-primary: #3eb0ef;
|
||||
--color-base: #131313;
|
||||
--color-border: #ddd;
|
||||
--color-bg: #f5f5f5;
|
||||
--color-success: #80b912;
|
||||
--color-error: #f05230;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--font-serif: Georgia, Times, serif;
|
||||
--font-mono: Menlo, Courier, monospace;
|
||||
--font-light: 100;
|
||||
--font-normal: 400;
|
||||
--font-bold: 700;
|
||||
--font-heavy: 800;
|
||||
|
||||
/* Breakpoints */
|
||||
--xlarge: 1680px;
|
||||
--large: 1280px;
|
||||
--medium: 980px;
|
||||
--small: 740px;
|
||||
--xsmall: 480px;
|
||||
|
||||
/* Sizes */
|
||||
--height: 4rem;
|
||||
--margin: 2rem;
|
||||
--radius: 0.5rem;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
/* global maxPages */
|
||||
|
||||
// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
|
||||
$(function ($) {
|
||||
var currentPage = 1;
|
||||
var pathname = window.location.pathname;
|
||||
var $document = $(document);
|
||||
var $result = $('.gh-postfeed');
|
||||
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();
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,89 @@
|
|||
/*jshint browser:true */
|
||||
/*!
|
||||
* FitVids 1.3
|
||||
*
|
||||
*
|
||||
* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
|
||||
* This is an unofficial release, ported by John O'Nolan
|
||||
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
|
||||
* Released under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
;(function( $ ){
|
||||
|
||||
'use strict';
|
||||
|
||||
$.fn.fitVids = function( options ) {
|
||||
var settings = {
|
||||
customSelector: null,
|
||||
ignore: null
|
||||
};
|
||||
|
||||
if(!document.getElementById('fit-vids-style')) {
|
||||
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
|
||||
var head = document.head || document.getElementsByTagName('head')[0];
|
||||
var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
|
||||
var div = document.createElement("div");
|
||||
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
|
||||
head.appendChild(div.childNodes[1]);
|
||||
}
|
||||
|
||||
if ( options ) {
|
||||
$.extend( settings, options );
|
||||
}
|
||||
|
||||
return this.each(function(){
|
||||
var selectors = [
|
||||
'iframe[src*="player.vimeo.com"]',
|
||||
'iframe[src*="youtube.com"]',
|
||||
'iframe[src*="youtube-nocookie.com"]',
|
||||
'iframe[src*="kickstarter.com"][src*="video.html"]',
|
||||
'object',
|
||||
'embed'
|
||||
];
|
||||
|
||||
if (settings.customSelector) {
|
||||
selectors.push(settings.customSelector);
|
||||
}
|
||||
|
||||
var ignoreList = '.fitvidsignore';
|
||||
|
||||
if(settings.ignore) {
|
||||
ignoreList = ignoreList + ', ' + settings.ignore;
|
||||
}
|
||||
|
||||
var $allVideos = $(this).find(selectors.join(','));
|
||||
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
|
||||
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
|
||||
|
||||
$allVideos.each(function(){
|
||||
var $this = $(this);
|
||||
if($this.parents(ignoreList).length > 0) {
|
||||
return; // Disable FitVids on this video.
|
||||
}
|
||||
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
|
||||
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
|
||||
{
|
||||
$this.attr('height', 9);
|
||||
$this.attr('width', 16);
|
||||
}
|
||||
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
|
||||
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
|
||||
aspectRatio = height / width;
|
||||
if(!$this.attr('name')){
|
||||
var videoName = 'fitvid' + $.fn.fitVids._count;
|
||||
$this.attr('name', videoName);
|
||||
$.fn.fitVids._count++;
|
||||
}
|
||||
$this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
|
||||
$this.removeAttr('height').removeAttr('width');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Internal counter for unique video names.
|
||||
$.fn.fitVids._count = 0;
|
||||
|
||||
// Works with either jQuery or Zepto
|
||||
})( window.jQuery || window.Zepto );
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,46 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#author}}
|
||||
<header class="gh-page-head">
|
||||
{{#if profile_image}}
|
||||
<img class="gh-author-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
|
||||
<h1>{{name}}</h1>
|
||||
{{#if bio}}
|
||||
<p>{{bio}}</p>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-author-meta">
|
||||
<div class="gh-author-links">
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" rel="noopener">Website</a>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if cover_image}}
|
||||
<img class="gh-page-image" src="{{cover_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
</header>
|
||||
{{/author}}
|
||||
|
||||
<div class="gh-postfeed">
|
||||
{{#foreach posts visibility="all"}}
|
||||
|
||||
{{> "card"}} {{!-- partials/card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{@site.lang}}">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
|
||||
<title>{{meta_title}}</title>
|
||||
|
||||
{{ghost_head}}
|
||||
{{!-- Outputs important meta data and settings, should always be in <head> --}}
|
||||
|
||||
</head>
|
||||
<body class="{{body_class}}">
|
||||
<div class="gh-viewport">
|
||||
|
||||
<header id="gh-head" class="gh-head">
|
||||
<nav class="gh-head-inner gh-container">
|
||||
|
||||
<div class="gh-head-brand">
|
||||
<a class="gh-head-logo" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img src="{{@site.logo}}" alt="{{@site.title}}" />
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
{{/if}}
|
||||
</a>
|
||||
<a class="gh-burger" role="button">
|
||||
<div class="gh-burger-box">
|
||||
<div class="gh-burger-inner"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="gh-head-menu">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<div class="gh-head-actions">
|
||||
<div class="gh-head-actions-list">
|
||||
{{#if @site.facebook}}
|
||||
<a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||
{{/if}}
|
||||
{{#if @site.twitter}}
|
||||
<a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||
{{/if}}
|
||||
<a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="gh-main">
|
||||
|
||||
{{{body}}}
|
||||
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="gh-foot">
|
||||
<div class="gh-container">
|
||||
<div class="gh-foot-menu">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<div class="gh-foot-meta">
|
||||
Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
{{!-- <foot> --}}
|
||||
|
||||
<script src="{{asset "built/jquery-3.4.1.min.js"}}"></script>
|
||||
|
||||
{{#if pagination.pages}}
|
||||
<script>
|
||||
var maxPages = parseInt('{{pagination.pages}}');
|
||||
</script>
|
||||
<script src="{{asset "built/infinitescroll.js"}}"></script>
|
||||
{{/if}}
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Mobile Menu Trigger
|
||||
$('.gh-burger').click(function () {
|
||||
$('body').toggleClass('gh-head-open');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{{#is "post, page"}}
|
||||
<script src="{{asset "built/jquery.fitvids.js"}}"></script>
|
||||
<script>
|
||||
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%';
|
||||
});
|
||||
$(document).ready(function () {
|
||||
var $postContent = $(".gh-content");
|
||||
$postContent.fitVids();
|
||||
});
|
||||
</script>
|
||||
{{/is}}
|
||||
|
||||
{{ghost_foot}}
|
||||
{{!-- Outputs important scripts - should always be included before closing body tag --}}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
{{!< default}}
|
||||
|
||||
<section class="gh-page gh-error">
|
||||
<div class="gh-container">
|
||||
|
||||
<section class="gh-error-content">
|
||||
|
||||
<h1 class="gh-error-code">{{statusCode}}</h1>
|
||||
<p class="gh-error-description">{{message}}</p>
|
||||
<p class="gh-error-link"><a href="{{@site.url}}">Go to the front page →</a></p>
|
||||
|
||||
{{#if errorDetails}}
|
||||
<section class="gh-error-stack">
|
||||
<h4>Theme errors:</h4>
|
||||
<ul class="gh-error-stack-list">
|
||||
{{#foreach errorDetails}}
|
||||
<li>
|
||||
<h5 class="gh-error-stack-function">{{{rule}}}</h5>
|
||||
|
||||
{{#foreach failures}}
|
||||
<span class="gh-error-stack-file"><strong>Ref:</strong> {{ref}}</span><br>
|
||||
<span class="gh-error-stack-file"><strong>Message:</strong> {{message}}</span>
|
||||
{{/foreach}}
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
const {series, watch, src, dest, parallel} = require('gulp');
|
||||
const pump = require('pump');
|
||||
|
||||
// gulp plugins and utils
|
||||
var livereload = require('gulp-livereload');
|
||||
var postcss = require('gulp-postcss');
|
||||
var zip = require('gulp-zip');
|
||||
var uglify = require('gulp-uglify');
|
||||
var beeper = require('beeper');
|
||||
|
||||
// postcss plugins
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var colorFunction = require('postcss-color-mod-function');
|
||||
var cssnano = require('cssnano');
|
||||
var easyimport = require('postcss-easy-import');
|
||||
|
||||
function serve(done) {
|
||||
livereload.listen();
|
||||
done();
|
||||
}
|
||||
|
||||
const handleError = (done) => {
|
||||
return function (err) {
|
||||
if (err) {
|
||||
beeper();
|
||||
}
|
||||
return done(err);
|
||||
};
|
||||
};
|
||||
|
||||
function hbs(done) {
|
||||
pump([
|
||||
src(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs']),
|
||||
livereload()
|
||||
], handleError(done));
|
||||
}
|
||||
|
||||
function css(done) {
|
||||
var processors = [
|
||||
easyimport,
|
||||
colorFunction(),
|
||||
autoprefixer(),
|
||||
cssnano()
|
||||
];
|
||||
|
||||
pump([
|
||||
src('assets/css/*.css', {sourcemaps: true}),
|
||||
postcss(processors),
|
||||
dest('assets/built/', {sourcemaps: '.'}),
|
||||
livereload()
|
||||
], handleError(done));
|
||||
}
|
||||
|
||||
function js(done) {
|
||||
pump([
|
||||
src('assets/js/*.js', {sourcemaps: true}),
|
||||
uglify(),
|
||||
dest('assets/built/', {sourcemaps: '.'}),
|
||||
livereload()
|
||||
], handleError(done));
|
||||
}
|
||||
|
||||
function zipper(done) {
|
||||
var targetDir = 'dist/';
|
||||
var themeName = require('./package.json').name;
|
||||
var filename = themeName + '.zip';
|
||||
|
||||
pump([
|
||||
src([
|
||||
'**',
|
||||
'!node_modules', '!node_modules/**',
|
||||
'!dist', '!dist/**'
|
||||
]),
|
||||
zip(filename),
|
||||
dest(targetDir)
|
||||
], handleError(done));
|
||||
}
|
||||
|
||||
const cssWatcher = () => watch('assets/css/**', css);
|
||||
const hbsWatcher = () => watch(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs'], hbs);
|
||||
const watcher = parallel(cssWatcher, hbsWatcher);
|
||||
const build = series(css, js);
|
||||
const dev = series(build, serve, watcher);
|
||||
|
||||
exports.build = build;
|
||||
exports.zip = series(build, zipper);
|
||||
exports.default = dev;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
<div class="gh-postfeed">
|
||||
{{#foreach posts visibility="all"}}
|
||||
|
||||
{{> "card"}} {{!-- partials/card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{{!< ../default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#if @member.paid}}
|
||||
|
||||
{{!-- Logged in, paying member: Show account info --}}
|
||||
<div class="account-box">
|
||||
<h2 class="account-box-title">Nice, you're a subscriber!</h2>
|
||||
<p>Hey! <strong>{{@member.email}}</strong> has an active {{@site.title}} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.</p>
|
||||
</div>
|
||||
|
||||
{{else if @member}}
|
||||
|
||||
{{!-- Logged in, not paying: Link to checkout --}}
|
||||
<div class="account-box">
|
||||
<h1 class="account-box-title">Currently, you're not a subscriber</h1>
|
||||
<p>Hey there! <strong>{{@member.email}}</strong> is subscribed to free updates from {{@site.title}}, but doesn't have a paid subscription to unlock full access.</p>
|
||||
<div class="authbox-signup">
|
||||
<a class="button primary" href="/signup/">
|
||||
<span class="button-content">Subscribe now</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
|
||||
{{!-- Not logged in: Redirect to signin --}}
|
||||
<script>window.location = '{{@site.url}}/signin/';</script>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{{!< ../default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#if @member}}
|
||||
|
||||
{{!-- Logged in: Redirect home --}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
|
||||
{{else}}
|
||||
|
||||
{{!-- Not logged in: Signin form --}}
|
||||
<form class="gh-auth-form" data-members-form="signin">
|
||||
<h1 class="gh-auth-title">Welcome back!</h1>
|
||||
<p>Sign into your account again for full access</p>
|
||||
<div class="gh-auth-box">
|
||||
<input aria-label="Email Address" class="gh-input" data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" autofocus />
|
||||
<button class="gh-button gh-button-primary" type="submit">
|
||||
<span class="gh-button-content">Sign in</span>
|
||||
<span class="gh-button-loader">{{> "icons/loader"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p><small>Don't have an account yet? <a href="/signup/">Sign up</a></small></p>
|
||||
<div class="message-success"><strong>Great!</strong> Check your inbox and click the link to complete signin</div>
|
||||
<div class="message-error">Please enter a valid email address!</div>
|
||||
</form>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
{{!< ../default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#if @member.paid}}
|
||||
|
||||
{{!-- Logged in, paying member: Redirect home --}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
|
||||
{{else if @member}}
|
||||
|
||||
{{!-- Logged in, not paying: Check out --}}
|
||||
<div class="gh-checkout-form">
|
||||
<h1 class="gh-checkout-title">Choose your subscription</h1>
|
||||
<p>Unlock full access to {{@site.title}} and see the entire library of members-only content & updates</p>
|
||||
<div class="gh-checkout-box">
|
||||
<div class="gh-checkout-plan">
|
||||
<header class="gh-checkout-plan-header">
|
||||
<h3>Monthly</h3>
|
||||
<span>$</span><strong>{{@price.monthly}}</strong> / month
|
||||
</header>
|
||||
<div class="gh-checkout-plan-content">
|
||||
<ul>
|
||||
<li>Full access to all private posts</li>
|
||||
<li>Regular updates with new content</li>
|
||||
<li>Support independent publishing</li>
|
||||
<li>Simple, secure card payment</li>
|
||||
</ul>
|
||||
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Monthly">Choose this plan</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-checkout-plan">
|
||||
<header class="gh-checkout-plan-header">
|
||||
<h3>Yearly</h3>
|
||||
<span>$</span><strong>{{@price.yearly}}</strong> / year
|
||||
</header>
|
||||
<div class="gh-checkout-plan-content">
|
||||
<ul>
|
||||
<li>Full access to all private posts</li>
|
||||
<li>Regular updates with new content</li>
|
||||
<li>Support independent publishing</li>
|
||||
<li>Simple, secure card payment</li>
|
||||
<li>One easy payment instead of 12!</li>
|
||||
</ul>
|
||||
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Yearly">Choose this plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
|
||||
{{!-- Not logged in: Sign up --}}
|
||||
<form class="gh-auth-form" data-members-form="signup">
|
||||
<h1 class="gh-auth-title">Signup to {{@site.title}}</h1>
|
||||
<p>{{@site.description}}</p>
|
||||
<div class="gh-auth-box">
|
||||
<input aria-label="Email Address" class="gh-input" data-members-email type="email" placeholder="youremail@example.com" required="true" autocomplete="false" autofocus />
|
||||
<button class="gh-button gh-button-primary" type="submit">
|
||||
<span class="gh-button-content">Continue</span>
|
||||
<span class="gh-button-loader">{{> "icons/loader"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p><small>Already have an account? <a href="/signin/">Sign in</a></small></p>
|
||||
<div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
|
||||
<div class="message-error">Please enter a valid email address!</div>
|
||||
</form>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
{
|
||||
"name": "ghost-starter-theme",
|
||||
"description": "A custom theme for ghost",
|
||||
"demo": "https://starter.ghost.io",
|
||||
"version": "1.0.0",
|
||||
"engines": {
|
||||
"ghost": ">=3.0.0",
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"screenshots": {
|
||||
"desktop": "assets/screenshot-desktop.jpg"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "gulp",
|
||||
"zip": "gulp zip",
|
||||
"test": "gscan .",
|
||||
"test:ci": "gscan --fatal --verbose .",
|
||||
"pretest": "gulp build",
|
||||
"preship": "yarn test",
|
||||
"ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version && git push --follow-tags; fi"
|
||||
},
|
||||
"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/Starter.git"
|
||||
},
|
||||
"bugs": "https://github.com/TryGhost/Starter/issues",
|
||||
"contributors": "https://github.com/TryGhost/Starter/graphs/contributors",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "9.8.3",
|
||||
"cssnano": "4.1.10",
|
||||
"gscan": "3.5.4",
|
||||
"gulp": "4.0.2",
|
||||
"gulp-livereload": "4.0.2",
|
||||
"gulp-postcss": "8.0.0",
|
||||
"gulp-sourcemaps": "2.6.5",
|
||||
"gulp-uglify": "3.0.2",
|
||||
"gulp-util": "3.0.8",
|
||||
"gulp-watch": "5.0.1",
|
||||
"gulp-zip": "5.0.2",
|
||||
"postcss-color-mod-function": "3.0.3",
|
||||
"postcss-easy-import": "3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
],
|
||||
"config": {
|
||||
"posts_per_page": 15,
|
||||
"image_sizes": {
|
||||
"xxs": {
|
||||
"width": 30
|
||||
},
|
||||
"xs": {
|
||||
"width": 100
|
||||
},
|
||||
"s": {
|
||||
"width": 300
|
||||
},
|
||||
"m": {
|
||||
"width": 600
|
||||
},
|
||||
"l": {
|
||||
"width": 1200
|
||||
},
|
||||
"xl": {
|
||||
"width": 2000
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<article class="gh-article {{post_class}}">
|
||||
|
||||
<header class="gh-header gh-canvas">
|
||||
<h1 class="gh-title">{{title}}</h1>
|
||||
|
||||
{{#if custom_excerpt}}
|
||||
<p class="gh-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if feature_image}}
|
||||
<img class="gh-feature-image" src="{{feature_image}}" alt="{{title}}" />
|
||||
{{/if}}
|
||||
</header>
|
||||
|
||||
<div class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
{{/post}}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{{!--
|
||||
Re-usable card for linking to posts
|
||||
--}}
|
||||
|
||||
<article class="gh-card {{post_class}}">
|
||||
<a class="gh-card-link" href="{{url}}">
|
||||
{{#if feature_image}}
|
||||
<img class="gh-card-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 1000px) 400px, 700px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{title}}"
|
||||
/>
|
||||
{{/if}}
|
||||
<div class="gh-card-content">
|
||||
<span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
<h2 class="gh-card-title">{{title}}</h2>
|
||||
<p>{{excerpt}}</p>
|
||||
<strong>Read more</strong>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 17 27" xmlns="http://www.w3.org/2000/svg"><path d="M15.54 2.426l-13.143 11.5 13.143 11.5" stroke-width="3" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 233 B |
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 18 27" xmlns="http://www.w3.org/2000/svg"><path d="M2.397 25.426l13.143-11.5-13.143-11.5" stroke-width="3" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 234 B |
|
|
@ -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 |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1018"><defs><path d="M.06.04H1024v1017.74H.06z"/></defs><g fill="none" fill-rule="evenodd"><path d="M1024 512C1024 229.23 794.77 0 512 0S0 229.23 0 512c0 255.554 187.231 467.37 432 505.78V660H302V512h130V399.2C432 270.88 508.438 200 625.39 200 681.407 200 740 210 740 210v126h-64.562C611.835 336 592 375.467 592 415.957V512h142l-22.7 148H592v357.78c244.769-38.41 432-250.226 432-505.78" fill="currentColor" /></g></svg>
|
||||
|
After Width: | Height: | Size: 520 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
|
||||
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
|
||||
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
|
||||
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
|
||||
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
|
||||
C22.32,8.481,24.301,9.057,26.013,10.047z">
|
||||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
|
||||
dur="0.5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 923 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
|
||||
|
After Width: | Height: | Size: 263 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
|
||||
|
After Width: | Height: | Size: 888 B |
|
|
@ -0,0 +1,62 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
|
||||
<article class="gh-article {{post_class}}">
|
||||
|
||||
<header class="gh-header gh-canvas">
|
||||
<span class="gh-post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
<h1 class="gh-title">{{title}}</h1>
|
||||
|
||||
{{#if custom_excerpt}}
|
||||
<p class="gh-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if feature_image}}
|
||||
<img class="gh-feature-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 1000px) 1000px, 2000px"
|
||||
loading="lazy"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
/>
|
||||
{{/if}}
|
||||
</header>
|
||||
|
||||
<div class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
</div>
|
||||
|
||||
<footer class="gh-footer gh-canvas">
|
||||
|
||||
<div class="gh-post-authors">
|
||||
Written by {{#foreach authors}}<a href="{{url}}">{{name}}</a>{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{!--
|
||||
<section class="gh-post-comments">
|
||||
If you want to embed comments, this is a good place to do it!
|
||||
</section>
|
||||
--}}
|
||||
|
||||
</footer>
|
||||
|
||||
</article>
|
||||
|
||||
<aside class="gh-readmore">
|
||||
<div class="gh-readmore-inner gh-container">
|
||||
<div class="gh-readmore-next">
|
||||
{{#next_post}}<a href="{{url}}">{{> "icons/arrow-left"}} <h4>{{title}}</h4></a>{{/next_post}}
|
||||
</div>
|
||||
<div class="gh-readmore-prev">
|
||||
{{#prev_post}}<a href="{{url}}">
|
||||
<h4>{{title}}</h4> {{> "icons/arrow-right"}}
|
||||
</a>{{/prev_post}}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{{/post}}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": [
|
||||
"@tryghost:theme"
|
||||
],
|
||||
"node": {
|
||||
"supportPolicy": ["lts_latest"]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#tag}}
|
||||
<header class="gh-page-head">
|
||||
|
||||
<h1>{{name}}</h1>
|
||||
|
||||
<p>
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
{{/if}}
|
||||
</p>
|
||||
|
||||
{{#if feature_image}}
|
||||
<img class="gh-page-image" src="{{feature_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
|
||||
</header>
|
||||
{{/tag}}
|
||||
|
||||
<div class="gh-postfeed">
|
||||
{{#foreach posts visibility="all"}}
|
||||
|
||||
{{> "card"}} {{!-- partials/card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue