"+a.content+""+a.tag+">"},!_self.document)return _self.addEventListener&&($.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),n=t.language,i=t.code,a=t.immediateClose;_self.postMessage($.highlight(i,$.languages[n],n)),a&&_self.close()},!1)),_self.Prism;var e=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return e&&($.filename=e.src,$.manual||e.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame($.highlightAll):window.setTimeout($.highlightAll,16):document.addEventListener("DOMContentLoaded",$.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(\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 .gh-content h1,\nhtml.dark-mode .gh-content h2,\nhtml.dark-mode .gh-content h3,\nhtml.dark-mode .gh-content h4,\nhtml.dark-mode .gh-content h5,\nhtml.dark-mode .gh-content h6 {\n color: rgba(255, 255, 255, 0.9);\n}\n\nhtml.dark-mode .gh-content pre {\n background: color-mod(var(--color-darkgrey) l(-8%));\n}\n\nhtml.dark-mode .gh-content :not(pre) > code {\n background: color-mod(var(--color-darkgrey) l(+6%));\n border-color: color-mod(var(--color-darkmode) l(+8%));\n color: var(--color-wash);\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 .gh-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..f7df10a 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
/* ---------------------------------------------------------- */
@@ -127,7 +108,9 @@ table {
border-collapse: collapse;
}
img {
+ display: block;
max-width: 100%;
+ height: auto;
}
html {
box-sizing: border-box;
@@ -273,15 +256,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 +278,7 @@ body {
::selection {
text-shadow: none;
- background: color-mod(var(--blue) lightness(+30%));
+ background: #daf2fd;
}
hr {
@@ -309,7 +289,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 +311,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;
}
@@ -366,16 +346,19 @@ ol {
}
li {
- margin: 0.5em 0;
padding-left: 0.3em;
line-height: 1.6em;
}
+li + li {
+ margin-top: 0.5em;
+}
+
dt {
float: left;
margin: 0 20px 0 0;
width: 120px;
- color: var(--darkgrey);
+ color: #daf2fd;
font-weight: 500;
text-align: right;
}
@@ -388,7 +371,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 +399,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,35 +413,38 @@ 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;
}
}
h3 {
margin: 1.5em 0 0.5em 0;
- font-size: 1.8rem;
- font-weight: 500;
+ font-size: 2.4rem;
+ font-weight: 600;
}
-@media (max-width: 500px) {
+@media (max-width: 600px) {
h3 {
font-size: 1.7rem;
}
@@ -470,18 +452,15 @@ h3 {
h4 {
margin: 1.5em 0 0.5em 0;
- font-size: 1.6rem;
- font-weight: 500;
+ font-size: 2.2rem;
}
h5 {
margin: 1.5em 0 0.5em 0;
- font-size: 1.4rem;
- font-weight: 500;
+ font-size: 2rem;
}
h6 {
margin: 1.5em 0 0.5em 0;
- font-size: 1.4rem;
- font-weight: 500;
+ font-size: 1.8rem;
}
diff --git a/assets/css/screen.css b/assets/css/screen.css
index 12bb20e..b778734 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,424 @@ 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 + a {
+ margin-left: 0.8rem;
+}
+
+.gh-social a:hover {
+ opacity: 1;
+}
+
+.gh-social svg {
+ height: 22px;
+ width: 22px;
fill: #fff;
}
-.social-link-fb svg {
- height: 1.6rem;
+.gh-social-facebook svg {
+ height: 20px;
+ width: 20px;
}
-.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-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: 3999999;
+ 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,12 +537,9 @@ 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;
+ word-break: break-word;
}
.post-card-image-link {
@@ -638,7 +552,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 +560,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 +568,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 +581,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 +590,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 +606,21 @@ 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;
+ word-break: break-word;
}
.post-card-meta {
display: flex;
- align-items: flex-start;
+ align-items: center;
padding: 0;
}
@@ -711,7 +629,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 +659,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 +681,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 +700,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 +727,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 +755,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 +763,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,453 +786,465 @@ 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;
+ word-break: break-word;
}
-.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;
+.gh-canvas .article-image img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
}
-@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. */
-![img](/some/image.jpg#full)
-
-*/
-.post-full-content img[src$="#full"] {
- max-width: none;
- width: 100vw;
-}
-
-
-/* Image captions
-
-Usage (In Ghost editor):
-
-![img](/some/image.jpg)
-Your image caption
-
-*/
-.post-full-content img + br + small {
- display: block;
- margin-top: -3em;
- margin-bottom: 1.5em;
- text-align: center;
-}
-
-
-/* Override third party iframe styles */
-.post-full-content iframe {
- margin: 0 auto !important;
-}
-
-.post-full-content blockquote {
- margin: 0 0 1.5em;
- padding: 0 1.5em;
- border-left: 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;
+ word-break: break-word;
+}
+
+.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 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;
+.gh-content pre {
+ overflow: auto;
+ padding: 16px 20px;
+ 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 {
- 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;
+@media (max-width: 650px) {
+ .gh-content blockquote,
+ .gh-content ol,
+ .gh-content ul,
+ .gh-content dl,
+ .gh-content p {
+ font-size: 1.7rem;
+ }
+
+ .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;
+
+/* Highly specific styles for traditional Instagram embeds */
+iframe.instagram-media {
+ margin-top: 6vmin !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+ margin-bottom: 0 !important;
}
-@media (max-width: 800px) {
- .post-full-content h6 {
- font-size: 1.8rem;
- line-height: 1.4em;
- }
+
+iframe.instagram-media + script + :not([id]) {
+ margin-top: 6vmin;
}
+
+/* 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;
+}
+
+.kg-image-card.kg-card-hascaption + .kg-gallery-card,
+.kg-gallery-card.kg-card-hascaption + .kg-image-card,
+.kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
+ margin-top: 1.75em;
+}
+
+.kg-gallery-container {
+ position: relative;
+}
+
+.kg-gallery-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.kg-gallery-image img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+ margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+ margin: 0 0 0 0.75em;
+}
+
+
+/* Bookmark Cards
+/* ---------------------------------------------------------- */
+
+/* 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;
}
@@ -1387,58 +1258,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;
@@ -1448,7 +1273,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;
@@ -1476,71 +1301,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;
}
@@ -1548,88 +1358,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;
@@ -1646,857 +1381,212 @@ 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;
- }
-}
-
-@media (max-width: 650px) {
- .author-list-item .author-card {
- display: none;
- }
-}
-
-@media (max-width: 500px) {
- .author-avatar {
- width: 36px;
- height: 36px;
- }
-
- .post-full-byline {
- margin-top: 20px;
- }
-
- .post-full-byline-meta {
- font-size: 1.2rem;
- }
-
- .post-full-byline-meta h4 {
- margin-bottom: 2px;
- font-size: 1.2rem;
- }
+.page-template .article-title {
+ margin-bottom: 0;
}
-/* 7.2. Members Subscribe Form
+/* 7.3. Subscribe
/* ---------------------------------------------------------- */
-.subscribe-form {
- margin: 1.5em 0;
- padding: 6.5vw 7vw 8vw;
- border: color-mod(var(--lightgrey) l(+10%)) 1px solid;
+
+.footer-cta {
+ position: relative;
+ padding: 9vmin 4vmin 10vmin;
+ color: #fff;
text-align: center;
- background: linear-gradient(color-mod(var(--whitegrey) l(+6%)), color-mod(var(--whitegrey) l(+4%)));
- border-radius: 3px;
+ background: var(--color-darkgrey);
}
-.subscribe-form-title {
- margin: 0 0 3px 0;
- padding: 0;
- color: var(--darkgrey);
- font-size: 3.5rem;
- line-height: 1;
- font-weight: 600;
+/* Increases the default h2 size by 15%, for small and large screens */
+.footer-cta h2 {
+ margin: 0 0 30px;
+ font-size: 3.2rem;
}
-.subscribe-form-description {
- margin-bottom: 0.2em 0 1em;
- color: var(--midgrey);
- font-size: 2.1rem;
- line-height: 1.55em;
+@media (max-width: 600px) {
+ .footer-cta h2 {
+ font-size: 2.65rem;
+ }
}
-.subscribe-form form {
- display: flex;
- flex-direction: column;
- justify-content: center;
+.footer-cta-button {
+ position: relative;
+ display: inline-flex;
align-items: center;
- margin: 0 auto;
- max-width: 460px;
-}
-
-.subscribe-form .form-group {
- align-self: stretch;
- display: flex;
-}
-
-.subscribe-email {
- display: block;
- padding: 10px;
+ justify-content: space-between;
width: 100%;
- border: color-mod(var(--lightgrey) l(+7%)) 1px solid;
- color: var(--midgrey);
+ max-width: 500px;
+ padding: 5px 5px 5px 15px;
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;
+ color: var(--color-midgrey);
+ background: #fff;
+ border-radius: 8px;
}
-.subscribe-email:focus {
- outline: 0;
- border-color: color-mod(var(--lightgrey) l(-2%));
-}
-
-.subscribe-form button {
- position: relative;
+.footer-cta-button span {
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 {
+ padding: 10px 20px;
color: #fff;
font-weight: 500;
- text-decoration: none;
- opacity: 0.8;
+ background: var(--ghost-accent-color);
+ border-radius: 5px;
}
-.read-next-card-header h3 a:hover {
- opacity: 1;
+
+/* 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-next-card-content {
- font-size: 1.7rem;
+.read-more {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 4vmin;
}
-.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;
+.read-more .post-card-title {
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;
+.read-more .post-card-excerpt {
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: color-mod(var(--midgrey) l(-10%));
- font-size: 1.5rem;
- font-weight: 400;
-}
-
-.post-full-content .kg-bookmark-icon {
- margin-right: 8px;
- width: 22px;
- height: 22px;
-}
-
-.kg-bookmark-author {
- line-height: 1.5em;
-}
-
-.kg-bookmark-author:after {
- content: "•";
- margin: 0 6px;
-}
-
-.kg-bookmark-publisher {
- overflow: hidden;
- max-width: 240px;
- line-height: 1.5em;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-@media (max-width: 800px) {
- .post-full-content figure {
- margin: 0.2em 0 1.3em;
- }
-
- .post-full-content h1 + figure,
- .post-full-content h2 + figure,
- .post-full-content h3 + figure,
- .post-full-content h4 + figure {
- margin-top: 0.9em;
- }
-}
-
-@media (max-width: 500px) {
- .post-full-content .kg-width-wide,
- .post-full-content .kg-width-full {
- margin-right: -5vw;
- margin-left: -5vw;
- }
-
- .post-full-content figcaption {
- margin-bottom: 0.4em;
- }
-
- .post-full-content .kg-bookmark-container {
- flex-direction: column;
- }
-
- .kg-bookmark-title,
- .kg-bookmark-description,
- .kg-bookmark-metadata {
- font-size: 1.4rem;
- line-height: 1.5em;
- }
-
- .post-full-content .kg-bookmark-icon {
- width: 18px;
- height: 18px;
- }
-
- .kg-bookmark-thumbnail {
- order: 1;
- min-height: 160px;
- width: 100%;
- }
-
- .kg-bookmark-thumbnail img {
- border-radius: 3px 3px 0 0;
- }
-
- .kg-bookmark-content {
- order: 2;
- }
-}
-
-/* 8. Author Template
-/* ---------------------------------------------------------- */
-.author-header {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: flex-start;
- padding: 10vw 0 10px;
-}
-
-.site-archive-header .author-header {
- align-items: center;
-}
-
-.site-archive-header .no-image .author-header {
- padding-bottom: 20px;
-}
-
-.author-header-content {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin: 5px 0 0 30px;
-}
-
-.site-header-content .author-profile-image {
- z-index: 10;
- flex-shrink: 0;
- margin: -4px 0 0;
- width: 110px;
- height: 110px;
- box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
-}
-
-.author-header-content .author-bio {
- z-index: 10;
- flex-shrink: 0;
- margin: 6px 0 0;
- max-width: 46em;
- font-size: 2.0rem;
- line-height: 1.3em;
- font-weight: 400;
- opacity: 0.8;
-}
-
-.author-header-content .author-meta {
- z-index: 10;
- flex-shrink: 0;
- display: flex;
- align-items: center;
- margin: 0 0 0 1px;
- font-size: 1.2rem;
- font-weight: 400;
- letter-spacing: 0.2px;
- text-transform: uppercase;
- white-space: nowrap;
-}
-
-.author-header-content .social-link:first-of-type {
- padding-left: 4px;
-}
-
-.no-image .author-header-content .author-bio {
- color: var(--midgrey);
- opacity: 1.0;
-}
-
-.no-image .author-header-content .author-meta {
- color: var(--midgrey);
- opacity: 1.0;
-}
-
-.author-social-link a {
+.read-more .post-card-byline-content 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: 1000px) {
+ .read-more {
+ grid-template-columns: 1fr 1fr;
+ }
+ .read-more article:nth-child(3) {
+ display: none;
+ }
}
@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;
+ background: color-mod(var(--color-lightgrey) l(+10%));
+ border-radius: 50%;
+}
+
+.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;
}
@@ -2507,37 +1597,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;
}
@@ -2581,499 +1657,311 @@ Usage (In Ghost editor):
}
-/* 10. Subscribe Message and Overlay
-/* ---------------------------------------------------------- */
-
-.subscribe-success-message {
- 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-success .subscribe-success-message {
- visibility: visible;
- transform: translateY(0);
-}
-
-.subscribe-success-message.close {
- visibility: hidden;
- transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
- transform: translateY(-175%);
-}
-
-.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) {
- body {
- color: rgba(255, 255, 255, 0.75);
- background: var(--darkmode);
- }
- 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
- .site-header-background:before {
- background: rgba(0,0,0,0.6);
- }
+
- .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.
- .post-card,
- .post-card:hover {
- border-bottom-color: color-mod(var(--darkmode) l(+8%));
- }
+ */
- .author-profile-image {
- background: var(--darkmode);
- }
-
- .post-card-byline-content a {
- color: rgba(255, 255, 255, 0.75);
- }
-
- .post-card-byline-content a:hover {
- color: #fff;
- }
-
- .post-card-image {
- background: var(--darkmode);
- }
-
- .post-card-title {
- color: rgba(255, 255, 255, 0.85);
- }
-
- .post-card-excerpt {
- color: color-mod(var(--midgrey) l(+10%));
- }
-
- .author-avatar,
- .static-avatar {
- border-color: color-mod(var(--darkgrey) l(+2%));
- }
-
- .site-main,
- .post-template .site-main,
- .page-template .site-main {
- background: var(--darkmode);
- }
-
- .post-full-content {
- background: var(--darkmode);
- }
-
- .post-full-title {
- color: rgba(255, 255, 255, 0.9);
- }
-
- .post-full-custom-excerpt {
- color: color-mod(var(--midgrey) l(+10%));
- }
-
- .post-full-image {
- background-color: color-mod(var(--darkmode) l(+8%));
- }
-
- .post-full-byline {
- border-top-color: color-mod(var(--darkmode) l(+15%));
- }
-
- .post-full-byline-meta h4 a {
- color: rgba(255, 255, 255, 0.75);
- }
-
- .post-full-byline-meta h4 a:hover {
- color: #fff;
- }
-
- .author-list-item .author-card {
- background: color-mod(var(--darkmode) l(+4%));
- box-shadow: 0 12px 26px rgba(0,0,0,0.4);
- }
-
- .author-list-item .author-card:before {
- border-top-color: color-mod(var(--darkmode) l(+4%));
- }
-
- .no-image .author-social-link a {
- color: rgba(255, 255, 255, 0.75);
- }
-
- .post-full-content h1,
- .post-full-content h2,
- .post-full-content h3,
- .post-full-content h4,
- .post-full-content h6 {
- color: rgba(255, 255, 255, 0.9);
- }
-
- .post-full-content a {
- color: #fff;
- box-shadow: inset 0 -1px 0 #fff;
- }
-
- .post-full-content strong {
- color: #fff;
- }
-
- .post-full-content em {
- color: #fff;
- }
-
- .post-full-content code {
- color: #fff;
- background: #000;
- }
-
- hr {
- border-top-color: color-mod(var(--darkmode) l(+8%));
- }
-
- .post-full-content figcaption {
- color: rgba(255, 255, 255, 0.6);
- }
-
- .post-full-content table td:first-child {
- background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
- }
-
- .post-full-content table td:last-child {
- background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
- }
-
- .post-full-content table th {
- color: rgba(255, 255, 255, 0.85);
- background-color: color-mod(var(--darkmode) l(+8%));
- }
-
- .post-full-content table th,
- .post-full-content table td {
- border: color-mod(var(--darkmode) l(+8%)) 1px solid;
- }
-
- .post-full-content .kg-bookmark-container,
- .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);
- }
-
- .kg-bookmark-title {
- color: #fff;
- }
-
- .kg-bookmark-description {
- color: rgba(255, 255, 255, 0.75);
- }
-
- .kg-bookmark-metadata {
- color: rgba(255, 255, 255, 0.75);
- }
-
- .site-archive-header .no-image {
- color: rgba(255, 255, 255, 0.9);
- background: var(--darkmode);
- }
-
- .site-archive-header .no-image .site-header-content {
- border-bottom-color: color-mod(var(--darkmode) l(+15%));
- }
-
- .site-header-content .author-profile-image {
- box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
- }
-
- .subscribe-form {
- border: none;
- background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));
- }
-
- .subscribe-form-title {
- color: rgba(255, 255, 255, 0.9);
- }
-
- .subscribe-form p {
- color: rgba(255, 255, 255, 0.7);
- }
-
- .subscribe-email {
- border-color: color-mod(var(--darkmode) l(+6%));
- color: rgba(255, 255, 255, 0.9);
- background: color-mod(var(--darkmode) l(+3%));
- }
-
- .subscribe-email:focus {
- border-color: color-mod(var(--darkmode) l(+25%));
- }
-
- .subscribe-form button {
- opacity: 0.9;
- }
-
- .subscribe-form .invalid .message-error,
- .subscribe-form .error .message-error {
- color: color-mod(var(--red) l(+5%) s(-5%));
- }
-
- .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 .gh-content h1,
+html.dark-mode .gh-content h2,
+html.dark-mode .gh-content h3,
+html.dark-mode .gh-content h4,
+html.dark-mode .gh-content h5,
+html.dark-mode .gh-content h6 {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .gh-content pre {
+ background: color-mod(var(--color-darkgrey) l(-8%));
+}
+
+html.dark-mode .gh-content :not(pre) > code {
+ background: color-mod(var(--color-darkgrey) l(+6%));
+ border-color: color-mod(var(--color-darkmode) l(+8%));
+ color: var(--color-wash);
+}
+
+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 .gh-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/infinite-scroll.js b/assets/js/infinite-scroll.js
index dd34d41..3e9bd7a 100644
--- a/assets/js/infinite-scroll.js
+++ b/assets/js/infinite-scroll.js
@@ -43,7 +43,7 @@
}
// append contents
- var postElements = this.response.querySelectorAll('.post-card');
+ var postElements = this.response.querySelectorAll('article.post-card');
postElements.forEach(function (item) {
// document.importNode is important, without it the item's owner
// document will be different which can break resizing of
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 002bb5d..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}}
-
{{!-- 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 0bb9893..bea8c05 100644
--- a/default.hbs
+++ b/default.hbs
@@ -1,8 +1,9 @@
-
+
- {{!-- Document Settings --}}
+ {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
+ {{meta_title}}
@@ -17,122 +18,100 @@
- {{!-- Styles'n'Scripts --}}
+ {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
+ this will take care of caching and cache-busting automatically --}}
- {{!-- This tag outputs SEO meta+structured data and other important settings --}}
+ {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
+ it should always be the last tag before the closing head tag --}}
{{ghost_head}}
+
-
+
+
- {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
+
+
+
+
+
+
+
+
+ {{!-- 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}}!
-
-
-
-
-
-
- {{#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') {
- $('body').addClass("subscribe-success");
- }
-
- $('.subscribe-success-message .subscribe-close').click(function () {
- $('.subscribe-success-message').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..f134db1 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: 'v' + 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 8b85db8..10dddbd 100644
--- a/index.hbs
+++ b/index.hbs
@@ -2,23 +2,29 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
-
-
+
{{!-- The main content area --}}
@@ -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 bac8d0f..6b29b38 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,10 @@
"name": "vivid-casper",
"description": "Minor tweaks from the default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
"demo": "https://demo.ghost.io",
- "version": "3.1.0",
+ "version": "4.0.4",
"engines": {
- "ghost": ">=3.0.0",
- "ghost-api": "v3"
+ "ghost": ">=4.0.0",
+ "ghost-api": "v4"
},
"license": "MIT",
"screenshots": {
@@ -46,18 +46,19 @@
"bugs": "https://github.com/ViViDboarder/Casper/issues",
"contributors": "https://github.com/ViViDboarder/Casper/graphs/contributors",
"devDependencies": {
- "@tryghost/release-utils": "0.6.3",
- "autoprefixer": "9.8.6",
- "beeper": "2.0.0",
+ "@tryghost/release-utils": "0.6.12",
+ "autoprefixer": "10.2.5",
+ "beeper": "2.1.0",
"cssnano": "4.1.10",
- "gscan": "3.5.5",
+ "gscan": "4.0.0",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2",
- "gulp-postcss": "8.0.0",
+ "gulp-postcss": "9.0.0",
"gulp-uglify": "3.0.2",
- "gulp-zip": "5.0.2",
- "inquirer": "7.3.3",
+ "gulp-zip": "5.1.0",
+ "inquirer": "8.0.0",
+ "postcss": "8.2.8",
"postcss-color-mod-function": "3.0.3",
"postcss-easy-import": "3.0.0",
"pump": "3.0.0"
@@ -87,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}}
-
-
-