').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(e){e.addEventListener("DOMContentLoaded",function(){e.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),e=e.attributes.width.value/e.attributes.height.value;t.style.flex=e+" 1 0%"})})}((window,document)),function(t,i){var r,n,o,d,s,a,l,c=i.querySelector("link[rel=next]");function h(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",m);this.response.querySelectorAll(".post-card").forEach(function(e){r.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?c.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",m)),l=i.documentElement.scrollHeight,d=o=!1}function e(){var e;d||(s+a<=l-n?o=!1:(d=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",h),e.open("GET",c.href),e.send(null)))}function u(){o||t.requestAnimationFrame(e),o=!0}function f(){s=t.scrollY,u()}function m(){a=t.innerHeight,l=i.documentElement.scrollHeight,u()}!c||(r=i.querySelector(".post-feed"))&&(d=o=!(n=300),s=t.scrollY,a=t.innerHeight,l=i.documentElement.scrollHeight,t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",m),u())}(window,document);
//# sourceMappingURL=casper.js.map
\ No newline at end of file
diff --git a/assets/built/casper.js.map b/assets/built/casper.js.map
index 1796dd9..9ed77c2 100644
--- a/assets/built/casper.js.map
+++ b/assets/built/casper.js.map
@@ -1 +1 @@
-{"version":3,"sources":["jquery.fitvids.js","gallery-card.js","infinite-scroll.js","sticky-nav-title.js"],"names":["$","fn","fitVids","options","head","div","settings","customSelector","ignore","document","getElementById","getElementsByTagName","createElement","innerHTML","appendChild","childNodes","extend","this","each","selectors","push","ignoreList","$allVideos","find","join","not","aspectRatio","videoName","$this","parents","length","tagName","toLowerCase","parent","css","isNaN","attr","parseInt","height","width","_count","wrap","removeAttr","window","jQuery","Zepto","addEventListener","querySelectorAll","forEach","image","container","closest","ratio","attributes","value","style","flex","feedElement","buffer","ticking","loading","lastScrollY","lastWindowHeight","lastDocumentHeight","nextElement","querySelector","onPageLoad","status","removeEventListener","onScroll","onResize","response","item","importNode","resNextElement","href","documentElement","scrollHeight","onUpdate","xhr","XMLHttpRequest","responseType","open","send","requestTick","requestAnimationFrame","scrollY","innerHeight","passive","Casper","stickyNavTitle","nav","navSelector","title","titleSelector","update","getBoundingClientRect","top","offsetHeight","classList","add","activeClass","remove"],"mappings":"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","file":"casper.js","sourcesContent":["/*jshint browser:true */\n/*!\n* FitVids 1.3\n*\n*\n* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation\n* This is an unofficial release, ported by John O'Nolan\n* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/\n* Released under the MIT license\n*\n*/\n\n;(function( $ ){\n\n 'use strict';\n\n $.fn.fitVids = function( options ) {\n var settings = {\n customSelector: null,\n ignore: null\n };\n\n if(!document.getElementById('fit-vids-style')) {\n // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js\n var head = document.head || document.getElementsByTagName('head')[0];\n 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%;}';\n var div = document.createElement(\"div\");\n div.innerHTML = 'x
';\n head.appendChild(div.childNodes[1]);\n }\n\n if ( options ) {\n $.extend( settings, options );\n }\n\n return this.each(function(){\n var selectors = [\n 'iframe[src*=\"player.vimeo.com\"]',\n 'iframe[src*=\"youtube.com\"]',\n 'iframe[src*=\"youtube-nocookie.com\"]',\n 'iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]',\n 'object',\n 'embed'\n ];\n\n if (settings.customSelector) {\n selectors.push(settings.customSelector);\n }\n\n var ignoreList = '.fitvidsignore';\n\n if(settings.ignore) {\n ignoreList = ignoreList + ', ' + settings.ignore;\n }\n\n var $allVideos = $(this).find(selectors.join(','));\n $allVideos = $allVideos.not('object object'); // SwfObj conflict patch\n $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.\n\n $allVideos.each(function(){\n var $this = $(this);\n if($this.parents(ignoreList).length > 0) {\n return; // Disable FitVids on this video.\n }\n if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }\n if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))\n {\n $this.attr('height', 9);\n $this.attr('width', 16);\n }\n var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),\n width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),\n aspectRatio = height / width;\n if(!$this.attr('name')){\n var videoName = 'fitvid' + $.fn.fitVids._count;\n $this.attr('name', videoName);\n $.fn.fitVids._count++;\n }\n $this.wrap('').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');\n $this.removeAttr('height').removeAttr('width');\n });\n });\n };\n\n // Internal counter for unique video names.\n $.fn.fitVids._count = 0;\n\n// Works with either jQuery or Zepto\n})( window.jQuery || window.Zepto );\n","/* eslint-env browser */\n\n/**\n * Gallery card support\n * Used on any individual post/page\n *\n * Detects when a gallery card has been used and applies sizing to make sure\n * the display matches what is seen in the editor.\n */\n\n(function (window, document) {\n var resizeImagesInGalleries = function resizeImagesInGalleries() {\n var images = document.querySelectorAll('.kg-gallery-image img');\n images.forEach(function (image) {\n var container = image.closest('.kg-gallery-image');\n var width = image.attributes.width.value;\n var height = image.attributes.height.value;\n var ratio = width / height;\n container.style.flex = ratio + ' 1 0%';\n });\n };\n\n document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);\n})(window, document);\n","/* eslint-env browser */\n\n/**\n * Infinite Scroll\n * Used on all pages where there is a list of posts (homepage, tag index, etc).\n *\n * When the page is scrolled to 300px from the bottom, the next page of posts\n * is fetched by following the the x
';\n head.appendChild(div.childNodes[1]);\n }\n\n if ( options ) {\n $.extend( settings, options );\n }\n\n return this.each(function(){\n var selectors = [\n 'iframe[src*=\"player.vimeo.com\"]',\n 'iframe[src*=\"youtube.com\"]',\n 'iframe[src*=\"youtube-nocookie.com\"]',\n 'iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]',\n 'object',\n 'embed'\n ];\n\n if (settings.customSelector) {\n selectors.push(settings.customSelector);\n }\n\n var ignoreList = '.fitvidsignore';\n\n if(settings.ignore) {\n ignoreList = ignoreList + ', ' + settings.ignore;\n }\n\n var $allVideos = $(this).find(selectors.join(','));\n $allVideos = $allVideos.not('object object'); // SwfObj conflict patch\n $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.\n\n $allVideos.each(function(){\n var $this = $(this);\n if($this.parents(ignoreList).length > 0) {\n return; // Disable FitVids on this video.\n }\n if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }\n if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))\n {\n $this.attr('height', 9);\n $this.attr('width', 16);\n }\n var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),\n width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),\n aspectRatio = height / width;\n if(!$this.attr('name')){\n var videoName = 'fitvid' + $.fn.fitVids._count;\n $this.attr('name', videoName);\n $.fn.fitVids._count++;\n }\n $this.wrap('').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');\n $this.removeAttr('height').removeAttr('width');\n });\n });\n };\n\n // Internal counter for unique video names.\n $.fn.fitVids._count = 0;\n\n// Works with either jQuery or Zepto\n})( window.jQuery || window.Zepto );\n","/* eslint-env browser */\n\n/**\n * Gallery card support\n * Used on any individual post/page\n *\n * Detects when a gallery card has been used and applies sizing to make sure\n * the display matches what is seen in the editor.\n */\n\n(function (window, document) {\n var resizeImagesInGalleries = function resizeImagesInGalleries() {\n var images = document.querySelectorAll('.kg-gallery-image img');\n images.forEach(function (image) {\n var container = image.closest('.kg-gallery-image');\n var width = image.attributes.width.value;\n var height = image.attributes.height.value;\n var ratio = width / height;\n container.style.flex = ratio + ' 1 0%';\n });\n };\n\n document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);\n})(window, document);\n","/* eslint-env browser */\n\n/**\n * Infinite Scroll\n * Used on all pages where there is a list of posts (homepage, tag index, etc).\n *\n * When the page is scrolled to 300px from the bottom, the next page of posts\n * is fetched by following the the \n
\n Centered content\n
\n
Your image caption \n\n*/\n.post-full-content img + br + small {\n display: block;\n margin-top: -3em;\n margin-bottom: 1.5em;\n text-align: center;\n}\n\n\n/* Override third party iframe styles */\n.post-full-content iframe {\n margin: 0 auto !important;\n}\n\n.post-full-content blockquote {\n margin: 0 0 1.5em;\n padding: 0 1.5em;\n border-left: color-mod(var(--blue)) 3px solid;\n}\n@media (max-width: 500px) {\n .post-full-content blockquote {\n padding: 0 1.3em;\n }\n}\n\n.post-full-content blockquote p {\n margin: 0 0 1em 0;\n color: inherit;\n font-size: inherit;\n line-height: inherit;\n font-style: italic;\n}\n\n.post-full-content blockquote p:last-child {\n margin-bottom: 0;\n}\n\n.post-full-content code {\n padding: 0 5px 2px;\n font-size: 0.8em;\n line-height: 1em;\n font-weight: 400!important;\n background: var(--whitegrey);\n border-radius: 3px;\n}\n\n.post-full-content p code {\n word-break: break-all;\n}\n\n.post-full-content pre {\n overflow-x: auto;\n margin: 1.5em 0 3em;\n padding: 20px;\n max-width: 100%;\n border: color-mod(var(--darkgrey) l(-10%)) 1px solid;\n color: var(--whitegrey);\n font-size: 1.4rem;\n line-height: 1.5em;\n background: color-mod(var(--darkgrey) l(-3%));\n border-radius: 5px;\n}\n\n.post-full-content pre ::selection {\n color: color-mod(var(--midgrey) l(-25%));\n}\n\n.post-full-content pre code {\n padding: 0;\n font-size: inherit;\n line-height: inherit;\n background: transparent;\n}\n\n.post-full-content pre code :not(span) {\n color: inherit;\n}\n\n.post-full-content .fluid-width-video-wrapper {\n margin: 1.5em 0 3em;\n}\n\n.post-full-content hr {\n margin: 2em 0;\n}\n\n.post-full-content hr:after {\n content: \"\";\n position: absolute;\n top: -15px;\n left: 50%;\n display: block;\n margin-left: -10px;\n width: 1px;\n height: 30px;\n background: color-mod(var(--lightgrey) l(+10%));\n box-shadow: #fff 0 0 0 5px;\n transform: rotate(45deg);\n}\n\n.post-full-content hr + p {\n margin-top: 1.2em;\n}\n\n.post-full-content [id] {\n scroll-margin-top: 110px;\n}\n\n.post-full-content h1,\n.post-full-content h2,\n.post-full-content h3,\n.post-full-content h4,\n.post-full-content h5,\n.post-full-content h6 {\n color: color-mod(var(--darkgrey) l(-5%));\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.post-full-content h1 {\n margin: 0.5em 0 0.4em;\n font-size: 4.2rem;\n line-height: 1.25em;\n font-weight: 600;\n}\n.post-full-content p + h1 {\n margin-top: 0.8em;\n}\n@media (max-width: 800px) {\n .post-full-content h1 {\n font-size: 3.2rem;\n line-height: 1.25em;\n }\n}\n\n.post-full-content h2 {\n margin: 0.5em 0 0.4em;\n font-size: 3.2rem;\n line-height: 1.25em;\n font-weight: 600;\n}\n.post-full-content p + h2 {\n margin-top: 0.8em;\n}\n@media (max-width: 800px) {\n .post-full-content h2 {\n margin-bottom: 0.3em;\n font-size: 2.8rem;\n line-height: 1.25em;\n }\n}\n\n.post-full-content h3 {\n margin: 0.5em 0 0.2em;\n font-size: 2.5rem;\n line-height: 1.3em;\n font-weight: 600;\n}\n.post-full-content h2 + h3 {\n margin-top: 0.7em;\n}\n@media (max-width: 800px) {\n .post-full-content h3 {\n margin-bottom: 0.3em;\n font-size: 2.4rem;\n line-height: 1.3em;\n }\n}\n\n.post-full-content h4 {\n margin: 0.5em 0 0.2em;\n font-size: 2.5rem;\n font-weight: 600;\n}\n.post-full-content h2 + h4 {\n margin-top: 0.7em;\n}\n.post-full-content h3 + h4 {\n margin-top: 0;\n}\n@media (max-width: 800px) {\n .post-full-content h4 {\n margin-bottom: 0.3em;\n font-size: 2.4rem;\n line-height: 1.3em;\n }\n}\n\n.post-full-content h5 {\n display: block;\n margin: 0.5em 0;\n padding: 0.4em 1em 0.9em;\n border: 0;\n color: var(--blue);\n font-family: Georgia,serif;\n font-size: 3.2rem;\n line-height: 1.35em;\n text-align: center;\n}\n@media (min-width: 1180px) {\n .post-full-content h5 {\n max-width: 1060px;\n width: 100vw;\n }\n}\n@media (max-width: 800px) {\n .post-full-content h5 {\n margin-bottom: 1em;\n margin-left: 1.3em;\n padding: 0 0 0.5em;\n font-size: 2.4rem;\n text-align: initial;\n }\n}\n\n.post-full-content h6 {\n margin: 0.5em 0 0.2em 0;\n font-size: 2.0rem;\n font-weight: 700;\n}\n@media (max-width: 800px) {\n .post-full-content h6 {\n font-size: 1.8rem;\n line-height: 1.4em;\n }\n}\n\n.footnotes-sep {\n margin-bottom: 30px;\n}\n\n.footnotes {\n font-size: 1.5rem;\n}\n\n.footnotes p {\n margin: 0;\n}\n\n.footnote-backref {\n color: var(--blue) !important;\n font-size: 1.2rem;\n font-weight: bold;\n text-decoration: none !important;\n box-shadow: none !important;\n}\n\n/* Some grouped styles for smaller viewports */\n@media (max-width: 1170px) {\n .post-full-image {\n margin: 25px -6vw 50px;\n border-radius: 0;\n }\n\n .post-full-image img {\n max-width: 1170px;\n }\n}\n\n@media (max-width: 700px) {\n .post-full-image {\n margin: 25px -5vw;\n }\n}\n\n@media (max-width: 500px) {\n .post-full-meta {\n font-size: 1.2rem;\n line-height: 1.3em;\n }\n\n .post-full-title {\n margin-top: 0.2em;\n font-size: 4.2rem;\n line-height: 1.05em;\n }\n\n .post-full-image {\n margin-top: 5px;\n margin-bottom: 5vw;\n }\n\n .post-full-content {\n padding: 0;\n }\n\n .post-full-content:before,\n .post-full-content:after {\n display: none;\n }\n}\n\n/* Tables */\n.post-full-content table {\n display: inline-block;\n overflow-x: auto;\n margin: 0.5em 0 2.5em;\n max-width: 100%;\n width: auto;\n border-spacing: 0;\n border-collapse: collapse;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n font-size: 1.6rem;\n white-space: nowrap;\n vertical-align: top;\n}\n\n.post-full-content table {\n -webkit-overflow-scrolling: touch;\n 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;\n background-attachment: scroll, scroll;\n background-size: 10px 100%, 10px 100%;\n background-repeat: no-repeat;\n}\n\n.post-full-content table td:first-child {\n background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);\n background-size: 20px 100%;\n background-repeat: no-repeat;\n}\n\n.post-full-content table td:last-child {\n background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);\n background-position: 100% 0;\n background-size: 20px 100%;\n background-repeat: no-repeat;\n}\n\n.post-full-content table th {\n color: var(--darkgrey);\n font-size: 1.2rem;\n font-weight: 700;\n letter-spacing: 0.2px;\n text-align: left;\n text-transform: uppercase;\n background-color: color-mod(var(--whitegrey) l(+4%));\n}\n\n.post-full-content table th,\n.post-full-content table td {\n padding: 6px 12px;\n border: color-mod(var(--whitegrey) l(-1%) s(-5%)) 1px solid;\n}\n\n\n/* 7.1. Post Byline\n/* ---------------------------------------------------------- */\n\n.post-full-byline {\n display: flex;\n justify-content: space-between;\n margin: 35px 0 0;\n padding-top: 15px;\n border-top: 1px solid color-mod(var(--lightgrey) l(+10%));\n}\n\n.post-full-byline-content {\n flex-grow: 1;\n display: flex;\n align-items: flex-start;\n}\n\n.post-full-byline-content .author-list {\n justify-content: flex-start;\n padding: 0 12px 0 0;\n}\n\n.post-full-byline-meta {\n margin: 2px 0 0;\n color: color-mod(var(--midgrey) l(+10%));\n font-size: 1.2rem;\n line-height: 1.2em;\n letter-spacing: 0.2px;\n text-transform: uppercase;;\n}\n\n.post-full-byline-meta h4 {\n margin: 0 0 3px;\n font-size: 1.3rem;\n line-height: 1.4em;\n font-weight: 500;\n}\n\n.post-full-byline-meta h4 a {\n color: color-mod(var(--darkgrey) l(+10%));\n}\n\n.post-full-byline-meta h4 a:hover {\n color: var(--darkgrey);\n}\n\n.post-full-byline-meta .bull {\n display: inline-block;\n margin: 0 4px;\n opacity: 0.6;\n}\n\n.author-avatar {\n display: block;\n overflow: hidden;\n margin: 0 -4px;\n width: 40px;\n height: 40px;\n border: #fff 2px solid;\n border-radius: 100%;\n transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;\n}\n\n.author-list-item .author-card {\n position: absolute;\n bottom: 130%;\n left: 50%;\n z-index: 600;\n display: flex;\n justify-content: space-between;\n margin-left: -200px;\n width: 400px;\n font-size: 1.4rem;\n line-height: 1.5em;\n background: white;\n border-radius: 3px;\n box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.06) 1px 3px 8px;\n opacity: 0;\n transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);\n transform: scale(0.98) translateY(15px);\n pointer-events: none;\n}\n\n.author-list-item .author-card:before {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n display: block;\n margin-left: -8px;\n width: 0;\n height: 0;\n border-top: 8px solid #fff;\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n}\n\n.author-list-item .author-card.hovered {\n opacity: 1.0;\n transform: scale(1) translateY(0px);\n pointer-events: auto;\n}\n\n.author-card {\n padding: 20px 20px 22px;\n}\n\n.author-card .author-info {\n flex: 1 1 auto;\n padding: 0 0 0 20px;\n}\n\n.author-card .author-info h2 {\n margin: 8px 0 0;\n font-size: 1.6rem;\n}\n\n.author-card .author-info p {\n margin: 4px 0 0;\n color: color-mod(var(--midgrey) l(-10%));\n}\n\n.author-card .author-info .bio h2 {\n margin-top: 0;\n}\n\n.author-card .author-info .bio p {\n margin-top: 0.8em;\n}\n\n.author-card .author-profile-image {\n flex: 0 0 60px;\n margin: 0;\n width: 60px;\n height: 60px;\n border: none;\n}\n\n.basic-info .avatar-wrapper {\n position: relative;\n margin: 0;\n width: 60px;\n height: 60px;\n border: none;\n background: rgba(229, 239, 245, 0.1);\n}\n\n.basic-info .avatar-wrapper svg {\n margin: 0;\n width: 60px;\n height: 60px;\n opacity: 0.15;\n}\n\n@media (max-width: 1170px) {\n .author-list-item .author-card {\n margin-left: -50px;\n width: 430px;\n }\n\n .author-list-item .author-card:before {\n left: 50px;\n }\n}\n\n@media (max-width: 650px) {\n .author-list-item .author-card {\n display: none;\n }\n}\n\n@media (max-width: 500px) {\n .author-avatar {\n width: 36px;\n height: 36px;\n }\n\n .post-full-byline {\n margin-top: 20px;\n }\n\n .post-full-byline-meta {\n font-size: 1.2rem;\n }\n\n .post-full-byline-meta h4 {\n margin-bottom: 2px;\n font-size: 1.2rem;\n }\n}\n\n\n/* 7.2. Members Subscribe Form\n/* ---------------------------------------------------------- */\n.subscribe-form {\n margin: 1.5em 0;\n padding: 6.5vw 7vw 8vw;\n border: color-mod(var(--lightgrey) l(+10%)) 1px solid;\n text-align: center;\n background: linear-gradient(color-mod(var(--whitegrey) l(+6%)), color-mod(var(--whitegrey) l(+4%)));\n border-radius: 3px;\n}\n\n.subscribe-form-title {\n margin: 0 0 3px 0;\n padding: 0;\n color: var(--darkgrey);\n font-size: 3.5rem;\n line-height: 1;\n font-weight: 600;\n}\n\n.subscribe-form-description {\n margin-bottom: 0.2em 0 1em;\n color: var(--midgrey);\n font-size: 2.1rem;\n line-height: 1.55em;\n}\n\n.subscribe-form form {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 0 auto;\n max-width: 460px;\n}\n\n.subscribe-form .form-group {\n align-self: stretch;\n display: flex;\n}\n\n.subscribe-email {\n display: block;\n padding: 10px;\n width: 100%;\n border: color-mod(var(--lightgrey) l(+7%)) 1px solid;\n color: var(--midgrey);\n font-size: 1.8rem;\n line-height: 1em;\n font-weight: normal;\n user-select: text;\n border-radius: 5px;\n transition: border-color 0.15s linear;\n\n -webkit-appearance: none;\n}\n\n.subscribe-email:focus {\n outline: 0;\n border-color: color-mod(var(--lightgrey) l(-2%));\n}\n\n.subscribe-form button {\n position: relative;\n display: inline-block;\n margin: 0 0 0 10px;\n padding: 0 20px;\n height: 43px;\n outline: none;\n color: #fff;\n font-size: 1.5rem;\n line-height: 39px;\n font-weight: 400;\n text-align: center;\n background: linear-gradient(\n color-mod(var(--blue) whiteness(+7%)),\n color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,\n color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,\n color-mod(var(--blue) lightness(-4%) saturation(-10%))\n );\n border-radius: 5px;\n\n -webkit-font-smoothing: subpixel-antialiased;\n}\n\n.subscribe-form button:active,\n.subscribe-form button:focus {\n background: color-mod(var(--blue) lightness(-9%) saturation(-10%));\n}\n\n.subscribe-form .button-loader,\n.subscribe-form .message-success,\n.subscribe-form .message-error {\n display: none;\n}\n\n.subscribe-form .loading .button-content {\n visibility: hidden;\n}\n\n.subscribe-form .loading .button-loader {\n position: absolute;\n top: 0;\n left: 50%;\n display: inline-block;\n margin-left: -19px;\n transform: scale(0.7);\n}\n\n.subscribe-form .button-loader svg path,\n.subscribe-form .button-loader svg rect {\n fill: #fff;\n}\n\n.subscribe-form .success .message-success,\n.subscribe-form .invalid .message-error,\n.subscribe-form .error .message-error {\n margin: 1em auto 0;\n max-width: 400px;\n color: var(--red);\n font-size: 1.6rem;\n line-height: 1.5em;\n text-align: center;\n}\n\n.subscribe-form .success .message-success {\n display: block;\n color: color-mod(var(--green) l(-5%));\n}\n\n.subscribe-form .invalid .message-error,\n.subscribe-form .error .message-error {\n display: block;\n}\n\n\n@media (max-width: 650px) {\n .subscribe-form-title {\n font-size: 2.4rem;\n }\n\n .subscribe-form-description {\n font-size: 1.6rem;\n }\n}\n\n@media (max-width: 500px) {\n .subscribe-form form {\n flex-direction: column;\n }\n\n .subscribe-form .form-group {\n flex-direction: column;\n width: 100%;\n }\n\n .subscribe-form button {\n margin: 10px 0 0 0;\n width: 100%;\n }\n}\n\n\n/* 7.3. Comments\n/* ---------------------------------------------------------- */\n\n.post-full-comments {\n margin: 0 auto;\n max-width: 840px;\n}\n\n\n/* 7.4. Related posts\n/* ---------------------------------------------------------- */\n\n.read-next {\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n background: color-mod(var(--darkgrey) l(-5%));\n}\n\n.read-next-feed {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -25px;\n padding: 60px 0 0 0;\n}\n\n.read-next .post-card {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.read-next .post-card:after {\n display: none;\n}\n\n.read-next .post-card-primary-tag {\n color: #fff;\n opacity: 0.6;\n}\n\n.read-next .post-card-title {\n color: #fff;\n opacity: 0.8;\n transition: all 0.2s ease-in-out;\n}\n\n.read-next .post-card:hover .post-card-image {\n opacity: 1.0;\n}\n\n.read-next .post-card-excerpt {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.read-next .static-avatar {\n border-color: #000;\n}\n\n.read-next .post-card-byline-content {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.read-next .post-card-byline-content a {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.read-next-card {\n position: relative;\n flex: 0 1 326px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n margin: 0 25px 50px;\n padding: 25px;\n background: linear-gradient(color-mod(var(--darkgrey) l(+2%)), color-mod(var(--darkgrey) l(-5%)));\n border-radius: 3px;\n}\n\n.read-next-card a {\n transition: all 0.2s ease-in-out;\n}\n\n.read-next-card a:hover {\n text-decoration: none;\n}\n\n.read-next-card-header h3 {\n margin: 0;\n color: rgba(255, 255, 255, 0.6);\n font-size: 1.2rem;\n line-height: 1em;\n font-weight: 300;\n letter-spacing: 0.4px;\n text-transform: uppercase;\n}\n\n.read-next-card-header h3 a {\n color: #fff;\n font-weight: 500;\n text-decoration: none;\n opacity: 0.8;\n}\n\n.read-next-card-header h3 a:hover {\n opacity: 1;\n}\n\n.read-next-card-content {\n font-size: 1.7rem;\n}\n\n.read-next-card-content ul {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.read-next-card-content li {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin: 0;\n padding: 20px 0;\n border-bottom: rgba(255, 255, 255, 0.1);\n}\n\n.read-next-card-content li:last-of-type {\n padding-bottom: 5px;\n border: none;\n}\n\n.read-next-card-content h4 {\n margin: 0;\n font-size: 1.6rem;\n line-height: 1.35em;\n font-weight: 600;\n}\n\n.read-next-card-content li a {\n display: block;\n color: #fff;\n opacity: 0.8;\n}\n\n.read-next-card-content li a:hover {\n opacity: 1;\n}\n\n.read-next-card-excerpt {\n overflow: hidden;\n max-width: 100%;\n font-size: 1.4rem;\n line-height: 1.2em;\n text-overflow: ellipsis;\n}\n\n.read-next-card-meta {\n margin-top: 2px;\n font-size: 1.2rem;\n line-height: 1.4em;\n font-weight: 400;\n}\n\n.read-next-card-meta p {\n margin: 0;\n color: rgba(255, 255, 255, 0.6);\n}\n\n.read-next-card-footer {\n position: relative;\n margin: 40px 0 5px;\n}\n\n.read-next-card-footer a {\n padding: 7px 12px 8px 14px;\n border: 1px solid rgba(255, 255, 255, 0.6);\n color: rgba(255, 255, 255, 0.6);\n font-size: 1.3rem;\n border-radius: 999px;\n transition: all 0.35s ease-in-out;\n}\n\n.read-next-card-footer a:hover {\n border-color: var(--yellow);\n color: var(--yellow);\n text-decoration: none;\n}\n\n@media (max-width: 1170px) {\n .read-next-card {\n flex: 1 1 261px;\n margin-bottom: 5vw;\n }\n}\n\n@media (max-width: 650px) {\n .read-next-feed {\n flex-direction: column;\n padding: 25px 0 0;\n }\n\n .read-next-card {\n flex: 1 1 auto;\n margin: 0 25px;\n padding: 0;\n background: none;\n }\n\n .read-next .post-card {\n flex: 1 1 auto;\n margin: 25px;\n padding: 25px 0 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n }\n}\n\n\n/* 7.5. Koenig Styles\n/* ---------------------------------------------------------- */\n\n.post-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.post-full-content .kg-image {\n margin: 0 auto;\n max-width: 100%;\n}\n\n/* Preventing full-width image overlap with post image. */\n.post-full-image + .post-full-content .kg-content *:first-child .kg-image {\n width: 100%;\n}\n\n.post-full-content .kg-width-wide .kg-image {\n max-width: 1040px;\n}\n\n.post-full-content .kg-width-full .kg-image {\n max-width: 100vw;\n}\n\n.post-full-content figure {\n margin: 0.8em 0 2.3em;\n}\n\n.post-full-content h1 + figure,\n.post-full-content h2 + figure,\n.post-full-content h3 + figure,\n.post-full-content h4 + figure {\n margin-top: 2em;\n}\n\n.post-full-content figure img {\n margin: 0;\n}\n\n.post-full-content figcaption {\n margin: 1.0em auto 0;\n color: color-mod(var(--midgrey) l(-10%));\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n font-size: 75%;\n line-height: 1.5em;\n text-align: center;\n max-width: 1040px;\n}\n\n.kg-width-full figcaption {\n padding: 0 1.5em;\n}\n\n.kg-embed-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\n.kg-embed-card .fluid-width-video-wrapper {\n margin: 0;\n}\n\n\n@media (max-width: 1040px) {\n .post-full-content .kg-width-full .kg-image {\n width: 100vw;\n }\n}\n\n.kg-gallery-container {\n display: flex;\n flex-direction: column;\n max-width: 1040px;\n width: 100vw;\n}\n\n.kg-gallery-row {\n display: flex;\n flex-direction: row;\n justify-content: center;\n}\n\n.kg-gallery-image img {\n display: block;\n margin: 0;\n width: 100%;\n height: 100%;\n}\n\n.kg-gallery-row:not(:first-of-type) {\n margin: 0.75em 0 0 0;\n}\n\n.kg-gallery-image:not(:first-of-type) {\n margin: 0 0 0 0.75em;\n}\n\n.kg-gallery-card + .kg-image-card.kg-width-wide,\n.kg-gallery-card + .kg-gallery-card,\n.kg-image-card.kg-width-wide + .kg-gallery-card,\n.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {\n margin: -2.25em 0 3em;\n}\n\n/* keep existing styles for code cards with captions */\n.kg-code-card {\n width: 100%;\n}\n\n.kg-code-card pre {\n margin: 0;\n}\n\n.kg-bookmark-card {\n width: 100%;\n}\n\n.kg-card + .kg-bookmark-card {\n margin-top: 0;\n}\n\n.post-full-content .kg-bookmark-container {\n display: flex;\n min-height: 148px;\n color: var(--darkgrey);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n text-decoration: none;\n border-radius: 3px;\n box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);\n}\n\n.post-full-content .kg-bookmark-container:hover {\n color: var(--darkgrey);\n text-decoration: none;\n box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);\n}\n\n.kg-bookmark-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 20px;\n}\n\n.kg-bookmark-title {\n color: color-mod(var(--midgrey) l(-30%));\n font-size: 1.6rem;\n line-height: 1.5em;\n font-weight: 600;\n transition: color 0.2s ease-in-out;\n}\n\n.post-full-content .kg-bookmark-container:hover .kg-bookmark-title {\n color: var(--blue);\n}\n\n.kg-bookmark-description {\n display: -webkit-box;\n overflow-y: hidden;\n margin-top: 12px;\n max-height: 48px;\n color: color-mod(var(--midgrey) l(-10%));\n font-size: 1.5rem;\n line-height: 1.5em;\n font-weight: 400;\n\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.kg-bookmark-thumbnail {\n position: relative;\n min-width: 33%;\n max-height: 100%;\n}\n\n.kg-bookmark-thumbnail img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 0 3px 3px 0;\n\n object-fit: cover;\n}\n\n.kg-bookmark-metadata {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-top: 14px;\n color: var(--darkgrey);\n font-size: 1.5rem;\n font-weight: 500;\n}\n\n.post-full-content .kg-bookmark-icon {\n margin-right: 8px;\n width: 22px;\n height: 22px;\n}\n\n.kg-bookmark-author {\n line-height: 1.5em;\n}\n\n.kg-bookmark-author:after {\n content: \"•\";\n margin: 0 6px;\n}\n\n.kg-bookmark-publisher {\n overflow: hidden;\n max-width: 240px;\n line-height: 1.5em;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: color-mod(var(--midgrey) l(-10%));\n font-weight: 400;\n}\n\n@media (max-width: 800px) {\n .post-full-content figure {\n margin: 0.2em 0 1.3em;\n }\n\n .post-full-content h1 + figure,\n .post-full-content h2 + figure,\n .post-full-content h3 + figure,\n .post-full-content h4 + figure {\n margin-top: 0.9em;\n }\n}\n\n@media (max-width: 500px) {\n .post-full-content .kg-width-wide,\n .post-full-content .kg-width-full {\n margin-right: -5vw;\n margin-left: -5vw;\n }\n\n .post-full-content figcaption {\n margin-bottom: 0.4em;\n }\n\n .post-full-content .kg-bookmark-container {\n flex-direction: column;\n }\n\n .kg-bookmark-title,\n .kg-bookmark-description,\n .kg-bookmark-metadata {\n font-size: 1.4rem;\n line-height: 1.5em;\n }\n\n .post-full-content .kg-bookmark-icon {\n width: 18px;\n height: 18px;\n }\n\n .kg-bookmark-thumbnail {\n order: 1;\n min-height: 160px;\n width: 100%;\n }\n\n .kg-bookmark-thumbnail img {\n border-radius: 3px 3px 0 0;\n }\n\n .kg-bookmark-content {\n order: 2;\n }\n}\n\n/* 8. Author Template\n/* ---------------------------------------------------------- */\n.author-header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 10vw 0 10px;\n}\n\n.site-archive-header .author-header {\n align-items: center;\n}\n\n.site-archive-header .no-image .author-header {\n padding-bottom: 20px;\n}\n\n.author-header-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 5px 0 0 30px;\n}\n\n.site-header-content .author-profile-image {\n z-index: 10;\n flex-shrink: 0;\n margin: -4px 0 0;\n width: 110px;\n height: 110px;\n box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;\n}\n\n.author-header-content .author-bio {\n z-index: 10;\n flex-shrink: 0;\n margin: 6px 0 0;\n max-width: 46em;\n font-size: 2.0rem;\n line-height: 1.3em;\n font-weight: 400;\n opacity: 0.8;\n}\n\n.author-header-content .author-meta {\n z-index: 10;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n margin: 0 0 0 1px;\n font-size: 1.2rem;\n font-weight: 400;\n letter-spacing: 0.2px;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.author-header-content .social-link:first-of-type {\n padding-left: 4px;\n}\n\n.no-image .author-header-content .author-bio {\n color: var(--midgrey);\n opacity: 1.0;\n}\n\n.no-image .author-header-content .author-meta {\n color: var(--midgrey);\n opacity: 1.0;\n}\n\n.author-social-link a {\n color: #fff;\n font-weight: 600;\n}\n\n.no-image .author-social-link a {\n color: var(--darkgrey);\n}\n\n.author-social-link a:hover {\n opacity: 1;\n}\n\n.author-social-link {\n display: inline-block;\n margin: 0;\n padding: 6px 0;\n}\n\n.author-location + .author-stats:before,\n.author-stats + .author-social-link:before,\n.author-social-link + .author-social-link:before {\n content: \"\\2022\";\n display: inline-block;\n margin: 0 12px;\n color: #fff;\n opacity: 0.6;\n}\n\n.no-image .author-location + .author-stats:before,\n.no-image .author-stats + .author-social-link:before,\n.no-image .author-social-link + .author-social-link:before {\n color: var(--midgrey);\n}\n\n@media (max-width: 700px) {\n .author-location,\n .author-stats,\n .author-stats + .author-social-link:first-of-type:before {\n display: none;\n }\n}\n\n@media (max-width: 500px) {\n .author-header {\n padding: 10px 0 0;\n }\n\n .no-image .author-header {\n padding-bottom: 10px;\n }\n\n .author-header-content {\n align-items: center;\n margin: 16px 0 0 0;\n }\n\n .site-header-content .author-profile-image {\n width: 96px;\n height: 96px;\n }\n\n .author-header-content .author-bio {\n font-size: 1.8rem;\n line-height: 1.3em;\n letter-spacing: 0;\n text-align: center;\n }\n\n .author-header-content .author-meta {\n margin-top: 8px;\n }\n\n .author-location + .author-stats:before,\n .author-stats + .author-social-link:before,\n .author-social-link + .author-social-link:before {\n display: inline;\n margin: 0 6px;\n }\n}\n\n\n/* 9. Error Template\n/* ---------------------------------------------------------- */\n\n.error-content {\n padding: 14vw 4vw 6vw;\n}\n\n.site-nav-center {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 0;\n text-align: center;\n}\n\n.site-nav-center .site-nav-logo {\n margin-right: 0;\n}\n\n.error-message {\n padding-bottom: 10vw;\n border-bottom: 1px solid color-mod(var(--lightgrey) l(+10%));\n text-align: center;\n}\n\n.error-code {\n margin: 0;\n color: var(--lightgrey);\n font-size: 12vw;\n line-height: 1em;\n letter-spacing: -5px;\n opacity: 0.75;\n}\n\n.error-description {\n margin: 0;\n color: var(--midgrey);\n font-size: 3rem;\n line-height: 1.3em;\n font-weight: 400;\n}\n\n.error-link {\n display: inline-block;\n margin-top: 5px;\n}\n\n@media (min-width: 940px) {\n .error-content .post-card {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }\n}\n\n@media (max-width: 800px) {\n .error-content {\n padding-top: 24vw;\n }\n .error-code {\n font-size: 11.2rem;\n }\n .error-message {\n padding-bottom: 16vw;\n }\n .error-description {\n margin: 5px 0 0 0;\n font-size: 1.8rem;\n }\n}\n\n@media (max-width: 500px) {\n .error-content {\n padding-top: 28vw;\n }\n .error-message {\n padding-bottom: 14vw;\n }\n}\n\n\n/* 10. Subscribe Message and Overlay\n/* ---------------------------------------------------------- */\n\n.subscribe-notification {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: 9000;\n padding: 20px 0;\n color: #fff;\n text-align: center;\n background: var(--green);\n transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;\n transform: translateY(-175%);\n}\n\n.subscribe-notification.subscribe-failure-message {\n background: var(--red);\n}\n\n.subscribe-success .subscribe-success-message {\n visibility: visible;\n transform: translateY(0);\n}\n\n.subscribe-failure .subscribe-failure-message {\n visibility: visible;\n transform: translateY(0);\n}\n\n.subscribe-notification.close {\n visibility: hidden;\n transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);\n transform: translateY(-175%);\n}\n\n.subscribe-notification .subscribe-close-button {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n.subscribe-notification .subscribe-close-button:before,\n.subscribe-notification .subscribe-close-button:after {\n top: 31px;\n right: 20px;\n width: 18px;\n height: 2px;\n}\n\n.subscribe-close-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n}\n\n.subscribe-close-button {\n position: absolute;\n top: 16px;\n right: 20px;\n z-index: 2000;\n display: block;\n width: 40px;\n height: 40px;\n}\n\n.subscribe-close-button:before {\n content: \"\";\n position: absolute;\n top: 20px;\n right: 4px;\n display: block;\n width: 32px;\n height: 1px;\n background: #fff;\n opacity: 0.8;\n transform: rotate(45deg);\n}\n\n.subscribe-close-button:after {\n content: \"\";\n position: absolute;\n top: 20px;\n right: 4px;\n display: block;\n width: 32px;\n height: 1px;\n background: #fff;\n opacity: 0.8;\n transform: rotate(-45deg);\n}\n\n.subscribe-close-overlay:hover,\n.subscribe-close-button:hover {\n cursor: default;\n}\n\n.subscribe-overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2000;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(9,10,11,0.97);\n opacity: 0;\n transition: opacity 0.2s ease-in;\n pointer-events: none;\n}\n\n.subscribe-overlay:target {\n z-index: 2001;\n opacity: 1;\n pointer-events: auto;\n}\n\n.subscribe-overlay-content {\n position: relative;\n margin: 0 0 5vw 0;\n padding: 4vw;\n color: #fff;\n text-align: center;\n}\n\n.subscribe-overlay .subscribe-form {\n border: none;\n color: #fff;\n background: none;\n}\n\n.subscribe-overlay-logo {\n position: fixed;\n top: 23px;\n left: 30px;\n height: 30px;\n}\n\n.subscribe-overlay-title {\n display: inline-block;\n margin: 0 0 10px 0;\n font-size: 5.2rem;\n line-height: 1.15em;\n}\n\n.subscribe-overlay-description {\n margin: 0 auto 50px;\n max-width: 650px;\n color: #fff;\n font-family: Georgia, serif;\n font-size: 2.4rem;\n line-height: 1.3em;\n font-weight: 300;\n opacity: 0.8;\n}\n\n.subscribe-overlay form {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0 auto;\n max-width: 540px;\n}\n\n.subscribe-overlay .form-group {\n flex-grow: 1;\n}\n\n.subscribe-overlay .subscribe-email {\n display: block;\n padding: 14px 20px;\n width: 100%;\n border: none;\n color: var(--midgrey);\n font-size: 2rem;\n line-height: 1em;\n font-weight: normal;\n letter-spacing: 0.5px;\n user-select: text;\n border-radius: 8px;\n transition: border-color 0.15s linear;\n\n -webkit-appearance: none;\n}\n\n.subscribe-email:focus {\n outline: 0;\n border-color: color-mod(var(--lightgrey) l(-2%));\n}\n\n.subscribe-overlay button {\n display: inline-block;\n margin: 0 0 0 15px;\n padding: 0 25px;\n height: 52px;\n outline: none;\n color: #fff;\n font-size: 1.7rem;\n line-height: 38px;\n font-weight: 400;\n text-align: center;\n background: linear-gradient(\n color-mod(var(--blue) whiteness(+7%)),\n color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,\n color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,\n color-mod(var(--blue) lightness(-4%) saturation(-10%))\n );\n border-radius: 8px;\n\n -webkit-font-smoothing: subpixel-antialiased;\n}\n\n.subscribe-overlay button:active,\n.subscribe-overlay button:focus {\n background: color-mod(var(--blue) lightness(-9%) saturation(-10%));\n}\n\n.subscribe-overlay .loading .button-loader {\n top: 5px;\n}\n\n@media (max-width: 500px) {\n .subscribe-overlay button {\n margin: 12px 0 0;\n }\n}\n\n\n/* 11. Site Footer\n/* ---------------------------------------------------------- */\n\n.site-footer {\n position: relative;\n padding-top: 20px;\n padding-bottom: 60px;\n color: #fff;\n background: color-mod(var(--darkgrey) l(-5%));\n}\n\n.site-footer-content {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n color: rgba(255,255,255,0.7);\n font-size: 1.3rem;\n}\n\n.site-footer-content a {\n color: rgba(255,255,255,0.7);\n}\n\n.site-footer-content a:hover {\n color: rgba(255,255,255,1);\n text-decoration: none;\n}\n\n.site-footer-nav {\n display: flex;\n}\n\n.site-footer-nav a {\n position: relative;\n margin-left: 20px;\n}\n\n.site-footer-nav a:before {\n content: \"\";\n position: absolute;\n top: 11px;\n left: -11px;\n display: block;\n width: 2px;\n height: 2px;\n background: #fff;\n border-radius: 100%;\n}\n\n.site-footer-nav a:first-of-type:before {\n display: none;\n}\n\n@media (max-width: 650px) {\n .site-footer-content {\n flex-direction: column;\n }\n\n .site-footer-nav a:first-child {\n margin-left: 0;\n }\n}\n\n\n/* 12. Dark Mode\n/* ---------------------------------------------------------- */\n@media (prefers-color-scheme: dark) {\n html:not(.no-dark) body {\n color: rgba(255, 255, 255, 0.75);\n background: var(--darkmode);\n }\n\n html:not(.no-dark) img {\n opacity: 0.9;\n }\n\n html:not(.no-dark) .site-header-background:before {\n background: rgba(0,0,0,0.6);\n }\n\n html:not(.no-dark) .post-feed {\n background: var(--darkmode);\n }\n\n html:not(.no-dark) .post-card,\n html:not(.no-dark) .post-card:hover {\n border-bottom-color: color-mod(var(--darkmode) l(+8%));\n }\n\n html:not(.no-dark) .author-profile-image {\n background: var(--darkmode);\n }\n\n html:not(.no-dark) .post-card-byline-content a {\n color: rgba(255, 255, 255, 0.75);\n }\n\n html:not(.no-dark) .post-card-byline-content a:hover {\n color: #fff;\n }\n\n html:not(.no-dark) .post-card-image {\n background: var(--darkmode);\n }\n\n html:not(.no-dark) .post-card-title {\n color: rgba(255, 255, 255, 0.85);\n }\n\n html:not(.no-dark) .post-card-excerpt {\n color: color-mod(var(--midgrey) l(+10%));\n }\n\n html:not(.no-dark) .author-avatar,\n html:not(.no-dark) .static-avatar {\n border-color: color-mod(var(--darkgrey) l(+2%));\n }\n\n html:not(.no-dark) .site-main,\n html:not(.no-dark) .post-template .site-main,\n html:not(.no-dark) .page-template .site-main {\n background: var(--darkmode);\n }\n\n html:not(.no-dark) .post-full-content {\n background: var(--darkmode);\n }\n\n html:not(.no-dark) .post-full-title {\n color: rgba(255, 255, 255, 0.9);\n }\n\n html:not(.no-dark) .post-full-custom-excerpt {\n color: color-mod(var(--midgrey) l(+10%));\n }\n\n html:not(.no-dark) .post-full-image {\n background-color: color-mod(var(--darkmode) l(+8%));\n }\n\n html:not(.no-dark) .post-full-byline {\n border-top-color: color-mod(var(--darkmode) l(+15%));\n }\n\n html:not(.no-dark) .post-full-byline-meta h4 a {\n color: rgba(255, 255, 255, 0.75);\n }\n\n html:not(.no-dark) .post-full-byline-meta h4 a:hover {\n color: #fff;\n }\n\n html:not(.no-dark) .author-list-item .author-card {\n background: color-mod(var(--darkmode) l(+4%));\n box-shadow: 0 12px 26px rgba(0,0,0,0.4);\n }\n\n html:not(.no-dark) .author-list-item .author-card:before {\n border-top-color: color-mod(var(--darkmode) l(+4%));\n }\n\n html:not(.no-dark) .no-image .author-social-link a {\n color: rgba(255, 255, 255, 0.75);\n }\n\n html:not(.no-dark) .post-full-content h1,\n html:not(.no-dark) .post-full-content h2,\n html:not(.no-dark) .post-full-content h3,\n html:not(.no-dark) .post-full-content h4,\n html:not(.no-dark) .post-full-content h6 {\n color: rgba(255, 255, 255, 0.9);\n }\n\n html:not(.no-dark) .post-full-content a {\n color: #fff;\n box-shadow: inset 0 -1px 0 #fff;\n }\n\n html:not(.no-dark) .post-full-content strong {\n color: #fff;\n }\n\n html:not(.no-dark) .post-full-content em {\n color: #fff;\n }\n\n html:not(.no-dark) .post-full-content code {\n color: #fff;\n background: #000;\n }\n\n html:not(.no-dark) hr {\n border-top-color: color-mod(var(--darkmode) l(+8%));\n }\n\n html:not(.no-dark) .post-full-content hr:after {\n background: color-mod(var(--darkmode) l(+8%));\n box-shadow: var(--darkmode) 0 0 0 5px;\n }\n\n html:not(.no-dark) .post-full-content figcaption {\n color: rgba(255, 255, 255, 0.6);\n }\n\n html:not(.no-dark) .post-full-content table td:first-child {\n background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);\n }\n\n html:not(.no-dark) .post-full-content table td:last-child {\n background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);\n }\n\n html:not(.no-dark) .post-full-content table th {\n color: rgba(255, 255, 255, 0.85);\n background-color: color-mod(var(--darkmode) l(+8%));\n }\n\n html:not(.no-dark) .post-full-content table th,\n html:not(.no-dark) .post-full-content table td {\n border: color-mod(var(--darkmode) l(+8%)) 1px solid;\n }\n\n html:not(.no-dark) .post-full-content .kg-bookmark-container,\n html:not(.no-dark) .post-full-content .kg-bookmark-container:hover {\n color: rgba(255, 255, 255, 0.75);\n box-shadow: 0 0 1px rgba(255,255,255,0.9);\n }\n\n html:not(.no-dark) .post-full-content input {\n color: color-mod(var(--midgrey) l(-30%));\n }\n\n html:not(.no-dark) .kg-bookmark-title {\n color: #fff;\n }\n\n html:not(.no-dark) .kg-bookmark-description {\n color: rgba(255, 255, 255, 0.75);\n }\n\n html:not(.no-dark) .kg-bookmark-metadata {\n color: rgba(255, 255, 255, 0.75);\n }\n\n html:not(.no-dark) .site-archive-header .no-image {\n color: rgba(255, 255, 255, 0.9);\n background: var(--darkmode);\n }\n\n html:not(.no-dark) .site-archive-header .no-image .site-header-content {\n border-bottom-color: color-mod(var(--darkmode) l(+15%));\n }\n\n html:not(.no-dark) .site-header-content .author-profile-image {\n box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);\n }\n\n html:not(.no-dark) .subscribe-form {\n border: none;\n background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));\n }\n\n html:not(.no-dark) .subscribe-form-title {\n color: rgba(255, 255, 255, 0.9);\n }\n\n html:not(.no-dark) .subscribe-form p {\n color: rgba(255, 255, 255, 0.7);\n }\n\n html:not(.no-dark) .subscribe-email {\n border-color: color-mod(var(--darkmode) l(+6%));\n color: rgba(255, 255, 255, 0.9);\n background: color-mod(var(--darkmode) l(+3%));\n }\n\n html:not(.no-dark) .subscribe-email:focus {\n border-color: color-mod(var(--darkmode) l(+25%));\n }\n\n html:not(.no-dark) .subscribe-form button {\n opacity: 0.9;\n }\n\n html:not(.no-dark) .subscribe-form .invalid .message-error,\n html:not(.no-dark) .subscribe-form .error .message-error {\n color: color-mod(var(--red) l(+5%) s(-5%));\n }\n\n html:not(.no-dark) .subscribe-form .success .message-success {\n color: color-mod(var(--green) l(+5%) s(-5%));\n }\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["global.css","screen.css"],"names":[],"mappings":"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","file":"screen.css","sourcesContent":["/* Reset\n/* ---------------------------------------------------------- */\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\nbody {\n line-height: 1;\n}\nol,\nul {\n list-style: none;\n}\nblockquote,\nq {\n quotes: none;\n}\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: \"\";\n content: none;\n}\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\nimg {\n max-width: 100%;\n height: auto;\n}\nhtml {\n box-sizing: border-box;\n font-family: sans-serif;\n\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\na {\n background-color: transparent;\n}\na:active,\na:hover {\n outline: 0;\n}\nb,\nstrong {\n font-weight: bold;\n}\ni,\nem,\ndfn {\n font-style: italic;\n}\nh1 {\n margin: 0.67em 0;\n font-size: 2em;\n}\nsmall {\n font-size: 80%;\n}\nsub,\nsup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n}\nsup {\n top: -0.5em;\n}\nsub {\n bottom: -0.25em;\n}\nimg {\n border: 0;\n}\nsvg:not(:root) {\n overflow: hidden;\n}\nmark {\n background-color: #fdffb6;\n}\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, monospace;\n font-size: 1em;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n margin: 0; /* 3 */\n color: inherit; /* 1 */\n font: inherit; /* 2 */\n}\nbutton {\n overflow: visible;\n border: none;\n}\nbutton,\nselect {\n text-transform: none;\n}\nbutton,\nhtml input[type=\"button\"],\n/* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n cursor: pointer; /* 3 */\n\n -webkit-appearance: button; /* 2 */\n}\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\ninput {\n line-height: normal;\n}\ninput:focus {\n outline: none;\n}\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\ninput[type=\"search\"] {\n box-sizing: content-box; /* 2 */\n\n -webkit-appearance: textfield; /* 1 */\n}\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\nlegend {\n padding: 0; /* 2 */\n border: 0; /* 1 */\n}\ntextarea {\n overflow: auto;\n}\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\ntd,\nth {\n padding: 0;\n}\n\n/* ==========================================================================\n Base styles: opinionated defaults\n ========================================================================== */\n\nhtml {\n font-size: 62.5%;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\nbody {\n color: #35373A;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n font-size: 1.6rem;\n line-height: 1.6em;\n font-weight: 400;\n font-style: normal;\n letter-spacing: 0;\n text-rendering: optimizeLegibility;\n background: #fff;\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -moz-font-feature-settings: \"liga\" on;\n}\n\n::selection {\n text-shadow: none;\n background: #daf2fd;\n}\n\nhr {\n position: relative;\n display: block;\n width: 100%;\n margin: 2.5em 0 3.5em;\n padding: 0;\n height: 1px;\n border: 0;\n border-top: 1px solid #f0f0f0;\n}\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n vertical-align: middle;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n border: 0;\n}\n\ntextarea {\n resize: vertical;\n}\n\n::not(.gh-content) p,\n::not(.gh-content) ul,\n::not(.gh-content) ol,\n::not(.gh-content) dl,\n::not(.gh-content) blockquote {\n margin: 0 0 1.5em 0;\n}\n\nol,\nul {\n padding-left: 1.3em;\n padding-right: 1.5em;\n}\n\nol ol,\nul ul,\nul ol,\nol ul {\n margin: 0.5em 0 1em;\n}\n\nul {\n list-style: disc;\n}\n\nol {\n list-style: decimal;\n}\n\nul,\nol {\n max-width: 100%;\n}\n\nli {\n margin: 0.5em 0;\n padding-left: 0.3em;\n line-height: 1.6em;\n}\n\ndt {\n float: left;\n margin: 0 20px 0 0;\n width: 120px;\n color: #daf2fd;\n font-weight: 500;\n text-align: right;\n}\n\ndd {\n margin: 0 0 5px 0;\n text-align: left;\n}\n\nblockquote {\n margin: 1.5em 0;\n padding: 0 1.6em 0 1.6em;\n border-left: #daf2fd;\n}\n\nblockquote p {\n margin: 0.8em 0;\n font-size: 1.2em;\n font-weight: 300;\n}\n\nblockquote small {\n display: inline-block;\n margin: 0.8em 0 0.8em 1.5em;\n font-size: 0.9em;\n opacity: 0.8;\n}\n/* Quotation marks */\nblockquote small:before {\n content: \"\\2014 \\00A0\";\n}\n\nblockquote cite {\n font-weight: bold;\n}\nblockquote cite a {\n font-weight: normal;\n}\n\na {\n color: #15171A;\n text-decoration: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-top: 0;\n line-height: 1.15;\n font-weight: 600;\n text-rendering: optimizeLegibility;\n letter-spacing: -0.01em;\n}\n\nh1 {\n margin: 0 0 0.5em 0;\n font-size: 4.8rem;\n font-weight: 700;\n letter-spacing: -0.015em;\n}\n@media (max-width: 600px) {\n h1 {\n font-size: 2.8rem;\n }\n}\n\nh2 {\n margin: 1.5em 0 0.5em 0;\n font-size: 2.8rem;\n font-weight: 700;\n}\n@media (max-width: 600px) {\n h2 {\n font-size: 2.3rem;\n }\n}\n\nh3 {\n margin: 1.5em 0 0.5em 0;\n font-size: 1.8rem;\n font-weight: 500;\n}\n@media (max-width: 600px) {\n h3 {\n font-size: 1.7rem;\n }\n}\n\nh4 {\n margin: 1.5em 0 0.5em 0;\n font-size: 1.6rem;\n}\n\nh5 {\n margin: 1.5em 0 0.5em 0;\n font-size: 1.4rem;\n}\n\nh6 {\n margin: 1.5em 0 0.5em 0;\n font-size: 1.4rem;\n}\n","/* Table of Contents\n/* ------------------------------------------------------------\n\nThis is a development CSS file which is built to a minified\nproduction stylesheet in assets/built/screen.css\n\n1. Global Styles\n2. Layout\n3. Special Templates\n4. Site Header\n 4.1 Home header\n 4.2 Archive header\n5. Site Navigation\n6. Post Feed\n7. Single Post\n 7.1. Post Byline\n 7.2. Members Subscribe Form\n 7.4. Related Posts\n 7.5. Koenig Styles\n8. Author Template\n9. Error Template\n11. Site Footer\n12. Dark Mode\n\n*/\n\n/* 1. Global - Set up the things\n/* ---------------------------------------------------------- */\n\n/* Import CSS reset and base styles */\n@import \"global.css\";\n\n:root {\n\n /* Colours */\n --color-green: #a4d037;\n --color-yellow: #fecd35;\n --color-red: #f05230;\n --color-darkgrey: #15171A;\n --color-midgrey: #738a94;\n --color-lightgrey: #c5d2d9;\n --color-wash: #e5eff5;\n --color-darkmode: #151719;\n\n /*\n An accent color is also set by Ghost itself in\n Ghost Admin > Settings > Brand\n\n --ghost-accent-color: {value};\n\n You can use this variale throughout your styles\n */\n\n /* Fonts */\n --font-sans-serif: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n --font-serif: Georgia, Times, serif;\n --font-mono: Menlo, Courier, monospace;\n\n}\n\n\n/* 2. Layout - Page building blocks\n/* ---------------------------------------------------------- */\n\n.viewport {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\n/* Full width page blocks */\n.outer {\n position: relative;\n padding: 0 4vmin;\n}\n\n/* Centered content container blocks */\n.inner {\n margin: 0 auto;\n max-width: 1200px;\n width: 100%;\n}\n\n\n/* 4. Site Header\n/* ---------------------------------------------------------- */\n\n.site-header {\n position: relative;\n color: #fff;\n background: var(--ghost-accent-color);\n}\n\n.site-header-cover {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.site-header-content {\n position: relative;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 6vw 3vw;\n min-height: 200px;\n max-height: 340px;\n text-align: center;\n}\n\n.site-title {\n z-index: 10;\n margin: 0 0 0.15em;\n padding: 0;\n}\n\n.site-logo {\n max-height: 55px;\n}\n\n.site-header-content p {\n z-index: 10;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.2em;\n opacity: 0.8;\n}\n\n@media (max-width: 600px) {\n .site-header-content p {\n max-width: 80vmin;\n font-size: 1.8rem;\n }\n}\n\n/* 4.1 Home header\n/* ---------------------------------------------------------- */\n\n.site-home-header {\n position: relative;\n z-index: 1000;\n overflow: hidden;\n}\n\n.site-header-content {\n padding: 18vmin 4vmin;\n font-size: 2.5rem;\n font-weight: 400;\n color: #fff;\n background: var(--ghost-accent-color);\n}\n\n\n\n/* 5. Site Navigation\n/* ---------------------------------------------------------- */\n\n.gh-head {\n padding: 1vmin 4vmin;\n font-size: 1.6rem;\n line-height: 1.3em;\n color: #fff;\n background: var(--ghost-accent-color);\n}\n\n.gh-head a {\n color: inherit;\n text-decoration: none;\n}\n\n.gh-head-inner {\n display: grid;\n grid-gap: 2.5vmin;\n grid-template-columns: auto auto 1fr;\n grid-auto-flow: row dense;\n}\n\n\n/* Brand\n/* ---------------------------------------------------------- */\n\n.gh-head-brand {\n display: flex;\n align-items: center;\n height: 40px;\n max-width: 200px;\n text-align: center;\n word-break: break-all;\n}\n\n.gh-head-logo {\n display: block;\n padding: 10px 0;\n font-weight: 700;\n font-size: 2rem;\n line-height: 1.2em;\n letter-spacing: -0.02em;\n}\n\n.gh-head-logo img {\n max-height: 26px;\n}\n\n\n/* Primary Navigation\n/* ---------------------------------------------------------- */\n\n.gh-head-menu {\n display: flex;\n align-items: center;\n font-weight: 500;\n}\n\n.gh-head-menu .nav {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.gh-head-menu .nav li {\n margin: 0 2.5vmin 0 0;\n padding: 0;\n}\n\n.gh-head-menu .nav a {\n display: inline-block;\n padding: 5px 0;\n opacity: 0.8\n}\n\n.gh-head-menu .nav a:hover {\n opacity: 1;\n}\n\n\n/* Secondary Navigation\n/* ---------------------------------------------------------- */\n\n.gh-head-actions {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n list-style: none;\n text-align: right;\n}\n\n.gh-head-actions-list {\n display: inline-flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n}\n\n.gh-head-actions-list a:not([class]) {\n display: inline-block;\n margin: 0 0 0 1.5vmin;\n padding: 5px 0;\n}\n\n.gh-social {\n margin: 0 1.5vmin 0 0;\n}\n\n.gh-social a {\n opacity: 0.8\n}\n.gh-social a:hover {\n opacity: 1;\n}\n\n.gh-social svg {\n height: 22px;\n width: 22px;\n fill: #fff;\n}\n\na.gh-head-button {\n display: block;\n padding: 8px 15px;\n color: var(--color-darkgrey);\n font-weight: 500;\n letter-spacing: -0.015em;\n font-size: 1.5rem;\n line-height: 1em;\n background: #fff;\n border-radius: 30px;\n}\n\n\n/* Mobile Menu Trigger\n/* ---------------------------------------------------------- */\n\n.gh-burger {\n position: relative;\n display: none;\n cursor: pointer;\n}\n\n.gh-burger-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 33px;\n height: 33px;\n}\n\n.gh-burger-inner {\n width: 100%;\n height: 100%;\n}\n\n.gh-burger-box::before {\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n content: '';\n width: 100%;\n height: 1px;\n background: currentcolor;\n transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);\n will-change: transform, width;\n}\n\n.gh-burger-inner::before,\n.gh-burger-inner::after {\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n content: '';\n width: 100%;\n height: 1px;\n background: currentcolor;\n transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);\n will-change: transform, width;\n}\n\n.gh-burger-inner::before {\n transform: translatey(-6px);\n}\n.gh-burger-inner::after {\n transform: translatey(6px);\n}\n\nbody:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {\n transform: translatey(-8px);\n}\nbody:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {\n transform: translatey(8px);\n}\n\n.gh-head-open .gh-burger-box::before {\n width: 0;\n transform: translatex(19px);\n transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);\n}\n\n.gh-head-open .gh-burger-inner::before {\n width: 26px;\n transform: translatex(6px) rotate(135deg);\n}\n\n.gh-head-open .gh-burger-inner::after {\n width: 26px;\n transform: translatex(6px) rotate(-135deg);\n}\n\n\n/* Mobile Menu\n/* ---------------------------------------------------------- */\n/* IDs needed to ensure sufficient specificity */\n\n@media (max-width: 900px) {\n .gh-burger {\n display: inline-block;\n }\n #gh-head {\n transition: all 0.4s ease-out;\n overflow: hidden;\n }\n #gh-head .gh-head-inner {\n height: 100%;\n grid-template-columns: 1fr;\n }\n #gh-head .gh-head-brand {\n position: relative;\n z-index: 10;\n grid-column-start: auto;\n max-width: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n user-select: none;\n }\n .home-template #gh-head .gh-head-brand {\n justify-content: flex-end;\n }\n #gh-head .gh-head-logo {\n font-size: 2rem;\n }\n #gh-head .gh-head-logo img {\n max-height: 40px;\n }\n #gh-head .gh-head-menu {\n align-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n margin: 0 0 10vh 0;\n font-weight: 300;\n font-size: 3.6rem;\n line-height: 1.1em;\n }\n #gh-head .gh-head-menu .nav li {\n margin: 5px 0;\n }\n #gh-head .gh-head-menu .nav a {\n padding: 8px 0;\n }\n #gh-head .gh-head-menu .nav {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n #gh-head .gh-head-actions {\n padding: 20px 0;\n justify-content: center;\n text-align: left;\n }\n #gh-head .gh-head-actions a {\n margin: 0 10px;\n }\n /* Hide collapsed content */\n #gh-head .gh-head-actions,\n #gh-head .gh-head-menu {\n display: none;\n }\n /* Open the menu */\n .gh-head-open {\n overflow: hidden;\n height: 100vh;\n }\n .gh-head-open #gh-head {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999999;\n overflow-y: scroll;\n }\n .gh-head-open #gh-head .gh-head-inner {\n grid-template-rows: auto 1fr auto;\n }\n .gh-head-open #gh-head .gh-head-actions,\n .gh-head-open #gh-head .gh-head-menu {\n display: flex;\n }\n}\n\n@media (max-width: 600px) {\n #gh-head .gh-head-menu {\n font-size: 6vmin;\n }\n}\n\n.home-template .gh-head {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 2000;\n}\n\n.home-template .gh-head.has-cover {\n background: transparent;\n}\n\n.home-template.gh-head-open .gh-head {\n background: var(--ghost-accent-color);\n}\n\n.home-template .gh-head-logo {\n display: none;\n}\n.home-template .gh-head-menu {\n margin-left: -2.5vmin;\n}\n\n\n/* 6. Post Feed\n/* ---------------------------------------------------------- */\n\n.post-feed {\n position: relative;\n display: grid;\n grid-gap: 4vmin;\n grid-template-columns: 1fr 1fr 1fr;\n padding: 4vmin 0;\n}\n\n@media (max-width: 1000px) {\n .post-feed {\n grid-template-columns: 1fr 1fr;\n }\n}\n@media (max-width: 700px) {\n .post-feed {\n grid-template-columns: 1fr;\n grid-gap: 40px;\n }\n}\n\n.post-card {\n position: relative;\n flex: 1 1 301px;\n display: flex;\n flex-direction: column;\n min-height: 220px;\n background-size: cover;\n}\n\n.post-card-image-link {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: 3px;\n}\n\n.post-card-image {\n width: 100%;\n height: 200px;\n background: var(--color-lightgrey) no-repeat center center;\n\n object-fit: cover;\n}\n\n.post-card-content-link {\n position: relative;\n display: block;\n color: var(--color-darkgrey);\n}\n\n.post-card-content-link:hover {\n text-decoration: none;\n}\n\n.post-card-header {\n margin: 20px 0 0;\n}\n\n.post-feed .no-image .post-card-content-link {\n padding: 0;\n}\n\n.no-image .post-card-header {\n margin-top: 0;\n}\n\n.post-card-primary-tag {\n margin: 0 0 0.2em;\n color: var(--ghost-accent-color);\n font-size: 1.2rem;\n font-weight: 500;\n letter-spacing: 0.2px;\n text-transform: uppercase;\n}\n\n.post-card-title {\n margin: 0 0 0.4em;\n font-size: 2.4rem;\n transition: color 0.2s ease-in-out;\n}\n\n.no-image .post-card-title {\n margin-top: 0;\n}\n\n.post-card-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n\n.post-card-excerpt {\n max-width: 56em;\n color: color-mod(var(--color-midgrey) l(-8%));\n}\n\n.post-card-excerpt p {\n margin-bottom: 1em;\n display: -webkit-box;\n overflow-y: hidden;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n}\n\n.post-card-meta {\n display: flex;\n align-items: center;\n padding: 0;\n}\n\n.author-profile-image,\n.avatar-wrapper {\n display: block;\n width: 100%;\n height: 100%;\n background: color-mod(var(--color-lightgrey) l(+10%));\n border-radius: 100%;\n\n object-fit: cover;\n}\n\n.post-card-meta .profile-image-wrapper,\n.post-card-meta .avatar-wrapper {\n position: relative;\n}\n\n.author-list {\n display: flex;\n flex-wrap: wrap;\n margin: 0 0 0 4px;\n padding: 0;\n list-style: none;\n}\n\n.author-list-item {\n position: relative;\n flex-shrink: 0;\n margin: 0;\n padding: 0;\n}\n\n.static-avatar {\n display: block;\n overflow: hidden;\n margin: 0 0 0 -6px;\n width: 36px;\n height: 36px;\n border-radius: 100%;\n box-shadow: 0 0 0 1px rgba(255,255,255,0.2);\n}\n\n.post-card-byline-content {\n flex: 1 1 50%;\n display: flex;\n flex-direction: column;\n margin: 0 0 0 8px;\n color: color-mod(var(--color-midgrey) l(+10%));\n font-size: 1.4rem;\n line-height: 1.2em;\n font-weight: 400;\n}\n\n.post-card-byline-content span {\n margin: 0;\n}\n\n.post-card-byline-content a {\n color: color-mod(var(--color-darkgrey) l(+15%));\n font-weight: 600;\n}\n\n.post-card-byline-date {\n font-size: 1.3rem;\n line-height: 1.5em;\n}\n\n.post-card-byline-date .bull {\n display: inline-block;\n margin: 0 2px;\n opacity: 0.6;\n}\n\n.single-author-byline {\n display: flex;\n flex-direction: column;\n margin-left: 5px;\n color: color-mod(var(--color-midgrey) l(-10%));\n font-size: 1.3rem;\n line-height: 1.4em;\n font-weight: 500;\n}\n\n.single-author {\n display: flex;\n align-items: center;\n}\n\n.single-author .static-avatar {\n margin-left: -2px;\n}\n\n.single-author-name {\n display: inline-block;\n}\n\n/* Special Styling for home page grid (below):\n\nThe first post in the list is styled to be bigger than the others and take over\nthe full width of the grid to give it more emphasis. Wrapped in a media query to\nmake sure this only happens on large viewports / desktop-ish devices.\n\n */\n\n@media (min-width: 1001px) {\n .post-card-large {\n grid-column: 1 / span 3;\n display: grid;\n grid-gap: 4vmin;\n grid-template-columns: 1fr 1fr 1fr;\n min-height: 280px;\n border-top: 0;\n }\n\n .post-card-large:not(.no-image) .post-card-header {\n margin-top: 0;\n }\n\n .post-card-large .post-card-image-link {\n position: relative;\n grid-column: 1 / span 2;\n margin-bottom: 0;\n min-height: 380px;\n }\n\n .post-card-large .post-card-image {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n .post-card-large .post-card-content {\n justify-content: center;\n }\n\n .post-card-large .post-card-title {\n margin-top: 0;\n font-size: 3.2rem;\n }\n\n .post-card-large .post-card-excerpt p {\n margin-bottom: 1.5em;\n font-size: 1.7rem;\n line-height: 1.55em;\n -webkit-line-clamp: 8;\n }\n}\n\n\n@media (max-width: 500px) {\n .post-card-title {\n font-size: 1.9rem;\n }\n\n .post-card-excerpt {\n font-size: 1.6rem;\n }\n}\n\n\n/* 7. Single Post\n/* ---------------------------------------------------------- */\n\n.article {\n padding: 8vmin 0;\n}\n\n.article-header {\n padding: 0 0 6vmin 0;\n}\n\n.article-tag {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 0 0 0.5rem;\n color: var(--color-midgrey);\n font-size: 1.3rem;\n line-height: 1.4em;\n letter-spacing: 0.02em;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.article-tag a {\n color: var(--ghost-accent-color);\n}\n\n.article-title {\n color: color-mod(var(--color-darkgrey) l(-5%));\n}\n\n.article-excerpt {\n margin: 0 0 1rem;\n font-size: 2rem;\n line-height: 1.4em;\n opacity: 0.6;\n}\n\n.gh-canvas .article-image {\n grid-column: wide-start / wide-end;\n width: 100%;\n margin: 6vmin 0 0;\n}\n\n@media (max-width: 600px) {\n .article-excerpt {\n font-size: 1.8rem;\n }\n}\n\n/* -------- */\n\n/* Content grid\n/* ---------------------------------------------------------- */\n\n/* Canvas creates a multi-column, centered grid which the post\nis laid out on top of. Canvas just defines the grid, we don't\nuse it for applying any other styles. */\n\n.gh-canvas {\n display: grid;\n grid-template-columns:\n [full-start]\n minmax(4vmin, auto)\n [wide-start]\n minmax(auto, 240px)\n [main-start]\n min(720px, calc(100% - 8vw))\n [main-end]\n minmax(auto, 240px)\n [wide-end]\n minmax(4vmin, auto)\n [full-end]\n ;\n}\n\n.gh-canvas > * {\n grid-column: main-start / main-end;\n}\n\n.kg-width-wide {\n grid-column: wide-start / wide-end;\n}\n\n.kg-width-full {\n grid-column: full-start / full-end;\n}\n\n.kg-width-full img {\n width: 100%;\n}\n\n\n/* Content\n/* ---------------------------------------------------------- */\n\n/* Content refers to styling all page and post content that is\ncreated within the Ghost editor. The main content handles\nheadings, text, images and lists. We deal with cards lower down. */\n\n/* Default vertical spacing */\n.gh-content > * + * {\n margin-top: 4vmin;\n margin-bottom: 0;\n}\n\n/* [id] represents all headings h1-h6, reset all margins */\n.gh-content > [id] {\n margin: 0;\n color: var(--color-darkgrey);\n}\n\n/* Add back a top margin to all headings, unless a heading\nis the very first element in the post content */\n.gh-content > [id]:not(:first-child) {\n margin: 2em 0 0;\n}\n\n/* Add a small margin between a heading and anything after it */\n.gh-content > [id] + * {\n margin-top: 1.5rem !important;\n}\n\n/* A larger margin before/after HRs and blockquotes */\n.gh-content > hr,\n.gh-content > blockquote {\n position: relative;\n margin-top: 6vmin;\n}\n.gh-content > hr + *,\n.gh-content > blockquote + * {\n margin-top: 6vmin !important;\n}\n\n/* Now the content typography styles */\n.gh-content a {\n color: var(--ghost-accent-color);\n text-decoration: underline;\n}\n\n.gh-content > blockquote,\n.gh-content > ol,\n.gh-content > ul,\n.gh-content > dl,\n.gh-content > p {\n font-family: var(--font-serif);\n font-weight: 400;\n font-size: 2.1rem;\n line-height: 1.6em;\n}\n\n.gh-content > ul,\n.gh-content > ol,\n.gh-content > dl {\n padding-left: 1.9em;\n}\n\n.gh-content > blockquote {\n position: relative;\n font-style: italic;\n padding: 0;\n}\n\n.gh-content > blockquote::before {\n content: \"\";\n position: absolute;\n left: -1.5em;\n top: 0;\n bottom: 0;\n width: 0.3rem;\n background: var(--ghost-accent-color);\n}\n\n.gh-content :not(pre) > code {\n vertical-align: middle;\n padding: 0.15em 0.4em 0.15em;\n border: #e1eaef 1px solid;\n font-weight: 400 !important;\n font-size: 0.9em;\n line-height: 1em;\n color: #15171A;\n background: #f0f6f9;\n border-radius: 0.25em;\n}\n\n.gh-content pre {\n overflow-x: auto;\n overflow: scroll;\n padding: 16px 20px;\n border: 1px solid color-mod(var(--color-darkgrey) l(-20%));\n color: var(--color-wash);\n font-size: 1.4rem;\n line-height: 1.5em;\n background: var(--color-darkgrey);\n border-radius: 5px;\n box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);\n}\n\n@media (max-width: 650px) {\n .gh-content blockquote,\n .gh-content ol,\n .gh-content ul,\n .gh-content dl,\n .gh-content p {\n font-size: 1.7rem;\n }\n\n .gh-content blockquote::before {\n left: -4vmin;\n }\n}\n\n\n/* Cards\n/* ---------------------------------------------------------- */\n\n/* Cards are dynamic blocks of content which appear within Ghost\nposts, for example: embedded videos, tweets, galleries, or\nspecially styled bookmark links. We add extra styling here to\nmake sure they look good, and are given a bit of extra spacing. */\n\n/* Add extra margin before/after any cards,\nexcept for when immediately preceeded by a heading */\n.gh-content :not(.kg-card):not([id]) + .kg-card {\n margin-top: 6vmin;\n margin-bottom: 0;\n}\n.gh-content .kg-card + :not(.kg-card) {\n margin-top: 6vmin;\n margin-bottom: 0;\n}\n\n/* This keeps small embeds centered */\n.kg-embed-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\n/* This keeps small iamges centered */\n.kg-image-card img {\n margin: auto;\n}\n\n\n/* Captions */\n.kg-card figcaption {\n padding: 1.5rem 1.5rem 0;\n text-align: center;\n color: rgba(0,0,0,0.5);\n font-weight: 600;\n font-size: 1.3rem;\n line-height: 1.4em;\n}\n.kg-card figcaption strong {\n color: rgba(0,0,0,0.8);\n}\n\n\n/* Galleries\n/* ---------------------------------------------------------- */\n\n/* When there galleries are mixed with images, reduce margin\nbetween them, so it looks like 1 big gallery */\n.kg-image-card + .kg-gallery-card,\n.kg-gallery-card + .kg-image-card,\n.kg-gallery-card + .kg-gallery-card {\n margin-top: 0.75em;\n}\n\n.kg-gallery-container {\n position: relative;\n}\n\n.kg-gallery-row {\n display: flex;\n flex-direction: row;\n justify-content: center;\n}\n\n.kg-gallery-image img {\n display: block;\n margin: 0;\n width: 100%;\n height: 100%;\n}\n\n.kg-gallery-row:not(:first-of-type) {\n margin: 0.75em 0 0 0;\n}\n\n.kg-gallery-image:not(:first-of-type) {\n margin: 0 0 0 0.75em;\n}\n\n\n/* Bookmark Cards\n/* ---------------------------------------------------------- */\n\n/* These are styled links with structured data, similar to a\nTwitter card. These styles roughly match what you see in the\nGhost editor. */\n\n.kg-bookmark-card,\n.kg-bookmark-publisher {\n position: relative;\n width: 100%;\n}\n\n.kg-bookmark-container,\n.kg-bookmark-container:hover {\n display: flex;\n color: currentColor;\n font-family: var(--font-sans-serif);\n text-decoration: none !important;\n background: rgba(255,255,255,0.6);\n border-radius: 5px;\n box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);\n overflow: hidden;\n}\n\n.kg-bookmark-content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n flex-basis: 100%;\n align-items: flex-start;\n justify-content: flex-start;\n padding: 20px;\n}\n\n.kg-bookmark-title {\n font-size: 1.5rem;\n line-height: 1.4em;\n font-weight: 600;\n color: #15171A;\n}\n\n.kg-bookmark-description {\n display: -webkit-box;\n font-size: 1.4rem;\n line-height: 1.5em;\n margin-top: 3px;\n color: #626d79;\n font-weight: 400;\n max-height: 44px;\n overflow-y: hidden;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.kg-bookmark-metadata {\n display: flex;\n align-items: center;\n margin-top: 22px;\n width: 100%;\n color: #394047;\n font-size: 1.4rem;\n font-weight: 500;\n}\n\n.kg-bookmark-icon {\n width: 20px;\n height: 20px;\n margin-right: 6px;\n}\n\n.kg-bookmark-author,\n.kg-bookmark-publisher {\n display: inline;\n}\n\n.kg-bookmark-publisher {\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 240px;\n white-space: nowrap;\n display: block;\n line-height: 1.65em;\n}\n\n.kg-bookmark-metadata > span:nth-of-type(2) {\n color: #626d79;\n font-weight: 400;\n}\n\n.kg-bookmark-metadata > span:nth-of-type(2):before {\n content: \"•\";\n color: #394047;\n margin: 0 6px;\n}\n\n.kg-bookmark-thumbnail {\n position: relative;\n flex-grow: 1;\n min-width: 33%;\n}\n\n.kg-bookmark-thumbnail img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 0 4px 4px 0;\n}\n\n\n/* Card captions\n/* ---------------------------------------------------------- */\n\n.kg-width-full.kg-card-hascaption {\n display: grid;\n grid-template-columns: inherit;\n}\n\n.kg-width-wide.kg-card-hascaption img {\n grid-column: wide-start / wide-end;\n}\n.kg-width-full.kg-card-hascaption img {\n grid-column: 1 / -1;\n}\n\n.kg-width-full.kg-card-hascaption figcaption {\n grid-column: main-start / main-end;\n}\n\n.article-comments {\n margin: 6vmin 0 0 0;\n}\n\n/* -----old------ */\n\n.footnotes-sep {\n margin-bottom: 30px;\n}\n\n.footnotes {\n font-size: 1.5rem;\n}\n\n.footnotes p {\n margin: 0;\n}\n\n.footnote-backref {\n font-size: 1.2rem;\n font-weight: bold;\n text-decoration: none !important;\n box-shadow: none !important;\n}\n\n/* Tables */\n.post-full-content table {\n display: inline-block;\n overflow-x: auto;\n margin: 0.5em 0 2.5em;\n max-width: 100%;\n width: auto;\n border-spacing: 0;\n border-collapse: collapse;\n font-family: var(--font-sans-serif);\n font-size: 1.6rem;\n white-space: nowrap;\n vertical-align: top;\n}\n\n.post-full-content table {\n -webkit-overflow-scrolling: touch;\n 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;\n background-attachment: scroll, scroll;\n background-size: 10px 100%, 10px 100%;\n background-repeat: no-repeat;\n}\n\n.post-full-content table td:first-child {\n background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);\n background-size: 20px 100%;\n background-repeat: no-repeat;\n}\n\n.post-full-content table td:last-child {\n background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);\n background-position: 100% 0;\n background-size: 20px 100%;\n background-repeat: no-repeat;\n}\n\n.post-full-content table th {\n color: var(--color-darkgrey);\n font-size: 1.2rem;\n font-weight: 700;\n letter-spacing: 0.2px;\n text-align: left;\n text-transform: uppercase;\n background-color: color-mod(var(--color-wash) l(+4%));\n}\n\n.post-full-content table th,\n.post-full-content table td {\n padding: 6px 12px;\n border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;\n}\n\n\n/* 7.1. Post Byline\n/* ---------------------------------------------------------- */\n\n.article-byline {\n display: flex;\n justify-content: space-between;\n margin: 20px 0 0;\n}\n\n.article-byline-content {\n flex-grow: 1;\n display: flex;\n align-items: center;\n}\n\n.article-byline-content .author-list {\n justify-content: flex-start;\n padding: 0 12px 0 0;\n}\n\n.article-byline-meta {\n color: color-mod(var(--color-midgrey));\n font-size: 1.4rem;\n line-height: 1.2em;\n}\n\n.article-byline-meta h4 {\n margin: 0 0 3px;\n font-size: 1.6rem;\n}\n\n.article-byline-meta .bull {\n display: inline-block;\n margin: 0 2px;\n opacity: 0.6;\n}\n\n.author-avatar {\n display: block;\n overflow: hidden;\n margin: 0 -4px;\n width: 50px;\n height: 50px;\n border: #fff 2px solid;\n border-radius: 100%;\n transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;\n}\n\n.basic-info .avatar-wrapper {\n position: relative;\n margin: 0;\n width: 60px;\n height: 60px;\n border: none;\n background: rgba(229, 239, 245, 0.1);\n}\n\n.basic-info .avatar-wrapper svg {\n margin: 0;\n width: 60px;\n height: 60px;\n opacity: 0.15;\n}\n\n.page-template .article-title {\n margin-bottom: 0;\n}\n\n\n/* 7.3. Subscribe\n/* ---------------------------------------------------------- */\n\n.footer-cta {\n position: relative;\n padding: 9vmin 4vmin 10vmin;\n color: #fff;\n text-align: center;\n background: var(--color-darkgrey);\n}\n\n.footer-cta h2 {\n margin: 0 0 30px;\n transform: scale(1.15);\n}\n\n.footer-cta-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n max-width: 500px;\n padding: 5px 5px 5px 15px;\n font-size: 1.8rem;\n color: var(--color-midgrey);\n background: #fff;\n border-radius: 8px;\n}\n\n.footer-cta-button span {\n display: inline-block;\n padding: 10px 20px;\n color: #fff;\n font-weight: 500;\n background: var(--ghost-accent-color);\n border-radius: 5px;\n}\n\n\n/* 7.4. Read more\n/* ---------------------------------------------------------- */\n\n.read-more-wrap {\n width: 100%;\n padding: 4vmin;\n margin: 0 auto -40px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n background: color-mod(var(--color-darkgrey) l(-5%));\n}\n\n.read-more {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-gap: 4vmin;\n}\n\n.read-more .post-card-title {\n color: #fff;\n opacity: 0.8;\n}\n\n.read-more .post-card-excerpt {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.read-more .post-card-byline-content a {\n color: #fff;\n}\n\n\n@media (max-width: 1000px) {\n .read-more {\n grid-template-columns: 1fr 1fr;\n }\n .read-more article:nth-child(3) {\n display: none;\n }\n}\n\n@media (max-width: 700px) {\n .read-more {\n grid-template-columns: 1fr;\n }\n .read-more article:nth-child(2) {\n display: none;\n }\n}\n\n\n/* 8. Author Template\n/* ---------------------------------------------------------- */\n\n.author-template .posts {\n position: relative;\n height: 100%;\n display: grid;\n grid-template-columns: 200px 1fr 1fr;\n grid-gap: 4vmin;\n}\n\n.author-template .posts .post-feed {\n grid-column: 2 / 4;\n grid-template-columns: 1fr 1fr;\n}\n\n.author-profile {\n padding: 4vmin 0;\n}\n\n.author-profile-content {\n height: auto;\n position: sticky;\n top: 4vmin;\n font-size: 1.4rem;\n line-height: 1.4em;\n}\n\n.author-profile-pic {\n display: block;\n width: 150px;\n height: 150px;\n object-fit: cover;\n margin: 0 0 2rem;\n}\n\n.author-profile h1 {\n margin: 0 0 0.3em;\n font-size: 2rem;\n}\n\n.author-profile p {\n margin: 0 0 1.5em;\n color: color-mod(var(--color-midgrey) l(-8%));\n}\n\n.author-profile-location {\n margin: 0 0 1.5em;\n font-weight: 700;\n}\n\n.author-profile-social-link {\n display: block;\n padding: 0 0 5px;\n font-size: 1.3rem;\n color: color-mod(var(--color-midgrey) l(-8%));\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n white-space: nowrap;\n}\n\n.author-profile-social-link:hover {\n color: var(--color-darkgrey);\n}\n\n@media (max-width: 900px) {\n .author-template .posts .post-feed {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 650px) {\n .author-template .posts {\n grid-template-columns: 1fr;\n grid-gap: 0;\n }\n .author-template .posts .post-feed {\n grid-column: 1 / auto;\n }\n .author-profile {\n padding-right: 0;\n }\n .author-profile-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n}\n\n\n/* 8. Tag Template\n/* ---------------------------------------------------------- */\n\n.tag-template .post-card-large .post-card-image-link {\n grid-column: 2 / span 2;\n order: 2;\n}\n\n.tag-template .post-card-large .post-card-content {\n order: 1;\n}\n\n\n/* 9. Error Template\n/* ---------------------------------------------------------- */\n\n.error-content {\n padding: 14vw 4vw 6vw;\n}\n\n.error-message {\n padding-bottom: 10vw;\n text-align: center;\n}\n\n.error-code {\n margin: 0;\n color: var(--ghost-accent-color);\n font-size: 12vw;\n line-height: 1em;\n letter-spacing: -5px;\n}\n\n.error-description {\n margin: 0;\n color: var(--color-midgrey);\n font-size: 3.2rem;\n line-height: 1.3em;\n font-weight: 400;\n}\n\n.error-link {\n display: inline-block;\n margin-top: 5px;\n}\n\n@media (min-width: 940px) {\n .error-content .post-card {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }\n}\n\n@media (max-width: 800px) {\n .error-content {\n padding-top: 24vw;\n }\n .error-code {\n font-size: 11.2rem;\n }\n .error-message {\n padding-bottom: 16vw;\n }\n .error-description {\n margin: 5px 0 0 0;\n font-size: 1.8rem;\n }\n}\n\n@media (max-width: 500px) {\n .error-content {\n padding-top: 28vw;\n }\n .error-message {\n padding-bottom: 14vw;\n }\n}\n\n\n/* 11. Site Footer\n/* ---------------------------------------------------------- */\n\n.site-footer {\n position: relative;\n margin: 40px 0 0 0;\n padding: 40px 4vmin 140px;\n color: #fff;\n background: color-mod(var(--color-darkgrey) l(-5%));\n}\n\n.site-footer .inner {\n display: grid;\n grid-gap: 40px;\n grid-template-columns: auto 1fr auto;\n color: rgba(255,255,255,0.7);\n font-size: 1.3rem;\n}\n\n.site-footer .copyright a {\n color: #fff;\n letter-spacing: -0.015em;\n font-weight: 500;\n}\n\n.site-footer a {\n color: rgba(255,255,255,0.7);\n}\n\n.site-footer a:hover {\n color: rgba(255,255,255,1);\n text-decoration: none;\n}\n\n.site-footer-nav ul {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 0 20px;\n padding: 0;\n list-style: none;\n}\n\n.site-footer-nav li {\n display: inline-flex;\n align-items: center;\n padding: 0;\n margin: 0;\n line-height: 2em;\n}\n\n.site-footer-nav a {\n position: relative;\n display: inline-flex;\n align-items: center;\n margin-left: 10px;\n}\n\n.site-footer-nav li:not(:first-child) a:before {\n content: \"\";\n display: block;\n width: 2px;\n height: 2px;\n margin: 0 10px 0 0;\n background: #fff;\n border-radius: 100%;\n}\n\n@media (max-width: 800px) {\n .site-footer .inner {\n max-width: 500px;\n grid-template-columns: 1fr;\n grid-gap: 0;\n text-align: center;\n }\n .site-footer .copyright,\n .site-footer .copyright a {\n color: #fff;\n font-size: 1.5rem;\n }\n}\n\n\n/* 12. Dark Mode\n/* ---------------------------------------------------------- */\n\n/* If you prefer a dark color scheme, you can enable dark mode\nby adding the following code to the Head section of \"Code Injection\"\nsettings inside: Ghost Admin > Settings > Advanced\n\n\n\nOr you can just edit default.hbs and add the .dark-mode class directly\nto the html tag on the very first line of the file.\n\n */\n\nhtml.dark-mode body {\n color: rgba(255, 255, 255, 0.75);\n background: var(--color-darkmode);\n}\n\nhtml.dark-mode img {\n opacity: 0.9;\n}\n\nhtml.dark-mode .post-card,\nhtml.dark-mode .post-card:hover {\n border-bottom-color: color-mod(var(--color-darkmode) l(+8%));\n}\n\nhtml.dark-mode .post-card-byline-content a {\n color: rgba(255, 255, 255, 0.75);\n}\n\nhtml.dark-mode .post-card-byline-content a:hover {\n color: #fff;\n}\n\nhtml.dark-mode .post-card-image {\n background: var(--color-darkmode);\n}\n\nhtml.dark-mode .post-card-title {\n color: rgba(255, 255, 255, 0.85);\n}\n\nhtml.dark-mode .post-card-excerpt {\n color: color-mod(var(--color-midgrey) l(+10%));\n}\n\nhtml.dark-mode .post-full-content {\n background: var(--color-darkmode);\n}\n\nhtml.dark-mode .article-title {\n color: rgba(255, 255, 255, 0.9);\n}\n\nhtml.dark-mode .article-excerpt {\n color: color-mod(var(--color-midgrey) l(+10%));\n}\n\nhtml.dark-mode .post-full-image {\n background-color: color-mod(var(--color-darkmode) l(+8%));\n}\n\nhtml.dark-mode .article-byline {\n border-top-color: color-mod(var(--color-darkmode) l(+15%));\n}\n\nhtml.dark-mode .article-byline-meta h4 a {\n color: rgba(255, 255, 255, 0.75);\n}\n\nhtml.dark-mode .article-byline-meta h4 a:hover {\n color: #fff;\n}\n\nhtml.dark-mode .no-image .author-social-link a {\n color: rgba(255, 255, 255, 0.75);\n}\n\nhtml.dark-mode .post-full-content h1,\nhtml.dark-mode .post-full-content h2,\nhtml.dark-mode .post-full-content h3,\nhtml.dark-mode .post-full-content h4,\nhtml.dark-mode .post-full-content h6 {\n color: rgba(255, 255, 255, 0.9);\n}\n\nhtml.dark-mode .post-full-content a {\n color: #fff;\n box-shadow: inset 0 -1px 0 #fff;\n}\n\nhtml.dark-mode .post-full-content strong {\n color: #fff;\n}\n\nhtml.dark-mode .post-full-content em {\n color: #fff;\n}\n\nhtml.dark-mode .post-full-content code {\n color: #fff;\n background: #000;\n}\n\nhtml.dark-mode hr {\n border-top-color: color-mod(var(--color-darkmode) l(+8%));\n}\n\nhtml.dark-mode .post-full-content hr:after {\n background: color-mod(var(--color-darkmode) l(+8%));\n box-shadow: var(--color-darkmode) 0 0 0 5px;\n}\n\nhtml.dark-mode .post-full-content figcaption {\n color: rgba(255, 255, 255, 0.6);\n}\n\nhtml.dark-mode .post-full-content table td:first-child {\n background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);\n}\n\nhtml.dark-mode .post-full-content table td:last-child {\n background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);\n}\n\nhtml.dark-mode .post-full-content table th {\n color: rgba(255, 255, 255, 0.85);\n background-color: color-mod(var(--color-darkmode) l(+8%));\n}\n\nhtml.dark-mode .post-full-content table th,\nhtml.dark-mode .post-full-content table td {\n border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;\n}\n\nhtml.dark-mode .post-full-content .kg-bookmark-container,\nhtml.dark-mode .post-full-content .kg-bookmark-container:hover {\n color: rgba(255, 255, 255, 0.75);\n box-shadow: 0 0 1px rgba(255,255,255,0.9);\n}\n\nhtml.dark-mode .post-full-content input {\n color: color-mod(var(--color-midgrey) l(-30%));\n}\n\nhtml.dark-mode .kg-bookmark-title {\n color: #fff;\n}\n\nhtml.dark-mode .kg-bookmark-description {\n color: rgba(255, 255, 255, 0.75);\n}\n\nhtml.dark-mode .kg-bookmark-metadata {\n color: rgba(255, 255, 255, 0.75);\n}\n\nhtml.dark-mode .site-archive-header .no-image {\n color: rgba(255, 255, 255, 0.9);\n background: var(--color-darkmode);\n}\n\nhtml.dark-mode .subscribe-form {\n border: none;\n background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));\n}\n\nhtml.dark-mode .subscribe-form-title {\n color: rgba(255, 255, 255, 0.9);\n}\n\nhtml.dark-mode .subscribe-form p {\n color: rgba(255, 255, 255, 0.7);\n}\n\nhtml.dark-mode .subscribe-email {\n border-color: color-mod(var(--color-darkmode) l(+6%));\n color: rgba(255, 255, 255, 0.9);\n background: color-mod(var(--color-darkmode) l(+3%));\n}\n\nhtml.dark-mode .subscribe-email:focus {\n border-color: color-mod(var(--color-darkmode) l(+25%));\n}\n\nhtml.dark-mode .subscribe-form button {\n opacity: 0.9;\n}\n\nhtml.dark-mode .subscribe-form .invalid .message-error,\nhtml.dark-mode .subscribe-form .error .message-error {\n color: color-mod(var(--color-red) l(+5%) s(-5%));\n}\n\nhtml.dark-mode .subscribe-form .success .message-success {\n color: color-mod(var(--color-green) l(+5%) s(-5%));\n}\n\n/*\n\nHey! You reached the end.\n\nHope you enjoyed this CSS file, if you have any suggestions\nfor improvements that might be useful for everyone who uses\nthis theme, you can find the open source repository for it\nhere: https://github.com/tryghost/casper\n\nOr, if you've just scrolled all the way to the bottom of the\nfile to add some of your own styles. Well, you've come to\nthe right place. Onward!\n\n */\n"]}
\ No newline at end of file
diff --git a/assets/css/global.css b/assets/css/global.css
index a207870..4743f45 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -1,22 +1,3 @@
-/* Variables
-/* ---------------------------------------------------------- */
-
-:root {
- /* Colours */
- --blue: #3eb0ef;
- --green: #a4d037;
- --purple: #ad26b4;
- --yellow: #fecd35;
- --red: #f05230;
- --darkgrey: #15171A;
- --midgrey: #738a94;
- --lightgrey: #c5d2d9;
- --whitegrey: #e5eff5;
- --pink: #fa3a57;
- --brown: #a3821a;
- --darkmode: color-mod(var(--darkgrey) l(+2%));
-}
-
/* Reset
/* ---------------------------------------------------------- */
@@ -128,6 +109,7 @@ table {
}
img {
max-width: 100%;
+ height: auto;
}
html {
box-sizing: border-box;
@@ -273,15 +255,12 @@ th {
========================================================================== */
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-mod(var(--midgrey) l(-30%));
+ color: #35373A;
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;
@@ -298,7 +277,7 @@ body {
::selection {
text-shadow: none;
- background: color-mod(var(--blue) lightness(+30%));
+ background: #daf2fd;
}
hr {
@@ -309,7 +288,7 @@ hr {
padding: 0;
height: 1px;
border: 0;
- border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
+ border-top: 1px solid #f0f0f0;
}
audio,
@@ -331,11 +310,11 @@ textarea {
resize: vertical;
}
-p,
-ul,
-ol,
-dl,
-blockquote {
+::not(.gh-content) p,
+::not(.gh-content) ul,
+::not(.gh-content) ol,
+::not(.gh-content) dl,
+::not(.gh-content) blockquote {
margin: 0 0 1.5em 0;
}
@@ -375,7 +354,7 @@ dt {
float: left;
margin: 0 20px 0 0;
width: 120px;
- color: var(--darkgrey);
+ color: #daf2fd;
font-weight: 500;
text-align: right;
}
@@ -388,7 +367,7 @@ dd {
blockquote {
margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
- border-left: var(--whitegrey) 0.5em solid;
+ border-left: #daf2fd;
}
blockquote p {
@@ -416,14 +395,10 @@ blockquote cite a {
}
a {
- color: color-mod(var(--blue) l(-5%));
+ color: #15171A;
text-decoration: none;
}
-a:hover {
- text-decoration: underline;
-}
-
h1,
h2,
h3,
@@ -434,26 +409,29 @@ h6 {
line-height: 1.15;
font-weight: 600;
text-rendering: optimizeLegibility;
+ letter-spacing: -0.01em;
}
h1 {
margin: 0 0 0.5em 0;
- font-size: 5.5rem;
- font-weight: 600;
+ font-size: 4.8rem;
+ font-weight: 700;
+ letter-spacing: -0.015em;
}
-@media (max-width: 500px) {
+@media (max-width: 600px) {
h1 {
- font-size: 2.2rem;
+ font-size: 2.8rem;
}
}
h2 {
margin: 1.5em 0 0.5em 0;
- font-size: 2.2rem;
+ font-size: 2.8rem;
+ font-weight: 700;
}
-@media (max-width: 500px) {
+@media (max-width: 600px) {
h2 {
- font-size: 1.8rem;
+ font-size: 2.3rem;
}
}
@@ -462,7 +440,7 @@ h3 {
font-size: 1.8rem;
font-weight: 500;
}
-@media (max-width: 500px) {
+@media (max-width: 600px) {
h3 {
font-size: 1.7rem;
}
@@ -471,17 +449,14 @@ h3 {
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;
}
diff --git a/assets/css/screen.css b/assets/css/screen.css
index c69890e..42f06b6 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -15,140 +15,95 @@ production stylesheet in assets/built/screen.css
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. Dark Mode
*/
-
/* 1. Global - Set up the things
/* ---------------------------------------------------------- */
+
+/* Import CSS reset and base styles */
@import "global.css";
-body {
- background: #fff;
-}
+:root {
-.img {
- display: block;
- width: 100%;
- height: 100%;
- background-position: center center;
- background-size: cover;
- border-radius: 100%;
-}
+ /* Colours */
+ --color-green: #a4d037;
+ --color-yellow: #fecd35;
+ --color-red: #f05230;
+ --color-darkgrey: #15171A;
+ --color-midgrey: #738a94;
+ --color-lightgrey: #c5d2d9;
+ --color-wash: #e5eff5;
+ --color-darkmode: #151719;
+
+ /*
+ An accent color is also set by Ghost itself in
+ Ghost Admin > Settings > Brand
+
+ --ghost-accent-color: {value};
+
+ You can use this variale throughout your styles
+ */
+
+ /* Fonts */
+ --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ --font-serif: Georgia, Times, serif;
+ --font-mono: Menlo, Courier, monospace;
-.hidden {
- visibility: hidden;
- position: absolute;
- text-indent: -9999px;
}
/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */
-.site-wrapper {
+.viewport {
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;
+ padding: 0 4vmin;
}
/* Centered content container blocks */
.inner {
margin: 0 auto;
- max-width: 1040px;
+ max-width: 1200px;
width: 100%;
}
-/* Usage:
-
-
-
-*/
-
-/* 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-background {
+.site-header {
position: relative;
- margin-top: 64px;
- padding-bottom: 12px;
color: #fff;
- background: color-mod(var(--darkgrey) l(-5%)) no-repeat center center;
- background-size: cover;
+ background: var(--ghost-accent-color);
}
-.site-header-background:before {
- content: "";
+.site-header-cover {
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;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
.site-header-content {
+ position: relative;
z-index: 100;
display: flex;
flex-direction: column;
@@ -157,462 +112,420 @@ body {
padding: 6vw 3vw;
min-height: 200px;
max-height: 340px;
+ text-align: center;
}
.site-title {
z-index: 10;
- margin: 0 0 0 -2px;
+ margin: 0 0 0.15em;
padding: 0;
- font-size: 5.0rem;
- line-height: 1em;
- font-weight: 600;
}
.site-logo {
max-height: 55px;
}
-.site-description {
+.site-header-content p {
z-index: 10;
- margin: 0;
- padding: 5px 0;
- font-size: 2.1rem;
- line-height: 1.4em;
- font-weight: 400;
+ max-width: 600px;
+ margin: 0 auto;
+ line-height: 1.2em;
opacity: 0.8;
}
+@media (max-width: 600px) {
+ .site-header-content p {
+ max-width: 80vmin;
+ font-size: 1.8rem;
+ }
+}
+
/* 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;
+ z-index: 1000;
+ overflow: hidden;
}
-.site-archive-header .no-image {
- padding-top: 0;
- padding-bottom: 0;
- color: var(--darkgrey);
- background: #fff;
- opacity: 1.0;
+.site-header-content {
+ padding: 18vmin 4vmin;
+ font-size: 2.5rem;
+ font-weight: 400;
+ color: #fff;
+ background: var(--ghost-accent-color);
}
-.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-mod(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-mod(var(--darkgrey) l(-5%));
-}
-
-.site-nav {
- position: relative;
- z-index: 100;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- overflow: hidden;
- height: 64px;
- font-size: 1.3rem;
-}
-
-.site-nav-left-wrapper {
- position: relative;
- flex: 1 0 auto;
- display: flex;
-}
-
-.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
-.site-nav-main .site-nav-left-wrapper:after {
- content: "";
- position: absolute;
- top: 0;
- z-index: 1000;
- width: 40px;
- height: 100%;
-}
-
-.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
-.site-nav-main .site-nav-left-wrapper:after {
- right: 0;
- background: linear-gradient(to right, color-mod(var(--darkgrey) l(-5%) a(0)) 0%,color-mod(var(--darkgrey) l(-5%)) 100%);
-}
-
-.site-nav-left {
- 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;
-}
-
-.site-nav-left .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;
+.gh-head {
+ padding: 1vmin 4vmin;
+ font-size: 1.6rem;
+ line-height: 1.3em;
color: #fff;
- font-size: 1.7rem;
- line-height: 1.8rem;
- font-weight: bold;
- letter-spacing: -0.5px;
- text-transform: none;
+ background: var(--ghost-accent-color);
}
-.site-nav-logo:hover {
+.gh-head a {
+ color: inherit;
text-decoration: none;
}
-.site-nav-logo img {
- display: block;
- width: auto;
- height: 21px;
+.gh-head-inner {
+ display: grid;
+ grid-gap: 2.5vmin;
+ grid-template-columns: auto auto 1fr;
+ grid-auto-flow: row dense;
}
-.site-home-header .site-nav-logo {
- display: none;
-}
-.site-nav-content {
- position: relative;
- align-self: flex-start;
-}
+/* Brand
+/* ---------------------------------------------------------- */
-.nav {
- position: absolute;
- z-index: 1000;
+.gh-head-brand {
display: flex;
- margin: 0 0 0 -12px;
- padding: 0;
- list-style: none;
- transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
+ align-items: center;
+ height: 40px;
+ max-width: 200px;
+ text-align: center;
+ word-break: break-all;
}
-.nav li {
+.gh-head-logo {
display: block;
+ padding: 10px 0;
+ font-weight: 700;
+ font-size: 2rem;
+ line-height: 1.2em;
+ letter-spacing: -0.02em;
+}
+
+.gh-head-logo img {
+ max-height: 26px;
+}
+
+
+/* Primary Navigation
+/* ---------------------------------------------------------- */
+
+.gh-head-menu {
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+}
+
+.gh-head-menu .nav {
+ display: inline-flex;
+ flex-wrap: wrap;
+ align-items: center;
+ list-style: none;
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;
+.gh-head-menu .nav li {
+ margin: 0 2.5vmin 0 0;
+ padding: 0;
}
-.nav li a:hover {
- text-decoration: none;
+.gh-head-menu .nav a {
+ display: inline-block;
+ padding: 5px 0;
+ opacity: 0.8
+}
+
+.gh-head-menu .nav a:hover {
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;
-}
+/* Secondary Navigation
+/* ---------------------------------------------------------- */
-.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: 0 1 auto;
+.gh-head-actions {
display: flex;
justify-content: flex-end;
align-items: center;
- padding: 10px 0;
- height: 64px;
+ list-style: none;
+ text-align: right;
}
-.site-nav-right .nav {
- position: relative;
- margin: 0;
-}
-
-.site-nav-right .nav a {
- white-space: nowrap;
-}
-
-.site-nav-right .nav a:before {
- display: none;
-}
-
-.site-nav-right .nav li:last-of-type a {
- margin-right: -12px;
-}
-
-.social-links {
- flex-shrink: 0;
- display: flex;
+.gh-head-actions-list {
+ display: inline-flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
align-items: center;
}
-.social-link {
+.gh-head-actions-list a:not([class]) {
display: inline-block;
- margin: 0;
- padding: 10px;
- opacity: 0.8;
+ margin: 0 0 0 1.5vmin;
+ padding: 5px 0;
}
-.social-link:hover {
- opacity: 1.0;
+.gh-social {
+ margin: 0 1.5vmin 0 0;
}
-.social-link svg {
- height: 1.8rem;
+.gh-social a {
+ opacity: 0.8
+}
+.gh-social a:hover {
+ opacity: 1;
+}
+
+.gh-social svg {
+ height: 22px;
+ width: 22px;
fill: #fff;
}
-.social-link-fb svg {
- height: 1.6rem;
-}
-
-.social-link-wb svg {
- height: 1.6rem;
-}
-
-.social-link-wb svg path {
- stroke: #fff;
-}
-
-.social-link-rss svg {
- height: 1.9rem;
-}
-
-.subscribe-button {
+a.gh-head-button {
display: block;
- margin: 0 0 0 10px;
- padding: 4px 10px;
- border: #fff 1px solid;
- color: #fff;
+ padding: 8px 15px;
+ color: var(--color-darkgrey);
+ font-weight: 500;
+ letter-spacing: -0.015em;
+ font-size: 1.5rem;
line-height: 1em;
- border-radius: 10px;
- opacity: 0.8;
+ background: #fff;
+ border-radius: 30px;
}
-.subscribe-button:hover {
- text-decoration: none;
- opacity: 1;
+
+/* Mobile Menu Trigger
+/* ---------------------------------------------------------- */
+
+.gh-burger {
+ position: relative;
+ display: none;
+ cursor: pointer;
}
-.site-nav-right .nav + .subscribe-button {
- margin-left: 24px;
+.gh-burger-box {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 33px;
+ height: 33px;
}
-.rss-button {
- padding: 10px 8px;
- opacity: 0.8;
+.gh-burger-inner {
+ width: 100%;
+ height: 100%;
}
-.rss-button:hover {
- opacity: 1;
+.gh-burger-box::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ margin: auto;
+ content: '';
+ width: 100%;
+ height: 1px;
+ background: currentcolor;
+ transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
+ will-change: transform, width;
}
-.rss-button svg {
- margin-bottom: 1px;
- height: 2.1rem;
- fill: #fff;
+.gh-burger-inner::before,
+.gh-burger-inner::after {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ margin: auto;
+ content: '';
+ width: 100%;
+ height: 1px;
+ background: currentcolor;
+ transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
+ will-change: transform, width;
}
-/* Special behaviors for home navigation */
-
-.home-template .site-nav-main {
- z-index: 100;
+.gh-burger-inner::before {
+ transform: translatey(-6px);
+}
+.gh-burger-inner::after {
+ transform: translatey(6px);
}
-.home-template .site-nav-main .site-nav {
- opacity: 0;
- transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
+body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
+ transform: translatey(-8px);
+}
+body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
+ transform: translatey(8px);
}
-.home-template .site-nav-main .fixed-nav-active {
- opacity: 1;
- transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
+.gh-head-open .gh-burger-box::before {
+ width: 0;
+ transform: translatex(19px);
+ transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
}
-@media (max-width: 700px) {
- .site-home-header .site-nav {
- margin-left: -5vw;
+.gh-head-open .gh-burger-inner::before {
+ width: 26px;
+ transform: translatex(6px) rotate(135deg);
+}
+
+.gh-head-open .gh-burger-inner::after {
+ width: 26px;
+ transform: translatex(6px) rotate(-135deg);
+}
+
+
+/* Mobile Menu
+/* ---------------------------------------------------------- */
+/* IDs needed to ensure sufficient specificity */
+
+@media (max-width: 900px) {
+ .gh-burger {
+ display: inline-block;
}
-
- .site-nav-main {
- padding-right: 0;
- padding-left: 0;
+ #gh-head {
+ transition: all 0.4s ease-out;
+ overflow: hidden;
}
-
- .site-nav-left {
- margin-right: 0;
- padding-left: 5vw;
+ #gh-head .gh-head-inner {
+ height: 100%;
+ grid-template-columns: 1fr;
}
-
- .site-nav-right {
+ #gh-head .gh-head-brand {
+ position: relative;
+ z-index: 10;
+ grid-column-start: auto;
+ max-width: none;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ user-select: none;
+ }
+ .home-template #gh-head .gh-head-brand {
+ justify-content: flex-end;
+ }
+ #gh-head .gh-head-logo {
+ font-size: 2rem;
+ }
+ #gh-head .gh-head-logo img {
+ max-height: 40px;
+ }
+ #gh-head .gh-head-menu {
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ margin: 0 0 10vh 0;
+ font-weight: 300;
+ font-size: 3.6rem;
+ line-height: 1.1em;
+ }
+ #gh-head .gh-head-menu .nav li {
+ margin: 5px 0;
+ }
+ #gh-head .gh-head-menu .nav a {
+ padding: 8px 0;
+ }
+ #gh-head .gh-head-menu .nav {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ #gh-head .gh-head-actions {
+ padding: 20px 0;
+ justify-content: center;
+ text-align: left;
+ }
+ #gh-head .gh-head-actions a {
+ margin: 0 10px;
+ }
+ /* Hide collapsed content */
+ #gh-head .gh-head-actions,
+ #gh-head .gh-head-menu {
display: none;
}
+ /* Open the menu */
+ .gh-head-open {
+ overflow: hidden;
+ height: 100vh;
+ }
+ .gh-head-open #gh-head {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 9999999;
+ overflow-y: scroll;
+ }
+ .gh-head-open #gh-head .gh-head-inner {
+ grid-template-rows: auto 1fr auto;
+ }
+ .gh-head-open #gh-head .gh-head-actions,
+ .gh-head-open #gh-head .gh-head-menu {
+ display: flex;
+ }
+}
+
+@media (max-width: 600px) {
+ #gh-head .gh-head-menu {
+ font-size: 6vmin;
+ }
+}
+
+.home-template .gh-head {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 2000;
+}
+
+.home-template .gh-head.has-cover {
+ background: transparent;
+}
+
+.home-template.gh-head-open .gh-head {
+ background: var(--ghost-accent-color);
+}
+
+.home-template .gh-head-logo {
+ display: none;
+}
+.home-template .gh-head-menu {
+ margin-left: -2.5vmin;
}
/* 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;
+ display: grid;
+ grid-gap: 4vmin;
+ grid-template-columns: 1fr 1fr 1fr;
+ padding: 4vmin 0;
+}
+
+@media (max-width: 1000px) {
+ .post-feed {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+@media (max-width: 700px) {
+ .post-feed {
+ grid-template-columns: 1fr;
+ grid-gap: 40px;
+ }
}
.post-card {
@@ -620,11 +533,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
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-mod(var(--lightgrey) l(+12%));
background-size: cover;
}
@@ -638,7 +547,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-image {
width: 100%;
height: 200px;
- background: var(--lightgrey) no-repeat center center;
+ background: var(--color-lightgrey) no-repeat center center;
object-fit: cover;
}
@@ -646,7 +555,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-content-link {
position: relative;
display: block;
- color: var(--darkgrey);
+ color: var(--color-darkgrey);
}
.post-card-content-link:hover {
@@ -654,7 +563,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.post-card-header {
- margin: 15px 0 0;
+ margin: 20px 0 0;
}
.post-feed .no-image .post-card-content-link {
@@ -667,7 +576,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-primary-tag {
margin: 0 0 0.2em;
- color: var(--blue);
+ color: var(--ghost-accent-color);
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.2px;
@@ -676,7 +585,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-title {
margin: 0 0 0.4em;
- line-height: 1.15em;
+ font-size: 2.4rem;
transition: color 0.2s ease-in-out;
}
@@ -692,17 +601,20 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card-excerpt {
max-width: 56em;
- color: var(--midgrey);
- font-family: Georgia, serif;
+ color: color-mod(var(--color-midgrey) l(-8%));
}
.post-card-excerpt p {
margin-bottom: 1em;
+ display: -webkit-box;
+ overflow-y: hidden;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
}
.post-card-meta {
display: flex;
- align-items: flex-start;
+ align-items: center;
padding: 0;
}
@@ -711,7 +623,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: block;
width: 100%;
height: 100%;
- background: color-mod(var(--lightgrey) l(+10%));
+ background: color-mod(var(--color-lightgrey) l(+10%));
border-radius: 100%;
object-fit: cover;
@@ -741,53 +653,21 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: block;
overflow: hidden;
margin: 0 0 0 -6px;
- width: 34px;
- height: 34px;
- border: #fff 2px solid;
+ width: 36px;
+ height: 36px;
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;
- }
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.post-card-byline-content {
flex: 1 1 50%;
display: flex;
flex-direction: column;
- margin: 2px 0 0 6px;
- color: color-mod(var(--midgrey) l(+10%));
- font-size: 1.2rem;
- line-height: 1.4em;
+ margin: 0 0 0 8px;
+ color: color-mod(var(--color-midgrey) l(+10%));
+ font-size: 1.4rem;
+ line-height: 1.2em;
font-weight: 400;
- letter-spacing: 0.2px;
- text-transform: uppercase;
}
.post-card-byline-content span {
@@ -795,17 +675,18 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.post-card-byline-content a {
- color: color-mod(var(--darkgrey) l(+20%));
+ color: color-mod(var(--color-darkgrey) l(+15%));
font-weight: 600;
}
.post-card-byline-date {
- font-size: 1.2rem;
+ font-size: 1.3rem;
+ line-height: 1.5em;
}
.post-card-byline-date .bull {
display: inline-block;
- margin: 0 4px;
+ margin: 0 2px;
opacity: 0.6;
}
@@ -813,7 +694,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex;
flex-direction: column;
margin-left: 5px;
- color: color-mod(var(--midgrey) l(-10%));
+ color: color-mod(var(--color-midgrey) l(-10%));
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 500;
@@ -840,26 +721,23 @@ make sure this only happens on large viewports / desktop-ish devices.
*/
-@media (min-width: 795px) {
+@media (min-width: 1001px) {
.post-card-large {
- flex: 1 1 100%;
- flex-direction: row;
- padding-bottom: 40px;
+ grid-column: 1 / span 3;
+ display: grid;
+ grid-gap: 4vmin;
+ grid-template-columns: 1fr 1fr 1fr;
min-height: 280px;
border-top: 0;
}
- .post-card-large:hover {
- border-bottom-color: color-mod(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;
+ grid-column: 1 / span 2;
margin-bottom: 0;
min-height: 380px;
}
@@ -871,7 +749,6 @@ make sure this only happens on large viewports / desktop-ish devices.
}
.post-card-large .post-card-content {
- flex: 0 1 361px;
justify-content: center;
}
@@ -880,39 +757,15 @@ make sure this only happens on large viewports / desktop-ish devices.
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;
+ font-size: 1.7rem;
+ line-height: 1.55em;
+ -webkit-line-clamp: 8;
}
}
-/* 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;
@@ -927,457 +780,439 @@ make sure this only happens on large viewports / desktop-ish devices.
/* 7. Single Post
/* ---------------------------------------------------------- */
-.post-template .site-main,
-.page-template .site-main {
- margin-top: 64px;
- padding-bottom: 4vw;
- background: #fff;
+.article {
+ padding: 8vmin 0;
}
-.post-full-header {
- position: relative;
- margin: 0 auto;
- padding: 70px 170px 50px;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
+.article-header {
+ padding: 0 0 6vmin 0;
}
-.post-full-tags {
+.article-tag {
display: flex;
justify-content: flex-start;
align-items: center;
- color: var(--midgrey);
+ margin: 0 0 0.5rem;
+ color: var(--color-midgrey);
font-size: 1.3rem;
line-height: 1.4em;
+ letter-spacing: 0.02em;
font-weight: 600;
text-transform: uppercase;
}
-.post-full-meta-date {
- color: var(--midgrey);
- font-size: 1.2rem;
- font-weight: 400;
+.article-tag a {
+ color: var(--ghost-accent-color);
}
-@media (max-width: 1170px) {
- .post-full-header {
- padding: 60px 11vw 50px;
- }
+.article-title {
+ color: color-mod(var(--color-darkgrey) l(-5%));
}
-@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-mod(var(--darkgrey) l(-5%));
-}
-
-.post-full-custom-excerpt {
- margin: 20px 0 0;
- color: var(--midgrey);
- font-family: Georgia, serif;
- font-size: 2.3rem;
+.article-excerpt {
+ margin: 0 0 1rem;
+ font-size: 2rem;
line-height: 1.4em;
- font-weight: 300;
+ opacity: 0.6;
}
-.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;
- background: color-mod(var(--lightgrey) l(+10%));
- border-radius: 3px;
-}
-
-.post-full-image img {
- max-width: 1040px;
+.gh-canvas .article-image {
+ grid-column: wide-start / wide-end;
width: 100%;
- height: auto;
+ margin: 6vmin 0 0;
}
-.post-full-content {
- position: relative;
- margin: 0 auto;
- padding: 0 170px 6vw;
- 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;
+@media (max-width: 600px) {
+ .article-excerpt {
font-size: 1.8rem;
}
}
-@media (max-width: 500px) {
- .post-full-custom-excerpt {
- font-size: 1.9rem;
- line-height: 1.5em;
- }
+
+/* -------- */
+
+/* Content grid
+/* ---------------------------------------------------------- */
+
+/* Canvas creates a multi-column, centered grid which the post
+is laid out on top of. Canvas just defines the grid, we don't
+use it for applying any other styles. */
+
+.gh-canvas {
+ display: grid;
+ grid-template-columns:
+ [full-start]
+ minmax(4vmin, auto)
+ [wide-start]
+ minmax(auto, 240px)
+ [main-start]
+ min(720px, calc(100% - 8vw))
+ [main-end]
+ minmax(auto, 240px)
+ [wide-end]
+ minmax(4vmin, auto)
+ [full-end]
+ ;
}
-.no-image .post-full-content {
- padding-top: 0;
+.gh-canvas > * {
+ grid-column: main-start / main-end;
}
-.no-image .post-full-content:before,
-.no-image .post-full-content:after {
- display: none;
+.kg-width-wide {
+ grid-column: wide-start / wide-end;
}
-.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;
- }
+.kg-width-full {
+ grid-column: full-start / full-end;
}
-.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-mod(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%;
- }
+.kg-width-full img {
+ width: 100%;
}
-/* Full bleed images (#full)
-Super neat trick courtesy of @JoelDrapper
+/* Content
+/* ---------------------------------------------------------- */
-Usage (In Ghost edtior):
+/* Content refers to styling all page and post content that is
+created within the Ghost editor. The main content handles
+headings, text, images and lists. We deal with cards lower down. */
-
-
-*/
-.post-full-content img[src$="#full"] {
- max-width: none;
- width: 100vw;
-}
-
-
-/* Image captions
-
-Usage (In Ghost editor):
-
-
-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: color-mod(var(--blue)) 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 {
+/* Default vertical spacing */
+.gh-content > * + * {
+ margin-top: 4vmin;
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;
+/* [id] represents all headings h1-h6, reset all margins */
+.gh-content > [id] {
+ margin: 0;
+ color: var(--color-darkgrey);
}
-.post-full-content p code {
- word-break: break-all;
+/* Add back a top margin to all headings, unless a heading
+is the very first element in the post content */
+.gh-content > [id]:not(:first-child) {
+ margin: 2em 0 0;
}
-.post-full-content pre {
- overflow-x: auto;
- margin: 1.5em 0 3em;
- padding: 20px;
- max-width: 100%;
- border: color-mod(var(--darkgrey) l(-10%)) 1px solid;
- color: var(--whitegrey);
- font-size: 1.4rem;
- line-height: 1.5em;
- background: color-mod(var(--darkgrey) l(-3%));
- border-radius: 5px;
+/* Add a small margin between a heading and anything after it */
+.gh-content > [id] + * {
+ margin-top: 1.5rem !important;
}
-.post-full-content pre ::selection {
- color: color-mod(var(--midgrey) l(-25%));
+/* A larger margin before/after HRs and blockquotes */
+.gh-content > hr,
+.gh-content > blockquote {
+ position: relative;
+ margin-top: 6vmin;
+}
+.gh-content > hr + *,
+.gh-content > blockquote + * {
+ margin-top: 6vmin !important;
}
-.post-full-content pre code {
+/* Now the content typography styles */
+.gh-content a {
+ color: var(--ghost-accent-color);
+ text-decoration: underline;
+}
+
+.gh-content > blockquote,
+.gh-content > ol,
+.gh-content > ul,
+.gh-content > dl,
+.gh-content > p {
+ font-family: var(--font-serif);
+ font-weight: 400;
+ font-size: 2.1rem;
+ line-height: 1.6em;
+}
+
+.gh-content > ul,
+.gh-content > ol,
+.gh-content > dl {
+ padding-left: 1.9em;
+}
+
+.gh-content > blockquote {
+ position: relative;
+ font-style: italic;
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 {
+.gh-content > blockquote::before {
content: "";
position: absolute;
- top: -15px;
- left: 50%;
- display: block;
- margin-left: -10px;
- width: 1px;
- height: 30px;
- background: color-mod(var(--lightgrey) l(+10%));
- box-shadow: #fff 0 0 0 5px;
- transform: rotate(45deg);
+ left: -1.5em;
+ top: 0;
+ bottom: 0;
+ width: 0.3rem;
+ background: var(--ghost-accent-color);
}
-.post-full-content hr + p {
- margin-top: 1.2em;
+.gh-content :not(pre) > code {
+ vertical-align: middle;
+ padding: 0.15em 0.4em 0.15em;
+ border: #e1eaef 1px solid;
+ font-weight: 400 !important;
+ font-size: 0.9em;
+ line-height: 1em;
+ color: #15171A;
+ background: #f0f6f9;
+ border-radius: 0.25em;
}
-.post-full-content [id] {
- scroll-margin-top: 110px;
+.gh-content pre {
+ overflow-x: auto;
+ overflow: scroll;
+ padding: 16px 20px;
+ border: 1px solid color-mod(var(--color-darkgrey) l(-20%));
+ color: var(--color-wash);
+ font-size: 1.4rem;
+ line-height: 1.5em;
+ background: var(--color-darkgrey);
+ border-radius: 5px;
+ box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
}
-.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-mod(var(--darkgrey) l(-5%));
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
+@media (max-width: 650px) {
+ .gh-content blockquote,
+ .gh-content ol,
+ .gh-content ul,
+ .gh-content dl,
+ .gh-content p {
+ font-size: 1.7rem;
+ }
-.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;
+ .gh-content blockquote::before {
+ left: -4vmin;
}
}
-.post-full-content h2 {
- margin: 0.5em 0 0.4em;
- font-size: 3.2rem;
- line-height: 1.25em;
- font-weight: 600;
+
+/* Cards
+/* ---------------------------------------------------------- */
+
+/* Cards are dynamic blocks of content which appear within Ghost
+posts, for example: embedded videos, tweets, galleries, or
+specially styled bookmark links. We add extra styling here to
+make sure they look good, and are given a bit of extra spacing. */
+
+/* Add extra margin before/after any cards,
+except for when immediately preceeded by a heading */
+.gh-content :not(.kg-card):not([id]) + .kg-card {
+ margin-top: 6vmin;
+ margin-bottom: 0;
}
-.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;
- }
+.gh-content .kg-card + :not(.kg-card) {
+ margin-top: 6vmin;
+ margin-bottom: 0;
}
-.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;
- }
+/* This keeps small embeds centered */
+.kg-embed-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
}
-.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;
- }
+/* This keeps small iamges centered */
+.kg-image-card img {
+ margin: auto;
}
-.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;
+
+/* Captions */
+.kg-card figcaption {
+ padding: 1.5rem 1.5rem 0;
text-align: center;
+ color: rgba(0,0,0,0.5);
+ font-weight: 600;
+ font-size: 1.3rem;
+ line-height: 1.4em;
}
-@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;
- }
+.kg-card figcaption strong {
+ color: rgba(0,0,0,0.8);
}
-.post-full-content h6 {
- margin: 0.5em 0 0.2em 0;
- font-size: 2.0rem;
- font-weight: 700;
+
+/* Galleries
+/* ---------------------------------------------------------- */
+
+/* When there galleries are mixed with images, reduce margin
+between them, so it looks like 1 big gallery */
+.kg-image-card + .kg-gallery-card,
+.kg-gallery-card + .kg-image-card,
+.kg-gallery-card + .kg-gallery-card {
+ margin-top: 0.75em;
}
-@media (max-width: 800px) {
- .post-full-content h6 {
- font-size: 1.8rem;
- line-height: 1.4em;
- }
+
+.kg-gallery-container {
+ position: relative;
}
+.kg-gallery-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.kg-gallery-image img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+ margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+ margin: 0 0 0 0.75em;
+}
+
+
+/* Bookmark Cards
+/* ---------------------------------------------------------- */
+
+/* These are styled links with structured data, similar to a
+Twitter card. These styles roughly match what you see in the
+Ghost editor. */
+
+.kg-bookmark-card,
+.kg-bookmark-publisher {
+ position: relative;
+ width: 100%;
+}
+
+.kg-bookmark-container,
+.kg-bookmark-container:hover {
+ display: flex;
+ color: currentColor;
+ font-family: var(--font-sans-serif);
+ text-decoration: none !important;
+ background: rgba(255,255,255,0.6);
+ border-radius: 5px;
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
+ overflow: hidden;
+}
+
+.kg-bookmark-content {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ flex-basis: 100%;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 20px;
+}
+
+.kg-bookmark-title {
+ font-size: 1.5rem;
+ line-height: 1.4em;
+ font-weight: 600;
+ color: #15171A;
+}
+
+.kg-bookmark-description {
+ display: -webkit-box;
+ font-size: 1.4rem;
+ line-height: 1.5em;
+ margin-top: 3px;
+ color: #626d79;
+ font-weight: 400;
+ max-height: 44px;
+ overflow-y: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.kg-bookmark-metadata {
+ display: flex;
+ align-items: center;
+ margin-top: 22px;
+ width: 100%;
+ color: #394047;
+ font-size: 1.4rem;
+ font-weight: 500;
+}
+
+.kg-bookmark-icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 6px;
+}
+
+.kg-bookmark-author,
+.kg-bookmark-publisher {
+ display: inline;
+}
+
+.kg-bookmark-publisher {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 240px;
+ white-space: nowrap;
+ display: block;
+ line-height: 1.65em;
+}
+
+.kg-bookmark-metadata > span:nth-of-type(2) {
+ color: #626d79;
+ font-weight: 400;
+}
+
+.kg-bookmark-metadata > span:nth-of-type(2):before {
+ content: "•";
+ color: #394047;
+ margin: 0 6px;
+}
+
+.kg-bookmark-thumbnail {
+ position: relative;
+ flex-grow: 1;
+ min-width: 33%;
+}
+
+.kg-bookmark-thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: 0 4px 4px 0;
+}
+
+
+/* Card captions
+/* ---------------------------------------------------------- */
+
+.kg-width-full.kg-card-hascaption {
+ display: grid;
+ grid-template-columns: inherit;
+}
+
+.kg-width-wide.kg-card-hascaption img {
+ grid-column: wide-start / wide-end;
+}
+.kg-width-full.kg-card-hascaption img {
+ grid-column: 1 / -1;
+}
+
+.kg-width-full.kg-card-hascaption figcaption {
+ grid-column: main-start / main-end;
+}
+
+.article-comments {
+ margin: 6vmin 0 0 0;
+}
+
+/* -----old------ */
+
.footnotes-sep {
margin-bottom: 30px;
}
@@ -1391,58 +1226,12 @@ Usage (In Ghost editor):
}
.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;
@@ -1452,7 +1241,7 @@ Usage (In Ghost editor):
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-family: var(--font-sans-serif);
font-size: 1.6rem;
white-space: nowrap;
vertical-align: top;
@@ -1480,71 +1269,56 @@ Usage (In Ghost editor):
}
.post-full-content table th {
- color: var(--darkgrey);
+ color: var(--color-darkgrey);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.2px;
text-align: left;
text-transform: uppercase;
- background-color: color-mod(var(--whitegrey) l(+4%));
+ background-color: color-mod(var(--color-wash) l(+4%));
}
.post-full-content table th,
.post-full-content table td {
padding: 6px 12px;
- border: color-mod(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
+ border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
}
/* 7.1. Post Byline
/* ---------------------------------------------------------- */
-.post-full-byline {
+.article-byline {
display: flex;
justify-content: space-between;
- margin: 35px 0 0;
- padding-top: 15px;
- border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
+ margin: 20px 0 0;
}
-.post-full-byline-content {
+.article-byline-content {
flex-grow: 1;
display: flex;
- align-items: flex-start;
+ align-items: center;
}
-.post-full-byline-content .author-list {
+.article-byline-content .author-list {
justify-content: flex-start;
padding: 0 12px 0 0;
}
-.post-full-byline-meta {
- margin: 2px 0 0;
- color: color-mod(var(--midgrey) l(+10%));
- font-size: 1.2rem;
+.article-byline-meta {
+ color: color-mod(var(--color-midgrey));
+ font-size: 1.4rem;
line-height: 1.2em;
- letter-spacing: 0.2px;
- text-transform: uppercase;;
}
-.post-full-byline-meta h4 {
+.article-byline-meta h4 {
margin: 0 0 3px;
- font-size: 1.3rem;
- line-height: 1.4em;
- font-weight: 500;
+ font-size: 1.6rem;
}
-.post-full-byline-meta h4 a {
- color: color-mod(var(--darkgrey) l(+10%));
-}
-
-.post-full-byline-meta h4 a:hover {
- color: var(--darkgrey);
-}
-
-.post-full-byline-meta .bull {
+.article-byline-meta .bull {
display: inline-block;
- margin: 0 4px;
+ margin: 0 2px;
opacity: 0.6;
}
@@ -1552,88 +1326,13 @@ Usage (In Ghost editor):
display: block;
overflow: hidden;
margin: 0 -4px;
- width: 40px;
- height: 40px;
+ width: 50px;
+ height: 50px;
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-mod(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;
@@ -1650,859 +1349,203 @@ Usage (In Ghost editor):
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;
- }
+.page-template .article-title {
+ margin-bottom: 0;
}
-@media (max-width: 650px) {
- .author-list-item .author-card {
+
+/* 7.3. Subscribe
+/* ---------------------------------------------------------- */
+
+.footer-cta {
+ position: relative;
+ padding: 9vmin 4vmin 10vmin;
+ color: #fff;
+ text-align: center;
+ background: var(--color-darkgrey);
+}
+
+.footer-cta h2 {
+ margin: 0 0 30px;
+ transform: scale(1.15);
+}
+
+.footer-cta-button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 500px;
+ padding: 5px 5px 5px 15px;
+ font-size: 1.8rem;
+ color: var(--color-midgrey);
+ background: #fff;
+ border-radius: 8px;
+}
+
+.footer-cta-button span {
+ display: inline-block;
+ padding: 10px 20px;
+ color: #fff;
+ font-weight: 500;
+ background: var(--ghost-accent-color);
+ border-radius: 5px;
+}
+
+
+/* 7.4. Read more
+/* ---------------------------------------------------------- */
+
+.read-more-wrap {
+ width: 100%;
+ padding: 4vmin;
+ margin: 0 auto -40px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ background: color-mod(var(--color-darkgrey) l(-5%));
+}
+
+.read-more {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 4vmin;
+}
+
+.read-more .post-card-title {
+ color: #fff;
+ opacity: 0.8;
+}
+
+.read-more .post-card-excerpt {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+.read-more .post-card-byline-content a {
+ color: #fff;
+}
+
+
+@media (max-width: 1000px) {
+ .read-more {
+ grid-template-columns: 1fr 1fr;
+ }
+ .read-more article:nth-child(3) {
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-mod(var(--lightgrey) l(+10%)) 1px solid;
- text-align: center;
- background: linear-gradient(color-mod(var(--whitegrey) l(+6%)), color-mod(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-mod(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-mod(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-mod(var(--blue) whiteness(+7%)),
- color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
- color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
- color-mod(var(--blue) lightness(-4%) saturation(-10%))
- );
- border-radius: 5px;
-
- -webkit-font-smoothing: subpixel-antialiased;
-}
-
-.subscribe-form button:active,
-.subscribe-form button:focus {
- background: color-mod(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-mod(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-mod(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-mod(var(--darkgrey) l(+2%)), color-mod(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;
-}
-
-.post-full-content figcaption {
- margin: 1.0em auto 0;
- color: color-mod(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%;
-}
-
-.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-mod(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-mod(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: var(--darkgrey);
- font-size: 1.5rem;
- font-weight: 500;
-}
-
-.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;
- color: color-mod(var(--midgrey) l(-10%));
- font-weight: 400;
-}
-
-@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 {
+ .read-more {
+ grid-template-columns: 1fr;
+ }
+ .read-more article:nth-child(2) {
display: none;
}
}
-@media (max-width: 500px) {
- .author-header {
- padding: 10px 0 0;
- }
- .no-image .author-header {
- padding-bottom: 10px;
- }
+/* 8. Author Template
+/* ---------------------------------------------------------- */
- .author-header-content {
+.author-template .posts {
+ position: relative;
+ height: 100%;
+ display: grid;
+ grid-template-columns: 200px 1fr 1fr;
+ grid-gap: 4vmin;
+}
+
+.author-template .posts .post-feed {
+ grid-column: 2 / 4;
+ grid-template-columns: 1fr 1fr;
+}
+
+.author-profile {
+ padding: 4vmin 0;
+}
+
+.author-profile-content {
+ height: auto;
+ position: sticky;
+ top: 4vmin;
+ font-size: 1.4rem;
+ line-height: 1.4em;
+}
+
+.author-profile-pic {
+ display: block;
+ width: 150px;
+ height: 150px;
+ object-fit: cover;
+ margin: 0 0 2rem;
+}
+
+.author-profile h1 {
+ margin: 0 0 0.3em;
+ font-size: 2rem;
+}
+
+.author-profile p {
+ margin: 0 0 1.5em;
+ color: color-mod(var(--color-midgrey) l(-8%));
+}
+
+.author-profile-location {
+ margin: 0 0 1.5em;
+ font-weight: 700;
+}
+
+.author-profile-social-link {
+ display: block;
+ padding: 0 0 5px;
+ font-size: 1.3rem;
+ color: color-mod(var(--color-midgrey) l(-8%));
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 100%;
+ white-space: nowrap;
+}
+
+.author-profile-social-link:hover {
+ color: var(--color-darkgrey);
+}
+
+@media (max-width: 900px) {
+ .author-template .posts .post-feed {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 650px) {
+ .author-template .posts {
+ grid-template-columns: 1fr;
+ grid-gap: 0;
+ }
+ .author-template .posts .post-feed {
+ grid-column: 1 / auto;
+ }
+ .author-profile {
+ padding-right: 0;
+ }
+ .author-profile-content {
+ display: flex;
+ flex-direction: column;
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;
- }
+/* 8. Tag Template
+/* ---------------------------------------------------------- */
+
+.tag-template .post-card-large .post-card-image-link {
+ grid-column: 2 / span 2;
+ order: 2;
+}
+
+.tag-template .post-card-large .post-card-content {
+ order: 1;
}
@@ -2513,37 +1556,23 @@ Usage (In Ghost editor):
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-mod(var(--lightgrey) l(+10%));
text-align: center;
}
.error-code {
margin: 0;
- color: var(--lightgrey);
+ color: var(--ghost-accent-color);
font-size: 12vw;
line-height: 1em;
letter-spacing: -5px;
- opacity: 0.75;
}
.error-description {
margin: 0;
- color: var(--midgrey);
- font-size: 3rem;
+ color: var(--color-midgrey);
+ font-size: 3.2rem;
line-height: 1.3em;
font-weight: 400;
}
@@ -2587,532 +1616,300 @@ Usage (In Ghost editor):
}
-/* 10. Subscribe Message and Overlay
-/* ---------------------------------------------------------- */
-
-.subscribe-notification {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: 9000;
- padding: 20px 0;
- color: #fff;
- text-align: center;
- background: var(--green);
- transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
- transform: translateY(-175%);
-}
-
-.subscribe-notification.subscribe-failure-message {
- background: var(--red);
-}
-
-.subscribe-success .subscribe-success-message {
- visibility: visible;
- transform: translateY(0);
-}
-
-.subscribe-failure .subscribe-failure-message {
- visibility: visible;
- transform: translateY(0);
-}
-
-.subscribe-notification.close {
- visibility: hidden;
- transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
- transform: translateY(-175%);
-}
-
-.subscribe-notification .subscribe-close-button {
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
-}
-
-.subscribe-notification .subscribe-close-button:before,
-.subscribe-notification .subscribe-close-button:after {
- top: 31px;
- right: 20px;
- width: 18px;
- height: 2px;
-}
-
-.subscribe-close-overlay {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
-}
-
-.subscribe-close-button {
- position: absolute;
- top: 16px;
- right: 20px;
- z-index: 2000;
- display: block;
- width: 40px;
- height: 40px;
-}
-
-.subscribe-close-button:before {
- content: "";
- position: absolute;
- top: 20px;
- right: 4px;
- display: block;
- width: 32px;
- height: 1px;
- background: #fff;
- opacity: 0.8;
- transform: rotate(45deg);
-}
-
-.subscribe-close-button:after {
- content: "";
- position: absolute;
- top: 20px;
- right: 4px;
- display: block;
- width: 32px;
- height: 1px;
- background: #fff;
- opacity: 0.8;
- transform: rotate(-45deg);
-}
-
-.subscribe-close-overlay:hover,
-.subscribe-close-button:hover {
- cursor: default;
-}
-
-.subscribe-overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 2000;
- 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;
-}
-
-.subscribe-overlay:target {
- z-index: 2001;
- opacity: 1;
- pointer-events: auto;
-}
-
-.subscribe-overlay-content {
- position: relative;
- 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-mod(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-mod(var(--blue) whiteness(+7%)),
- color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
- color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
- color-mod(var(--blue) lightness(-4%) saturation(-10%))
- );
- border-radius: 8px;
-
- -webkit-font-smoothing: subpixel-antialiased;
-}
-
-.subscribe-overlay button:active,
-.subscribe-overlay button:focus {
- background: color-mod(var(--blue) lightness(-9%) saturation(-10%));
-}
-
-.subscribe-overlay .loading .button-loader {
- top: 5px;
-}
-
-@media (max-width: 500px) {
- .subscribe-overlay button {
- margin: 12px 0 0;
- }
-}
-
-
/* 11. Site Footer
/* ---------------------------------------------------------- */
.site-footer {
position: relative;
- padding-top: 20px;
- padding-bottom: 60px;
+ margin: 40px 0 0 0;
+ padding: 40px 4vmin 140px;
color: #fff;
- background: color-mod(var(--darkgrey) l(-5%));
+ background: color-mod(var(--color-darkgrey) l(-5%));
}
-.site-footer-content {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
+.site-footer .inner {
+ display: grid;
+ grid-gap: 40px;
+ grid-template-columns: auto 1fr auto;
color: rgba(255,255,255,0.7);
font-size: 1.3rem;
}
-.site-footer-content a {
+.site-footer .copyright a {
+ color: #fff;
+ letter-spacing: -0.015em;
+ font-weight: 500;
+}
+
+.site-footer a {
color: rgba(255,255,255,0.7);
}
-.site-footer-content a:hover {
+.site-footer a:hover {
color: rgba(255,255,255,1);
text-decoration: none;
}
-.site-footer-nav {
+.site-footer-nav ul {
display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin: 0 0 20px;
+ padding: 0;
+ list-style: none;
+}
+
+.site-footer-nav li {
+ display: inline-flex;
+ align-items: center;
+ padding: 0;
+ margin: 0;
+ line-height: 2em;
}
.site-footer-nav a {
position: relative;
- margin-left: 20px;
+ display: inline-flex;
+ align-items: center;
+ margin-left: 10px;
}
-.site-footer-nav a:before {
+.site-footer-nav li:not(:first-child) a:before {
content: "";
- position: absolute;
- top: 11px;
- left: -11px;
display: block;
width: 2px;
height: 2px;
+ margin: 0 10px 0 0;
background: #fff;
border-radius: 100%;
}
-.site-footer-nav a:first-of-type:before {
- display: none;
-}
-
-@media (max-width: 650px) {
- .site-footer-content {
- flex-direction: column;
+@media (max-width: 800px) {
+ .site-footer .inner {
+ max-width: 500px;
+ grid-template-columns: 1fr;
+ grid-gap: 0;
+ text-align: center;
}
-
- .site-footer-nav a:first-child {
- margin-left: 0;
+ .site-footer .copyright,
+ .site-footer .copyright a {
+ color: #fff;
+ font-size: 1.5rem;
}
}
/* 12. Dark Mode
/* ---------------------------------------------------------- */
-@media (prefers-color-scheme: dark) {
- html:not(.no-dark) body {
- color: rgba(255, 255, 255, 0.75);
- background: var(--darkmode);
- }
- html:not(.no-dark) img {
- opacity: 0.9;
- }
+/* If you prefer a dark color scheme, you can enable dark mode
+by adding the following code to the Head section of "Code Injection"
+settings inside: Ghost Admin > Settings > Advanced
- html:not(.no-dark) .site-header-background:before {
- background: rgba(0,0,0,0.6);
- }
+
- html:not(.no-dark) .post-feed {
- background: var(--darkmode);
- }
+Or you can just edit default.hbs and add the .dark-mode class directly
+to the html tag on the very first line of the file.
- html:not(.no-dark) .post-card,
- html:not(.no-dark) .post-card:hover {
- border-bottom-color: color-mod(var(--darkmode) l(+8%));
- }
+ */
- html:not(.no-dark) .author-profile-image {
- background: var(--darkmode);
- }
-
- html:not(.no-dark) .post-card-byline-content a {
- color: rgba(255, 255, 255, 0.75);
- }
-
- html:not(.no-dark) .post-card-byline-content a:hover {
- color: #fff;
- }
-
- html:not(.no-dark) .post-card-image {
- background: var(--darkmode);
- }
-
- html:not(.no-dark) .post-card-title {
- color: rgba(255, 255, 255, 0.85);
- }
-
- html:not(.no-dark) .post-card-excerpt {
- color: color-mod(var(--midgrey) l(+10%));
- }
-
- html:not(.no-dark) .author-avatar,
- html:not(.no-dark) .static-avatar {
- border-color: color-mod(var(--darkgrey) l(+2%));
- }
-
- html:not(.no-dark) .site-main,
- html:not(.no-dark) .post-template .site-main,
- html:not(.no-dark) .page-template .site-main {
- background: var(--darkmode);
- }
-
- html:not(.no-dark) .post-full-content {
- background: var(--darkmode);
- }
-
- html:not(.no-dark) .post-full-title {
- color: rgba(255, 255, 255, 0.9);
- }
-
- html:not(.no-dark) .post-full-custom-excerpt {
- color: color-mod(var(--midgrey) l(+10%));
- }
-
- html:not(.no-dark) .post-full-image {
- background-color: color-mod(var(--darkmode) l(+8%));
- }
-
- html:not(.no-dark) .post-full-byline {
- border-top-color: color-mod(var(--darkmode) l(+15%));
- }
-
- html:not(.no-dark) .post-full-byline-meta h4 a {
- color: rgba(255, 255, 255, 0.75);
- }
-
- html:not(.no-dark) .post-full-byline-meta h4 a:hover {
- color: #fff;
- }
-
- html:not(.no-dark) .author-list-item .author-card {
- background: color-mod(var(--darkmode) l(+4%));
- box-shadow: 0 12px 26px rgba(0,0,0,0.4);
- }
-
- html:not(.no-dark) .author-list-item .author-card:before {
- border-top-color: color-mod(var(--darkmode) l(+4%));
- }
-
- html:not(.no-dark) .no-image .author-social-link a {
- color: rgba(255, 255, 255, 0.75);
- }
-
- html:not(.no-dark) .post-full-content h1,
- html:not(.no-dark) .post-full-content h2,
- html:not(.no-dark) .post-full-content h3,
- html:not(.no-dark) .post-full-content h4,
- html:not(.no-dark) .post-full-content h6 {
- color: rgba(255, 255, 255, 0.9);
- }
-
- html:not(.no-dark) .post-full-content a {
- color: #fff;
- box-shadow: inset 0 -1px 0 #fff;
- }
-
- html:not(.no-dark) .post-full-content strong {
- color: #fff;
- }
-
- html:not(.no-dark) .post-full-content em {
- color: #fff;
- }
-
- html:not(.no-dark) .post-full-content code {
- color: #fff;
- background: #000;
- }
-
- html:not(.no-dark) hr {
- border-top-color: color-mod(var(--darkmode) l(+8%));
- }
-
- html:not(.no-dark) .post-full-content hr:after {
- background: color-mod(var(--darkmode) l(+8%));
- box-shadow: var(--darkmode) 0 0 0 5px;
- }
-
- html:not(.no-dark) .post-full-content figcaption {
- color: rgba(255, 255, 255, 0.6);
- }
-
- html:not(.no-dark) .post-full-content table td:first-child {
- background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
- }
-
- html:not(.no-dark) .post-full-content table td:last-child {
- background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
- }
-
- html:not(.no-dark) .post-full-content table th {
- color: rgba(255, 255, 255, 0.85);
- background-color: color-mod(var(--darkmode) l(+8%));
- }
-
- html:not(.no-dark) .post-full-content table th,
- html:not(.no-dark) .post-full-content table td {
- border: color-mod(var(--darkmode) l(+8%)) 1px solid;
- }
-
- html:not(.no-dark) .post-full-content .kg-bookmark-container,
- html:not(.no-dark) .post-full-content .kg-bookmark-container:hover {
- color: rgba(255, 255, 255, 0.75);
- box-shadow: 0 0 1px rgba(255,255,255,0.9);
- }
-
- html:not(.no-dark) .post-full-content input {
- color: color-mod(var(--midgrey) l(-30%));
- }
-
- html:not(.no-dark) .kg-bookmark-title {
- color: #fff;
- }
-
- html:not(.no-dark) .kg-bookmark-description {
- color: rgba(255, 255, 255, 0.75);
- }
-
- html:not(.no-dark) .kg-bookmark-metadata {
- color: rgba(255, 255, 255, 0.75);
- }
-
- html:not(.no-dark) .site-archive-header .no-image {
- color: rgba(255, 255, 255, 0.9);
- background: var(--darkmode);
- }
-
- html:not(.no-dark) .site-archive-header .no-image .site-header-content {
- border-bottom-color: color-mod(var(--darkmode) l(+15%));
- }
-
- html:not(.no-dark) .site-header-content .author-profile-image {
- box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
- }
-
- html:not(.no-dark) .subscribe-form {
- border: none;
- background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));
- }
-
- html:not(.no-dark) .subscribe-form-title {
- color: rgba(255, 255, 255, 0.9);
- }
-
- html:not(.no-dark) .subscribe-form p {
- color: rgba(255, 255, 255, 0.7);
- }
-
- html:not(.no-dark) .subscribe-email {
- border-color: color-mod(var(--darkmode) l(+6%));
- color: rgba(255, 255, 255, 0.9);
- background: color-mod(var(--darkmode) l(+3%));
- }
-
- html:not(.no-dark) .subscribe-email:focus {
- border-color: color-mod(var(--darkmode) l(+25%));
- }
-
- html:not(.no-dark) .subscribe-form button {
- opacity: 0.9;
- }
-
- html:not(.no-dark) .subscribe-form .invalid .message-error,
- html:not(.no-dark) .subscribe-form .error .message-error {
- color: color-mod(var(--red) l(+5%) s(-5%));
- }
-
- html:not(.no-dark) .subscribe-form .success .message-success {
- color: color-mod(var(--green) l(+5%) s(-5%));
- }
+html.dark-mode body {
+ color: rgba(255, 255, 255, 0.75);
+ background: var(--color-darkmode);
}
+
+html.dark-mode img {
+ opacity: 0.9;
+}
+
+html.dark-mode .post-card,
+html.dark-mode .post-card:hover {
+ border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .post-card-byline-content a {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .post-card-byline-content a:hover {
+ color: #fff;
+}
+
+html.dark-mode .post-card-image {
+ background: var(--color-darkmode);
+}
+
+html.dark-mode .post-card-title {
+ color: rgba(255, 255, 255, 0.85);
+}
+
+html.dark-mode .post-card-excerpt {
+ color: color-mod(var(--color-midgrey) l(+10%));
+}
+
+html.dark-mode .post-full-content {
+ background: var(--color-darkmode);
+}
+
+html.dark-mode .article-title {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .article-excerpt {
+ color: color-mod(var(--color-midgrey) l(+10%));
+}
+
+html.dark-mode .post-full-image {
+ background-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .article-byline {
+ border-top-color: color-mod(var(--color-darkmode) l(+15%));
+}
+
+html.dark-mode .article-byline-meta h4 a {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .article-byline-meta h4 a:hover {
+ color: #fff;
+}
+
+html.dark-mode .no-image .author-social-link a {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .post-full-content h1,
+html.dark-mode .post-full-content h2,
+html.dark-mode .post-full-content h3,
+html.dark-mode .post-full-content h4,
+html.dark-mode .post-full-content h6 {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .post-full-content a {
+ color: #fff;
+ box-shadow: inset 0 -1px 0 #fff;
+}
+
+html.dark-mode .post-full-content strong {
+ color: #fff;
+}
+
+html.dark-mode .post-full-content em {
+ color: #fff;
+}
+
+html.dark-mode .post-full-content code {
+ color: #fff;
+ background: #000;
+}
+
+html.dark-mode hr {
+ border-top-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .post-full-content hr:after {
+ background: color-mod(var(--color-darkmode) l(+8%));
+ box-shadow: var(--color-darkmode) 0 0 0 5px;
+}
+
+html.dark-mode .post-full-content figcaption {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+html.dark-mode .post-full-content table td:first-child {
+ background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+}
+
+html.dark-mode .post-full-content table td:last-child {
+ background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+}
+
+html.dark-mode .post-full-content table th {
+ color: rgba(255, 255, 255, 0.85);
+ background-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .post-full-content table th,
+html.dark-mode .post-full-content table td {
+ border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
+}
+
+html.dark-mode .post-full-content .kg-bookmark-container,
+html.dark-mode .post-full-content .kg-bookmark-container:hover {
+ color: rgba(255, 255, 255, 0.75);
+ box-shadow: 0 0 1px rgba(255,255,255,0.9);
+}
+
+html.dark-mode .post-full-content input {
+ color: color-mod(var(--color-midgrey) l(-30%));
+}
+
+html.dark-mode .kg-bookmark-title {
+ color: #fff;
+}
+
+html.dark-mode .kg-bookmark-description {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .kg-bookmark-metadata {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .site-archive-header .no-image {
+ color: rgba(255, 255, 255, 0.9);
+ background: var(--color-darkmode);
+}
+
+html.dark-mode .subscribe-form {
+ border: none;
+ background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
+}
+
+html.dark-mode .subscribe-form-title {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .subscribe-form p {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+html.dark-mode .subscribe-email {
+ border-color: color-mod(var(--color-darkmode) l(+6%));
+ color: rgba(255, 255, 255, 0.9);
+ background: color-mod(var(--color-darkmode) l(+3%));
+}
+
+html.dark-mode .subscribe-email:focus {
+ border-color: color-mod(var(--color-darkmode) l(+25%));
+}
+
+html.dark-mode .subscribe-form button {
+ opacity: 0.9;
+}
+
+html.dark-mode .subscribe-form .invalid .message-error,
+html.dark-mode .subscribe-form .error .message-error {
+ color: color-mod(var(--color-red) l(+5%) s(-5%));
+}
+
+html.dark-mode .subscribe-form .success .message-success {
+ color: color-mod(var(--color-green) l(+5%) s(-5%));
+}
+
+/*
+
+Hey! You reached the end.
+
+Hope you enjoyed this CSS file, if you have any suggestions
+for improvements that might be useful for everyone who uses
+this theme, you can find the open source repository for it
+here: https://github.com/tryghost/casper
+
+Or, if you've just scrolled all the way to the bottom of the
+file to add some of your own styles. Well, you've come to
+the right place. Onward!
+
+ */
diff --git a/assets/js/sticky-nav-title.js b/assets/js/sticky-nav-title.js
deleted file mode 100644
index 6e14bb9..0000000
--- a/assets/js/sticky-nav-title.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-env browser */
-
-/**
- * Nav/Title replacement
- * Used on invividual post pages, displays the post title in place of the nav
- * bar when scrolling past the title
- *
- * Usage:
- * ```
- * Casper.stickyTitle({
- * navSelector: '.site-nav-main',
- * titleSelector: '.post-full-title',
- * activeClass: 'nav-post-title-active'
- * });
- * ```
- */
-
-(function (window, document) {
- // set up Casper as a global object
- if (!window.Casper) {
- window.Casper = {};
- }
-
- window.Casper.stickyNavTitle = function stickyNavTitle(options) {
- var nav = document.querySelector(options.navSelector);
- var title = document.querySelector(options.titleSelector);
-
- var lastScrollY = window.scrollY;
- var ticking = false;
-
- function onScroll() {
- lastScrollY = window.scrollY;
- requestTick();
- }
-
- function requestTick() {
- if (!ticking) {
- requestAnimationFrame(update);
- }
- ticking = true;
- }
-
- function update() {
- var trigger = title.getBoundingClientRect().top + window.scrollY;
- var triggerOffset = title.offsetHeight + 35;
-
- // show/hide post title
- if (lastScrollY >= trigger + triggerOffset) {
- nav.classList.add(options.activeClass);
- } else {
- nav.classList.remove(options.activeClass);
- }
-
- ticking = false;
- }
-
- window.addEventListener('scroll', onScroll, {passive: true});
-
- update();
- };
-})(window, document);
diff --git a/author.hbs b/author.hbs
index 60166f7..cd8c432 100644
--- a/author.hbs
+++ b/author.hbs
@@ -1,61 +1,57 @@
{{!< 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 --}}
-
-
-{{/author}}
-
-{{!-- The main content area --}}
-
+
-
- {{#foreach posts visibility="all"}}
+
+
+
+ {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
-
{{/foreach}}
-
+
diff --git a/config.example.json b/config.example.json
deleted file mode 100644
index d79d2e5..0000000
--- a/config.example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "github": {
- "token": "
"
- }
-}
diff --git a/default.hbs b/default.hbs
index 73ec872..387ded6 100644
--- a/default.hbs
+++ b/default.hbs
@@ -1,139 +1,102 @@
-
+
- {{!-- Document Settings --}}
+ {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
+ {{meta_title}}
{{meta_title}}
-
+
+
- {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
+
+
+
+
+ {{#if @site.twitter}}
+
+ {{/if}}
+
+
+ {{#unless @member}}
+
Subscribe
+ {{else}}
+
Account
+ {{/unless}}
+
+
+
+
+ {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
+
- {{!-- The footer at the very bottom of the screen --}}
-
-
-
-
- {{!-- The big email subscribe modal content --}}
- {{#if @labs.members}}
-
-
- You've successfully subscribed to {{@site.title}}!
-
-
-
- Could not sign up! Invalid sign up link.
-
-
-
-
-
-
- {{#if @site.logo}}
-
- {{/if}}
-
+ {{!-- The global footer at the very bottom of the screen --}}
+
- {{/if}}
+
- {{!-- jQuery, required for fitvids --}}
-
- {{!-- Fitvids (for responsive video embeds), infinite scroll, floating header, and gallery card support --}}
-
+
+{{!-- /.viewport --}}
- {{!-- Scripts for Members subscription --}}
-
+
+
- $(document).ready(function () {
- if (action == 'subscribe' && (success === null || success === 'true')) {
- $('body').addClass('subscribe-success');
- }
-
- if (action == 'subscribe' && success === 'false') {
- $('body').addClass('subscribe-failure');
- }
-
- $('.subscribe-notification .subscribe-close-button').click(function () {
- $('.subscribe-notification').addClass('close');
- });
-
- // Reset form on opening subscrion overlay
- $('.subscribe-button').click(function() {
- $('.subscribe-overlay form').removeClass();
- $('.subscribe-email').val('');
- });
- });
-
-
- {{!-- 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}}
+{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
+{{ghost_foot}}
diff --git a/error-404.hbs b/error-404.hbs
index b3b4490..d6b498d 100644
--- a/error-404.hbs
+++ b/error-404.hbs
@@ -1,30 +1,37 @@
+{{!< default}}
+
{{!--
-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.
+
+There are two error files in this theme, one for 404s and one for all other errors.
+This file is the former, and handles all 404 Page Not Found errors.
+
+The 404 error is the most common error that a visitor might see, for example when
+following a broken link
+
+Keep this template as lightweight as you can!
+
--}}
-{{!< default}}
-{{!-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template --}}
-
-
-
-
+
- {{#get "posts" limit="3" include="authors,tags"}}
-
- {{#foreach posts}}
- {{> "post-card"}}
+{{!-- Given that people landing on this page didn't find what they
+were looking for, let's give them some alternative stuff to read. --}}
+
+
+ {{#get "posts" include="authors" limit="3" as |more_posts|}}
+ {{#if more_posts}}
+ {{#foreach more_posts}}
+ {{> "post-card"}}
{{/foreach}}
-
+ {{/if}}
{{/get}}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/error.hbs b/error.hbs
index dfa5274..388a35d 100644
--- a/error.hbs
+++ b/error.hbs
@@ -1,7 +1,15 @@
{{!--
-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.
+
+There are two error files in this theme, one for 404s and one for all other errors.
+This file is the latter, and handle all 400/500 errors that might occur.
+
+Because 500 errors in particular usuall happen when a server is struggling, this
+template is as simple as possible. No template dependencies, no JS, no API calls.
+This is to prevent rendering the error-page itself compounding the issue causing
+the error in the first place.
+
+Keep this template as lightweight as you can!
+
--}}
@@ -32,7 +40,7 @@ You'll notice that we *don't* use any JavaScript, or ghost_head / ghost_foot in
+
diff --git a/gulpfile.js b/gulpfile.js
index 09f5b1b..e09df6f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -96,10 +96,10 @@ exports.build = build;
exports.zip = series(build, zipper);
exports.default = series(build, serve, watcher);
-exports.release = () => {
+exports.release = async () => {
// @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'));
+ let packageJSON = JSON.parse(fs.readFileSync('./package.json'));
const newVersion = packageJSON.version;
if (!newVersion || newVersion === '') {
@@ -109,45 +109,36 @@ exports.release = () => {
console.log(`\nCreating release for ${newVersion}...`);
- let config;
- try {
- config = require('./config');
- } catch (err) {
- config = null;
- }
+ const githubToken = process.env.GST_TOKEN;
- if (!config || !config.github || !config.github.token) {
- console.log('Please copy config.example.json and configure Github token.');
+ if (!githubToken) {
+ console.log('Please configure your environment with a GitHub token located in GST_TOKEN');
return;
}
- let compatibleWithGhost;
+ try {
+ const result = await inquirer.prompt([{
+ type: 'input',
+ name: 'compatibleWithGhost',
+ message: 'Which version of Ghost is it compatible with?',
+ default: '4.0.0'
+ }]);
- return inquirer.prompt([{
- type: 'input',
- name: 'compatibleWithGhost',
- message: 'Which version of Ghost is it compatible with?',
- default: '3.0.0'
- }])
- .then(result => {
- compatibleWithGhost = result.compatibleWithGhost;
- return Promise.resolve();
- })
- .then(() => releaseUtils.releases.get({
- userAgent: 'Casper',
- uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
- }))
- .then((response) => {
- if (!response || !response.length) {
+ const compatibleWithGhost = result.compatibleWithGhost;
+
+ const releasesResponse = await releaseUtils.releases.get({
+ userAgent: 'Casper',
+ uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
+ });
+
+ if (!releasesResponse || !releasesResponse) {
console.log('No releases found. Skipping...');
return;
}
- let previousVersion = response[0].tag_name || response[0].name;
+ let previousVersion = releasesResponse[0].tag_name || releasesResponse[0].name;
console.log(`Previous version: ${previousVersion}`);
- return Promise.resolve(previousVersion);
- })
- .then((previousVersion) => {
+
const changelog = new releaseUtils.Changelog({
changelogPath: CHANGELOG_PATH,
folder: path.join(process.cwd(), '.')
@@ -161,27 +152,22 @@ exports.release = () => {
.sort()
.clean();
- return Promise.resolve();
- })
- .then(() => releaseUtils.releases.create({
- draft: true,
- preRelease: false,
- tagName: newVersion,
- releaseName: newVersion,
- userAgent: 'Casper',
- uri: `https://api.github.com/repos/${REPO}/releases`,
- github: {
- token: config.github.token
- },
- content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
- changelogPath: CHANGELOG_PATH
- }))
- .then((response) => {
- console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
- return Promise.resolve();
- })
- .catch((err) => {
+ const newReleaseResponse = await releaseUtils.releases.create({
+ draft: true,
+ preRelease: false,
+ tagName: newVersion,
+ releaseName: newVersion,
+ userAgent: 'Casper',
+ uri: `https://api.github.com/repos/${REPO}/releases`,
+ github: {
+ token: githubToken
+ },
+ content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
+ changelogPath: CHANGELOG_PATH
+ });
+ console.log(`\nRelease draft generated: ${newReleaseResponse.releaseUrl}\n`);
+ } catch (err) {
console.error(err);
process.exit(1);
- });
+ }
};
diff --git a/index.hbs b/index.hbs
index 86d5773..10dddbd 100644
--- a/index.hbs
+++ b/index.hbs
@@ -2,30 +2,36 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
-
-
+
{{!-- The main content area --}}
- {{#foreach posts visibility="all"}}
+ {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
@@ -35,64 +41,3 @@ into the {body} of the default.hbs template --}}
-
-{{> site-header}}
-
-{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
-{{#contentFor "scripts"}}
-
-{{/contentFor}}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1d4277a..5bfb404 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,10 @@
"name": "casper",
"description": "A clean, minimal default theme for the Ghost publishing platform",
"demo": "https://demo.ghost.io",
- "version": "3.1.3",
+ "version": "4.0.0-rc.0",
"engines": {
- "ghost": ">=3.0.0",
- "ghost-api": "v3"
+ "ghost": ">=4.0.0",
+ "ghost-api": "v4"
},
"license": "MIT",
"screenshots": {
@@ -88,5 +88,10 @@
"width": 2000
}
}
+ },
+ "renovate": {
+ "extends": [
+ "@tryghost:theme"
+ ]
}
}
diff --git a/page.hbs b/page.hbs
index 579ed18..ba781d0 100644
--- a/page.hbs
+++ b/page.hbs
@@ -1,65 +1,40 @@
{{!< default}}
+
{{!-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template --}}
+into the {body} tag of the default.hbs template --}}
-{{!-- The big featured header, it uses blog cover image as a BG if available --}}
-
-{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
+{{!-- Everything inside the #post block pulls data from the page --}}
-
-
+
-
+
+ {{#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}}
+
-
+
- {{#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}}
+ {{title}}
-
+ {{content}}
-
+
-
+
-{{/post}}
-
-{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
-{{#contentFor "scripts"}}
-
-{{/contentFor}}
+{{/post}}
\ No newline at end of file
diff --git a/partials/header-background.hbs b/partials/header-background.hbs
deleted file mode 100644
index 9d78ab6..0000000
--- a/partials/header-background.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-{{!--
-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}}
+
+ 
- {{/if}}
- 
- {{else}}
- {{@site.title}}
- {{/if}}
- 
+ {{/if}}
+ 
+ - {{else}} - - {{/if}} - -