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 Ghost members documentation or chat with other Ghost users on Ghost forum. ![Screenshot of a subscribers only post](https://user-images.githubusercontent.com/120485/67228748-1fdd1400-f464-11e9-921f-ecbf5f412ed5.png) # 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 ![Themes list showing two copies of Lyra](docs/TwoLyraInstances.png) 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/.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='

x

',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
').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:
Centered content
*/ /* 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): ![img](/some/image.jpg#full) */ .post-full-content img[src$="#full"] { max-width: none; width: 100vw; } /* Image captions Usage (In Ghost editor): ![img](/some/image.jpg) Your image caption */ .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 
 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 = '
x
';
      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('
').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 --}}




    {{> site-header}}
    {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        

            

                {{#if profile_image}}
                    {{name}}
                {{else}}
                    {{> "icons/avatar"}}
                {{/if}}
                

                    
{{name}}

                    {{#if bio}}
                        
{{bio}}

                    {{/if}}
                    

                        {{#if location}}
                            
{{location}}

                        {{/if}}
                        

                            {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
                        

                        {{#if website}}
                            Website
                        {{/if}}
                        {{#if twitter}}
                            Twitter
                        {{/if}}
                        {{#if facebook}}
                            Facebook
                        {{/if}}
                    

                

            

        

    


{{/author}}

{{!-- The main content area --}}


    


        

            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        


    





================================================
FILE: default.hbs
================================================




    {{!-- Document Settings --}}
    
    

    {{!-- Base Meta --}}
    {{meta_title}}
    
    

    {{!-- Styles'n'Scripts --}}
    

    {{!-- This tag outputs SEO meta+structured data and other important settings --}}
    {{ghost_head}}




    


        {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
        {{{body}}}

        {{!-- The footer at the very bottom of the screen --}}
        

            

                

                    {{@site.title}} © {{date format="YYYY"}}
                    Home
                    Signup
                    {{#if @site.secondary_navigation}}
                    {{navigation type="secondary"}}
                    {{/if}}
                    {{#if @site.facebook}}Facebook{{/if}}
                    {{#if @site.twitter}}Twitter{{/if}}
                

                
            

        


    


   {{> "notifications"}}



    


    {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
    
    

    

    {{!-- Scripts for Members subscription --}}
    

    {{!-- 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}}





================================================
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 --}}



    {{> site-header}}





    

        

            
{{statusCode}}

            
{{message}}

            Go to the front page →
        


        {{#get "posts" limit="3" include="authors,tags"}}
        

            {{#foreach posts}}
            {{> "post-card"}}
            {{/foreach}}
        

        {{/get}}
    




================================================
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.
--}}





    
    
    {{meta_title}}
    
    
    



    


        

            

                

                    
                

            

        


        

            


                

                    
{{statusCode}}

                    
{{message}}

                    Go to the front page →
                


                {{#if errorDetails}}
                

                    
Theme errors

                    
    
                        {{#foreach errorDetails}}
                        
  • 
                            {{{rule}}}

                            {{#foreach failures}}
                            
    Ref: {{ref}}
    
                            
    Message: {{message}}
    
                            {{/foreach}}
                        
    • 
                        {{/foreach}}
                    

                

                {{/if}}

            

        

    





================================================
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-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        

            {{> "site-nav"}}
            

                

                    {{#if @site.logo}}
                        
                    {{else}}
                        {{@site.title}}
                    {{/if}}
                

                
{{@site.description}}

            

        

    



{{!-- The main content area --}}


    


        

            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        


    




{{> site-header}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}

{{/contentFor}}


================================================
FILE: members/account.hbs
================================================
{{!< ../default}}



    {{> site-header}}




    


    {{#if @member.paid}}

        {{!-- Logged in, paying member: Show account info --}}
        


            {{#foreach @member.subscriptions}}
                

                    

                        

                            {{#if @first}}
                                
Your account

                            {{/if}}
                            {{#if cancel_at_period_end}}
                                

                                    Your subscription will expire on {{date current_period_end format="DD MMM YYYY"}}. If you change your mind in the meantime you can turn auto-renew back on to continue your subscription.
                                

                            {{else}}
                                

                                    Hey! You have an active {{@site.title}} account with access to all areas. Get in touch if have any problems or need some help getting things updated, and thanks for subscribing.
                                

                            {{/if}}
                        

                        {{#if @first}}
                            

                                {{> "icons/avatar"}}
                                {{#if @member.avatar_image}}
                                    
                                {{/if}}
                            

                        {{/if}}
                    

                    

                        

                            
                            {{@member.email}}
                        


                        

                            
                                {{price plan}}/{{plan.interval}}
                        


                        

                            
                            **** **** **** {{default_payment_card_last4}}
                        


                        

                            
                            {{date current_period_end format="DD MMM YYYY"}}
                        

                    


                    
                

            {{/foreach}}
        


    {{else if @member}}

        {{!-- Logged in, not paying: Link to checkout --}}
        

    {{else}}

        {{!-- Not logged in: Redirect to signin --}}
        

    {{/if}}

    





================================================
FILE: members/signin.hbs
================================================
{{!< ../default}}



    {{> site-header}}




    


    {{#if @member}}

        {{!-- Logged in: Redirect home --}}
        

    {{else}}

        {{!-- Not logged in: Signin form --}}
        

    {{/if}}

    





================================================
FILE: members/signup.hbs
================================================
{{!< ../default}}



    {{> site-header}}




    


    {{#if @member.paid}}

        {{!-- Logged in, paying member: Redirect home --}}
        

    {{else if @member}}

        {{!-- Logged in, not paying: Check out --}}
        

            
Choose your subscription

            
Unlock full access to {{@site.title}} and see the entire library of members-only content & updates

            

                

                    

                        
Monthly

                        {{price currency=@price.currency}}{{@price.monthly}} / month
                    

                    

                        
    
                            
  • Full access to all private posts
    • 
                            
  • Regular updates with new content
    • 
                            
  • Support independent publishing
    • 
                            
  • Simple, secure card payment
    • 
                        

                        Choose this plan
                    

                

                

                    

                        
Yearly

                        {{price currency=@price.currency}}{{@price.yearly}} / year
                    

                    

                        
    
                            
  • Full access to all private posts
    • 
                            
  • Regular updates with new content
    • 
                            
  • Support independent publishing
    • 
                            
  • Simple, secure card payment
    • 
                            
  • One easy payment instead of 12!
    • 
                        

                        Choose this plan
                    

                

            

        


    {{else}}

        {{!-- Not logged in: Sign up --}}
        

    {{/if}}

    





================================================
FILE: package.json
================================================
{
  "name": "lyra",
  "description": "A premium publication theme for Ghost.",
  "demo": "https://lyra.ghost.io",
  "version": "1.0.0",
  "engines": {
    "ghost": ">=4.0.0"
  },
  "license": "MIT",
  "screenshots": {
    "desktop": "assets/screenshot-desktop.jpg"
  },
  "scripts": {
    "dev": "gulp",
    "zip": "gulp zip",
    "test": "gscan .",
    "test:ci": "gscan --fatal --verbose .",
    "pretest": "gulp build",
    "preship": "yarn test",
    "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version && git push --follow-tags; fi"
  },
  "author": {
    "name": "Ghost Foundation",
    "email": "hello@ghost.org",
    "url": "https://ghost.org"
  },
  "gpm": {
    "type": "theme",
    "categories": [
      "Minimal",
      "Magazine"
    ]
  },
  "keywords": [
    "ghost",
    "theme",
    "ghost-theme"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/TryGhost/Starter.git"
  },
  "bugs": "https://github.com/TryGhost/Starter/issues",
  "contributors": "https://github.com/TryGhost/Starter/graphs/contributors",
  "devDependencies": {
    "@tryghost/release-utils": "0.8.1",
    "autoprefixer": "10.4.27",
    "beeper": "2.1.0",
    "cssnano": "7.1.3",
    "gscan": "5.4.3",
    "gulp": "5.0.1",
    "gulp-livereload": "4.0.2",
    "gulp-postcss": "10.0.0",
    "gulp-sourcemaps": "3.0.0",
    "gulp-uglify": "3.0.2",
    "gulp-util": "3.0.8",
    "gulp-watch": "5.0.1",
    "gulp-zip": "6.1.0",
    "postcss": "8.5.8",
    "postcss-color-function": "4.1.0",
    "postcss-custom-properties": "15.0.1",
    "postcss-easy-import": "4.0.0"
  },
  "browserslist": [
    "defaults"
  ],
  "config": {
    "posts_per_page": 15,
    "image_sizes": {
      "xxs": {
        "width": 30
      },
      "xs": {
        "width": 100
      },
      "s": {
        "width": 300
      },
      "m": {
        "width": 600
      },
      "l": {
        "width": 1200
      },
      "xl": {
        "width": 2000
      }
    }
  }
}


================================================
FILE: page.hbs
================================================
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}


    

        

            {{> "site-nav"}}
        

    




{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}



    


        


            

                
{{title}}

            


            {{#if feature_image}}
            

                {{!-- This is a responsive image, it loads different sizes depending on device
                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
                {{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}
                {{#if feature_image_caption}}
                    
{{feature_image_caption}}

                {{/if}}
            

            {{/if}}

            

                

                    {{content}}
                

            


        


    




{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}

{{/contentFor}}


================================================
FILE: partials/byline-multiple.hbs
================================================



    

        
This post was a collaboration between

        
{{authors}}

    


    
    
    {{#foreach authors}}
        
  • 

            
    
                
    
                    {{#if profile_image}}
                        {{name}}
                    {{else}}
                        
    {{> "icons/avatar"}}
    
                    {{/if}}
                    
    {{name}}
    
                
    
                
    
                    {{#if bio}}
                        
    {{bio}}
    
                        
    More posts by {{name}}.
    
                    {{else}}
                        
    Read more posts by this author.
    
                    {{/if}}
                
    
            
    

            {{#if profile_image}}
                
                    {{name}}
                
            {{else}}
                {{> "icons/avatar"}}
            {{/if}}

        
    • 
    {{/foreach}}

    





{{#contentFor "scripts"}}

{{/contentFor}}


================================================
FILE: partials/byline-single.hbs
================================================
{{!-- Everything inside the #author tags pulls data from the author --}}
{{#primary_author}}



    {{#if profile_image}}
        {{name}}
    {{else}}
        {{> "icons/avatar"}}
    {{/if}}
    

        
{{name}}

        {{#if bio}}
            
{{bio}}

        {{else}}
            
Read more posts by this author.

        {{/if}}
    





    Read More



{{/primary_author}}


================================================
FILE: partials/content-cta.hbs
================================================
{{{html}}}



================================================
FILE: partials/header-background.hbs
================================================
{{!--
Wow what the hell is going on in here even?

Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.

If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the 
 tag. Else, we just output a 
 tag
with a `no-image` class so we can style it accordingly.
--}}

{{#if background}}





{{else}}




{{/if}}

================================================
FILE: partials/icons/avatar.hbs
================================================



================================================
FILE: partials/icons/facebook.hbs
================================================


================================================
FILE: partials/icons/ghost-logo.hbs
================================================
Ghost Logo


================================================
FILE: partials/icons/infinity.hbs
================================================



================================================
FILE: partials/icons/loader.hbs
================================================

    
    
        
    


================================================
FILE: partials/icons/location.hbs
================================================



================================================
FILE: partials/icons/point.hbs
================================================

    



================================================
FILE: partials/icons/rss.hbs
================================================



================================================
FILE: partials/icons/twitter.hbs
================================================



================================================
FILE: partials/navigation.hbs
================================================
{{#if isSecondary}}
    {{!-- secondary navigation --}}
        {{#foreach navigation}}
            {{label}}
        {{/foreach}}
{{else}}
    {{!-- primary navigation --}}
    
    
        {{#foreach navigation}}
            
  • {{label}}
    • 
        {{/foreach}}
    

{{/if}}


================================================
FILE: partials/notifications.hbs
================================================


    
    You've successfully subscribed to {{@site.title}}











    
    Success! Your account is fully activated, you now have access to all content.





    
    Success! Your billing info is updated.





    
    Billing info update failed.



================================================
FILE: partials/post-card.hbs
================================================



    {{#if feature_image}}
    
        {{!-- This is a responsive image, it loads different sizes depending on device
        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
        {{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}
    
    {{/if}}

    


        

            

                

                    Free Post
                    {{#if primary_tag}}
                        {{#primary_tag}}
                            
{{name}}

                        {{/primary_tag}}
                    {{/if}}

                

                
{{title}}

            


            

                {{#if feature_image}}
                    
{{excerpt words="30"}}

                {{else}}
                    
{{excerpt words="44"}}

                {{/if}}
            


        

        

            
            

                {{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}
                 • {{reading_time}}
            

        


    
{{!--/.post-card-content--}}





================================================
FILE: partials/site-header.hbs
================================================


    

        {{> "site-nav"}}
    




================================================
FILE: partials/site-nav.hbs
================================================



================================================
FILE: partials/subscribe-form.hbs
================================================


================================================
FILE: post.hbs
================================================
{{!< default}}

{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}



    {{> site-header}}



{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}



    


        


            


                {{#if primary_tag}}
                

                    {{#primary_tag}}
                    {{name}}
                    {{/primary_tag}}
                

                {{/if}}

                
{{title}}


                {{#if custom_excerpt}}
                
{{custom_excerpt}}

                {{/if}}

                


                    


                        
    
                            {{#foreach authors}}
                            
  • 

                                
    
                                    {{#if profile_image}}
                                    {{name}}
                                    {{else}}
                                    
    {{> "icons/avatar"}}
    
                                    {{/if}}
                                    
    
                                        {{#if bio}}
                                        
    
                                            
    {{name}}
    
                                            
    {{bio}}
    
                                            
    More posts by {{name}}.
    
                                        
    
                                        {{else}}
                                        
    {{name}}
    
                                        
    Read more posts by this author.
    
                                        {{/if}}
                                    
    
                                
    

                                {{#if profile_image}}
                                
                                    {{name}}
                                
                                {{else}}
                                {{> "icons/avatar"}}
                                {{/if}}

                            
    • 
                            {{/foreach}}
                        


                        

                            
{{authors}}

                            

                                
                                • {{reading_time}}
                            

                        


                    



                

            


            {{#if feature_image}}
            

                {{!-- This is a responsive image, it loads different sizes depending on device
                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
                {{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}
                {{#if feature_image_caption}}
                    
{{feature_image_caption}}

                {{/if}}
            

            {{/if}}

            

                

                    {{content}}
                

            


            {{!--
            

                If you want to embed comments, this is a good place to do it!
            

            --}}

        


    




{{!-- Links to Previous/Next posts --}}


{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
{{!-- {{> floating-header}} --}}

{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}

{{/contentFor}}


================================================
FILE: renovate.json
================================================
{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["github>TryGhost/renovate-config"]
}


================================================
FILE: routes.yaml
================================================
routes:
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/


================================================
FILE: tag.hbs
================================================
{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}

{{#tag}}


    {{> site-header}}
    {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        

            
{{name}}

            

                {{#if description}}
                    {{description}}
                {{else}}
                    A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
                {{/if}}
            

        

    



{{/tag}}

{{!-- The main content area --}}


    

        

            {{#foreach posts}}
                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}
            {{/foreach}}