Showing preview only (243K chars total). Download the full file or copy to clipboard to get everything.
Repository: TryGhost/Lyra
Branch: main
Commit: 1de470e4c1e3
Files: 50
Total size: 228.8 KB
Directory structure:
gitextract_a5zl5m5z/
├── .editorconfig
├── .github/
│ └── workflows/
│ ├── deploy-theme.yml
│ └── test.yml
├── .gitignore
├── LICENSE
├── README.md
├── assets/
│ ├── built/
│ │ ├── global.css
│ │ ├── infinitescroll.js
│ │ ├── jquery.fitvids.js
│ │ └── screen.css
│ ├── css/
│ │ ├── .csscomb.json
│ │ ├── csscomb.json
│ │ ├── global.css
│ │ └── screen.css
│ └── js/
│ ├── infinitescroll.js
│ └── jquery.fitvids.js
├── author.hbs
├── default.hbs
├── error-404.hbs
├── error.hbs
├── gulpfile.js
├── index.hbs
├── members/
│ ├── account.hbs
│ ├── signin.hbs
│ └── signup.hbs
├── package.json
├── page.hbs
├── partials/
│ ├── byline-multiple.hbs
│ ├── byline-single.hbs
│ ├── content-cta.hbs
│ ├── header-background.hbs
│ ├── icons/
│ │ ├── avatar.hbs
│ │ ├── facebook.hbs
│ │ ├── ghost-logo.hbs
│ │ ├── infinity.hbs
│ │ ├── loader.hbs
│ │ ├── location.hbs
│ │ ├── point.hbs
│ │ ├── rss.hbs
│ │ └── twitter.hbs
│ ├── navigation.hbs
│ ├── notifications.hbs
│ ├── post-card.hbs
│ ├── site-header.hbs
│ ├── site-nav.hbs
│ └── subscribe-form.hbs
├── post.hbs
├── renovate.json
├── routes.yaml
└── tag.hbs
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# 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
================================================
FILE: .github/workflows/deploy-theme.yml
================================================
name: Deploy Theme
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- uses: TryGhost/action-deploy-theme@a0ee1147d15641db25681e54549c4db9a53c2629 # v1.6.6
with:
api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}
================================================
FILE: .github/workflows/test.yml
================================================
name: Test
on:
pull_request:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node: [ '22' ]
name: Node ${{ matrix.node }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
- uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
with:
node-version: ${{ matrix.node }}
- run: yarn
- run: gulp build
- run: gulp zip
- run: yarn test:ci
================================================
FILE: .gitignore
================================================
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/
================================================
FILE: LICENSE
================================================
Copyright (c) 2013-2026 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.
================================================
FILE: README.md
================================================
# Lyra
A paid-members publication for Ghost. Can be used with no code knowledge required.
# Installation instructions
1. [Download this theme](https://github.com/TryGhost/Lyra/archive/main.zip)
2. Log into Ghost, and go to the `Design` settings area to upload the zip file
3. Unzip the theme archive on your computer and locate the file called `routes.yaml`
4. Inside Ghost admin, go to the `Labs` settings area and scroll down until you see the `Custom Routes` section
5. Upload the `routes.yaml` from this theme
That's it! You now have a Ghost publication which supports free and paid memberships. If you need help, check out the <a href="https://ghost.org/docs/members/">Ghost members documentation</a> or chat with other Ghost users on <a href="https://forum.ghost.org">Ghost forum</a>.
# Upgrade instructions
1. [Download this theme](https://github.com/TryGhost/Lyra/archive/refs/heads/main.zip) and rename the zip for ease of identification in Ghost later. For example `2022-10-20_Lyra-main.zip`
2. Log into Ghost, 4. go to the `Labs` settings area and scroll down until you see the `Routes` section
3. Download your current `routes.yaml` file
4. Next go to the `Design` settings area and click `Change Theme` at the bottom of the navigation pane
5. Click the `Upload theme` button in the top right and upload the zip file you downloaded and renamed earlier (for example `2022-10-20_Lyra-main.zip`)
6. You will now see two instances of Lyra similar to the screenshot below
7. Ensure your new Lyra theme is active (based on the renamed zip from earlier, `lyra (2020-10-31_Lyra-main)` in the screenshot)
8. Delete the previous Lyra theme (`lyra (Lyra-master)` in the screenshot)
9Upload `routes.yaml` as required (see _Installation instructions_ above)
# 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.
- Variables - Simple pure CSS variables
- [Color Function](https://github.com/postcss/postcss-color-function)
# Copyright & License
Copyright (c) 2013-2026 Ghost Foundation - Released under the [MIT license](LICENSE).
================================================
FILE: assets/built/global.css
================================================
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{height:auto;max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{font-size:2em;margin:.67em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{border:none;overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:62.5%;overflow-y:scroll}body,html{overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;color:#313b3f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-moz-font-feature-settings:"liga" on;font-size:1.6rem;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.6em;text-rendering:optimizeLegibility}::-moz-selection{background:var(--ghost-accent-color,#3eb0ef);color:#fff;text-shadow:none}::selection{background:var(--ghost-accent-color,#3eb0ef);color:#fff;text-shadow:none}hr{border:0;border-top:1px solid #e3e9ed;display:block;height:1px;margin:2.5em 0 3.5em;padding:0;position:relative;width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{line-height:1.6em;margin:.5em 0;padding-left:.3em}dt{color:#15171a;float:left;font-weight:500;margin:0 20px 0 0;text-align:right;width:120px}dd{margin:0 0 5px;text-align:left}blockquote{border-left:.5em solid #e5eff5;margin:1.5em 0;padding:0 1.6em}blockquote p{font-size:1.2em;font-weight:300;margin:.8em 0}blockquote small{display:inline-block;font-size:.9em;margin:.8em 0 .8em 1.5em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:var(--ghost-accent-color,#3eb0ef);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.15;margin-top:0;text-rendering:optimizeLegibility}h1{font-size:5.5rem;font-weight:600;margin:0 0 .5em}@media (max-width:500px){h1{font-size:2.2rem}}h2{font-size:2.2rem;margin:1.5em 0 .5em}@media (max-width:500px){h2{font-size:1.8rem}}h3{font-size:1.8rem;font-weight:500;margin:1.5em 0 .5em}@media (max-width:500px){h3{font-size:1.7rem}}h4{font-size:1.6rem;font-weight:500;margin:1.5em 0 .5em}h5,h6{font-size:1.4rem;font-weight:500;margin:1.5em 0 .5em}
/*# sourceMappingURL=global.css.map */
================================================
FILE: assets/built/infinitescroll.js
================================================
!function(n,t){var r,o,i,s,l,c,u,d=t.querySelector("link[rel=next]");function v(){if(404===this.status)return n.removeEventListener("scroll",m),void n.removeEventListener("resize",f);this.response.querySelectorAll(".post-card").forEach(function(e){r.appendChild(e)});var e=this.response.querySelector("link[rel=next]");e?d.href=e.href:(n.removeEventListener("scroll",m),n.removeEventListener("resize",f)),u=t.documentElement.scrollHeight,s=i=!1}function e(){var e;s||(l+c<=u-o?i=!1:(s=!0,(e=new n.XMLHttpRequest).responseType="document",e.addEventListener("load",v),e.open("GET",d.href),e.send(null)))}function a(){i||n.requestAnimationFrame(e),i=!0}function m(){l=n.scrollY,a()}function f(){c=n.innerHeight,u=t.documentElement.scrollHeight,a()}!d||(r=t.querySelector(".post-feed"))&&(s=i=!(o=300),l=n.scrollY,c=n.innerHeight,u=t.documentElement.scrollHeight,n.addEventListener("scroll",m,{passive:!0}),n.addEventListener("resize",f),a())}(window,document);
//# sourceMappingURL=infinitescroll.js.map
================================================
FILE: assets/built/jquery.fitvids.js
================================================
!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: assets/built/screen.css
================================================
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{height:auto;max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{font-size:2em;margin:.67em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{border:none;overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:62.5%;overflow-y:scroll}body,html{overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#313b3f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-moz-font-feature-settings:"liga" on;font-size:1.6rem;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.6em;text-rendering:optimizeLegibility}::-moz-selection{background:var(--ghost-accent-color,#3eb0ef);color:#fff;text-shadow:none}::selection{background:var(--ghost-accent-color,#3eb0ef);color:#fff;text-shadow:none}hr{border:0;border-top:1px solid #e3e9ed;display:block;height:1px;margin:2.5em 0 3.5em;padding:0;position:relative;width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{line-height:1.6em;margin:.5em 0;padding-left:.3em}dt{color:#15171a;float:left;font-weight:500;margin:0 20px 0 0;text-align:right;width:120px}dd{margin:0 0 5px;text-align:left}blockquote{border-left:.5em solid #e5eff5;margin:1.5em 0;padding:0 1.6em}blockquote p{font-size:1.2em;font-weight:300;margin:.8em 0}blockquote small{display:inline-block;font-size:.9em;margin:.8em 0 .8em 1.5em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:var(--ghost-accent-color,#3eb0ef);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.15;margin-top:0;text-rendering:optimizeLegibility}h1{font-size:5.5rem;font-weight:600;margin:0 0 .5em}@media (max-width:500px){h1{font-size:2.2rem}}h2{font-size:2.2rem;margin:1.5em 0 .5em}@media (max-width:500px){h2{font-size:1.8rem}}h3{font-size:1.8rem;font-weight:500;margin:1.5em 0 .5em}@media (max-width:500px){h3{font-size:1.7rem}}h4{font-size:1.6rem;font-weight:500;margin:1.5em 0 .5em}h5,h6{font-size:1.4rem;font-weight:500;margin:1.5em 0 .5em}body{background:#fff}.img{background-position:50%;background-size:cover;border-radius:100%;display:block;height:100%;width:100%}.hidden{position:absolute;text-indent:-9999px;visibility:hidden}.site-wrapper{display:flex;flex-direction:column;min-height:100vh}.site-main{flex-grow:1;z-index:100}.outer{padding:0 5vw;position:relative}.inner{margin:0 auto;max-width:1040px;width:100%}@media (min-width:900px){.author-template .post-feed,.home-template .post-feed,.tag-template .post-feed{border-top-left-radius:3px;border-top-right-radius:3px;padding:40px 0 5vw}.home-template .site-nav{position:relative}}.site-header{height:64px}.site-header-background{background:#090a0b no-repeat 50%;background-size:cover;color:#fff;margin-top:64px;padding-bottom:12px;position:relative}.site-header-background:before{background:rgba(0,0,0,.18);bottom:0}.site-header-background:after,.site-header-background:before{content:"";display:block;left:0;position:absolute;right:0;top:0;z-index:10}.site-header-background:after{background:linear-gradient(rgba(0,0,0,.15),transparent);bottom:auto;height:140px}.site-header-background.no-image:after,.site-header-background.no-image:before{display:none}.site-header-content{align-items:center;display:flex;flex-direction:column;justify-content:center;max-height:340px;min-height:200px;padding:6vw 3vw;z-index:100}.site-title{font-size:5rem;font-weight:600;line-height:1em;margin:0 0 0 -2px;padding:0;z-index:10}.site-logo{max-height:55px}.site-description{font-size:2.1rem;font-weight:400;line-height:1.4em;margin:0;opacity:.8;padding:5px 0;z-index:10}.site-home-header{z-index:1000}.site-home-header .site-header-background{margin-top:0}.site-home-header .site-header-content{padding:5vw 3vw 6vw}.site-home-header .site-title{font-size:5.5rem;text-align:center}.site-home-header .site-description{font-size:2.2rem;font-weight:300;text-align:center}.site-archive-header .site-header-content{align-items:stretch;max-height:600px;min-height:200px;padding:12vw 0 20px;position:relative}.site-archive-header .no-image{background:#fff;color:#15171a;opacity:1;padding-bottom:0;padding-top:0}.site-archive-header .no-image .site-description{color:#738a94;opacity:1}.site-archive-header .no-image .site-header-content{border-bottom:1px solid #e9eef1;padding:5vw 0 10px}@media (max-width:900px){.site-header-content{padding-bottom:9vw}}@media (max-width:500px){.site-home-header .site-title{font-size:4.2rem}.site-home-header .site-description{font-size:1.8rem}.site-archive-header .site-header-content{align-items:center;flex-direction:column;min-height:unset}.site-archive-header .site-title{font-size:4.2rem;text-align:center}.site-archive-header .no-image .site-header-content{padding:12vw 0 20px}}.site-nav-main{background:#090a0b;left:0;position:fixed;right:0;top:0;z-index:1000}.site-nav{font-size:1.3rem;justify-content:space-between;z-index:100}.site-nav,.site-nav-left{align-items:flex-start;display:flex;height:64px;position:relative}.site-nav-left,.site-nav-left-content{flex:1 0 auto;overflow-y:hidden}.site-nav-left-content{-webkit-overflow-scrolling:touch;-ms-overflow-scrolling:touch;align-items:center;display:flex;font-weight:500;letter-spacing:.2px;margin-right:10px;overflow-x:auto;padding:10px 0 80px;text-transform:uppercase;white-space:nowrap}@media (max-width:700px){.site-header-background:not(.responsive-header-img) .site-nav-left:after,.site-nav-main .site-nav-left:after{background:linear-gradient(90deg,rgba(9,10,11,0) 0,#090a0b);content:"";height:100%;position:absolute;right:10px;top:0;width:40px;z-index:1000}.nav li:last-of-type{padding-right:20px}}.site-nav-logo{color:#fff;display:inline-block;flex-shrink:0;font-size:1.7rem;font-weight:700;letter-spacing:-.5px;line-height:1.8rem;margin-right:32px;padding:12px 0;position:relative;text-transform:none;z-index:100}.site-nav-logo:hover{text-decoration:none}.site-nav-logo img{display:block;height:21px;width:auto}.site-home-header .site-nav-logo{display:none}.site-nav-content{align-self:flex-start;position:relative}.nav{display:flex;list-style:none;margin:0 0 0 -12px;padding:0;position:absolute;transition:all 1s cubic-bezier(.19,1,.22,1);z-index:1000}.nav li{display:block;margin:0;padding:0}.nav li a{color:#fff;display:block;opacity:.8;padding:12px;position:relative;transition:opacity .35s ease-in-out}.nav li a:hover{opacity:1;text-decoration:none}.nav li a:before{background:#fff;bottom:8px;content:"";height:1px;left:12px;opacity:.25;position:absolute;right:100%;transition:all .35s ease-in-out}.nav li a:hover:before{opacity:.5;right:12px}.nav-post-title-active .nav{opacity:0;transform:translateY(-175%);visibility:hidden}.nav-post-title{color:#fff;font-size:1.7rem;font-weight:400;opacity:0;position:absolute;text-transform:none;top:9px;transform:translateY(175%);transition:all 1s cubic-bezier(.19,1,.22,1);visibility:hidden}.nav-post-title.dash{left:-25px}.nav-post-title.dash:before{content:"– ";opacity:.5}.nav-post-title-active .nav-post-title{opacity:1;transform:translateY(0);visibility:visible}.site-nav-right{align-items:center;display:flex;flex-shrink:0;font-size:1.4rem;height:64px;line-height:1em;padding:9px 0 10px}.site-nav-right a{color:#fff}.button.small.signout-link{box-shadow:inset 0 0 0 1px #fff;color:#fff;opacity:.8}.button.small.signout-link:hover{opacity:1}.account-menu{position:relative}.account-menu-avatar{background:#e3e9ed;border-radius:100%;cursor:pointer;display:block;height:32px;margin:0;padding:1px;position:relative;width:32px}.account-menu-avatar img{border-radius:100%;bottom:0;left:0;position:absolute;right:0;top:0}.account-menu ul{background:#fff;border-radius:3px;box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.06);list-style:none;min-width:240px;opacity:0;padding:8px 0;pointer-events:none;position:absolute;right:-8px;top:43px;transform:translateY(-6px) scale(.95);transform-origin:top right;transition:all .3s cubic-bezier(.4,.01,.165,.99),opacity .2s cubic-bezier(.4,.01,.165,.99);visibility:hidden;z-index:9998}.account-menu-avatar.active+ul{opacity:1;pointer-events:all;transform:translateY(0) scale(1);visibility:visible}.account-menu ul:before{border-color:transparent transparent #fff;border-style:solid;border-width:0 10px 10px;content:"";height:0;position:absolute;right:14px;top:-8px;width:0;z-index:9998}.account-menu ul li{margin:0;padding:0}.account-menu .account-info{border-bottom:1px solid #e5eff5;color:#738a94;display:flex;flex-direction:column;margin:0 0 6px;padding:4px 20px 12px}.account-info .account-email{color:#313b3f;display:inline-block;font-weight:600;margin-top:-4px;max-width:200px;overflow-x:hidden;text-overflow:ellipsis}.account-menu ul a{color:#313b3f;display:block;padding:6px 20px}.account-menu ul a:hover{color:var(--ghost-accent-color,#3eb0ef);text-decoration:none}.home-template .site-nav-main{z-index:100}.home-template .site-nav-main .site-nav{opacity:0;transition:all .5s cubic-bezier(.19,1,.22,1) 0s}.home-template .site-nav-main .fixed-nav-active{opacity:1;transition:all .5s cubic-bezier(.19,1,.22,1) .05s}@media (max-width:700px){.site-home-header .site-nav{margin-left:-5vw}.site-nav-main{padding-left:0;padding-right:0}.site-nav-left{margin-right:0;padding-left:5vw}.site-nav-main .site-nav-right{padding:9px 20px 10px 5px}}.posts{overflow-x:hidden}.post-feed{background:#fff;flex-wrap:wrap;margin:0 -20px;padding:50px 0 0}.post-card,.post-feed{display:flex;position:relative}.post-card{background-size:cover;border-bottom:1px solid #e9eef1;flex:1 1 301px;flex-direction:column;margin:0 0 40px;min-height:220px;overflow:hidden;padding:0 20px 40px}.post-card-image-link{border-radius:3px;display:block;overflow:hidden;position:relative}.post-card-image{background:#c5d2d9 no-repeat 50%;height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.post-card-content-link{color:#15171a;display:block;position:relative}.post-card-content-link:hover{text-decoration:none}.post-card-header{margin:15px 0 0}.post-feed .no-image .post-card-content-link{padding:0}.no-image .post-card-header{margin-top:0}.post-card-primary-tag{color:var(--ghost-accent-color,#3eb0ef);font-size:1.2rem;font-weight:500;letter-spacing:.2px;text-transform:uppercase}.post-card-title{line-height:1.15em;margin:0 0 .4em;transition:color .2s ease-in-out}.no-image .post-card-title{margin-top:0}.post-card-content{display:flex;flex-direction:column;flex-grow:1}.post-card-excerpt{color:#738a94;font-family:Georgia,serif;max-width:56em}.post-card-excerpt p{margin-bottom:1em}.post-card-meta{align-items:flex-start;display:flex;padding:0}.author-profile-image,.avatar-wrapper{background:#e3e9ed;border-radius:100%;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.post-card-meta .avatar-wrapper,.post-card-meta .profile-image-wrapper{position:relative}.author-list{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 0 4px;padding:0}.author-list-item{flex-shrink:0;margin:0;padding:0;position:relative}.static-avatar{border:2px solid #fff;border-radius:100%;display:block;height:34px;margin:0 0 0 -6px;overflow:hidden;width:34px}.author-name-tooltip{background:#15171a;border-radius:3px;bottom:105%;box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.03);color:#fff;display:block;font-size:1.2rem;letter-spacing:.2px;opacity:0;padding:2px 8px;pointer-events:none;position:absolute;transform:translateY(6px);transition:all .35s cubic-bezier(.4,.01,.165,.99);white-space:nowrap;z-index:999}.author-list-item:hover .author-name-tooltip{opacity:1;transform:translateY(0)}@media (max-width:700px){.author-name-tooltip{display:none}}.post-card-byline-content{color:#92a3ab;display:flex;flex:1 1 50%;flex-direction:column;font-size:1.2rem;font-weight:400;letter-spacing:.2px;line-height:1.4em;margin:2px 0 0 6px;text-transform:uppercase}.post-card-byline-content span{margin:0}.post-card-byline-content a{color:#424852;font-weight:600}.post-card-byline-date{font-size:1.2rem}.post-card-byline-date .bull{display:inline-block;margin:0 4px;opacity:.6}.single-author-byline{color:#5d7179;display:flex;flex-direction:column;font-size:1.3rem;font-weight:500;line-height:1.4em;margin-left:5px}.single-author{align-items:center;display:flex}.single-author .static-avatar{margin-left:-2px}.single-author-name{display:inline-block}@media (min-width:795px){.post-card-large{border-top:0;flex:1 1 100%;flex-direction:row;min-height:280px;padding-bottom:40px}.post-card-large:hover{border-bottom-color:#e3e9ed}.post-card-large:not(.no-image) .post-card-header{margin-top:0}.post-card-large .post-card-image-link{flex:1 1 auto;margin-bottom:0;min-height:380px;position:relative}.post-card-large .post-card-image{height:100%;position:absolute;width:100%}.post-card-large .post-card-content{flex:0 1 361px;justify-content:center}.post-card-large .post-card-title{font-size:3.2rem;margin-top:0}.post-card-large .post-card-content-link,.post-card-large .post-card-meta{padding:0 0 0 40px}.post-card-large .post-card-excerpt p{font-size:1.8rem;line-height:1.5em;margin-bottom:1.5em}}@media (max-width:1170px){.post-card{margin-bottom:5vw}}@media (max-width:650px){.post-feed{padding-top:5vw}.post-card{margin-bottom:5vw}}@media (max-width:500px){.post-card-title{font-size:1.9rem}.post-card-excerpt{font-size:1.6rem}}.page-template .site-main,.post-template .site-main{background:#fff;padding-bottom:4vw}.post-full-header{border-top-left-radius:3px;border-top-right-radius:3px;margin:0 auto;padding:70px 170px 50px;position:relative}.post-full-tags{align-items:center;color:#738a94;display:flex;font-size:1.3rem;font-weight:600;justify-content:flex-start;line-height:1.4em;text-transform:uppercase}.post-full-meta-date{color:#738a94;font-size:1.2rem;font-weight:400}@media (max-width:1170px){.post-full-header{padding:60px 11vw 50px}}@media (max-width:800px){.post-full-header{padding-left:5vw;padding-right:5vw}}@media (max-width:500px){.post-full-header{padding:20px 0 35px}}.post-full-title{color:#090a0b;margin:0 0 .2em}.post-full-custom-excerpt{color:#738a94;font-family:Georgia,serif;font-size:2.3rem;font-weight:300;line-height:1.4em;margin:20px 0 0}.date-divider{display:inline-block;font-weight:300;margin:0 6px 1px}.post-full-image{align-items:center;border-radius:3px;display:flex;flex-direction:column;margin:25px 0 50px;overflow:hidden}.post-full-image img{height:auto;max-width:1040px;width:100%}.post-full-content{background:#fff;font-family:Georgia,serif;font-size:2rem;line-height:1.6em;margin:0 auto;min-height:230px;padding:0 170px 5vw;position:relative}@media (max-width:1170px){.post-full-content{padding:0 11vw}}@media (max-width:800px){.post-full-content{font-size:1.8rem;padding:0 5vw}}@media (max-width:500px){.post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em}}.no-image .post-full-content{padding-top:0}.no-image .post-full-content:after,.no-image .post-full-content:before{display:none}.footnotes,.post-full-comments,.post-full-content blockquote,.post-full-content dl,.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6,.post-full-content ol,.post-full-content p,.post-full-content pre,.post-full-content ul{margin:0 0 1.5em;min-width:100%}@media (max-width:500px){.footnotes,.post-full-comments,.post-full-content dl,.post-full-content ol,.post-full-content p,.post-full-content pre,.post-full-content ul{margin-bottom:1.28em}}.post-full-content li{word-break:break-word}.post-full-content li p{margin:0}.post-full-content a{box-shadow:inset 0 -1px 0 #15171a;color:#15171a;transition:all .2s ease-in-out;word-break:break-word}.post-full-content a:hover{box-shadow:var(--ghost-accent-color,#3eb0ef) 0 -1px 0 inset;color:var(--ghost-accent-color,#3eb0ef);text-decoration:none}.post-full-content em,.post-full-content strong{color:#090a0b}.post-full-content small{display:inline-block;line-height:1.6em}.post-full-content li:first-child{margin-top:0}.post-full-content img,.post-full-content video{display:block;height:auto;margin:1.5em auto;max-width:1040px}@media (max-width:1040px){.post-full-content img,.post-full-content video{width:100%}}.post-full-content img[src$="#full"]{max-width:none;width:100vw}.post-full-content img+br+small{display:block;margin-bottom:1.5em;margin-top:-3em;text-align:center}.post-full-content iframe{margin:0 auto!important}.post-full-content blockquote{border-left:3px solid #3eb0ef;margin:0 0 1.5em;padding:0 1.5em}@media (max-width:500px){.post-full-content blockquote{padding:0 1.3em}}.post-full-content blockquote p{color:inherit;font-size:inherit;font-style:italic;line-height:inherit;margin:0 0 1em}.post-full-content blockquote p:last-child{margin-bottom:0}.post-full-content code{background:#e5eff5;border-radius:3px;font-size:.8em;font-weight:400!important;line-height:1em;padding:0 5px 2px}.post-full-content p code{word-break:break-all}.post-full-content pre{background:#0e0f11;border:1px solid #000;border-radius:5px;color:#e5eff5;font-size:1.4rem;line-height:1.5em;margin:1.5em 0 3em;max-width:100%;overflow-x:auto;padding:20px}.post-full-content pre ::-moz-selection{color:#3c484e}.post-full-content pre ::selection{color:#3c484e}.post-full-content pre code{background:transparent;font-size:inherit;line-height:inherit;padding:0}.post-full-content pre code :not(span){color:inherit}.post-full-content .fluid-width-video-wrapper{margin:1.5em 0 3em}.post-full-content hr{margin:2em 0}.post-full-content hr:after{background:#e3e9ed;box-shadow:0 0 0 5px #fff;content:"";display:block;height:30px;left:50%;margin-left:-10px;position:absolute;top:-15px;transform:rotate(45deg);width:1px}.post-full-content hr+p{margin-top:1.2em}.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6{color:#090a0b;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.post-full-content h1{font-size:4.2rem;font-weight:600;line-height:1.25em;margin:.5em 0 .4em}.post-full-content p+h1{margin-top:.8em}@media (max-width:800px){.post-full-content h1{font-size:3.2rem;line-height:1.25em}}.post-full-content h2{font-size:3.2rem;font-weight:600;line-height:1.25em;margin:.5em 0 .4em}.post-full-content p+h2{margin-top:.8em}@media (max-width:800px){.post-full-content h2{font-size:2.8rem;line-height:1.25em;margin-bottom:.3em}}.post-full-content h3{font-size:2.5rem;font-weight:600;line-height:1.3em;margin:.5em 0 .2em}.post-full-content h2+h3{margin-top:.7em}@media (max-width:800px){.post-full-content h3{font-size:2.4rem;line-height:1.3em;margin-bottom:.3em}}.post-full-content h4{font-size:2.5rem;font-weight:600;margin:.5em 0 .2em}.post-full-content h2+h4{margin-top:.7em}.post-full-content h3+h4{margin-top:0}@media (max-width:800px){.post-full-content h4{font-size:2.4rem;line-height:1.3em;margin-bottom:.3em}}.post-full-content h5{border:0;color:var(--ghost-accent-color,#3eb0ef);display:block;font-family:Georgia,serif;font-size:3.2rem;line-height:1.35em;margin:.5em 0;padding:.4em 1em .9em;text-align:center}@media (min-width:1180px){.post-full-content h5{max-width:1060px;width:100vw}}@media (max-width:800px){.post-full-content h5{font-size:2.4rem;margin-bottom:1em;margin-left:1.3em;padding:0 0 .5em;text-align:initial}}.post-full-content h6{font-size:2rem;font-weight:700;margin:.5em 0 .2em}@media (max-width:800px){.post-full-content h6{font-size:1.8rem;line-height:1.4em}}.footnotes-sep{margin-bottom:30px}.footnotes{font-size:1.5rem}.footnotes p{margin:0}.footnote-backref{box-shadow:none!important;color:var(--ghost-accent-color,#3eb0ef)!important;font-size:1.2rem;font-weight:700;text-decoration:none!important}@media (max-width:1170px){.post-full-image{border-radius:0;margin:25px -6vw 50px}.post-full-image img{max-width:1170px}}@media (max-width:700px){.post-full-image{margin:25px -5vw}}@media (max-width:500px){.post-full-meta{font-size:1.2rem;line-height:1.3em}.post-full-title{font-size:4.2rem;line-height:1.05em;margin-top:.2em}.post-full-image{margin-bottom:5vw;margin-top:5px}.post-full-content{padding:0}.post-full-content:after,.post-full-content:before{display:none}}.post-full-content table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,transparent 75%) 0,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,transparent 75%) 100%;background-attachment:scroll,scroll;background-repeat:no-repeat;background-size:10px 100%,10px 100%;border-collapse:collapse;border-spacing:0;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;margin:.5em 0 2.5em;max-width:100%;overflow-x:auto;vertical-align:top;white-space:nowrap;width:auto}.post-full-content table td:first-child{background-image:linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0));background-repeat:no-repeat;background-size:20px 100%}.post-full-content table td:last-child{background-image:linear-gradient(270deg,#fff 50%,hsla(0,0%,100%,0));background-position:100% 0;background-repeat:no-repeat;background-size:20px 100%}.post-full-content table th{background-color:#f4f8fb;color:#15171a;font-size:1.2rem;font-weight:700;letter-spacing:.2px;text-align:left;text-transform:uppercase}.post-full-content table td,.post-full-content table th{border:1px solid #e3ecf3;padding:6px 12px}.post-full-byline{border-top:1px solid #e3e9ed;display:flex;justify-content:space-between;margin:35px 0 0;padding-top:15px}.post-full-byline-content{align-items:flex-start;display:flex;flex-grow:1}.post-full-byline-content .author-list{justify-content:flex-start;padding:0 12px 0 0}.post-full-byline-meta{color:#92a3ab;font-size:1.2rem;letter-spacing:.2px;line-height:1.2em;margin:2px 0 0;text-transform:uppercase}.post-full-byline-meta h4{font-size:1.3rem;font-weight:500;line-height:1.4em;margin:0 0 3px}.post-full-byline-meta h4 a{color:#2b2f36}.post-full-byline-meta h4 a:hover{color:#15171a}.post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:.6}.author-avatar{border:2px solid #fff;border-radius:100%;display:block;height:40px;margin:0 -4px;overflow:hidden;transition:all .5s cubic-bezier(.4,.01,.165,.99) .7s;width:40px}.author-list-item .author-card{background:#fff;border-radius:3px;bottom:130%;box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.06);display:flex;font-size:1.4rem;justify-content:space-between;left:50%;line-height:1.5em;margin-left:-200px;opacity:0;pointer-events:none;position:absolute;transform:scale(.98) translateY(15px);transition:all .35s cubic-bezier(.4,.01,.165,.99);width:400px;z-index:600}.author-list-item .author-card:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;content:"";display:block;height:0;left:50%;margin-left:-8px;position:absolute;top:100%;width:0}.author-list-item .author-card.hovered{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}.author-card{padding:20px 20px 22px}.author-card .author-info{flex:1 1 auto;padding:0 0 0 20px}.author-card .author-info h2{font-size:1.6rem;margin:8px 0 0}.author-card .author-info p{color:#5d7179;margin:4px 0 0}.author-card .author-info .bio h2{margin-top:0}.author-card .author-info .bio p{margin-top:.8em}.author-card .author-profile-image{border:none;flex:0 0 60px;height:60px;margin:0;width:60px}.basic-info .avatar-wrapper{background:rgba(229,239,245,.1);border:none;height:60px;margin:0;position:relative;width:60px}.basic-info .avatar-wrapper svg{height:60px;margin:0;opacity:.15;width:60px}@media (max-width:1170px){.author-list-item .author-card{margin-left:-50px;width:430px}.author-list-item .author-card:before{left:50px}}@media (max-width:650px){.author-list-item .author-card{display:none}}@media (max-width:500px){.author-avatar{height:36px;width:36px}.post-full-byline{margin-top:20px}.post-full-byline-meta{font-size:1.2rem}.post-full-byline-meta h4{font-size:1.2rem;margin-bottom:2px}}.subscribe-form{background:linear-gradient(#fbfdfe,#f4f8fb);border:1px solid #e3e9ed;border-radius:3px;margin:1.5em 0;padding:6.5vw 7vw 8vw;text-align:center}.subscribe-form-title{color:#15171a;font-size:3.5rem;font-weight:600;line-height:1;margin:0 0 3px;padding:0}.subscribe-form-description{color:#738a94;font-size:2.1rem;line-height:1.55em;margin-bottom:.2em 0 1em}.subscribe-form form{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:460px}.subscribe-form .form-group{align-self:stretch;display:flex}.subscribe-email{-webkit-appearance:none;border:1px solid #dae2e7;border-radius:5px;color:#738a94;display:block;font-size:1.8rem;font-weight:400;line-height:1em;padding:10px;transition:border-color .15s linear;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%}.subscribe-form button{-webkit-font-smoothing:subpixel-antialiased;background:linear-gradient(color(var(--ghost-accent-color,#3eb0ef) whiteness(7%)),color(var(--ghost-accent-color,#3eb0ef) lightness(-7%) saturation(-10%)) 60%,color(var(--ghost-accent-color,#3eb0ef) lightness(-7%) saturation(-10%)) 90%,color(var(--ghost-accent-color,#3eb0ef) lightness(-4%) saturation(-10%)));border-radius:5px;color:#fff;display:inline-block;font-size:1.5rem;font-weight:400;height:43px;line-height:39px;margin:0 0 0 10px;outline:none;padding:0 20px;position:relative;text-align:center}.subscribe-form button:active,.subscribe-form button:focus{background:color(var(--ghost-accent-color,#3eb0ef) lightness(-9%) saturation(-10%))}.subscribe-form .button-loader,.subscribe-form .message-error,.subscribe-form .message-success{display:none}.subscribe-form .loading .button-content{visibility:hidden}.subscribe-form .loading .button-loader{display:inline-block;left:50%;margin-left:-19px;position:absolute;top:0;transform:scale(.7)}.subscribe-form .button-loader svg path,.subscribe-form .button-loader svg rect{fill:#fff}.subscribe-form .error .message-error,.subscribe-form .invalid .message-error,.subscribe-form .success .message-success{color:#f05230;font-size:1.6rem;line-height:1.5em;margin:1em auto 0;max-width:400px;text-align:center}.subscribe-form .success .message-success{color:#98c22e;display:block}.subscribe-form .error .message-error,.subscribe-form .invalid .message-error{display:block}@media (max-width:650px){.subscribe-form-title{font-size:2.4rem}.subscribe-form-description{font-size:1.6rem}}@media (max-width:500px){.subscribe-form form{flex-direction:column}.subscribe-form .form-group{flex-direction:column;width:100%}.subscribe-form button{margin:10px 0 0;width:100%}}.post-full-comments{margin:0 auto;max-width:840px}.read-next{background:#090a0b;border-bottom:1px solid hsla(0,0%,100%,.1)}.read-next-feed{display:flex;flex-wrap:wrap;margin:0 -25px;padding:60px 0 0}.read-next .post-card{border-bottom:none;padding-bottom:0}.read-next .post-card:after{display:none}.read-next .post-card-primary-tag{color:#fff;opacity:.6}.read-next .post-card-title{color:#fff;opacity:.8;transition:all .2s ease-in-out}.read-next .post-card:hover .post-card-image{opacity:1}.read-next .post-card-excerpt{color:hsla(0,0%,100%,.6)}.read-next .static-avatar{border-color:#000}.read-next .post-card-byline-content{color:hsla(0,0%,100%,.6)}.read-next .post-card-byline-content a{color:hsla(0,0%,100%,.8)}.read-next-card{background:linear-gradient(#191b1f,#090a0b);border-radius:3px;display:flex;flex:0 1 326px;flex-direction:column;margin:0 25px 50px;overflow:hidden;padding:25px;position:relative}.read-next-card a{transition:all .2s ease-in-out}.read-next-card a:hover{text-decoration:none}.read-next-card-header h3{color:hsla(0,0%,100%,.6);font-size:1.2rem;font-weight:300;letter-spacing:.4px;line-height:1em;margin:0;text-transform:uppercase}.read-next-card-header h3 a{color:#fff;font-weight:500;opacity:.8;text-decoration:none}.read-next-card-header h3 a:hover{opacity:1}.read-next-card-content{font-size:1.7rem}.read-next-card-content ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.read-next-card-content li{align-items:flex-start;border-bottom:hsla(0,0%,100%,.1);display:flex;flex-direction:column;margin:0;padding:20px 0}.read-next-card-content li:last-of-type{border:none;padding-bottom:5px}.read-next-card-content h4{font-size:1.6rem;font-weight:600;line-height:1.35em;margin:0}.read-next-card-content li a{color:#fff;display:block;opacity:.8}.read-next-card-content li a:hover{opacity:1}.read-next-card-excerpt{font-size:1.4rem;line-height:1.2em;max-width:100%;overflow:hidden;text-overflow:ellipsis}.read-next-card-meta{font-size:1.2rem;font-weight:400;line-height:1.4em;margin-top:2px}.read-next-card-meta p{color:hsla(0,0%,100%,.6);margin:0}.read-next-card-footer{margin:40px 0 5px;position:relative}.read-next-card-footer a{border:1px solid hsla(0,0%,100%,.6);border-radius:999px;color:hsla(0,0%,100%,.6);font-size:1.3rem;padding:7px 12px 8px 14px;transition:all .35s ease-in-out}.read-next-card-footer a:hover{border-color:#fecd35;color:#fecd35;text-decoration:none}@media (max-width:1170px){.read-next-card{flex:1 1 261px;margin-bottom:5vw}}@media (max-width:650px){.read-next-feed{flex-direction:column;padding:25px 0 0}.read-next-card{background:none;flex:1 1 auto;margin:0 25px;padding:0}.read-next .post-card{border-bottom:1px solid hsla(0,0%,100%,.1);flex:1 1 auto;margin:25px;padding:25px 0 0}}.post-content{align-items:center;display:flex;flex-direction:column}.post-full-content .kg-image{margin:0 auto;max-width:100%}.post-full-image+.post-full-content .kg-content :first-child .kg-image{width:100%}.post-full-content .kg-width-wide .kg-image{max-width:1040px}.post-full-content .kg-width-full .kg-image{max-width:100vw}.post-full-content figure{margin:.8em 0 2.3em}.post-full-content h1+figure,.post-full-content h2+figure,.post-full-content h3+figure,.post-full-content h4+figure{margin-top:2em}.post-full-content figure img{margin:0}figcaption{color:#5d7179;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:75%;line-height:1.5em;margin:1em auto 0;max-width:1040px;text-align:center}.kg-width-full figcaption{padding:0 1.5em}.kg-embed-card{align-items:center;display:flex;flex-direction:column;width:100%}.kg-embed-card .fluid-width-video-wrapper{margin:0}@media (max-width:1040px){.post-full-content .kg-width-full .kg-image{width:100vw}}.kg-gallery-container{display:flex;flex-direction:column;max-width:1040px;width:100vw}.kg-gallery-row{display:flex;flex-direction:row;justify-content:center}.kg-gallery-image img{display:block;height:100%;margin:0;width:100%}.kg-gallery-row:not(:first-of-type){margin:.75em 0 0}.kg-gallery-image:not(:first-of-type){margin:0 0 0 .75em}.kg-gallery-card+.kg-gallery-card,.kg-gallery-card+.kg-image-card.kg-width-wide,.kg-image-card.kg-width-wide+.kg-gallery-card,.kg-image-card.kg-width-wide+.kg-image-card.kg-width-wide{margin:-2.25em 0 3em}.kg-code-card{width:100%}.kg-code-card pre{margin:0}.kg-bookmark-card{background:var(--white);width:100%}.kg-card+.kg-bookmark-card{margin-top:0}.post-full-content .kg-bookmark-container{border-radius:3px;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;min-height:148px}.post-full-content .kg-bookmark-container,.post-full-content .kg-bookmark-container:hover{box-shadow:0 2px 5px -1px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.09);color:#15171a;text-decoration:none}.kg-bookmark-content{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;justify-content:flex-start;padding:20px}.kg-bookmark-title{color:#313b3f;font-size:1.6rem;font-weight:600;line-height:1.5em;transition:color .2s ease-in-out}.post-full-content .kg-bookmark-container:hover .kg-bookmark-title{color:var(--ghost-accent-color,#3eb0ef)}.kg-bookmark-description{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#5d7179;display:-webkit-box;font-size:1.5rem;font-weight:400;line-height:1.5em;margin-top:12px;max-height:48px;overflow-y:hidden}.kg-bookmark-thumbnail{max-height:100%;min-width:33%;position:relative}.kg-bookmark-thumbnail img{border-radius:0 3px 3px 0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.kg-bookmark-metadata{align-items:center;color:#5d7179;display:flex;flex-wrap:wrap;font-size:1.5rem;font-weight:400;margin-top:14px}.post-full-content .kg-bookmark-icon{height:22px;margin-right:8px;width:22px}.kg-bookmark-author{line-height:1.5em}.kg-bookmark-author:after{content:"•";margin:0 6px}.kg-bookmark-publisher{line-height:1.5em;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:800px){.post-full-content figure{margin:.2em 0 1.3em}.post-full-content h1+figure,.post-full-content h2+figure,.post-full-content h3+figure,.post-full-content h4+figure{margin-top:.9em}}@media (max-width:500px){.post-full-content .kg-width-full,.post-full-content .kg-width-wide{margin-left:-5vw;margin-right:-5vw}.post-full-content figcaption{margin-bottom:.4em}.post-full-content .kg-bookmark-container{flex-direction:column}.kg-bookmark-description,.kg-bookmark-metadata,.kg-bookmark-title{font-size:1.4rem;line-height:1.5em}.post-full-content .kg-bookmark-icon{height:18px;width:18px}.kg-bookmark-thumbnail{min-height:160px;order:1;width:100%}.kg-bookmark-thumbnail img{border-radius:3px 3px 0 0}.kg-bookmark-content{order:2}}.author-header{align-items:flex-start;display:flex;flex-direction:row;justify-content:flex-start;padding:10vw 0 10px}.site-archive-header .author-header{align-items:center}.site-archive-header .no-image .author-header{padding-bottom:20px}.author-header-content{display:flex;flex-direction:column;justify-content:center;margin:5px 0 0 30px}.site-header-content .author-profile-image{box-shadow:0 0 0 6px hsla(0,0%,100%,.1);flex-shrink:0;height:110px;margin:-4px 0 0;width:110px;z-index:10}.author-header-content .author-bio{flex-shrink:0;font-size:2rem;font-weight:400;line-height:1.3em;margin:6px 0 0;max-width:46em;opacity:.8;z-index:10}.author-header-content .author-meta{align-items:center;display:flex;flex-shrink:0;font-size:1.2rem;font-weight:400;letter-spacing:.2px;margin:0 0 0 1px;text-transform:uppercase;white-space:nowrap;z-index:10}.author-header-content .social-link:first-of-type{padding-left:4px}.no-image .author-header-content .author-bio,.no-image .author-header-content .author-meta{color:#738a94;opacity:1}.author-social-link a{color:#fff;font-weight:600}.no-image .author-social-link a{color:#15171a}.author-social-link a:hover{opacity:1}.author-social-link{display:inline-block;margin:0;padding:6px 0}.author-location+.author-stats:before,.author-social-link+.author-social-link:before,.author-stats+.author-social-link:before{color:#fff;content:"\2022";display:inline-block;margin:0 12px;opacity:.6}.no-image .author-location+.author-stats:before,.no-image .author-social-link+.author-social-link:before,.no-image .author-stats+.author-social-link:before{color:#738a94}@media (max-width:700px){.author-location,.author-stats,.author-stats+.author-social-link:first-of-type:before{display:none}}@media (max-width:500px){.author-header{padding:10px 0 0}.no-image .author-header{padding-bottom:10px}.author-header-content{align-items:center;margin:16px 0 0}.site-header-content .author-profile-image{height:96px;width:96px}.author-header-content .author-bio{font-size:1.8rem;letter-spacing:0;line-height:1.3em;text-align:center}.author-header-content .author-meta{margin-top:8px}.author-location+.author-stats:before,.author-social-link+.author-social-link:before,.author-stats+.author-social-link:before{display:inline;margin:0 6px}}.error-content{padding:14vw 4vw 6vw}.site-nav-center{align-items:center;display:flex;justify-content:center;padding:10px 0;text-align:center}.site-nav-center .site-nav-logo{margin-right:0}.error-message{border-bottom:1px solid #e3e9ed;padding-bottom:10vw;text-align:center}.error-code{color:#c5d2d9;font-size:12vw;letter-spacing:-5px;line-height:1em;margin:0;opacity:.75}.error-description{color:#738a94;font-size:3rem;font-weight:400;line-height:1.3em;margin:0}.error-link{display:inline-block;margin-top:5px}@media (min-width:940px){.error-content .post-card{border-bottom:none;margin-bottom:0;padding-bottom:0}}@media (max-width:800px){.error-content{padding-top:24vw}.error-code{font-size:11.2rem}.error-message{padding-bottom:16vw}.error-description{font-size:1.8rem;margin:5px 0 0}}@media (max-width:500px){.error-content{padding-top:28vw}.error-message{padding-bottom:14vw}}.notification{background:#98c22e;color:#fff;font-size:1.6rem;font-weight:500;left:0;line-height:1.3em;padding:22px 60px;position:fixed;right:0;text-align:center;top:0;transform:translateY(-175%);transition:all .35s cubic-bezier(.19,1,.22,1) .5s;visibility:hidden;z-index:9000}.signin-success .notification-signin,.signup-success .notification-signup,.subscribe-success .notification-subscribe{transform:translateY(0);visibility:visible}.signin-failure .notification-signin-failure{background:#ee3e17;transform:translateY(0);visibility:visible}.billing-success .notification-billing-update,.checkout-success .notification-checkout{transform:translateY(0);visibility:visible}.billing-cancel .notification-billing-update-cancel{background:#ee3e17;transform:translateY(0);visibility:visible}.notification.closed{transform:translateY(-175%);transition:all 1.35s cubic-bezier(.19,1,.22,1);visibility:hidden}.notification-close{bottom:0;display:block;left:0;position:absolute;right:0;top:0}.notification-close:before{transform:rotate(45deg)}.notification-close:after,.notification-close:before{background:#fff;border-radius:2px;content:"";display:block;height:2px;position:absolute;right:25px;top:29px;width:18px}.notification-close:after{transform:rotate(-45deg)}.subscribe-overlay{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:rgba(9,10,11,.97);bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease-in;z-index:9000}.subscribe-overlay .subscribe-close:after,.subscribe-overlay .subscribe-close:before{top:36px;width:30px}.subscribe-overlay:target{opacity:1;pointer-events:auto}.subscribe-overlay-content{color:#fff;margin:0 0 5vw;padding:4vw;position:relative;text-align:center;z-index:9999}.subscribe-overlay .subscribe-form{background:none;border:none;color:#fff}.subscribe-overlay-logo{height:30px;left:30px;position:fixed;top:23px}.subscribe-overlay-title{display:inline-block;font-size:5.2rem;line-height:1.15em;margin:0 0 10px}.subscribe-overlay-description{color:#fff;font-family:Georgia,serif;font-size:2.4rem;font-weight:300;line-height:1.3em;margin:0 auto 50px;max-width:650px;opacity:.8}.subscribe-overlay form{align-items:center;display:flex;justify-content:center;margin:0 auto;max-width:540px}.subscribe-overlay .form-group{flex-grow:1}.subscribe-overlay .subscribe-email{-webkit-appearance:none;border:none;border-radius:8px;color:#738a94;display:block;font-size:2rem;font-weight:400;letter-spacing:.5px;line-height:1em;padding:14px 20px;transition:border-color .15s linear;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%}.subscribe-email:focus{border-color:#becdd5;outline:0}.subscribe-overlay button{-webkit-font-smoothing:subpixel-antialiased;background:linear-gradient(color(var(--ghost-accent-color,#3eb0ef) whiteness(7%)),color(var(--ghost-accent-color,#3eb0ef) lightness(-7%) saturation(-10%)) 60%,color(var(--ghost-accent-color,#3eb0ef) lightness(-7%) saturation(-10%)) 90%,color(var(--ghost-accent-color,#3eb0ef) lightness(-4%) saturation(-10%)));border-radius:8px;color:#fff;display:inline-block;font-size:1.7rem;font-weight:400;height:52px;line-height:38px;margin:0 0 0 15px;outline:none;padding:0 25px;text-align:center}.subscribe-overlay button:active,.subscribe-overlay button:focus{background:color(var(--ghost-accent-color,#3eb0ef) lightness(-9%) saturation(-10%))}.subscribe-overlay .loading .button-loader{top:5px}.site-footer{background:#090a0b;color:#fff;padding-bottom:60px;padding-top:20px;position:relative}.site-footer-content{align-items:center;display:flex;flex-wrap:wrap;font-size:1.3rem;justify-content:space-between}.site-footer-content,.site-footer-content a{color:hsla(0,0%,100%,.7)}.site-footer-content a:hover{color:#fff;text-decoration:none}.site-footer .copyright a{padding:0 0 0 15px}.site-footer .copyright a:first-child{padding:0}@media (max-width:650px){.site-footer-content{flex-direction:column}.site-footer .copyright{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}}input[type=email],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select{background:#fff;border:1px solid #c5d2d9;border-radius:5px;color:inherit;display:block;height:44px;outline:0;padding:0 .6em;text-decoration:none;width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:var(--ghost-accent-color,#3eb0ef)}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:5px;cursor:pointer;display:inline-block;font-size:1.5rem;font-weight:600;height:44px;line-height:42px;padding:0 1.8rem;text-align:center;text-decoration:none;transition:.4s ease;white-space:nowrap}.button.fit{width:100%}.button.small{font-size:1.4rem;height:30px;line-height:30px;padding:0 1.1rem}.button.large{font-size:1.6rem;height:50.16px;line-height:50.16px;padding:0 3rem}.button.disabled,.button:disabled{opacity:.4;pointer-events:none}.button{background-color:transparent}.button,.button:hover{box-shadow:inset 0 0 0 1px var(--ghost-accent-color,#3eb0ef);color:var(--ghost-accent-color,#3eb0ef)}.button:hover{text-decoration:none;transition:.2s ease}.button.primary{box-shadow:none;color:#fff}.button.primary,.button.primary:hover{background-color:var(--ghost-accent-color,#3eb0ef)}.site-signup{align-items:center;display:flex;flex-direction:column;justify-content:center}.signup-form{margin:0 auto 10vw;max-width:500px;text-align:center;width:100%}.signup-title{font-size:4.2rem;margin:0 0 .1em}.signup-form p{color:#738a94;font-size:1.3em}.signup-form p small{display:inline-block;font-size:1.4rem;margin:15px 0 0}.signup-box{align-items:center;display:flex;justify-content:space-between}.signup-box .button{margin-left:10px}@media (max-width:600px){.signup-box{flex-direction:column}.signup-box .button{margin:15px 0 0;width:100%}}.site-signin{align-items:center;display:flex;flex-direction:column;justify-content:center}.signin-form{margin:0 auto 10vw;max-width:500px;text-align:center;width:100%}.signin-title{font-size:4.2rem;margin:0 0 .1em}.signin-form p{color:#738a94;font-size:1.3em}.signin-form p small{display:inline-block;font-size:1.4rem;margin:15px 0 0}.signin-box{align-items:center;display:flex;justify-content:space-between}.signin-box .button{margin-left:10px}@media (max-width:600px){.signin-box{flex-direction:column}.signin-box .button{margin:15px 0 0;width:100%}}.checkout-form{margin:0 auto 10vw;max-width:700px;text-align:center;width:100%}.checkout-title{font-size:4rem;font-weight:600;letter-spacing:-.6px;margin:0 auto 10px;padding:5vw 0 0}.checkout-form p{color:#738a94;font-size:1.3em;margin:0 auto 60px;max-width:500px}.checkout-box{align-items:stretch;display:flex;justify-content:center}.checkout-plan{background:#fff;border-radius:10px;border-top:6px solid var(--ghost-accent-color,#3eb0ef);box-shadow:0 0 0 1px rgba(39,44,49,.03),0 0 3px rgba(39,44,49,.05),0 5px 22px -10px rgba(39,44,49,.12),0 25px 30px -25px rgba(39,44,49,.05);color:#313b3f;display:flex;flex:1 1 auto;flex-direction:column;padding:30px;text-align:left}.checkout-plan+.checkout-plan{margin-left:30px}.checkout-plan-header{color:#738a94;padding:0 0 50px;position:relative;text-align:center}.checkout-plan-header:after{background:rgba(39,44,49,.08);border-radius:2px;bottom:25px;content:"";display:block;height:2px;left:30%;position:absolute;right:30%}.checkout-plan-header h3{color:#15171a;font-size:1.8rem;font-weight:700;letter-spacing:1.5px;line-height:1.15em;margin:0 0 25px;text-transform:uppercase}.checkout-plan-header span{font-size:2.6rem;font-weight:300}.checkout-plan-header strong{color:#15171a;font-size:4.5rem;font-weight:500}.checkout-plan-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:space-between}.checkout-plan-content ul{list-style:none;margin:0;padding:0}.checkout-plan-content li{line-height:1.4em;margin:0;padding:0 0 15px 20px;position:relative}.checkout-plan-content li:before{color:#98c22e;content:"✓";display:block;font-size:1.6rem;font-weight:600;left:0;position:absolute}.checkout-plan-content .button{margin:20px 0 0}@media (max-width:740px){.checkout-title{margin-top:50px}.checkout-box{flex-direction:column}.checkout-plan+.checkout-plan{margin:5vw 0 0}}form[data-members-form] .button-loader,form[data-members-form] .message-error,form[data-members-form] .message-success{display:none}.message-error svg,.message-success svg{height:15px;margin-right:5px;position:relative;top:-1px;width:15px}.message-success svg{fill:#fff}.message-error svg{fill:#f05230}form[data-members-form].error .message-error,form[data-members-form].success .message-success{background:#98c22e;border-radius:5px;color:#fff;font-size:1.4rem;font-weight:500;left:20px;line-height:1.5em;margin:0 auto;padding:10px 0;position:fixed;right:20px;text-align:center;top:84px;z-index:9999}form[data-members-form].success .message-success{background:#98c22e}form[data-members-form].error .message-error{background:#fff;box-shadow:0 0 0 1px #f05230;color:#f05230}form[data-members-form] .button{position:relative}form[data-members-form].loading .button-content{visibility:hidden}form[data-members-form].loading .button-loader{display:inline-block;height:31px;left:50%;margin-left:-19px;position:absolute;transform:scale(.7)}.button-loader svg path,.button-loader svg rect{fill:#fff}form[data-members-form].error .message-error,form[data-members-form].success .message-success{display:block}.site-account{align-items:center;display:flex;flex-direction:column;padding:5vw;z-index:1}.subscriber-box{margin:0 auto;max-width:560px;width:100%}.subscriber-header{align-items:flex-start;display:flex;justify-content:space-between}.subscription-title h1{font-size:3.4rem;margin-bottom:12px}.subscriber-avatar{background:#e3e9ed;border:1px solid #e3e9ed;border-radius:100%;flex:1 0 120px;height:120px;-o-object-fit:cover;object-fit:cover;position:relative;width:120px}.subscription .subscriber-avatar{margin:4px 0 0 20px}.subscriber-avatar img{border-radius:100%;bottom:0;left:0;position:absolute;right:0;top:0}.subscriber-box p{line-height:1.5em}.subscription{padding:20px 0 40px}.subscription-expiration-warning{color:#f05230}.subscriber-details{align-items:flex-start;border-bottom:1px solid #e3e9ed;border-top:1px solid #e3e9ed;display:flex;flex-wrap:wrap;margin-bottom:30px;padding:20px 0 0}.subscriber-detail{display:flex;flex:1 0 50%;flex-direction:column;margin:0 0 20px;padding:0 20px 0 0}.subscriber-detail-label{font-size:1.3rem;font-weight:700;text-transform:uppercase}.subscription-actions{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}.subscription-actions li{margin:0 .8rem 0 0;padding:0}.subscription-actions li:last-of-type{margin-right:0}.subscription-actions li a{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:5px;box-shadow:inset 0 0 0 1px var(--ghost-accent-color,#3eb0ef);cursor:pointer;display:inline-block;font-size:1.5rem;font-weight:600;height:44px;line-height:42px;padding:0 1.8rem;text-align:center;transition:.4s ease;white-space:nowrap}.subscription-actions li a,.subscription-actions li a:hover{color:var(--ghost-accent-color,#3eb0ef);text-decoration:none}.subscription-actions li a:hover{box-shadow:var(--ghost-accent-color,#3eb0ef);transition:.2s ease}.subscription-actions .gh-subscription-cancel{box-shadow:inset 0 0 0 1px #92a3ab;color:#92a3ab}.subscription-actions .gh-subscription-cancel:hover{box-shadow:inset 0 0 0 1px #738a94;color:#738a94}.gh-subscription-cancel[data-members-continue-subscription],.gh-subscription-cancel[data-members-continue-subscription]:hover{background-color:var(--ghost-accent-color,#3eb0ef);box-shadow:none;color:#fff}.gh-error-subscription-cancel{color:#f05230;display:block;font-size:1.5rem;margin-top:10px}.account-box{align-items:center;display:flex;flex-direction:column;margin:0 auto;max-width:560px;width:100%}.account-box-title{font-size:3.4rem;margin-top:20px;text-align:center}.account-box p{text-align:center}.header-cta{margin-left:20px}.post-card-header-tags{align-items:center;display:flex;margin:0 0 .2em}.post-visibility{border:1px solid #c5d2d9;border-radius:4px;color:#738a94;display:inline-block;font-size:1.2rem;line-height:1.4em;margin:0 8px 1px 0;padding:1px 5px}.post-visibility-members,.post-visibility-paid{display:none}.post-upgrade-cta{align-items:center;display:flex;flex-direction:column}.post-upgrade-cta-content{background:var(--ghost-accent-color,#3eb0ef);border-radius:5px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0 5vw;max-width:840px;padding:40px 30px;text-align:center;width:90vw}.post-upgrade-cta-content h2{color:#fff;font-size:2.6rem;font-weight:600;letter-spacing:-.5px;margin:0}.post-upgrade-cta .button,.post-upgrade-cta .button:hover{background:#fff;box-shadow:none;color:var(--ghost-accent-color,#3eb0ef);margin:30px 0;text-decoration:none}.post-upgrade-cta p{margin:0}.post-upgrade-cta a,.post-upgrade-cta a:hover{box-shadow:none!important;color:#fff;text-decoration:underline}@media (max-width:600px){.subscriber-details{flex-direction:column}.subscriber-avatar{display:none}}@media (prefers-color-scheme:dark){body{background:#191b1f;color:hsla(0,0%,100%,.8)}h1,h2,h3,h4,h5,h6{color:#fff}img{opacity:.9}.site-header-background:before{background:rgba(0,0,0,.6)}.post-feed{background:#191b1f}.post-card,.post-card:hover{border-bottom-color:#2b2f36}.post-visibility{color:#c5d2d9}.author-profile-image{background:#24272d}.post-card-byline-content a{color:hsla(0,0%,100%,.75)}.post-card-byline-content a:hover{color:#fff}.post-card-image{background:#191b1f}.post-card-title{color:hsla(0,0%,100%,.85)}.post-card-excerpt{color:#92a3ab}.author-avatar,.static-avatar{border-color:#191b1f}.page-template .site-main,.post-full-content,.post-template .site-main,.site-main{background:#191b1f}.post-full-title{color:hsla(0,0%,100%,.9)}.post-full-custom-excerpt{color:#92a3ab}.post-full-image{background-color:#2b2f36}.post-full-byline{border-top-color:#3b404a}.post-full-byline-meta h4 a{color:hsla(0,0%,100%,.75)}.post-full-byline-meta h4 a:hover{color:#fff}.author-list-item .author-card{background:#22252a;box-shadow:0 12px 26px rgba(0,0,0,.4)}.author-list-item .author-card:before{border-top-color:#22252a}.no-image .author-social-link a{color:hsla(0,0%,100%,.75)}.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h6{color:hsla(0,0%,100%,.9)}.post-full-content a{box-shadow:inset 0 -1px 0 #fff;color:#fff}.post-full-content em,.post-full-content strong{color:#fff}.post-full-content code{background:#000;color:#fff}hr{border-top-color:#2b2f36}.post-full-content hr:after{background:#2b2f36;box-shadow:0 0 0 5px #191b1f}.post-full-content figcaption{color:hsla(0,0%,100%,.6)}.post-full-content table td:first-child{background-image:linear-gradient(90deg,#191b1f 50%,rgba(25,27,31,0))}.post-full-content table td:last-child{background-image:linear-gradient(270deg,#191b1f 50%,rgba(25,27,31,0))}.post-full-content table th{background-color:#2b2f36;color:hsla(0,0%,100%,.85)}.post-full-content table td,.post-full-content table th{border:1px solid #2b2f36}.post-full-content .kg-bookmark-container{box-shadow:0 0 1px hsla(0,0%,100%,.9);color:hsla(0,0%,100%,.75)}.kg-bookmark-title{color:#fff}.kg-bookmark-description,.kg-bookmark-metadata{color:hsla(0,0%,100%,.75)}.site-archive-header .no-image{background:#191b1f;color:hsla(0,0%,100%,.9)}.site-archive-header .no-image .site-header-content{border-bottom-color:#3b404a}.site-header-content .author-profile-image{box-shadow:0 0 0 6px hsla(0,0%,100%,.04)}.subscribe-form{background:linear-gradient(#0b0c0e,#121417);border:none}.subscribe-form-title{color:hsla(0,0%,100%,.9)}.subscribe-form p{color:hsla(0,0%,100%,.7)}.subscribe-email{background:#202228;border-color:#272a30;color:hsla(0,0%,100%,.9)}.subscribe-email:focus{border-color:#525866}.subscribe-form button{opacity:.9}.subscribe-form .error .message-error,.subscribe-form .invalid .message-error{color:#ec694b}.subscribe-form .success .message-success{color:#acd053}.account-menu-avatar{background:#24272d}.account-menu-avatar img{opacity:1}.account-menu ul{background:#22252a;box-shadow:0 12px 26px rgba(0,0,0,.4)}.account-menu ul:before{border-color:transparent transparent #22252a}.account-menu .account-info{border-color:#30343b}.account-menu .account-email,.account-menu ul a{color:hsla(0,0%,100%,.9)}.subscriber-avatar{background:#24272d;border-color:#24272d}.subscriber-avatar img{opacity:1}.subscriber-details{border-color:#24272d}input[type=email],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select{color:#15171a}}
/*# sourceMappingURL=screen.css.map */
================================================
FILE: assets/css/.csscomb.json
================================================
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": 4,
"unitless-zero": true,
"sort-order": [ [
"content",
"visibility",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"order",
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"align-self",
"display",
"flex-flow",
"flex-direction",
"flex-wrap",
"justify-content",
"align-items",
"align-content",
"flex-order",
"flex-pack",
"flex-align",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"clip",
"box-sizing",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"min-width",
"min-height",
"max-width",
"max-height",
"width",
"height",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top-image",
"border-right-image",
"border-bottom-image",
"border-left-image",
"border-corner-image",
"border-top-left-image",
"border-top-right-image",
"border-bottom-right-image",
"border-bottom-left-image",
"color",
"font",
"font-family",
"font-size",
"line-height",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-feature-settings",
"letter-spacing",
"text-rendering",
"text-align",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"white-space",
"word-spacing",
"word-wrap",
"word-break",
"tab-size",
"hyphens",
"user-select",
"fill",
"stroke",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-size",
"background-repeat",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"box-decoration-break",
"box-shadow",
"table-layout",
"caption-side",
"empty-cells",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"quotes",
"counter-increment",
"counter-reset",
"vertical-align",
"src",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"filter",
"resize",
"cursor",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"pointer-events",
"unicode-bidi",
"direction",
"columns",
"column-span",
"column-width",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"break-before",
"break-inside",
"break-after",
"page-break-before",
"page-break-inside",
"page-break-after",
"orphans",
"widows",
"zoom",
"max-zoom",
"min-zoom",
"user-zoom",
"orientation"
] ]
}
================================================
FILE: assets/css/csscomb.json
================================================
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": 4,
"unitless-zero": true,
"sort-order": [ [
"content",
"visibility",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"order",
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"align-self",
"display",
"flex-flow",
"flex-direction",
"justify-content",
"align-items",
"align-content",
"flex-wrap",
"flex-order",
"flex-pack",
"flex-align",
"float",
"clear",
"box-sizing",
"width",
"height",
"min-width",
"min-height",
"max-width",
"max-height",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top-image",
"border-right-image",
"border-bottom-image",
"border-left-image",
"border-corner-image",
"border-top-left-image",
"border-top-right-image",
"border-bottom-right-image",
"border-bottom-left-image",
"table-layout",
"caption-side",
"empty-cells",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"quotes",
"counter-increment",
"counter-reset",
"vertical-align",
"stroke",
"fill",
"stroke-width",
"stroke-opacity",
"color",
"font",
"font-family",
"font-size",
"line-height",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"text-rendering",
"font-feature-settings",
"letter-spacing",
"hyphens",
"text-align",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"white-space",
"word-spacing",
"word-wrap",
"word-break",
"tab-size",
"user-select",
"src",
"resize",
"cursor",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-size",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-repeat",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"box-decoration-break",
"box-shadow",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"filter",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"pointer-events",
"unicode-bidi",
"direction",
"columns",
"column-span",
"column-width",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"break-before",
"break-inside",
"break-after",
"page-break-before",
"page-break-inside",
"page-break-after",
"orphans",
"widows",
"zoom",
"max-zoom",
"min-zoom",
"user-zoom",
"orientation",
"-webkit-overflow-scrolling",
"-ms-overflow-scrolling"
] ]
}
================================================
FILE: assets/css/global.css
================================================
/* Variables
/* ---------------------------------------------------------- */
:root {
/* Colours */
--blue: var(--ghost-accent-color, #3eb0ef);
--green: #a4d037;
--purple: #ad26b4;
--yellow: #fecd35;
--red: #f05230;
--darkgrey: #15171A;
--midgrey: #738a94;
--lightgrey: #c5d2d9;
--whitegrey: #e5eff5;
--pink: #fa3a57;
--brown: #a3821a;
--darkmode: color(var(--darkgrey) l(+2%));
}
/* Reset
/* ---------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
img {
max-width: 100%;
height: auto;
}
html {
box-sizing: border-box;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: bold;
}
i,
em,
dfn {
font-style: italic;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
mark {
background-color: #fdffb6;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 3 */
color: inherit; /* 1 */
font: inherit; /* 2 */
}
button {
overflow: visible;
border: none;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
/* 1 */
input[type="reset"],
input[type="submit"] {
cursor: pointer; /* 3 */
-webkit-appearance: button; /* 2 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input:focus {
outline: none;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
box-sizing: content-box; /* 2 */
-webkit-appearance: textfield; /* 1 */
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
legend {
padding: 0; /* 2 */
border: 0; /* 1 */
}
textarea {
overflow: auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
overflow-x: hidden;
overflow-y: scroll;
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
overflow-x: hidden;
color: color(var(--midgrey) l(-30%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
line-height: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
text-rendering: optimizeLegibility;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
::selection {
text-shadow: none;
background: var(--blue);
color: #fff;
}
hr {
position: relative;
display: block;
width: 100%;
margin: 2.5em 0 3.5em;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid color(var(--lightgrey) l(+10%));
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
textarea {
resize: vertical;
}
p,
ul,
ol,
dl,
blockquote {
margin: 0 0 1.5em 0;
}
ol,
ul {
padding-left: 1.3em;
padding-right: 1.5em;
}
ol ol,
ul ul,
ul ol,
ol ul {
margin: 0.5em 0 1em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
ul,
ol {
max-width: 100%;
}
li {
margin: 0.5em 0;
padding-left: 0.3em;
line-height: 1.6em;
}
dt {
float: left;
margin: 0 20px 0 0;
width: 120px;
color: var(--darkgrey);
font-weight: 500;
text-align: right;
}
dd {
margin: 0 0 5px 0;
text-align: left;
}
blockquote {
margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
border-left: var(--whitegrey) 0.5em solid;
}
blockquote p {
margin: 0.8em 0;
font-size: 1.2em;
font-weight: 300;
}
blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
opacity: 0.8;
}
/* Quotation marks */
blockquote small:before {
content: "\2014 \00A0";
}
blockquote cite {
font-weight: bold;
}
blockquote cite a {
font-weight: normal;
}
a {
color: var(--blue);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: 1.15;
font-weight: 600;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0 0 0.5em 0;
font-size: 5.5rem;
font-weight: 600;
}
@media (max-width: 500px) {
h1 {
font-size: 2.2rem;
}
}
h2 {
margin: 1.5em 0 0.5em 0;
font-size: 2.2rem;
}
@media (max-width: 500px) {
h2 {
font-size: 1.8rem;
}
}
h3 {
margin: 1.5em 0 0.5em 0;
font-size: 1.8rem;
font-weight: 500;
}
@media (max-width: 500px) {
h3 {
font-size: 1.7rem;
}
}
h4 {
margin: 1.5em 0 0.5em 0;
font-size: 1.6rem;
font-weight: 500;
}
h5 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;
}
h6 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;
}
================================================
FILE: assets/css/screen.css
================================================
/* Table of Contents
/* ------------------------------------------------------------
This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css
1. Global Styles
2. Layout
3. Special Templates
4. Site Header
4.1 Home header
4.2 Archive header
5. Site Navigation
6. Post Feed
7. Single Post
7.1. Post Byline
7.2. Members Subscribe Form
7.3. Comments
7.4. Related Posts
7.5. Koenig Styles
8. Author Template
9. Error Template
10. Subscribe Overlay
11. Site Footer
12. Members
13. Dark Mode
*/
/* 1. Global - Set up the things
/* ---------------------------------------------------------- */
@import "global.css";
body {
background: #fff;
}
.img {
display: block;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
border-radius: 100%;
}
.hidden {
visibility: hidden;
position: absolute;
text-indent: -9999px;
}
/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */
.site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
z-index: 100;
flex-grow: 1;
}
/* Full width page blocks */
.outer {
position: relative;
padding: 0 5vw;
}
/* Centered content container blocks */
.inner {
margin: 0 auto;
max-width: 1040px;
width: 100%;
}
/* Usage:
<div class="outer">
<div class="inner">
Centered content
</div>
</div>
*/
/* 3. Special Template Styles
/* ---------------------------------------------------------- */
@media (min-width: 900px) {
.home-template .post-feed,
.tag-template .post-feed,
.author-template .post-feed {
padding: 40px 0 5vw;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.home-template .site-nav {
position: relative;
}
}
/* 4. Site Header
/* ---------------------------------------------------------- */
.site-header {
height: 64px;
}
.site-header-background {
position: relative;
margin-top: 64px;
padding-bottom: 12px;
color: #fff;
background: color(var(--darkgrey) l(-5%)) no-repeat center center;
background-size: cover;
}
.site-header-background:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
background: rgba(0,0,0,0.18);
}
.site-header-background:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 10;
display: block;
height: 140px;
background: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.site-header-background.no-image:before,
.site-header-background.no-image:after {
display: none;
}
.site-header-content {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6vw 3vw;
min-height: 200px;
max-height: 340px;
}
.site-title {
z-index: 10;
margin: 0 0 0 -2px;
padding: 0;
font-size: 5.0rem;
line-height: 1em;
font-weight: 600;
}
.site-logo {
max-height: 55px;
}
.site-description {
z-index: 10;
margin: 0;
padding: 5px 0;
font-size: 2.1rem;
line-height: 1.4em;
font-weight: 400;
opacity: 0.8;
}
/* 4.1 Home header
/* ---------------------------------------------------------- */
.site-home-header {
z-index: 1000;
}
.site-home-header .site-header-background {
margin-top: 0;
}
.site-home-header .site-header-content {
padding: 5vw 3vw 6vw;
}
.site-home-header .site-title {
font-size: 5.5rem;
text-align: center;
}
.site-home-header .site-description {
font-size: 2.2rem;
font-weight: 300;
text-align: center;
}
/* 4.2 Archive header (tag and author post lists)
/* ---------------------------------------------------------- */
.site-archive-header .site-header-content {
position: relative;
align-items: stretch;
padding: 12vw 0 20px;
min-height: 200px;
max-height: 600px;
}
.site-archive-header .no-image {
padding-top: 0;
padding-bottom: 0;
color: var(--darkgrey);
background: #fff;
opacity: 1.0;
}
.site-archive-header .no-image .site-description {
color: var(--midgrey);
opacity: 1.0;
}
.site-archive-header .no-image .site-header-content {
padding: 5vw 0 10px;
border-bottom: 1px solid color(var(--lightgrey) l(+12%));
}
/* Special header styles for smaller screens */
@media (max-width: 900px) {
.site-header-content {
padding-bottom: 9vw;
}
}
@media (max-width: 500px) {
.site-home-header .site-title {
font-size: 4.2rem;
}
.site-home-header .site-description {
font-size: 1.8rem;
}
.site-archive-header .site-header-content {
flex-direction: column;
align-items: center;
min-height: unset;
}
.site-archive-header .site-title {
font-size: 4.2rem;
text-align: center;
}
.site-archive-header .no-image .site-header-content {
padding: 12vw 0 20px;
}
}
/* 5. Site Navigation
/* ---------------------------------------------------------- */
.site-nav-main {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;
background: color(var(--darkgrey) l(-5%));
}
.site-nav {
position: relative;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 64px;
font-size: 1.3rem;
}
.site-nav-left {
position: relative;
flex: 1 0 auto;
display: flex;
align-items: flex-start;
height: 64px;
overflow-y: hidden;
}
.site-nav-left-content {
flex: 1 0 auto;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
margin-right: 10px;
padding: 10px 0 80px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
white-space: nowrap;
-ms-overflow-scrolling: touch;
}
@media (max-width: 700px) {
.site-header-background:not(.responsive-header-img) .site-nav-left:after,
.site-nav-main .site-nav-left:after {
content: "";
position: absolute;
top: 0;
z-index: 1000;
width: 40px;
height: 100%;
}
.site-header-background:not(.responsive-header-img) .site-nav-left:after,
.site-nav-main .site-nav-left:after {
right: 10px;
background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
}
.nav li:last-of-type {
padding-right: 20px;
}
}
/* Site Nav Hack Explanation (above):
What's happening above is .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them. Also, there is a small gradient on the left and right side covering the menu so that the menu goes offscreen smoothly.
The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.
*/
.site-nav-logo {
position: relative;
z-index: 100;
flex-shrink: 0;
display: inline-block;
margin-right: 32px;
padding: 12px 0;
color: #fff;
font-size: 1.7rem;
line-height: 1.8rem;
font-weight: bold;
letter-spacing: -0.5px;
text-transform: none;
}
.site-nav-logo:hover {
text-decoration: none;
}
.site-nav-logo img {
display: block;
width: auto;
height: 21px;
}
.site-home-header .site-nav-logo {
display: none;
}
.site-nav-content {
position: relative;
align-self: flex-start;
}
.nav {
position: absolute;
z-index: 1000;
display: flex;
margin: 0 0 0 -12px;
padding: 0;
list-style: none;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav li {
display: block;
margin: 0;
padding: 0;
}
.nav li a {
position: relative;
display: block;
padding: 12px 12px;
color: #fff;
opacity: 0.8;
transition: opacity 0.35s ease-in-out;
}
.nav li a:hover {
text-decoration: none;
opacity: 1;
}
.nav li a:before {
content: "";
position: absolute;
right: 100%;
bottom: 8px;
left: 12px;
height: 1px;
background: #fff;
opacity: 0.25;
transition: all 0.35s ease-in-out;
}
.nav li a:hover:before {
right: 12px;
opacity: 0.5;
}
.nav-post-title-active .nav {
visibility: hidden;
opacity: 0;
transform: translateY(-175%);
}
.nav-post-title {
visibility: hidden;
position: absolute;
top: 9px;
color: #fff;
font-size: 1.7rem;
font-weight: 400;
text-transform: none;
opacity: 0;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(175%);
}
.nav-post-title.dash {
left: -25px;
}
.nav-post-title.dash:before {
content: "– ";
opacity: 0.5;
}
.nav-post-title-active .nav-post-title {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.site-nav-right {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 9px 0 10px;
height: 64px;
font-size: 1.4rem;
line-height: 1.0em;
}
.site-nav-right a {
color: #fff;
}
.button.small.signout-link {
color: #fff;
box-shadow: #fff 0 0 0 1px inset;
opacity: 0.8;
}
.button.small.signout-link:hover {
opacity: 1;
}
.account-menu {
position: relative;
}
.account-menu-avatar {
position: relative;
display: block;
margin: 0;
padding: 1px;
width: 32px;
height: 32px;
background: color(var(--lightgrey) l(+10%));
border-radius: 100%;
cursor: pointer;
}
.account-menu-avatar img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 100%;
}
.account-menu ul {
visibility: hidden;
position: absolute;
top: 43px;
right: -8px;
z-index: 9998;
padding: 8px 0;
min-width: 240px;
background: #fff;
border-radius: 3px;
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.06) 1px 3px 8px;
list-style: none;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4,0.01,0.165,0.99), opacity 0.2s cubic-bezier(0.4,0.01,0.165,0.99);
transform: translateY(-6px) scale(0.95);
transform-origin: top right;
pointer-events: none;
}
.account-menu-avatar.active + ul {
visibility: visible;
opacity: 1.0;
transform: translateY(0) scale(1);
pointer-events: all;
}
.account-menu ul:before {
content: "";
position: absolute;
top: -8px;
right: 14px;
z-index: 9998;
width: 0;
height: 0;
border-width: 0 10px 10px;
border-style: solid;
border-color: transparent transparent #fff;
}
.account-menu ul li {
margin: 0;
padding: 0;
}
.account-menu .account-info {
display: flex;
flex-direction: column;
margin: 0 0 6px;
padding: 4px 20px 12px;
border-bottom: 1px solid var(--whitegrey);
color: var(--midgrey);
}
.account-info .account-email {
display: inline-block;
overflow-x: hidden;
margin-top: -4px;
max-width: 200px;
color: color(var(--midgrey) l(-30%));
font-weight: 600;
text-overflow: ellipsis;
}
.account-menu ul a {
display: block;
padding: 6px 20px;
color: color(var(--midgrey) l(-30%));
}
.account-menu ul a:hover {
color: var(--blue);
text-decoration: none;
}
/* Special behaviors for home navigation */
.home-template .site-nav-main {
z-index: 100;
}
.home-template .site-nav-main .site-nav {
opacity: 0;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.home-template .site-nav-main .fixed-nav-active {
opacity: 1;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
}
@media (max-width: 700px) {
.site-home-header .site-nav {
margin-left: -5vw;
}
.site-nav-main {
padding-right: 0;
padding-left: 0;
}
.site-nav-left {
margin-right: 0;
padding-left: 5vw;
}
.site-nav-main .site-nav-right {
padding: 9px 20px 10px 5px;
}
}
/* 6. Post Feed
/* ---------------------------------------------------------- */
.posts {
overflow-x: hidden;
}
.post-feed {
position: relative;
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
padding: 50px 0 0;
background: #fff;
}
.post-card {
position: relative;
flex: 1 1 301px;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0 0 40px;
padding: 0 20px 40px;
min-height: 220px;
border-bottom: 1px solid color(var(--lightgrey) l(+12%));
background-size: cover;
}
.post-card-image-link {
position: relative;
display: block;
overflow: hidden;
border-radius: 3px;
}
.post-card-image {
width: 100%;
height: 200px;
background: var(--lightgrey) no-repeat center center;
object-fit: cover;
}
.post-card-content-link {
position: relative;
display: block;
color: var(--darkgrey);
}
.post-card-content-link:hover {
text-decoration: none;
}
.post-card-header {
margin: 15px 0 0;
}
.post-feed .no-image .post-card-content-link {
padding: 0;
}
.no-image .post-card-header {
margin-top: 0;
}
.post-card-primary-tag {
color: var(--blue);
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.post-card-title {
margin: 0 0 0.4em;
line-height: 1.15em;
transition: color 0.2s ease-in-out;
}
.no-image .post-card-title {
margin-top: 0;
}
.post-card-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.post-card-excerpt {
max-width: 56em;
color: var(--midgrey);
font-family: Georgia, serif;
}
.post-card-excerpt p {
margin-bottom: 1em;
}
.post-card-meta {
display: flex;
align-items: flex-start;
padding: 0;
}
.author-profile-image,
.avatar-wrapper {
display: block;
width: 100%;
height: 100%;
background: color(var(--lightgrey) l(+10%));
border-radius: 100%;
object-fit: cover;
}
.post-card-meta .profile-image-wrapper,
.post-card-meta .avatar-wrapper {
position: relative;
}
.author-list {
display: flex;
flex-wrap: wrap;
margin: 0 0 0 4px;
padding: 0;
list-style: none;
}
.author-list-item {
position: relative;
flex-shrink: 0;
margin: 0;
padding: 0;
}
.static-avatar {
display: block;
overflow: hidden;
margin: 0 0 0 -6px;
width: 34px;
height: 34px;
border: #fff 2px solid;
border-radius: 100%;
}
.author-name-tooltip {
position: absolute;
bottom: 105%;
z-index: 999;
display: block;
padding: 2px 8px;
color: white;
font-size: 1.2rem;
letter-spacing: 0.2px;
white-space: nowrap;
background: var(--darkgrey);
border-radius: 3px;
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
opacity: 0;
transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform: translateY(6px);
pointer-events: none;
}
.author-list-item:hover .author-name-tooltip {
opacity: 1.0;
transform: translateY(0px);
}
@media (max-width: 700px) {
.author-name-tooltip {
display: none;
}
}
.post-card-byline-content {
flex: 1 1 50%;
display: flex;
flex-direction: column;
margin: 2px 0 0 6px;
color: color(var(--midgrey) l(+10%));
font-size: 1.2rem;
line-height: 1.4em;
font-weight: 400;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.post-card-byline-content span {
margin: 0;
}
.post-card-byline-content a {
color: color(var(--darkgrey) l(+20%));
font-weight: 600;
}
.post-card-byline-date {
font-size: 1.2rem;
}
.post-card-byline-date .bull {
display: inline-block;
margin: 0 4px;
opacity: 0.6;
}
.single-author-byline {
display: flex;
flex-direction: column;
margin-left: 5px;
color: color(var(--midgrey) l(-10%));
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 500;
}
.single-author {
display: flex;
align-items: center;
}
.single-author .static-avatar {
margin-left: -2px;
}
.single-author-name {
display: inline-block;
}
/* Special Styling for home page grid (below):
The first post in the list is styled to be bigger than the others and take over
the full width of the grid to give it more emphasis. Wrapped in a media query to
make sure this only happens on large viewports / desktop-ish devices.
*/
@media (min-width: 795px) {
.post-card-large {
flex: 1 1 100%;
flex-direction: row;
padding-bottom: 40px;
min-height: 280px;
border-top: 0;
}
.post-card-large:hover {
border-bottom-color: color(var(--lightgrey) l(+10%));
}
.post-card-large:not(.no-image) .post-card-header {
margin-top: 0;
}
.post-card-large .post-card-image-link {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
min-height: 380px;
}
.post-card-large .post-card-image {
position: absolute;
width: 100%;
height: 100%;
}
.post-card-large .post-card-content {
flex: 0 1 361px;
justify-content: center;
}
.post-card-large .post-card-title {
margin-top: 0;
font-size: 3.2rem;
}
.post-card-large .post-card-content-link {
padding: 0 0 0 40px;
}
.post-card-large .post-card-meta {
padding: 0 0 0 40px;
}
.post-card-large .post-card-excerpt p {
margin-bottom: 1.5em;
font-size: 1.8rem;
line-height: 1.5em;
}
}
/* Adjust some margins for smaller screens */
@media (max-width: 1170px) {
.post-card {
margin-bottom: 5vw;
}
}
@media (max-width: 650px) {
.post-feed {
padding-top: 5vw;
}
.post-card {
margin-bottom: 5vw;
}
}
@media (max-width: 500px) {
.post-card-title {
font-size: 1.9rem;
}
.post-card-excerpt {
font-size: 1.6rem;
}
}
/* 7. Single Post
/* ---------------------------------------------------------- */
.post-template .site-main,
.page-template .site-main {
padding-bottom: 4vw;
background: #fff;
}
.post-full-header {
position: relative;
margin: 0 auto;
padding: 70px 170px 50px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.post-full-tags {
display: flex;
justify-content: flex-start;
align-items: center;
color: var(--midgrey);
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 600;
text-transform: uppercase;
}
.post-full-meta-date {
color: var(--midgrey);
font-size: 1.2rem;
font-weight: 400;
}
@media (max-width: 1170px) {
.post-full-header {
padding: 60px 11vw 50px;
}
}
@media (max-width: 800px) {
.post-full-header {
padding-right: 5vw;
padding-left: 5vw;
}
}
@media (max-width: 500px) {
.post-full-header {
padding: 20px 0 35px;
}
}
.post-full-title {
margin: 0 0 0.2em;
color: color(var(--darkgrey) l(-5%));
}
.post-full-custom-excerpt {
margin: 20px 0 0;
color: var(--midgrey);
font-family: Georgia, serif;
font-size: 2.3rem;
line-height: 1.4em;
font-weight: 300;
}
.date-divider {
display: inline-block;
margin: 0 6px 1px;
font-weight: 300;
}
.post-full-image {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
margin: 25px 0 50px;
border-radius: 3px;
}
.post-full-image img {
max-width: 1040px;
width: 100%;
height: auto;
}
.post-full-content {
position: relative;
margin: 0 auto;
padding: 0 170px 5vw;
min-height: 230px;
font-family: Georgia, serif;
font-size: 2.0rem;
line-height: 1.6em;
background: #fff;
}
@media (max-width: 1170px) {
.post-full-content {
padding: 0 11vw;
}
}
@media (max-width: 800px) {
.post-full-content {
padding: 0 5vw;
font-size: 1.8rem;
}
}
@media (max-width: 500px) {
.post-full-custom-excerpt {
font-size: 1.9rem;
line-height: 1.5em;
}
}
.no-image .post-full-content {
padding-top: 0;
}
.no-image .post-full-content:before,
.no-image .post-full-content:after {
display: none;
}
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h5,
.post-full-content h6,
.post-full-content p,
.post-full-content ul,
.post-full-content ol,
.post-full-content dl,
.post-full-content pre,
.post-full-content blockquote,
.post-full-comments,
.footnotes {
margin: 0 0 1.5em 0;
min-width: 100%;
}
@media (max-width: 500px) {
.post-full-content p,
.post-full-content ul,
.post-full-content ol,
.post-full-content dl,
.post-full-content pre,
.post-full-comments,
.footnotes {
margin-bottom: 1.28em;
}
}
.post-full-content li {
word-break: break-word;
}
.post-full-content li p {
margin: 0;
}
.post-full-content a {
color: var(--darkgrey);
word-break: break-word;
box-shadow: var(--darkgrey) 0 -1px 0 inset;
transition: all 0.2s ease-in-out;
}
.post-full-content a:hover {
color: var(--blue);
text-decoration: none;
box-shadow: var(--blue) 0 -1px 0 inset;
}
.post-full-content strong,
.post-full-content em {
color: color(var(--darkgrey) l(-5%));
}
.post-full-content small {
display: inline-block;
line-height: 1.6em;
}
.post-full-content li:first-child {
margin-top: 0;
}
.post-full-content img,
.post-full-content video {
display: block;
margin: 1.5em auto;
max-width: 1040px;
height: auto;
}
@media (max-width: 1040px) {
.post-full-content img,
.post-full-content video {
width: 100%;
}
}
/* Full bleed images (#full)
Super neat trick courtesy of @JoelDrapper
Usage (In Ghost edtior):
*/
.post-full-content img[src$="#full"] {
max-width: none;
width: 100vw;
}
/* Image captions
Usage (In Ghost editor):
<small>Your image caption</small>
*/
.post-full-content img + br + small {
display: block;
margin-top: -3em;
margin-bottom: 1.5em;
text-align: center;
}
/* Override third party iframe styles */
.post-full-content iframe {
margin: 0 auto !important;
}
.post-full-content blockquote {
margin: 0 0 1.5em;
padding: 0 1.5em;
border-left: #3eb0ef 3px solid;
}
@media (max-width: 500px) {
.post-full-content blockquote {
padding: 0 1.3em;
}
}
.post-full-content blockquote p {
margin: 0 0 1em 0;
color: inherit;
font-size: inherit;
line-height: inherit;
font-style: italic;
}
.post-full-content blockquote p:last-child {
margin-bottom: 0;
}
.post-full-content code {
padding: 0 5px 2px;
font-size: 0.8em;
line-height: 1em;
font-weight: 400!important;
background: var(--whitegrey);
border-radius: 3px;
}
.post-full-content p code {
word-break: break-all;
}
.post-full-content pre {
overflow-x: auto;
margin: 1.5em 0 3em;
padding: 20px;
max-width: 100%;
border: color(var(--darkgrey) l(-10%)) 1px solid;
color: var(--whitegrey);
font-size: 1.4rem;
line-height: 1.5em;
background: color(var(--darkgrey) l(-3%));
border-radius: 5px;
}
.post-full-content pre ::selection {
color: color(var(--midgrey) l(-25%));
}
.post-full-content pre code {
padding: 0;
font-size: inherit;
line-height: inherit;
background: transparent;
}
.post-full-content pre code :not(span) {
color: inherit;
}
.post-full-content .fluid-width-video-wrapper {
margin: 1.5em 0 3em;
}
.post-full-content hr {
margin: 2em 0;
}
.post-full-content hr:after {
content: "";
position: absolute;
top: -15px;
left: 50%;
display: block;
margin-left: -10px;
width: 1px;
height: 30px;
background: color(var(--lightgrey) l(+10%));
box-shadow: #fff 0 0 0 5px;
transform: rotate(45deg);
}
.post-full-content hr + p {
margin-top: 1.2em;
}
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
color: color(var(--darkgrey) l(-5%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.post-full-content h1 {
margin: 0.5em 0 0.4em;
font-size: 4.2rem;
line-height: 1.25em;
font-weight: 600;
}
.post-full-content p + h1 {
margin-top: 0.8em;
}
@media (max-width: 800px) {
.post-full-content h1 {
font-size: 3.2rem;
line-height: 1.25em;
}
}
.post-full-content h2 {
margin: 0.5em 0 0.4em;
font-size: 3.2rem;
line-height: 1.25em;
font-weight: 600;
}
.post-full-content p + h2 {
margin-top: 0.8em;
}
@media (max-width: 800px) {
.post-full-content h2 {
margin-bottom: 0.3em;
font-size: 2.8rem;
line-height: 1.25em;
}
}
.post-full-content h3 {
margin: 0.5em 0 0.2em;
font-size: 2.5rem;
line-height: 1.3em;
font-weight: 600;
}
.post-full-content h2 + h3 {
margin-top: 0.7em;
}
@media (max-width: 800px) {
.post-full-content h3 {
margin-bottom: 0.3em;
font-size: 2.4rem;
line-height: 1.3em;
}
}
.post-full-content h4 {
margin: 0.5em 0 0.2em;
font-size: 2.5rem;
font-weight: 600;
}
.post-full-content h2 + h4 {
margin-top: 0.7em;
}
.post-full-content h3 + h4 {
margin-top: 0;
}
@media (max-width: 800px) {
.post-full-content h4 {
margin-bottom: 0.3em;
font-size: 2.4rem;
line-height: 1.3em;
}
}
.post-full-content h5 {
display: block;
margin: 0.5em 0;
padding: 0.4em 1em 0.9em;
border: 0;
color: var(--blue);
font-family: Georgia,serif;
font-size: 3.2rem;
line-height: 1.35em;
text-align: center;
}
@media (min-width: 1180px) {
.post-full-content h5 {
max-width: 1060px;
width: 100vw;
}
}
@media (max-width: 800px) {
.post-full-content h5 {
margin-bottom: 1em;
margin-left: 1.3em;
padding: 0 0 0.5em;
font-size: 2.4rem;
text-align: initial;
}
}
.post-full-content h6 {
margin: 0.5em 0 0.2em 0;
font-size: 2.0rem;
font-weight: 700;
}
@media (max-width: 800px) {
.post-full-content h6 {
font-size: 1.8rem;
line-height: 1.4em;
}
}
.footnotes-sep {
margin-bottom: 30px;
}
.footnotes {
font-size: 1.5rem;
}
.footnotes p {
margin: 0;
}
.footnote-backref {
color: var(--blue) !important;
font-size: 1.2rem;
font-weight: bold;
text-decoration: none !important;
box-shadow: none !important;
}
/* Some grouped styles for smaller viewports */
@media (max-width: 1170px) {
.post-full-image {
margin: 25px -6vw 50px;
border-radius: 0;
}
.post-full-image img {
max-width: 1170px;
}
}
@media (max-width: 700px) {
.post-full-image {
margin: 25px -5vw;
}
}
@media (max-width: 500px) {
.post-full-meta {
font-size: 1.2rem;
line-height: 1.3em;
}
.post-full-title {
margin-top: 0.2em;
font-size: 4.2rem;
line-height: 1.05em;
}
.post-full-image {
margin-top: 5px;
margin-bottom: 5vw;
}
.post-full-content {
padding: 0;
}
.post-full-content:before,
.post-full-content:after {
display: none;
}
}
/* Tables */
.post-full-content table {
display: inline-block;
overflow-x: auto;
margin: 0.5em 0 2.5em;
max-width: 100%;
width: auto;
border-spacing: 0;
border-collapse: collapse;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
white-space: nowrap;
vertical-align: top;
}
.post-full-content table {
-webkit-overflow-scrolling: touch;
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background-attachment: scroll, scroll;
background-size: 10px 100%, 10px 100%;
background-repeat: no-repeat;
}
.post-full-content table td:first-child {
background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-size: 20px 100%;
background-repeat: no-repeat;
}
.post-full-content table td:last-child {
background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-position: 100% 0;
background-size: 20px 100%;
background-repeat: no-repeat;
}
.post-full-content table th {
color: var(--darkgrey);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.2px;
text-align: left;
text-transform: uppercase;
background-color: color(var(--whitegrey) l(+4%));
}
.post-full-content table th,
.post-full-content table td {
padding: 6px 12px;
border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
}
/* 7.1. Post Byline
/* ---------------------------------------------------------- */
.post-full-byline {
display: flex;
justify-content: space-between;
margin: 35px 0 0;
padding-top: 15px;
border-top: 1px solid color(var(--lightgrey) l(+10%));
}
.post-full-byline-content {
flex-grow: 1;
display: flex;
align-items: flex-start;
}
.post-full-byline-content .author-list {
justify-content: flex-start;
padding: 0 12px 0 0;
}
.post-full-byline-meta {
margin: 2px 0 0;
color: color(var(--midgrey) l(+10%));
font-size: 1.2rem;
line-height: 1.2em;
letter-spacing: 0.2px;
text-transform: uppercase;;
}
.post-full-byline-meta h4 {
margin: 0 0 3px;
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 500;
}
.post-full-byline-meta h4 a {
color: color(var(--darkgrey) l(+10%));
}
.post-full-byline-meta h4 a:hover {
color: var(--darkgrey);
}
.post-full-byline-meta .bull {
display: inline-block;
margin: 0 4px;
opacity: 0.6;
}
.author-avatar {
display: block;
overflow: hidden;
margin: 0 -4px;
width: 40px;
height: 40px;
border: #fff 2px solid;
border-radius: 100%;
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
}
.author-list-item .author-card {
position: absolute;
bottom: 130%;
left: 50%;
z-index: 600;
display: flex;
justify-content: space-between;
margin-left: -200px;
width: 400px;
font-size: 1.4rem;
line-height: 1.5em;
background: white;
border-radius: 3px;
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.06) 1px 3px 8px;
opacity: 0;
transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform: scale(0.98) translateY(15px);
pointer-events: none;
}
.author-list-item .author-card:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
display: block;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #fff;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.author-list-item .author-card.hovered {
opacity: 1.0;
transform: scale(1) translateY(0px);
pointer-events: auto;
}
.author-card {
padding: 20px 20px 22px;
}
.author-card .author-info {
flex: 1 1 auto;
padding: 0 0 0 20px;
}
.author-card .author-info h2 {
margin: 8px 0 0;
font-size: 1.6rem;
}
.author-card .author-info p {
margin: 4px 0 0;
color: color(var(--midgrey) l(-10%));
}
.author-card .author-info .bio h2 {
margin-top: 0;
}
.author-card .author-info .bio p {
margin-top: 0.8em;
}
.author-card .author-profile-image {
flex: 0 0 60px;
margin: 0;
width: 60px;
height: 60px;
border: none;
}
.basic-info .avatar-wrapper {
position: relative;
margin: 0;
width: 60px;
height: 60px;
border: none;
background: rgba(229, 239, 245, 0.1);
}
.basic-info .avatar-wrapper svg {
margin: 0;
width: 60px;
height: 60px;
opacity: 0.15;
}
@media (max-width: 1170px) {
.author-list-item .author-card {
margin-left: -50px;
width: 430px;
}
.author-list-item .author-card:before {
left: 50px;
}
}
@media (max-width: 650px) {
.author-list-item .author-card {
display: none;
}
}
@media (max-width: 500px) {
.author-avatar {
width: 36px;
height: 36px;
}
.post-full-byline {
margin-top: 20px;
}
.post-full-byline-meta {
font-size: 1.2rem;
}
.post-full-byline-meta h4 {
margin-bottom: 2px;
font-size: 1.2rem;
}
}
/* 7.2. Members Subscribe Form
/* ---------------------------------------------------------- */
.subscribe-form {
margin: 1.5em 0;
padding: 6.5vw 7vw 8vw;
border: color(var(--lightgrey) l(+10%)) 1px solid;
text-align: center;
background: linear-gradient(color(var(--whitegrey) l(+6%)), color(var(--whitegrey) l(+4%)));
border-radius: 3px;
}
.subscribe-form-title {
margin: 0 0 3px 0;
padding: 0;
color: var(--darkgrey);
font-size: 3.5rem;
line-height: 1;
font-weight: 600;
}
.subscribe-form-description {
margin-bottom: 0.2em 0 1em;
color: var(--midgrey);
font-size: 2.1rem;
line-height: 1.55em;
}
.subscribe-form form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 460px;
}
.subscribe-form .form-group {
align-self: stretch;
display: flex;
}
.subscribe-email {
display: block;
padding: 10px;
width: 100%;
border: color(var(--lightgrey) l(+7%)) 1px solid;
color: var(--midgrey);
font-size: 1.8rem;
line-height: 1em;
font-weight: normal;
user-select: text;
border-radius: 5px;
transition: border-color 0.15s linear;
-webkit-appearance: none;
}
.subscribe-email:focus {
outline: 0;
border-color: color(var(--lightgrey) l(-2%));
}
.subscribe-form button {
position: relative;
display: inline-block;
margin: 0 0 0 10px;
padding: 0 20px;
height: 43px;
outline: none;
color: #fff;
font-size: 1.5rem;
line-height: 39px;
font-weight: 400;
text-align: center;
background: linear-gradient(
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 5px;
-webkit-font-smoothing: subpixel-antialiased;
}
.subscribe-form button:active,
.subscribe-form button:focus {
background: color(var(--blue) lightness(-9%) saturation(-10%));
}
.subscribe-form .button-loader,
.subscribe-form .message-success,
.subscribe-form .message-error {
display: none;
}
.subscribe-form .loading .button-content {
visibility: hidden;
}
.subscribe-form .loading .button-loader {
position: absolute;
top: 0;
left: 50%;
display: inline-block;
margin-left: -19px;
transform: scale(0.7);
}
.subscribe-form .button-loader svg path,
.subscribe-form .button-loader svg rect {
fill: #fff;
}
.subscribe-form .success .message-success,
.subscribe-form .invalid .message-error,
.subscribe-form .error .message-error {
margin: 1em auto 0;
max-width: 400px;
color: var(--red);
font-size: 1.6rem;
line-height: 1.5em;
text-align: center;
}
.subscribe-form .success .message-success {
display: block;
color: color(var(--green) l(-5%));
}
.subscribe-form .invalid .message-error,
.subscribe-form .error .message-error {
display: block;
}
@media (max-width: 650px) {
.subscribe-form-title {
font-size: 2.4rem;
}
.subscribe-form-description {
font-size: 1.6rem;
}
}
@media (max-width: 500px) {
.subscribe-form form {
flex-direction: column;
}
.subscribe-form .form-group {
flex-direction: column;
width: 100%;
}
.subscribe-form button {
margin: 10px 0 0 0;
width: 100%;
}
}
/* 7.3. Comments
/* ---------------------------------------------------------- */
.post-full-comments {
margin: 0 auto;
max-width: 840px;
}
/* 7.4. Related posts
/* ---------------------------------------------------------- */
.read-next {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: color(var(--darkgrey) l(-5%));
}
.read-next-feed {
display: flex;
flex-wrap: wrap;
margin: 0 -25px;
padding: 60px 0 0 0;
}
.read-next .post-card {
padding-bottom: 0;
border-bottom: none;
}
.read-next .post-card:after {
display: none;
}
.read-next .post-card-primary-tag {
color: #fff;
opacity: 0.6;
}
.read-next .post-card-title {
color: #fff;
opacity: 0.8;
transition: all 0.2s ease-in-out;
}
.read-next .post-card:hover .post-card-image {
opacity: 1.0;
}
.read-next .post-card-excerpt {
color: rgba(255, 255, 255, 0.6);
}
.read-next .static-avatar {
border-color: #000;
}
.read-next .post-card-byline-content {
color: rgba(255, 255, 255, 0.6);
}
.read-next .post-card-byline-content a {
color: rgba(255, 255, 255, 0.8);
}
.read-next-card {
position: relative;
flex: 0 1 326px;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0 25px 50px;
padding: 25px;
background: linear-gradient(color(var(--darkgrey) l(+2%)), color(var(--darkgrey) l(-5%)));
border-radius: 3px;
}
.read-next-card a {
transition: all 0.2s ease-in-out;
}
.read-next-card a:hover {
text-decoration: none;
}
.read-next-card-header h3 {
margin: 0;
color: rgba(255, 255, 255, 0.6);
font-size: 1.2rem;
line-height: 1em;
font-weight: 300;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.read-next-card-header h3 a {
color: #fff;
font-weight: 500;
text-decoration: none;
opacity: 0.8;
}
.read-next-card-header h3 a:hover {
opacity: 1;
}
.read-next-card-content {
font-size: 1.7rem;
}
.read-next-card-content ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.read-next-card-content li {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
padding: 20px 0;
border-bottom: rgba(255, 255, 255, 0.1);
}
.read-next-card-content li:last-of-type {
padding-bottom: 5px;
border: none;
}
.read-next-card-content h4 {
margin: 0;
font-size: 1.6rem;
line-height: 1.35em;
font-weight: 600;
}
.read-next-card-content li a {
display: block;
color: #fff;
opacity: 0.8;
}
.read-next-card-content li a:hover {
opacity: 1;
}
.read-next-card-excerpt {
overflow: hidden;
max-width: 100%;
font-size: 1.4rem;
line-height: 1.2em;
text-overflow: ellipsis;
}
.read-next-card-meta {
margin-top: 2px;
font-size: 1.2rem;
line-height: 1.4em;
font-weight: 400;
}
.read-next-card-meta p {
margin: 0;
color: rgba(255, 255, 255, 0.6);
}
.read-next-card-footer {
position: relative;
margin: 40px 0 5px;
}
.read-next-card-footer a {
padding: 7px 12px 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
font-size: 1.3rem;
border-radius: 999px;
transition: all 0.35s ease-in-out;
}
.read-next-card-footer a:hover {
border-color: var(--yellow);
color: var(--yellow);
text-decoration: none;
}
@media (max-width: 1170px) {
.read-next-card {
flex: 1 1 261px;
margin-bottom: 5vw;
}
}
@media (max-width: 650px) {
.read-next-feed {
flex-direction: column;
padding: 25px 0 0;
}
.read-next-card {
flex: 1 1 auto;
margin: 0 25px;
padding: 0;
background: none;
}
.read-next .post-card {
flex: 1 1 auto;
margin: 25px;
padding: 25px 0 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
/* 7.5. Koenig Styles
/* ---------------------------------------------------------- */
.post-content {
display: flex;
flex-direction: column;
align-items: center;
}
.post-full-content .kg-image {
margin: 0 auto;
max-width: 100%;
}
/* Preventing full-width image overlap with post image. */
.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
width: 100%;
}
.post-full-content .kg-width-wide .kg-image {
max-width: 1040px;
}
.post-full-content .kg-width-full .kg-image {
max-width: 100vw;
}
.post-full-content figure {
margin: 0.8em 0 2.3em;
}
.post-full-content h1 + figure,
.post-full-content h2 + figure,
.post-full-content h3 + figure,
.post-full-content h4 + figure {
margin-top: 2em;
}
.post-full-content figure img {
margin: 0;
}
figcaption {
margin: 1.0em auto 0;
color: color(var(--midgrey) l(-10%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 75%;
line-height: 1.5em;
text-align: center;
max-width: 1040px;
}
.kg-width-full figcaption {
padding: 0 1.5em;
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.kg-embed-card .fluid-width-video-wrapper {
margin: 0;
}
@media (max-width: 1040px) {
.post-full-content .kg-width-full .kg-image {
width: 100vw;
}
}
.kg-gallery-container {
display: flex;
flex-direction: column;
max-width: 1040px;
width: 100vw;
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}
.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
margin: -2.25em 0 3em;
}
/* keep existing <pre> styles for code cards with captions */
.kg-code-card {
width: 100%;
}
.kg-code-card pre {
margin: 0;
}
.kg-bookmark-card {
width: 100%;
background: var(--white);
}
.kg-card + .kg-bookmark-card {
margin-top: 0;
}
.post-full-content .kg-bookmark-container {
display: flex;
min-height: 148px;
color: var(--darkgrey);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
}
.post-full-content .kg-bookmark-container:hover {
color: var(--darkgrey);
text-decoration: none;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
}
.kg-bookmark-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 20px;
}
.kg-bookmark-title {
color: color(var(--midgrey) l(-30%));
font-size: 1.6rem;
line-height: 1.5em;
font-weight: 600;
transition: color 0.2s ease-in-out;
}
.post-full-content .kg-bookmark-container:hover .kg-bookmark-title {
color: var(--blue);
}
.kg-bookmark-description {
display: -webkit-box;
overflow-y: hidden;
margin-top: 12px;
max-height: 48px;
color: color(var(--midgrey) l(-10%));
font-size: 1.5rem;
line-height: 1.5em;
font-weight: 400;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kg-bookmark-thumbnail {
position: relative;
min-width: 33%;
max-height: 100%;
}
.kg-bookmark-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0 3px 3px 0;
object-fit: cover;
}
.kg-bookmark-metadata {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 14px;
color: color(var(--midgrey) l(-10%));
font-size: 1.5rem;
font-weight: 400;
}
.post-full-content .kg-bookmark-icon {
margin-right: 8px;
width: 22px;
height: 22px;
}
.kg-bookmark-author {
line-height: 1.5em;
}
.kg-bookmark-author:after {
content: "•";
margin: 0 6px;
}
.kg-bookmark-publisher {
overflow: hidden;
max-width: 240px;
line-height: 1.5em;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 800px) {
.post-full-content figure {
margin: 0.2em 0 1.3em;
}
.post-full-content h1 + figure,
.post-full-content h2 + figure,
.post-full-content h3 + figure,
.post-full-content h4 + figure {
margin-top: 0.9em;
}
}
@media (max-width: 500px) {
.post-full-content .kg-width-wide,
.post-full-content .kg-width-full {
margin-right: -5vw;
margin-left: -5vw;
}
.post-full-content figcaption {
margin-bottom: 0.4em;
}
.post-full-content .kg-bookmark-container {
flex-direction: column;
}
.kg-bookmark-title,
.kg-bookmark-description,
.kg-bookmark-metadata {
font-size: 1.4rem;
line-height: 1.5em;
}
.post-full-content .kg-bookmark-icon {
width: 18px;
height: 18px;
}
.kg-bookmark-thumbnail {
order: 1;
min-height: 160px;
width: 100%;
}
.kg-bookmark-thumbnail img {
border-radius: 3px 3px 0 0;
}
.kg-bookmark-content {
order: 2;
}
}
/* 8. Author Template
/* ---------------------------------------------------------- */
.author-header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 10vw 0 10px;
}
.site-archive-header .author-header {
align-items: center;
}
.site-archive-header .no-image .author-header {
padding-bottom: 20px;
}
.author-header-content {
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px 0 0 30px;
}
.site-header-content .author-profile-image {
z-index: 10;
flex-shrink: 0;
margin: -4px 0 0;
width: 110px;
height: 110px;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
}
.author-header-content .author-bio {
z-index: 10;
flex-shrink: 0;
margin: 6px 0 0;
max-width: 46em;
font-size: 2.0rem;
line-height: 1.3em;
font-weight: 400;
opacity: 0.8;
}
.author-header-content .author-meta {
z-index: 10;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 0 0 1px;
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 0.2px;
text-transform: uppercase;
white-space: nowrap;
}
.author-header-content .social-link:first-of-type {
padding-left: 4px;
}
.no-image .author-header-content .author-bio {
color: var(--midgrey);
opacity: 1.0;
}
.no-image .author-header-content .author-meta {
color: var(--midgrey);
opacity: 1.0;
}
.author-social-link a {
color: #fff;
font-weight: 600;
}
.no-image .author-social-link a {
color: var(--darkgrey);
}
.author-social-link a:hover {
opacity: 1;
}
.author-social-link {
display: inline-block;
margin: 0;
padding: 6px 0;
}
.author-location + .author-stats:before,
.author-stats + .author-social-link:before,
.author-social-link + .author-social-link:before {
content: "\2022";
display: inline-block;
margin: 0 12px;
color: #fff;
opacity: 0.6;
}
.no-image .author-location + .author-stats:before,
.no-image .author-stats + .author-social-link:before,
.no-image .author-social-link + .author-social-link:before {
color: var(--midgrey);
}
@media (max-width: 700px) {
.author-location,
.author-stats,
.author-stats + .author-social-link:first-of-type:before {
display: none;
}
}
@media (max-width: 500px) {
.author-header {
padding: 10px 0 0;
}
.no-image .author-header {
padding-bottom: 10px;
}
.author-header-content {
align-items: center;
margin: 16px 0 0 0;
}
.site-header-content .author-profile-image {
width: 96px;
height: 96px;
}
.author-header-content .author-bio {
font-size: 1.8rem;
line-height: 1.3em;
letter-spacing: 0;
text-align: center;
}
.author-header-content .author-meta {
margin-top: 8px;
}
.author-location + .author-stats:before,
.author-stats + .author-social-link:before,
.author-social-link + .author-social-link:before {
display: inline;
margin: 0 6px;
}
}
/* 9. Error Template
/* ---------------------------------------------------------- */
.error-content {
padding: 14vw 4vw 6vw;
}
.site-nav-center {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
text-align: center;
}
.site-nav-center .site-nav-logo {
margin-right: 0;
}
.error-message {
padding-bottom: 10vw;
border-bottom: 1px solid color(var(--lightgrey) l(+10%));
text-align: center;
}
.error-code {
margin: 0;
color: var(--lightgrey);
font-size: 12vw;
line-height: 1em;
letter-spacing: -5px;
opacity: 0.75;
}
.error-description {
margin: 0;
color: var(--midgrey);
font-size: 3rem;
line-height: 1.3em;
font-weight: 400;
}
.error-link {
display: inline-block;
margin-top: 5px;
}
@media (min-width: 940px) {
.error-content .post-card {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
@media (max-width: 800px) {
.error-content {
padding-top: 24vw;
}
.error-code {
font-size: 11.2rem;
}
.error-message {
padding-bottom: 16vw;
}
.error-description {
margin: 5px 0 0 0;
font-size: 1.8rem;
}
}
@media (max-width: 500px) {
.error-content {
padding-top: 28vw;
}
.error-message {
padding-bottom: 14vw;
}
}
/* 10. Subscribe Message and Overlay
/* ---------------------------------------------------------- */
.notification {
visibility: hidden;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 9000;
padding: 22px 60px;
color: #fff;
font-size: 1.6rem;
line-height: 1.3em;
font-weight: 500;
text-align: center;
background: color(var(--green) l(-5%));
transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
transform: translateY(-175%);
}
.subscribe-success .notification-subscribe {
visibility: visible;
transform: translateY(0);
}
.signup-success .notification-signup {
visibility: visible;
transform: translateY(0);
}
.signin-success .notification-signin {
visibility: visible;
transform: translateY(0);
}
.signin-failure .notification-signin-failure {
visibility: visible;
background: color(var(--red) l(-5%));
transform: translateY(0);
}
.checkout-success .notification-checkout {
visibility: visible;
transform: translateY(0);
}
.billing-success .notification-billing-update {
visibility: visible;
transform: translateY(0);
}
.billing-cancel .notification-billing-update-cancel {
visibility: visible;
background: color(var(--red) l(-5%));
transform: translateY(0);
}
.notification.closed {
visibility: hidden;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(-175%);
}
.notification-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
.notification-close:before {
content: "";
position: absolute;
top: 29px;
right: 25px;
display: block;
width: 18px;
height: 2px;
background: #fff;
border-radius: 2px;
transform: rotate(45deg);
}
.notification-close:after {
content: "";
position: absolute;
top: 29px;
right: 25px;
display: block;
width: 18px;
height: 2px;
background: #fff;
border-radius: 2px;
transform: rotate(-45deg);
}
.subscribe-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9000;
display: flex;
justify-content: center;
align-items: center;
background: rgba(9,10,11,0.97);
opacity: 0;
transition: opacity 0.2s ease-in;
pointer-events: none;
backdrop-filter: blur(3px);
}
.subscribe-overlay .subscribe-close:before,
.subscribe-overlay .subscribe-close:after {
top: 36px;
width: 30px;
}
.subscribe-overlay:target {
opacity: 1;
pointer-events: auto;
}
.subscribe-overlay-content {
position: relative;
z-index: 9999;
margin: 0 0 5vw 0;
padding: 4vw;
color: #fff;
text-align: center;
}
.subscribe-overlay .subscribe-form {
border: none;
color: #fff;
background: none;
}
.subscribe-overlay-logo {
position: fixed;
top: 23px;
left: 30px;
height: 30px;
}
.subscribe-overlay-title {
display: inline-block;
margin: 0 0 10px 0;
font-size: 5.2rem;
line-height: 1.15em;
}
.subscribe-overlay-description {
margin: 0 auto 50px;
max-width: 650px;
color: #fff;
font-family: Georgia, serif;
font-size: 2.4rem;
line-height: 1.3em;
font-weight: 300;
opacity: 0.8;
}
.subscribe-overlay form {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 540px;
}
.subscribe-overlay .form-group {
flex-grow: 1;
}
.subscribe-overlay .subscribe-email {
display: block;
padding: 14px 20px;
width: 100%;
border: none;
color: var(--midgrey);
font-size: 2rem;
line-height: 1em;
font-weight: normal;
letter-spacing: 0.5px;
user-select: text;
border-radius: 8px;
transition: border-color 0.15s linear;
-webkit-appearance: none;
}
.subscribe-email:focus {
outline: 0;
border-color: color(var(--lightgrey) l(-2%));
}
.subscribe-overlay button {
display: inline-block;
margin: 0 0 0 15px;
padding: 0 25px;
height: 52px;
outline: none;
color: #fff;
font-size: 1.7rem;
line-height: 38px;
font-weight: 400;
text-align: center;
background: linear-gradient(
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 8px;
-webkit-font-smoothing: subpixel-antialiased;
}
.subscribe-overlay button:active,
.subscribe-overlay button:focus {
background: color(var(--blue) lightness(-9%) saturation(-10%));
}
.subscribe-overlay .loading .button-loader {
top: 5px;
}
/* 11. Site Footer
/* ---------------------------------------------------------- */
.site-footer {
position: relative;
padding-top: 20px;
padding-bottom: 60px;
color: #fff;
background: color(var(--darkgrey) l(-5%));
}
.site-footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
color: rgba(255,255,255,0.7);
font-size: 1.3rem;
}
.site-footer-content a {
color: rgba(255,255,255,0.7);
}
.site-footer-content a:hover {
color: rgba(255,255,255,1);
text-decoration: none;
}
.site-footer .copyright a {
padding: 0 0 0 15px;
}
.site-footer .copyright a:first-child {
padding: 0;
}
@media (max-width: 650px) {
.site-footer-content {
flex-direction: column;
}
.site-footer .copyright {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
/* 12. Members
/* ---------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
display: block;
padding: 0 0.6em;
width: 100%;
height: 44px;
outline: 0;
border: none;
border: solid 1px var(--lightgrey);
color: inherit;
text-decoration: none;
background: #fff;
border-radius: 5px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
border-color: var(--blue);
}
.button {
display: inline-block;
padding: 0 1.8rem;
height: 44px;
border: 0;
font-size: 1.5rem;
line-height: 42px;
font-weight: 600;
text-align: center;
text-decoration: none;
white-space: nowrap;
border-radius: 5px;
cursor: pointer;
transition: 0.4s ease;
appearance: none;
}
.button.fit {
width: 100%;
}
.button.small {
padding: 0 1.1rem;
height: 30px;
font-size: 1.4rem;
line-height: 30px;
}
.button.large {
padding: 0 3rem;
height: calc(44px * 1.14);
font-size: 1.6rem;
line-height: calc(44px * 1.14);
}
.button.disabled,
.button:disabled {
opacity: 0.4;
pointer-events: none;
}
.button {
color: var(--blue);
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--blue);
}
.button:hover {
color: var(--blue);
text-decoration: none;
box-shadow: inset 0 0 0 1px var(--blue);
transition: 0.2s ease;
}
.button.primary {
color: #fff;
background-color: var(--blue);
box-shadow: none;
}
.button.primary:hover {
background-color: var(--blue);
}
.site-signup {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.signup-form {
margin: 0 auto 10vw;
max-width: 500px;
width: 100%;
text-align: center;
}
.signup-title {
margin: 0 0 0.1em;
font-size: 4.2rem;
}
.signup-form p {
color: var(--midgrey);
font-size: 1.3em;
}
.signup-form p small {
display: inline-block;
margin: 15px 0 0 0;
font-size: 1.4rem;
}
.signup-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.signup-box .button {
margin-left: 10px;
}
@media (max-width: 600px) {
.signup-box {
flex-direction: column;
}
.signup-box .button {
margin: 15px 0 0 0;
width: 100%;
}
}
.site-signin {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.signin-form {
margin: 0 auto 10vw;
max-width: 500px;
width: 100%;
text-align: center;
}
.signin-title {
margin: 0 0 0.1em;
font-size: 4.2rem;
}
.signin-form p {
color: var(--midgrey);
font-size: 1.3em;
}
.signin-form p small {
display: inline-block;
margin: 15px 0 0 0;
font-size: 1.4rem;
}
.signin-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.signin-box .button {
margin-left: 10px;
}
@media (max-width: 600px) {
.signin-box {
flex-direction: column;
}
.signin-box .button {
margin: 15px 0 0 0;
width: 100%;
}
}
.checkout-form {
margin: 0 auto 10vw;
max-width: 700px;
width: 100%;
text-align: center;
}
.checkout-title {
margin: 0 auto 10px;
padding: 5vw 0 0;
font-size: 4rem;
font-weight: 600;
letter-spacing: -0.6px;
}
.checkout-form p {
margin: 0 auto 60px;
max-width: 500px;
color: var(--midgrey);
font-size: 1.3em;
}
.checkout-box {
display: flex;
justify-content: center;
align-items: stretch;
}
.checkout-plan {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 30px;
border-top: var(--blue) 6px solid;
color: color(var(--midgrey) l(-30%));
text-align: left;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(39,44,49,0.03), 0 0 3px rgba(39,44,49,0.05), 0 5px 22px -10px rgba(39,44,49,0.12), 0 25px 30px -25px rgba(39,44,49,0.05);
}
.checkout-plan + .checkout-plan {
margin-left: 30px;
}
.checkout-plan-header {
position: relative;
padding: 0 0 50px;
color: var(--midgrey);
text-align: center;
}
.checkout-plan-header:after {
content: "";
position: absolute;
right: 30%;
bottom: 25px;
left: 30%;
display: block;
height: 2px;
background: rgba(39,44,49,0.08);
border-radius: 2px;
}
.checkout-plan-header h3 {
margin: 0 0 25px 0;
color: var(--darkgrey);
font-size: 1.8rem;
line-height: 1.15em;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.checkout-plan-header span {
font-size: 2.6rem;
font-weight: 300;
}
.checkout-plan-header strong {
color: var(--darkgrey);
font-size: 4.5rem;
font-weight: 500;
}
.checkout-plan-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.checkout-plan-content ul {
margin: 0;
padding: 0;
list-style: none;
}
.checkout-plan-content li {
position: relative;
margin: 0;
padding: 0 0 15px 20px;
line-height: 1.4em;
}
.checkout-plan-content li:before {
content: "✓";
position: absolute;
left: 0;
display: block;
color: color(var(--green) l(-5%));
font-size: 1.6rem;
font-weight: 600;
}
.checkout-plan-content .button {
margin: 20px 0 0 0;
}
@media (max-width: 740px) {
.checkout-title {
margin-top: 50px;
}
.checkout-box {
flex-direction: column;
}
.checkout-plan + .checkout-plan {
margin: 5vw 0 0 0;
}
}
form[data-members-form] .button-loader,
form[data-members-form] .message-success,
form[data-members-form] .message-error {
display: none;
}
.message-success svg,
.message-error svg {
position: relative;
top: -1px;
margin-right: 5px;
width: 15px;
height: 15px;
}
.message-success svg {
fill: #fff;
}
.message-error svg {
fill: var(--red);
}
form[data-members-form].success .message-success,
form[data-members-form].error .message-error {
position: fixed;
top: 84px;
right: 20px;
left: 20px;
z-index: 9999;
margin: 0 auto;
padding: 10px 0;
color: #fff;
font-size: 1.4rem;
line-height: 1.5em;
font-weight: 500;
text-align: center;
background: color(var(--green) l(-5%));
border-radius: 5px;
}
form[data-members-form].success .message-success {
background: color(var(--green) l(-5%));
}
form[data-members-form].error .message-error {
color: var(--red);
background: #fff;
box-shadow: var(--red) 0 0 0 1px;
}
form[data-members-form] .button {
position: relative;
}
/*-- Loading --*/
/* Hide button text */
form[data-members-form].loading .button-content {
visibility: hidden;
}
/* Show loading spinner */
form[data-members-form].loading .button-loader {
position: absolute;
left: 50%;
display: inline-block;
margin-left: -19px;
height: 31px;
transform: scale(0.7);
}
.button-loader svg path,
.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;
}
.site-account {
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 5vw;
}
.subscriber-box {
margin: 0 auto;
max-width: 560px;
width: 100%;
}
.subscriber-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.subscription-title h1 {
margin-bottom: 12px;
font-size: 3.4rem;
}
.subscriber-avatar {
position: relative;
flex: 1 0 120px;
width: 120px;
height: 120px;
border: 1px solid color(var(--lightgrey) l(+10%));
background: color(var(--lightgrey) l(+10%));
border-radius: 100%;
object-fit: cover;
}
.subscription .subscriber-avatar {
margin: 4px 0 0 20px;
}
.subscriber-avatar img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 100%;
}
.subscriber-box p {
line-height: 1.5em;
}
.subscription {
padding: 20px 0 40px;
}
.subscription-expiration-warning {
color: var(--red);
}
.subscriber-details {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 30px;
padding: 20px 0 0;
border-top: 1px solid color(var(--lightgrey) l(+10%));
border-bottom: 1px solid color(var(--lightgrey) l(+10%));
}
.subscriber-detail {
flex: 1 0 50%;
display: flex;
flex-direction: column;
margin: 0 0 20px;
padding: 0 20px 0 0;
}
.subscriber-detail-label {
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
}
.subscription-actions {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.subscription-actions li {
margin: 0 0.8rem 0 0;
padding: 0;
}
.subscription-actions li:last-of-type {
margin-right: 0;
}
.subscription-actions li a {
display: inline-block;
padding: 0 1.8rem;
height: 44px;
border: 0;
color: var(--blue);
font-size: 1.5rem;
line-height: 42px;
font-weight: 600;
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 5px;
box-shadow: inset 0 0 0 1px var(--blue);
cursor: pointer;
transition: 0.4s ease;
appearance: none;
}
.subscription-actions li a:hover {
color: var(--blue);
text-decoration: none;
text-decoration: none;
box-shadow: var(--blue);
transition: 0.2s ease;
}
.subscription-actions .gh-subscription-cancel {
color: color(var(--midgrey) l(+10%));
box-shadow: inset 0 0 0 1px color(var(--midgrey) l(+10%));
}
.subscription-actions .gh-subscription-cancel:hover {
color: var(--midgrey);
box-shadow: inset 0 0 0 1px var(--midgrey);
}
.gh-subscription-cancel[data-members-continue-subscription] {
color: #fff;
background-color: var(--blue);
box-shadow: none;
}
.gh-subscription-cancel[data-members-continue-subscription]:hover {
color: #fff;
background-color: var(--blue);
box-shadow: none;
}
.gh-error-subscription-cancel {
display: block;
margin-top: 10px;
color: var(--red);
font-size: 1.5rem;
}
.account-box {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: 560px;
width: 100%;
}
.account-box-title {
margin-top: 20px;
font-size: 3.4rem;
text-align: center;
}
.account-box p {
text-align: center;
}
.header-cta {
margin-left: 20px;
}
.post-card-header-tags {
display: flex;
align-items: center;
margin: 0 0 0.2em;
}
.post-visibility {
display: inline-block;
margin: 0 8px 1px 0;
padding: 1px 5px;
border: var(--lightgrey) 1px solid;
color: var(--midgrey);
font-size: 1.2rem;
line-height: 1.4em;
border-radius: 4px;
}
.post-visibility-members,
.post-visibility-paid {
display: none;
}
.post-upgrade-cta {
display: flex;
flex-direction: column;
align-items: center;
}
.post-upgrade-cta-content {
margin: 0 5vw;
padding: 40px 30px;
max-width: 840px;
width: 90vw;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
text-align: center;
background: var(--blue);
border-radius: 5px;
}
.post-upgrade-cta-content h2 {
margin: 0;
color: #fff;
font-size: 2.6rem;
font-weight: 600;
letter-spacing: -0.5px;
}
.post-upgrade-cta .button,
.post-upgrade-cta .button:hover {
margin: 30px 0;
color: var(--blue);
text-decoration: none;
background: #fff;
box-shadow: none;
}
.post-upgrade-cta p {
margin: 0;
}
.post-upgrade-cta a,
.post-upgrade-cta a:hover {
color: #fff;
text-decoration: underline;
box-shadow: none !important;
}
@media (max-width: 600px) {
.subscriber-details {
flex-direction: column;
}
.subscriber-avatar {
display: none;
}
}
/* 13. Dark Mode
/* ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
body {
color: rgba(255, 255, 255, 0.80);
background: var(--darkmode);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
}
img {
opacity: 0.9;
}
.site-header-background:before {
background: rgba(0,0,0,0.6);
}
.post-feed {
background: var(--darkmode);
}
.post-card,
.post-card:hover {
border-bottom-color: color(var(--darkmode) l(+8%));
}
.post-visibility {
color: var(--lightgrey);
}
.author-profile-image {
background: color(var(--darkmode) l(+5%));
}
.post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
}
.post-card-byline-content a:hover {
color: #fff;
}
.post-card-image {
background: var(--darkmode);
}
.post-card-title {
color: rgba(255, 255, 255, 0.85);
}
.post-card-excerpt {
color: color(var(--midgrey) l(+10%));
}
.author-avatar,
.static-avatar {
border-color: color(var(--darkgrey) l(+2%));
}
.site-main,
.post-template .site-main,
.page-template .site-main {
background: var(--darkmode);
}
.post-full-content {
background: var(--darkmode);
}
.post-full-title {
color: rgba(255, 255, 255, 0.9);
}
.post-full-custom-excerpt {
color: color(var(--midgrey) l(+10%));
}
.post-full-image {
background-color: color(var(--darkmode) l(+8%));
}
.post-full-byline {
border-top-color: color(var(--darkmode) l(+15%));
}
.post-full-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75);
}
.post-full-byline-meta h4 a:hover {
color: #fff;
}
.author-list-item .author-card {
background: color(var(--darkmode) l(+4%));
box-shadow: 0 12px 26px rgba(0,0,0,0.4);
}
.author-list-item .author-card:before {
border-top-color: color(var(--darkmode) l(+4%));
}
.no-image .author-social-link a {
color: rgba(255, 255, 255, 0.75);
}
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h6 {
color: rgba(255, 255, 255, 0.9);
}
.post-full-content a {
color: #fff;
box-shadow: inset 0 -1px 0 #fff;
}
.post-full-content strong {
color: #fff;
}
.post-full-content em {
color: #fff;
}
.post-full-content code {
color: #fff;
background: #000;
}
hr {
border-top-color: color(var(--darkmode) l(+8%));
}
.post-full-content hr:after {
background: color(var(--darkmode) l(+8%));
box-shadow: var(--darkmode) 0 0 0 5px;
}
.post-full-content figcaption {
color: rgba(255, 255, 255, 0.6);
}
.post-full-content table td:first-child {
background-image: linear-gradient(to right, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
}
.post-full-content table td:last-child {
background-image: linear-gradient(to left, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
}
.post-full-content table th {
color: rgba(255, 255, 255, 0.85);
background-color: color(var(--darkmode) l(+8%));
}
.post-full-content table th,
.post-full-content table td {
border: color(var(--darkmode) l(+8%)) 1px solid;
}
.post-full-content .kg-bookmark-container {
color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.kg-bookmark-title {
color: #fff;
}
.kg-bookmark-description {
color: rgba(255, 255, 255, 0.75);
}
.kg-bookmark-metadata {
color: rgba(255, 255, 255, 0.75);
}
.site-archive-header .no-image {
color: rgba(255, 255, 255, 0.9);
background: var(--darkmode);
}
.site-archive-header .no-image .site-header-content {
border-bottom-color: color(var(--darkmode) l(+15%));
}
.site-header-content .author-profile-image {
box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
}
.subscribe-form {
border: none;
background: linear-gradient(color(var(--darkmode) l(-6%)), color(var(--darkmode) l(-3%)));
}
.subscribe-form-title {
color: rgba(255, 255, 255, 0.9);
}
.subscribe-form p {
color: rgba(255, 255, 255, 0.7);
}
.subscribe-email {
border-color: color(var(--darkmode) l(+6%));
color: rgba(255, 255, 255, 0.9);
background: color(var(--darkmode) l(+3%));
}
.subscribe-email:focus {
border-color: color(var(--darkmode) l(+25%));
}
.subscribe-form button {
opacity: 0.9;
}
.subscribe-form .invalid .message-error,
.subscribe-form .error .message-error {
color: color(var(--red) l(+5%) s(-5%));
}
.subscribe-form .success .message-success {
color: color(var(--green) l(+5%) s(-5%));
}
.account-menu-avatar {
background: color(var(--darkmode) l(+5%));
}
.account-menu-avatar img {
opacity: 1.0;
}
.account-menu ul {
background: color(var(--darkmode) l(+4%));
box-shadow: 0 12px 26px rgba(0,0,0,0.4);
}
.account-menu ul::before {
border-color: transparent transparent color(var(--darkmode) l(+4%));
}
.account-menu .account-info {
border-color: color(var(--darkmode) l(+10%));
}
.account-menu .account-email,
.account-menu ul a {
color: rgba(255, 255, 255, 0.9);
}
.subscriber-avatar {
border-color: color(var(--darkmode) l(+5%));
background: color(var(--darkmode) l(+5%));
}
.subscriber-avatar img {
opacity: 1.0;
}
.subscriber-details {
border-color: color(var(--darkmode) l(+5%));
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
color: var(--darkgrey);
}
}
================================================
FILE: assets/js/infinitescroll.js
================================================
/**
* Infinite Scroll
*/
(function(window, document) {
// next link element
var nextElement = document.querySelector('link[rel=next]');
if (!nextElement) return;
// post feed element
var feedElement = document.querySelector('.post-feed');
if (!feedElement) return;
var buffer = 300;
var ticking = false;
var loading = false;
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = document.documentElement.scrollHeight;
function onPageLoad() {
if (this.status === 404) {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
return;
}
// append contents
var postElements = this.response.querySelectorAll('.post-card');
postElements.forEach(function (item) {
feedElement.appendChild(item);
});
// set next link
var resNextElement = this.response.querySelector('link[rel=next]');
if (resNextElement) {
nextElement.href = resNextElement.href;
} else {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
}
// sync status
lastDocumentHeight = document.documentElement.scrollHeight;
ticking = false;
loading = false;
}
function onUpdate() {
// return if already loading
if (loading) return;
// return if not scroll to the bottom
if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
ticking = false;
return;
}
loading = true;
var xhr = new window.XMLHttpRequest();
xhr.responseType = 'document';
xhr.addEventListener('load', onPageLoad);
xhr.open('GET', nextElement.href);
xhr.send(null);
}
function requestTick() {
ticking || window.requestAnimationFrame(onUpdate);
ticking = true;
}
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = document.documentElement.scrollHeight;
requestTick();
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize);
requestTick();
})(window, document);
================================================
FILE: assets/js/jquery.fitvids.js
================================================
/*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 );
================================================
FILE: author.hbs
================================================
{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{#author}}
{{!-- Everything inside the #author tags pulls data from the author --}}
<header class="site-archive-header">
{{> site-header}}
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="inner">
<div class="site-header-content author-header">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{else}}
<span class="author-profile-image">{{> "icons/avatar"}}</span>
{{/if}}
<div class="author-header-content">
<h1 class="site-title">{{name}}</h1>
{{#if bio}}
<h2 class="author-bio">{{bio}}</h2>
{{/if}}
<div class="author-meta">
{{#if location}}
<div class="author-location">{{location}}</div>
{{/if}}
<div class="author-stats">
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
</div>
{{#if website}}
<span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
{{/if}}
{{#if twitter}}
<span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
{{/if}}
{{#if facebook}}
<span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</header>
{{/author}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</main>
================================================
FILE: default.hbs
================================================
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
{{!-- Document Settings --}}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{{!-- Base Meta --}}
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="site-wrapper">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
{{!-- The footer at the very bottom of the screen --}}
<footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright">
<a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}
<a href="{{@site.url}}">Home</a>
<a href="{{@site.url}}/signup">Signup</a>
{{#if @site.secondary_navigation}}
{{navigation type="secondary"}}
{{/if}}
{{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
{{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
</section>
<nav class="site-footer-nav">
Published with
<a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
</nav>
</div>
</footer>
</div>
{{> "notifications"}}
<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%';
});
</script>
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></script>
<script src="{{asset "built/infinitescroll.js"}}"></script>
{{!-- Scripts for Members subscription --}}
<script>
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var action = getParameterByName('action');
var stripe = getParameterByName('stripe');
var success = getParameterByName('success');
$(document).ready(function () {
if (action == 'subscribe') {
$('body').addClass("subscribe-success");
}
if (action == 'signup') {
window.location = '{{@site.url}}/signup/?action=checkout';
}
if (action == 'checkout') {
$('body').addClass("signup-success");
}
// Success === null is here for backwards compatibility, can be removed shortly
if (action == 'signin' && (success === null || success === 'true')) {
$('body').addClass("signin-success");
}
if (action == 'signin' && success === 'false') {
$('body').addClass("signin-failure");
}
if (stripe == 'success') {
$('body').addClass("checkout-success");
}
if (stripe == 'billing-update-success') {
$('body').addClass("billing-success");
}
if (stripe == 'billing-update-cancel') {
$('body').addClass("billing-cancel");
}
$('.notification-close').click(function () {
$(this).parent().addClass('closed');
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?"));
window.history.replaceState({}, document.title, clean_uri);
}
});
// Reset form on opening subscrion overlay
$('.subscribe-button').click(function() {
$('.subscribe-overlay form').removeClass();
$('.subscribe-email').val('');
});
// Account navigation menu
$('.account-menu-avatar').click(function(event) {
$(this).toggleClass('active');
event.stopPropagation();
});
$('.account-menu-dropdown').click(function(event) {
event.stopPropagation();
});
$('body').click(function () {
$('.account-menu-avatar').removeClass('active');
});
});
</script>
{{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
{{{block "scripts"}}}
{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
{{ghost_foot}}
</body>
</html>
================================================
FILE: error-404.hbs
================================================
{{!--
This error template is used for all 404 errors, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
--}}
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<header class="site-header">
{{> site-header}}
</header>
<main id="site-main" class="site-main outer error-content">
<div class="inner">
<section class="error-message">
<h1 class="error-code">{{statusCode}}</h1>
<p class="error-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</section>
{{#get "posts" limit="3" include="authors,tags"}}
<div class="post-feed">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
</div>
{{/get}}
</div>
</main>
================================================
FILE: error.hbs
================================================
{{!--
This error template is used for all 400/500 errors, except 404, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
You'll notice that we *don't* use any JavaScript, or ghost_head / ghost_foot in this file.
--}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
</head>
<body>
<div class="site-wrapper">
<header class="site-header no-image">
<div class="site-nav-main outer">
<div class="inner">
<nav class="site-nav-center">
{{#if @site.logo}}
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}"
alt="{{@site.title}}" /></a>
{{else}}
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}}
</nav>
</div>
</div>
</header>
<main id="site-main" class="site-main outer error-content">
<div class="inner">
<section class="error-message">
<h1 class="error-code">{{statusCode}}</h1>
<p class="error-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</section>
{{#if errorDetails}}
<section class="error-stack">
<h3>Theme errors</h3>
<ul class="error-stack-list">
{{#foreach errorDetails}}
<li>
<em class="error-stack-function">{{{rule}}}</em>
{{#foreach failures}}
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
<p><span class="error-stack-file">Message: {{message}}</span></p>
{{/foreach}}
</li>
{{/foreach}}
</ul>
</section>
{{/if}}
</div>
</main>
</div>
</body>
</html>
================================================
FILE: gulpfile.js
================================================
const {series, watch, src, dest, parallel} = require('gulp');
const pump = require('pump');
// gulp plugins and utils
const livereload = require('gulp-livereload');
const postcss = require('gulp-postcss');
var zipModule;
const uglify = require('gulp-uglify');
const beeper = require('beeper');
const fs = require('fs');
// postcss plugins
const autoprefixer = require('autoprefixer');
const colorFunction = require('postcss-color-function');
const cssnano = require('cssnano');
const customProperties = require('postcss-custom-properties');
const 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', 'partials/**/*.hbs', 'members/**/*.hbs']),
livereload()
], handleError(done));
}
function css(done) {
const processors = [
easyimport,
customProperties({preserve: false}),
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));
}
async function zipper(done) {
if (!zipModule) { zipModule = (await import('gulp-zip')).default; }
const targetDir = 'dist/';
const themeName = require('./package.json').name;
const filename = themeName + '.zip';
pump([
src([
'**',
'!node_modules', '!node_modules/**',
'!dist', '!dist/**'
]),
zipModule(filename),
dest(targetDir)
], handleError(done));
}
const cssWatcher = () => watch('assets/css/**', css);
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs', 'members/**/*.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;
// release imports
const path = require('path');
const releaseUtils = require('@tryghost/release-utils');
let config;
try {
config = require('./config');
} catch (err) {
config = null;
}
const REPO = 'TryGhost/Casper';
const USER_AGENT = 'Casper';
const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
const changelog = ({previousVersion}) => {
const changelog = new releaseUtils.Changelog({
changelogPath: CHANGELOG_PATH,
folder: path.join(process.cwd(), '.')
});
changelog
.write({
githubRepoPath: `https://github.com/${REPO}`,
lastVersion: previousVersion
})
.sort()
.clean();
};
const previousRelease = () => {
return releaseUtils
.releases
.get({
userAgent: USER_AGENT,
uri: `https://api.github.com/repos/${REPO}/releases`
})
.then((response) => {
if (!response || !response.length) {
console.log('No releases found. Skipping');
return;
}
let prevVersion = response[0].tag_name || response[0].name;
console.log(`Previous version ${prevVersion}`);
return prevVersion;
});
};
/**
*
* `yarn ship` will trigger `postship` task.
*
* [optional] For full automation
*
* `GHOST=2.10.1,2.10.0 yarn ship`
* First value: Ships with Ghost
* Second value: Compatible with Ghost/GScan
*
* You can manually run in case the task has thrown an error.
*
* `npm_package_version=0.5.0 gulp release`
*/
const release = () => {
// @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
// require(./package.json) can run into caching issues, this re-reads from file everytime on release
var packageJSON = JSON.parse(fs.readFileSync('./package.json'));
const newVersion = packageJSON.version;
let shipsWithGhost = '{version}';
let compatibleWithGhost = '2.10.0';
const ghostEnvValues = process.env.GHOST || null;
if (ghostEnvValues) {
shipsWithGhost = ghostEnvValues.split(',')[0];
compatibleWithGhost = ghostEnvValues.split(',')[1];
if (!compatibleWithGhost) {
compatibleWithGhost = '2.10.0';
}
}
if (!newVersion || newVersion === '') {
console.log('Invalid version.');
return;
}
console.log(`\nDraft release for ${newVersion}.`);
if (!config || !config.github || !config.github.username || !config.github.token) {
console.log('Please copy config.example.json and configure Github token.');
return;
}
return previousRelease()
.then((previousVersion) => {
changelog({previousVersion});
return releaseUtils
.releases
.create({
draft: true,
preRelease: false,
tagName: newVersion,
releaseName: newVersion,
userAgent: USER_AGENT,
uri: `https://api.github.com/repos/${REPO}/releases`,
github: {
username: config.github.username,
token: config.github.token
},
content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`],
changelogPath: CHANGELOG_PATH
})
.then((response) => {
console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
});
});
};
exports.release = release;
================================================
FILE: index.hbs
================================================
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<header class="site-home-header">
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="inner">
{{> "site-nav"}}
<div class="site-header-content">
<h1 class="site-title">
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
{{/if}}
</h1>
<h2 class="site-description">{{@site.description}}</h2>
</div>
</div>
</div>
</header>
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</main>
{{> site-header}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
// NOTE: Scroll performance is poor in Safari
// - this appears to be due to the events firing much more slowly in Safari.
// Dropping the scroll event and using only a raf loop results in smoother
// scrolling but continuous processing even when not scrolling
$(document).ready(function () {
var nav = document.querySelector('.site-nav-main .site-nav');
var feed = document.querySelector('.post-feed');
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = $(document).height();
var ticking = false;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = $(document).height();
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
var trigger = feed.getBoundingClientRect().top + window.scrollY;
var progressMax = lastDocumentHeight - lastWindowHeight;
// show/hide nav
if (lastScrollY >= trigger - 20) {
nav.classList.add('fixed-nav-active');
} else {
nav.classList.remove('fixed-nav-active');
}
ticking = false;
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, false);
update();
});
</script>
{{/contentFor}}
================================================
FILE: members/account.hbs
================================================
{{!< ../default}}
<header class="site-header">
{{> site-header}}
</header>
<main id="site-main" class="site-main site-account outer">
<div class="inner">
{{#if @member.paid}}
{{!-- Logged in, paying member: Show account info --}}
<div class="subscriber-box">
{{#foreach @member.subscriptions}}
<div class="subscription">
<div class="subscriber-header">
<div class="subscription-title">
{{#if @first}}
<h1>Your account</h1>
{{/if}}
{{#if cancel_at_period_end}}
<p>
<strong class="subscription-expiration-warning">Your subscription will expire on {{date current_period_end format="DD MMM YYYY"}}.</strong> If you change your mind in the meantime you can turn auto-renew back on to continue your subscription.
</p>
{{else}}
<p>
Hey! You have an active <strong>{{@site.title}}</strong> account with access to all areas. Get in touch if have any problems or need some help getting things updated, and thanks for subscribing.
</p>
{{/if}}
</div>
{{#if @first}}
<div class="subscriber-avatar">
{{> "icons/avatar"}}
{{#if @member.avatar_image}}
<img src="{{@member.avatar_image}}" />
{{/if}}
</div>
{{/if}}
</div>
<div class="subscriber-details">
<div class="subscriber-detail">
<label class="subscriber-detail-label">Email address</label>
<span class="subscriber-detail-content">{{@member.email}}</span>
</div>
<div class="subscriber-detail">
<label class="subscriber-detail-label">Your plan</label>
<span class="subscriber-detail-content">{{price plan}}/{{plan.interval}}</span>
</div>
<div class="subscriber-detail">
<label class="subscriber-detail-label">Card</label>
<span class="subscriber-detail-content">**** **** **** {{default_payment_card_last4}}</span>
</div>
<div class="subscriber-detail">
<label class="subscriber-detail-label">
{{#if cancel_at_period_end}}
Expires
{{else}}
Next bill date
{{/if}}
</label>
<span class="subscriber-detail-content">{{date current_period_end format="DD MMM YYYY"}}</span>
</div>
</div>
<ul class="subscription-actions">
<li><a href="javascript:"
data-members-edit-billing
data-members-success="{{@site.url}}/account/?stripe=billing-update-success"
data-members-cancel="{{@site.url}}/account/?stripe=billing-update-cancel">Edit billing info</a></li>
<li>{{cancel_link}}</li>
</ul>
</div>
{{/foreach}}
</div>
{{else if @member}}
{{!-- Logged in, not paying: Link to checkout --}}
<div class="account-box">
<div class="subscriber-avatar">
{{> "icons/avatar"}}
{{#if @member.avatar_image}}
<img src="{{@member.avatar_image}}" />
{{/if}}
</div>
<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="{{@site.url}}/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>
</main>
================================================
FILE: members/signin.hbs
================================================
{{!< ../default}}
<header class="site-header">
{{> site-header}}
</header>
<main id="site-main" class="site-main site-signin outer">
<div class="inner">
{{#if @member}}
{{!-- Logged in: Redirect home --}}
<script>window.location = '{{@site.url}}';</script>
{{else}}
{{!-- Not logged in: Signin form --}}
<form class="signin-form" data-members-form="signin">
<h1 class="signin-title">Welcome back!</h1>
<p>Sign into your account again for full access</p>
<div class="signin-box">
<input data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" />
<button class="button primary" type="submit">
<span class="button-content">Send login link</span>
<span class="button-loader">{{> "icons/loader"}}</span>
</button>
</div>
<p><small>Don't have an account yet? <a href="{{@site.url}}/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>
</main>
================================================
FILE: members/signup.hbs
================================================
{{!< ../default}}
<header class="site-header">
{{> site-header}}
</header>
<main id="site-main" class="site-main site-signup outer">
<div class="inner">
{{#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="checkout-form">
<h1 class="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="checkout-box">
<div class="checkout-plan">
<header class="checkout-plan-header">
<h3>Monthly</h3>
<strong>{{price currency=@price.currency}}{{@price.monthly}}</strong> / month
</header>
<div class="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>
gitextract_a5zl5m5z/ ├── .editorconfig ├── .github/ │ └── workflows/ │ ├── deploy-theme.yml │ └── test.yml ├── .gitignore ├── LICENSE ├── README.md ├── assets/ │ ├── built/ │ │ ├── global.css │ │ ├── infinitescroll.js │ │ ├── jquery.fitvids.js │ │ └── screen.css │ ├── css/ │ │ ├── .csscomb.json │ │ ├── csscomb.json │ │ ├── global.css │ │ └── screen.css │ └── js/ │ ├── infinitescroll.js │ └── jquery.fitvids.js ├── author.hbs ├── default.hbs ├── error-404.hbs ├── error.hbs ├── gulpfile.js ├── index.hbs ├── members/ │ ├── account.hbs │ ├── signin.hbs │ └── signup.hbs ├── package.json ├── page.hbs ├── partials/ │ ├── byline-multiple.hbs │ ├── byline-single.hbs │ ├── content-cta.hbs │ ├── header-background.hbs │ ├── icons/ │ │ ├── avatar.hbs │ │ ├── facebook.hbs │ │ ├── ghost-logo.hbs │ │ ├── infinity.hbs │ │ ├── loader.hbs │ │ ├── location.hbs │ │ ├── point.hbs │ │ ├── rss.hbs │ │ └── twitter.hbs │ ├── navigation.hbs │ ├── notifications.hbs │ ├── post-card.hbs │ ├── site-header.hbs │ ├── site-nav.hbs │ └── subscribe-form.hbs ├── post.hbs ├── renovate.json ├── routes.yaml └── tag.hbs
SYMBOL INDEX (18 symbols across 3 files)
FILE: assets/built/infinitescroll.js
function v (line 1) | function v(){if(404===this.status)return n.removeEventListener("scroll",...
function e (line 1) | function e(){var e;s||(l+c<=u-o?i=!1:(s=!0,(e=new n.XMLHttpRequest).resp...
function a (line 1) | function a(){i||n.requestAnimationFrame(e),i=!0}
function m (line 1) | function m(){l=n.scrollY,a()}
function f (line 1) | function f(){c=n.innerHeight,u=t.documentElement.scrollHeight,a()}
FILE: assets/js/infinitescroll.js
function onPageLoad (line 23) | function onPageLoad() {
function onUpdate (line 51) | function onUpdate() {
function requestTick (line 72) | function requestTick() {
function onScroll (line 77) | function onScroll() {
function onResize (line 82) | function onResize() {
FILE: gulpfile.js
function serve (line 19) | function serve(done) {
function hbs (line 33) | function hbs(done) {
function css (line 40) | function css(done) {
function js (line 57) | function js(done) {
function zipper (line 66) | async function zipper(done) {
constant REPO (line 104) | const REPO = 'TryGhost/Casper';
constant USER_AGENT (line 105) | const USER_AGENT = 'Casper';
constant CHANGELOG_PATH (line 106) | const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
Condensed preview — 50 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (246K chars).
[
{
"path": ".editorconfig",
"chars": 253,
"preview": "# http://editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 4\nend_of_line = lf\ninsert"
},
{
"path": ".github/workflows/deploy-theme.yml",
"chars": 404,
"preview": "name: Deploy Theme\non:\n push:\n branches:\n - main\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - "
},
{
"path": ".github/workflows/test.yml",
"chars": 507,
"preview": "name: Test\non:\n pull_request:\n push:\n branches:\n - main\njobs:\n build:\n runs-on: ubuntu-latest\n strategy"
},
{
"path": ".gitignore",
"chars": 165,
"preview": "b-cov\n*.seed\n*.log\n*.csv\n*.dat\n*.out\n*.pid\n*.gz\n\npids\nlogs\nresults\n\nnpm-debug.log\nnode_modules\npackage-lock.json\n\n.idea/"
},
{
"path": "LICENSE",
"chars": 1065,
"preview": "Copyright (c) 2013-2026 Ghost Foundation\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy o"
},
{
"path": "README.md",
"chars": 2949,
"preview": "# Lyra\n\nA paid-members publication for Ghost. Can be used with no code knowledge required.\n\n# Installation instructions\n"
},
{
"path": "assets/built/global.css",
"chars": 4349,
"preview": "a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl"
},
{
"path": "assets/built/infinitescroll.js",
"chars": 1000,
"preview": "!function(n,t){var r,o,i,s,l,c,u,d=t.querySelector(\"link[rel=next]\");function v(){if(404===this.status)return n.removeEv"
},
{
"path": "assets/built/jquery.fitvids.js",
"chars": 1898,
"preview": "!function(o){\"use strict\";o.fn.fitVids=function(t){var e,i,d={customSelector:null,ignore:null};return document.getElemen"
},
{
"path": "assets/built/screen.css",
"chars": 55785,
"preview": "a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl"
},
{
"path": "assets/css/.csscomb.json",
"chars": 6072,
"preview": "{\n \"remove-empty-rulesets\": true,\n \"always-semicolon\": true,\n \"color-case\": \"lower\",\n \"block-indent\": \" \""
},
{
"path": "assets/css/csscomb.json",
"chars": 6156,
"preview": "{\n \"remove-empty-rulesets\": true,\n \"always-semicolon\": true,\n \"color-case\": \"lower\",\n \"block-indent\": \" \""
},
{
"path": "assets/css/global.css",
"chars": 6678,
"preview": "/* Variables\n/* ---------------------------------------------------------- */\n\n:root {\n /* Colours */\n --blue: var"
},
{
"path": "assets/css/screen.css",
"chars": 75011,
"preview": "/* Table of Contents\n/* ------------------------------------------------------------\n\nThis is a development CSS file whi"
},
{
"path": "assets/js/infinitescroll.js",
"chars": 2474,
"preview": "/**\n * Infinite Scroll\n */\n\n(function(window, document) {\n // next link element\n var nextElement = document.queryS"
},
{
"path": "assets/js/jquery.fitvids.js",
"chars": 3446,
"preview": "/*jshint browser:true */\n/*!\n* FitVids 1.3\n*\n*\n* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation\n* This is"
},
{
"path": "author.hbs",
"chars": 2480,
"preview": "{{!< default}}\n{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --"
},
{
"path": "default.hbs",
"chars": 6101,
"preview": "<!DOCTYPE html>\n<html lang=\"{{@site.locale}}\">\n<head>\n\n {{!-- Document Settings --}}\n <meta charset=\"utf-8\" />\n "
},
{
"path": "error-404.hbs",
"chars": 946,
"preview": "{{!--\nThis error template is used for all 404 errors, which might occur on your site.\nIt's a good idea to keep this temp"
},
{
"path": "error.hbs",
"chars": 2561,
"preview": "{{!--\nThis error template is used for all 400/500 errors, except 404, which might occur on your site.\nIt's a good idea t"
},
{
"path": "gulpfile.js",
"chars": 5955,
"preview": "const {series, watch, src, dest, parallel} = require('gulp');\nconst pump = require('pump');\n\n// gulp plugins and utils\nc"
},
{
"path": "index.hbs",
"chars": 3071,
"preview": "{{!< default}}\n{{!-- The tag above means: insert everything in this file\ninto the {body} of the default.hbs template --}"
},
{
"path": "members/account.hbs",
"chars": 4894,
"preview": "{{!< ../default}}\n\n<header class=\"site-header\">\n {{> site-header}}\n</header>\n<main id=\"site-main\" class=\"site-main si"
},
{
"path": "members/signin.hbs",
"chars": 1312,
"preview": "{{!< ../default}}\n\n<header class=\"site-header\">\n {{> site-header}}\n</header>\n<main id=\"site-main\" class=\"site-main si"
},
{
"path": "members/signup.hbs",
"chars": 3427,
"preview": "{{!< ../default}}\n\n<header class=\"site-header\">\n {{> site-header}}\n</header>\n<main id=\"site-main\" class=\"site-main si"
},
{
"path": "package.json",
"chars": 1998,
"preview": "{\n \"name\": \"lyra\",\n \"description\": \"A premium publication theme for Ghost.\",\n \"demo\": \"https://lyra.ghost.io\",\n \"ver"
},
{
"path": "page.hbs",
"chars": 2347,
"preview": "{{!< default}}\n{{!-- The tag above means: insert everything in this file\ninto the {body} of the default.hbs template --}"
},
{
"path": "partials/byline-multiple.hbs",
"chars": 2264,
"preview": "<section class=\"post-full-authors\">\n\n <div class=\"post-full-authors-content\">\n <p>This post was a collaboratio"
},
{
"path": "partials/byline-single.hbs",
"chars": 764,
"preview": "{{!-- Everything inside the #author tags pulls data from the author --}}\n{{#primary_author}}\n\n<section class=\"author-car"
},
{
"path": "partials/content-cta.hbs",
"chars": 433,
"preview": "{{{html}}}\n\n<aside class=\"post-upgrade-cta\">\n <div class=\"post-upgrade-cta-content\">\n {{#if @member}}\n "
},
{
"path": "partials/header-background.hbs",
"chars": 1812,
"preview": "{{!--\nWow what the hell is going on in here even?\n\nOk so, several templates use this big header with a giant BG image. N"
},
{
"path": "partials/icons/avatar.hbs",
"chars": 308,
"preview": "<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."
},
{
"path": "partials/icons/facebook.hbs",
"chars": 350,
"preview": "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.8"
},
{
"path": "partials/icons/ghost-logo.hbs",
"chars": 3345,
"preview": "<svg class=\"ghost-svg\" viewBox=\"0 0 493 161\" xmlns=\"http://www.w3.org/2000/svg\"><title>Ghost Logo</title><g fill=\"none\" "
},
{
"path": "partials/icons/infinity.hbs",
"chars": 196,
"preview": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5"
},
{
"path": "partials/icons/loader.hbs",
"chars": 923,
"preview": "<svg version=\"1.1\" id=\"loader-1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n "
},
{
"path": "partials/icons/location.hbs",
"chars": 329,
"preview": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke=\"#000\" stroke-linecap=\"round\" "
},
{
"path": "partials/icons/point.hbs",
"chars": 311,
"preview": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 "
},
{
"path": "partials/icons/rss.hbs",
"chars": 263,
"preview": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"6.18\" cy=\"17.82\" r=\"2.18\"/><path d=\"M4 4.44v2.83"
},
{
"path": "partials/icons/twitter.hbs",
"chars": 888,
"preview": "<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.7"
},
{
"path": "partials/navigation.hbs",
"chars": 493,
"preview": "{{#if isSecondary}}\n {{!-- secondary navigation --}}\n {{#foreach navigation}}\n <a class=\"{{link_cla"
},
{
"path": "partials/notifications.hbs",
"chars": 1207,
"preview": "<div class=\"notification notification-subscribe\">\n <a class=\"notification-close\" href=\"javascript:;\"></a>\n You've "
},
{
"path": "partials/post-card.hbs",
"chars": 3065,
"preview": "<article class=\"post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is \"home\"}}{{#has index=\"nth:6\"}}po"
},
{
"path": "partials/site-header.hbs",
"chars": 100,
"preview": "<div class=\"outer site-nav-main\">\n <div class=\"inner\">\n {{> \"site-nav\"}}\n </div>\n</div>"
},
{
"path": "partials/site-nav.hbs",
"chars": 1834,
"preview": "<nav class=\"site-nav\">\n <div class=\"site-nav-left\">\n <div class=\"site-nav-left-content\">\n {{#if @si"
},
{
"path": "partials/subscribe-form.hbs",
"chars": 902,
"preview": "<section class=\"subscribe-form\">\n <h3 class=\"subscribe-form-title\">Subscribe to {{@site.title}}</h3>\n <p class=\"su"
},
{
"path": "post.hbs",
"chars": 9742,
"preview": "{{!< default}}\n\n{{!-- The tag above means: insert everything in this file\ninto the {body} of the default.hbs template --"
},
{
"path": "renovate.json",
"chars": 119,
"preview": "{\n \"$schema\": \"https://docs.renovatebot.com/renovate-schema.json\",\n \"extends\": [\"github>TryGhost/renovate-config\"]\n}\n"
},
{
"path": "routes.yaml",
"chars": 213,
"preview": "routes:\n /signup/: members/signup\n /signin/: members/signin\n /account/: members/account\n\ncollections:\n /:\n permal"
},
{
"path": "tag.hbs",
"chars": 1125,
"preview": "{{!< default}}\n{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --"
}
]
About this extraction
This page contains the full source code of the TryGhost/Lyra GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 50 files (228.8 KB), approximately 67.9k tokens, and a symbol index with 18 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.