v5.3.2

fixes #895

README.md

@@ -4,7 +4,7 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the la
 
  
 
-![screenshot-desktop](https://user-images.githubusercontent.com/353959/66987533-40eae100-f0c1-11e9-822e-cbaf38fb8e3f.png)
+![screenshot-desktop](https://user-images.githubusercontent.com/1418797/183329195-8e8f2ee5-a473-4694-a813-a2575491209e.png)
 
  
 

assets/built/global.css

@@ -1,2 +1,2 @@
-a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{padding:3px 5px;font-family:var(--font-mono);font-size:1.5rem;background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25)}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:var(--color-darkgrey);font-family:var(--font-sans);font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{padding-left:.3em;line-height:1.6em}li+li{margin-top:.5em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:2.4rem;font-weight:600}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}
+a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;height:auto;max-width:100%}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box;font-family:sans-serif}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{font-size:2em;margin:.67em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25);font-family:var(--font-mono);font-size:1.5rem;padding:3px 5px}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{border:none;overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:62.5%}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;background:#fff;color:var(--color-darkgrey);font-family:var(--font-sans);font-size:1.6rem;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.6em}::-moz-selection{background:#daf2fd;text-shadow:none}::selection{background:#daf2fd;text-shadow:none}hr{border:0;border-top:1px solid #f0f0f0;display:block;height:1px;margin:2.5em 0 3.5em;padding:0;position:relative;width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{line-height:1.6em;padding-left:.3em}li+li{margin-top:.5em}dt{color:#daf2fd;float:left;font-weight:500;margin:0 20px 0 0;text-align:right;width:120px}dd{margin:0 0 5px;text-align:left}blockquote{border-left:#daf2fd;margin:1.5em 0;padding:0 1.6em}blockquote small{display:inline-block;font-size:.9em;margin:.8em 0 .8em 1.5em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{text-rendering:optimizeLegibility;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin-top:0}h1{font-size:4.8rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .5em}@media (max-width:600px){h1{font-size:2.8rem}}h2{font-size:2.8rem;font-weight:700;margin:1.5em 0 .5em}@media (max-width:600px){h2{font-size:2.3rem}}h3{font-size:2.4rem;font-weight:600;margin:1.5em 0 .5em}@media (max-width:600px){h3{font-size:1.7rem}}h4{font-size:2rem;margin:1.5em 0 .5em}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}
 /*# sourceMappingURL=global.css.map */

assets/css/screen.css

@@ -15,6 +15,7 @@ production stylesheet in assets/built/screen.css
   7.2. Members Subscribe Form
   7.4. Related Posts
   7.5. Koenig Styles
+  7.6  Comments
 8.  Author Template
 9.  Error Template
 11. Site Footer
@@ -224,7 +225,6 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
 
 @media (max-width: 767px) {
     .has-cover .site-header-content {
-        padding-bottom: 36px;
         min-height: 240px;
     }
     .site-header-inner {
@@ -321,6 +321,11 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
     max-height: 26px;
 }
 
+.gh-head-brand-wrapper {
+    display: flex;
+    align-items: center;
+}
+
 
 /* Primary Navigation
 /* ---------------------------------------------------------- */
@@ -368,12 +373,12 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
 .gh-social {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 20px;
 }
 
 .gh-social-link {
     line-height: 0;
-    color: #fff;
+    color: inherit;
 }
 
 .gh-social-link:hover {
@@ -412,6 +417,79 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
     background: #fff;
 }
 
+/* Search
+/* ---------------------------------------------------------- */
+
+.gh-search {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+}
+
+.gh-search:hover {
+    opacity: 0.9;
+}
+
+@media (max-width: 991px) {
+    .gh-head-actions .gh-search {
+        display: none;
+    }
+}
+
+@media (min-width: 992px) {
+    .gh-head-brand .gh-search {
+        display: none;
+    }
+}
+
+
+/* Search
+/* ---------------------------------------------------------- */
+
+.gh-search {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+}
+
+.gh-search:hover {
+    opacity: 0.9;
+}
+
+.gh-head-brand .gh-search {
+    margin-right: 8px;
+}
+
+.gh-head-actions .gh-search {
+    margin-right: -10px;
+}
+
+@media (max-width: 991px) {
+    .gh-head-actions .gh-search {
+        display: none;
+    }
+}
+
+@media (min-width: 992px) {
+    .gh-head-brand .gh-search {
+        display: none;
+    }
+}
+
 
 /* Mobile Menu Trigger
 /* ---------------------------------------------------------- */
@@ -643,19 +721,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding-bottom: 55%;
 }
 
-.post-card:is(.post-access-members, .post-access-paid) .post-card-image-link::after {
+.post-card[class*="post-access-"] .post-card-image-link::after {
     background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(3px);
 }
 
-.post-card.keep-ratio:is(.post-access-members, .post-access-paid) .post-card-image-link::after {
+.post-card.keep-ratio[class*="post-access-"] .post-card-image-link::after {
     position: absolute;
     inset: 0;
     padding-bottom: 0;
 }
 
-.post-card.keep-ratio.post-access-public:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
-    display: none;
+.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
+    padding-bottom: 0;
 }
 
 .post-card-image {
@@ -785,12 +863,27 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 .post-card-meta {
     display: flex;
     align-items: center;
+    gap: 6px;
     margin-top: 12px;
     padding: 0;
     font-size: 1.3rem;
     color: var(--color-secondary-text);
 }
 
+.post-card-meta > * {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.post-card-meta > * + *:not(script)::before {
+    width: 2px;
+    height: 2px;
+    content: "";
+    background-color: var(--color-secondary-text);
+    border-radius: 50%;
+}
+
 .post-card-meta .sep {
     margin: 0 4px;
 }
@@ -1347,7 +1440,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 /* Tables */
-.gh-content table {
+.gh-content table:not(.gist table) {
     display: inline-block;
     overflow-x: auto;
     max-width: 100%;
@@ -1358,9 +1451,6 @@ iframe.instagram-media + script + :not([id]) {
     font-size: 1.6rem;
     white-space: nowrap;
     vertical-align: top;
-}
-
-.gh-content table {
     -webkit-overflow-scrolling: touch;
     background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
     background-attachment: scroll, scroll;
@@ -1368,20 +1458,20 @@ iframe.instagram-media + script + :not([id]) {
     background-repeat: no-repeat;
 }
 
-.gh-content table td:first-child {
+.gh-content table:not(.gist table) td:first-child {
     background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
     background-size: 20px 100%;
     background-repeat: no-repeat;
 }
 
-.gh-content table td:last-child {
+.gh-content table:not(.gist table) td:last-child {
     background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
     background-position: 100% 0;
     background-size: 20px 100%;
     background-repeat: no-repeat;
 }
 
-.gh-content table th {
+.gh-content table:not(.gist table) th {
     color: var(--color-darkgrey);
     font-size: 1.2rem;
     font-weight: 700;
@@ -1391,8 +1481,8 @@ iframe.instagram-media + script + :not([id]) {
     background-color: color-mod(var(--color-wash) l(+4%));
 }
 
-.gh-content table th,
-.gh-content table td {
+.gh-content table:not(.gist table) th,
+.gh-content table:not(.gist table) td {
     padding: 6px 12px;
     border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
 }
@@ -1550,6 +1640,43 @@ iframe.instagram-media + script + :not([id]) {
     }
 }
 
+/* 7.6. Comments
+/* ---------------------------------------------------------- */
+.comments {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 60px 0 44px;
+}
+
+
+.comments-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 32px;
+    width: 100%;
+    max-width: 720px;
+}
+
+.comments h2 {
+    width: 100%;
+    max-width: 720px;
+    font-weight: 800;
+    font-size: 3.4rem;
+}
+
+.comments .comment-count {
+    color: var(--color-midgrey);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.comments #ghost-comments-root {
+    width: 100%;
+    max-width: 720px;
+}
+
 
 /* 8. Author Template
 /* ---------------------------------------------------------- */
@@ -1591,6 +1718,13 @@ iframe.instagram-media + script + :not([id]) {
     height: 16px;
 }
 
+@media (min-width: 1001px) {
+    .author-template .post-card-large .post-card-content {
+        grid-column: span 2;
+        max-width: 640px;
+    }
+}
+
 
 /* 8. Tag Template
 /* ---------------------------------------------------------- */
@@ -1604,6 +1738,12 @@ iframe.instagram-media + script + :not([id]) {
     order: 1;
 }
 
+@media (min-width: 1001px) {
+    .tag-template .post-card-large .post-card-content {
+        grid-column: span 2;
+        max-width: 640px;
+    }
+}
 
 /* 9. Error Template
 /* ---------------------------------------------------------- */
@@ -1812,6 +1952,14 @@ html.dark-mode .post-card-excerpt {
     color: var(--color-secondary-text);
 }
 
+html.dark-mode .author-profile-location {
+    color: #fff;
+}
+
+html.dark-mode .author-profile-social-link:hover {
+    color: #fff;
+}
+
 html.dark-mode .article-title {
     color: #fff;
 }
@@ -1859,7 +2007,7 @@ html.dark-mode .gh-content :not(pre) > code {
     color: var(--color-wash);
 }
 
-html.dark-mode .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
+:where(html.dark-mode) .gh-content a {
     color: #fff;
 }
 
@@ -1889,21 +2037,21 @@ html.dark-mode figcaption {
     color: rgba(255, 255, 255, 0.6);
 }
 
-html.dark-mode .gh-content table td:first-child {
+html.dark-mode .gh-content table:not(.gist 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 .gh-content table td:last-child {
+html.dark-mode .gh-content table:not(.gist 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 .gh-content table th {
+html.dark-mode .gh-content table:not(.gist table) th {
     color: rgba(255, 255, 255, 0.85);
     background-color: color-mod(var(--color-darkmode) l(+8%));
 }
 
-html.dark-mode .gh-content table th,
-html.dark-mode .gh-content table td {
+html.dark-mode .gh-content table:not(.gist table) th,
+html.dark-mode .gh-content table:not(.gist table) td {
     border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
 }
 
@@ -1938,60 +2086,68 @@ html.dark-mode .footer-cta-title {
         color: rgba(255, 255, 255, 0.75);
         background: var(--color-darkmode);
     }
-    
+
     html.auto-color img {
         opacity: 0.9;
     }
-    
+
     html.auto-color kbd {
         background: color-mod(var(--color-darkmode) l(+5%));
     }
-    
+
     html.auto-color figcaption a {
         color: #fff;
     }
-    
+
     html.auto-color .gh-head {
         background: var(--color-darkmode);
         color: #fff;
     }
-    
+
     html.auto-color .gh-burger-box {
         color: #fff;
     }
-    
+
     html.auto-color .site-header-content {
         color: #fff;
     }
-    
+
     html.auto-color .post-card-image {
         background: var(--color-darkmode);
     }
-    
+
     html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
         color: color-mod(var(--color-secondary-text) l(-22%));
     }
-    
+
     html.auto-color .post-card-featured {
         color: #fff;
     }
-    
+
     html.auto-color .post-card-title {
         color: #fff;
     }
-    
+
     html.auto-color .post-card-excerpt {
         color: var(--color-secondary-text);
     }
-    
+
+    html.auto-color .author-profile-location {
+        color: #fff;
+    }
+
+    html.auto-color .author-profile-social-link:hover {
+        color: #fff;
+    }
+
     html.auto-color .article-title {
         color: #fff;
     }
-    
+
     html.auto-color .article-excerpt {
         color: var(--color-secondary-text);
     }
-    
+
     html.auto-color .post-full-image {
         background-color: color-mod(var(--color-darkmode) l(+8%));
     }
@@ -2000,107 +2156,107 @@ html.dark-mode .footer-cta-title {
         border-color: var(--color-darkmode);
         background-color: color-mod(var(--color-darkmode) l(+8%));
     }
-    
+
     html.auto-color .author-profile-image {
         opacity: 1;
     }
-    
+
     html.auto-color .author-profile-image path {
         fill: var(--color-darkmode);
     }
-    
+
     html.auto-color .article-byline-meta .author-name a {
         color: #fff;
     }
-    
+
     html.auto-color .no-image .author-social-link a {
         color: rgba(255, 255, 255, 0.75);
     }
-    
+
     html.auto-color .gh-content > [id] {
         color: rgba(255, 255, 255, 0.9);
     }
-    
+
     html.auto-color .gh-content pre {
         background: color-mod(var(--color-darkgrey) l(-8%));
     }
-    
+
     html.auto-color .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.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
+
+    :where(html.auto-color) .gh-content a {
         color: #fff;
     }
-    
+
     html.auto-color .gh-content strong {
         color: #fff;
     }
-    
+
     html.auto-color .gh-content em {
         color: #fff;
     }
-    
+
     html.auto-color .gh-content code {
         color: #fff;
         background: #000;
     }
-    
+
     html.auto-color hr {
         border-top-color: color-mod(var(--color-darkmode) l(+8%));
     }
-    
+
     html.auto-color .gh-content hr:after {
         background: color-mod(var(--color-darkmode) l(+8%));
         box-shadow: var(--color-darkmode) 0 0 0 5px;
     }
-    
+
     html.auto-color figcaption {
         color: rgba(255, 255, 255, 0.6);
     }
-    
-    html.auto-color .gh-content table td:first-child {
+
+    html.auto-color .gh-content table:not(.gist table) td:first-child {
         background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
     }
-    
-    html.auto-color .gh-content table td:last-child {
+
+    html.auto-color .gh-content table:not(.gist table) td:last-child {
         background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
     }
-    
-    html.auto-color .gh-content table th {
+
+    html.auto-color .gh-content table:not(.gist table) th {
         color: rgba(255, 255, 255, 0.85);
         background-color: color-mod(var(--color-darkmode) l(+8%));
     }
-    
-    html.auto-color .gh-content table th,
-    html.auto-color .gh-content table td {
+
+    html.auto-color .gh-content table:not(.gist table) th,
+    html.auto-color .gh-content table:not(.gist table) td {
         border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
     }
-    
+
     html.auto-color .gh-content input {
         color: color-mod(var(--color-midgrey) l(-30%));
     }
-    
+
     html.auto-color .site-archive-header .no-image {
         color: rgba(255, 255, 255, 0.9);
         background: var(--color-darkmode);
     }
-    
+
     html.auto-color .kg-header-card.kg-style-dark {
         background: color-mod(var(--color-darkgrey) l(-5%));
     }
-    
+
     html.auto-color .kg-header-card.kg-style-light {
         background: color-mod(var(--color-darkgrey) l(+5%));
     }
-    
+
     html.auto-color .kg-header-card h2.kg-header-card-header,
     html.auto-color .kg-header-card h3.kg-header-card-subheader {
         color: #fff;
     }
-    
+
     html.auto-color .footer-cta-title {
         color: #fff;
     }

default.hbs

@@ -32,22 +32,26 @@
                         {{@site.title}}
                     {{/if}}
                 </a>
-                <a class="gh-burger" role="button">
-                    <div class="gh-burger-box">
-                        <div class="gh-burger-inner"></div>
-                    </div>
-                </a>
+                <div class="gh-head-brand-wrapper">
+                    <button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
+                    <a class="gh-burger" role="button">
+                        <div class="gh-burger-box">
+                            <div class="gh-burger-inner"></div>
+                        </div>
+                    </a>
+                </div>
             </div>
             <div class="gh-head-menu">
                 {{navigation}}
             </div>
             <div class="gh-head-actions">
+                <button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
                 <div class="gh-social">
                     {{#if @site.facebook}}
-                        <a class="gh-social-link gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                        <a class="gh-social-link gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="me noopener">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @site.twitter}}
-                        <a class="gh-social-link gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                        <a class="gh-social-link gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="me noopener">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @site.members_enabled}}

gulpfile.js

@@ -123,7 +123,7 @@ exports.release = async () => {
             type: 'input',
             name: 'compatibleWithGhost',
             message: 'Which version of Ghost is it compatible with?',
-            default: '4.0.0'
+            default: '5.0.0'
         }]);
 
         const compatibleWithGhost = result.compatibleWithGhost;

package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "A clean, minimal default theme for the Ghost publishing platform",
     "demo": "https://demo.ghost.io",
-    "version": "5.1.1",
+    "version": "5.3.2",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -45,21 +45,21 @@
     "bugs": "https://github.com/TryGhost/Casper/issues",
     "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
     "devDependencies": {
-        "@tryghost/release-utils": "0.6.12",
-        "autoprefixer": "10.2.5",
+        "@tryghost/release-utils": "0.8.1",
+        "autoprefixer": "10.4.7",
         "beeper": "2.1.0",
-        "cssnano": "4.1.10",
-        "gscan": "4.22.0",
+        "cssnano": "5.1.12",
+        "gscan": "4.34.0",
         "gulp": "4.0.2",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",
-        "gulp-postcss": "9.0.0",
+        "gulp-postcss": "9.0.1",
         "gulp-uglify": "3.0.2",
         "gulp-zip": "5.1.0",
-        "inquirer": "8.0.0",
-        "postcss": "8.2.8",
+        "inquirer": "8.2.4",
+        "postcss": "8.2.13",
         "postcss-color-mod-function": "3.0.3",
-        "postcss-easy-import": "3.0.0",
+        "postcss-easy-import": "4.0.0",
         "pump": "3.0.0"
     },
     "browserslist": [

partials/icons/search.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>

partials/post-card.hbs

@@ -1,7 +1,7 @@
 {{!-- This is a partial file used to generate a post "card"
 which templates loop over to generate a list of posts. --}}
 
-<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}} post-access-{{visibility}}">
+<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home, paged"}} post-card-large{{/is}}{{/match}}{{#unless access}} post-access-{{visibility}}{{/unless}}">
 
     {{#if feature_image}}
     <a class="post-card-image-link" href="{{url}}">
@@ -19,11 +19,18 @@ which templates loop over to generate a list of posts. --}}
             loading="lazy"
         />
 
+        {{#unless access}}
         {{^has visibility="public"}}
             <div class="post-card-access">
-                {{> "icons/lock"}} Members-only
+                {{> "icons/lock"}}
+                {{#has visibility="members"}}
+                    Members only
+                {{else}}
+                    Paid-members only
+                {{/has}}
             </div>
         {{/has}}
+        {{/unless}}
 
     </a>
     {{/if}}
@@ -41,11 +48,13 @@ which templates loop over to generate a list of posts. --}}
                     {{/if}}
                 </div>
                 <h2 class="post-card-title">
+                    {{#unless access}}
                     {{^has visibility="public"}}
                         {{#unless feature_image}}
                             {{> "icons/lock"}}
                         {{/unless}}
                     {{/has}}
+                    {{/unless}}
                     {{title}}
                 </h2>
             </header>
@@ -57,9 +66,11 @@ which templates loop over to generate a list of posts. --}}
         <footer class="post-card-meta">
             <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
             {{#if reading_time}}
-                <span class="sep">—</span>
                 <span class="post-card-meta-length">{{reading_time}}</span>
             {{/if}}
+            {{#if @site.comments_enabled}}
+                {{comment_count}}
+            {{/if}}
         </footer>
 
     </div>

post.hbs

@@ -86,11 +86,11 @@ into the {body} tag of the default.hbs template --}}
         {{content}}
     </section>
 
-    {{!--
-    <section class="article-comments gh-canvas">
-        If you want to embed comments, this is a good place to paste your code!
-    </section>
-    --}}
+    {{#if comments}}
+        <section class="article-comments gh-canvas">
+            {{comments}}
+        </section>
+    {{/if}}
 
 </article>
 </main>
@@ -98,6 +98,7 @@ into the {body} tag of the default.hbs template --}}
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
 {{#if @site.members_enabled}}
 {{#unless @member}}
+{{#unless @site.comments_enabled}}
 {{#if access}}
     <section class="footer-cta outer">
         <div class="inner">
@@ -106,12 +107,11 @@ into the {body} tag of the default.hbs template --}}
                 <div class="footer-cta-input">Enter your email</div>
                 <span>Subscribe</span>
             </a>
-            {{!-- ^ This looks like a form element, but it's just a link to Portal,
-            making the form validation and submission much simpler. --}}
         </div>
     </section>
 {{/if}}
 {{/unless}}
+{{/unless}}
 {{/if}}