Compare commits

...

95 Commits

Author SHA1 Message Date
ffdf853323 v4.5.0 2021-12-13 17:47:11 +01:00
e4543555fa Fixed a rule so that it doesn't overrides the product card css
refs https://github.com/TryGhost/Team/issues/1245

- Followed the same pattern as the callout, ntf and bookmark cards.
2021-12-13 17:23:49 +01:00
67e7291c2b Footer > Adding Lazy loading in the profile image 2021-12-13 16:09:13 +08:00
c880856a32 Revert dark mode style of product card rating 2021-12-10 09:55:52 +08:00
b06bcd6534 v4.4.0 2021-12-08 15:00:14 +00:00
49f99d956f Add dark mode support to product card star rating 2021-12-08 17:17:47 +08:00
cdb03b65fb Add alternate blockquote styles 2021-12-07 19:05:00 +08:00
e80f22c2a5 v4.3.1 2021-12-06 18:52:26 +08:00
b6474446f8 Updated toggle styles 2021-12-04 08:14:00 -04:00
462770968a Updated callout styles 2021-12-04 08:06:09 -04:00
017a2829b6 v4.3.0 2021-12-01 12:56:41 +00:00
198f12b725 Updated yarn.lock
no issue

- this needed updating after we bumped gscan
2021-12-01 12:55:55 +00:00
48260130fe Update toggle card heading selector 2021-11-29 13:33:59 +08:00
8b392ec6dd Add typography option to toggle card heading 2021-11-25 18:42:19 +08:00
4ea98431b3 Card responsive style refinements 2021-11-25 10:44:09 +08:00
6bc9b021b5 Add toggle content flow spacing 2021-11-25 10:31:36 +08:00
c1006ec649 Use data attribute for Portal links 2021-11-24 10:50:46 +08:00
cad48b230c Add missing styles for toggle card content 2021-11-23 11:32:24 +08:00
b3f6b8a82c Include lists inside toggle card to content styling 2021-11-23 11:28:35 +08:00
2d940d8f59 Exclude default CTA links from link styling 2021-11-23 11:22:56 +08:00
b7ea0cbff7 Upgrade gscan 2021-11-22 21:37:28 +08:00
a8150f7c30 Include toggle text in content styling 2021-11-22 21:35:48 +08:00
b5b1ea001e Updated NFT card styles 2021-11-19 12:02:09 +01:00
370b9ec74e Include .kg-callout-text to content styling 2021-11-19 16:07:09 +08:00
3cbe9b2c97 Remove bookmark card related CSS 2021-11-17 18:22:47 +08:00
d652252699 Remove gallery card related CSS and JS 2021-11-17 17:02:16 +08:00
6107a411a1 Exclude cards from default link styling
refs https://github.com/TryGhost/Team/issues/1227
2021-11-17 15:40:32 +08:00
8feb988375 Update heading selector on dark mode 2021-11-15 13:22:03 +08:00
e898d56f0b v4.2.0 2021-11-05 20:58:43 +08:00
b8319c5bb9 Update gscan 2021-11-05 20:17:41 +08:00
ceaa887371 Add custom settings 2021-11-05 20:14:53 +08:00
c63a07e8df v4.1.1 2021-09-22 15:28:46 +08:00
0e0898d7e9 Fix W3C warning about section lacks heading 2021-09-22 15:26:39 +08:00
2234b14bbd Fix nested main element issue 2021-09-22 15:24:17 +08:00
046d53e885 v4.1.0 2021-07-07 12:16:03 +08:00
e49664eca4 Add alt and caption support to feature images (#812)
* Add alt and caption support to feature images

* Add feature image alt support to post card

* Remove three-curlies
2021-07-05 10:59:21 +08:00
21bdffbd8a Fix header element inside header 2021-06-10 13:32:41 +08:00
ea33b00c0a Author page: remove span stray end tag (#808) 2021-06-03 10:15:25 +08:00
17c9fe6c55 v4.0.5 2021-05-10 14:21:53 +08:00
5adeaa458b Make the footer stick to bottom
Currently, the footer doesn't stick to the bottom of the viewport when the page content is small. This fixes the issue by making the <main> element fill the remaining space
2021-05-10 14:20:40 +08:00
5013c91f1a Revert "Pin beeper to v2"
This reverts commit f43f6c567f.
2021-05-06 15:48:36 +08:00
f43f6c567f Pin beeper to v2
Beeper started requiring ESM syntax from v3, and it caused an error when running development workflow
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module
2021-05-06 12:28:54 +08:00
69feef6c46 Exclude development files from zipped theme 2021-05-05 07:53:10 +08:00
4708987c39 Update signup button Portal link
fixes #791
2021-04-02 14:45:33 +08:00
a4eb58f8e7 v4.0.4 2021-04-01 16:18:12 +08:00
5ad96f7c12 Fix post featured image width 2021-04-01 13:20:50 +08:00
6ac55407b3 Break long words
Fixes #788
2021-04-01 13:01:09 +08:00
b0e21fe0f7 Improve code block styling 2021-04-01 12:58:41 +08:00
85cd131cf1 v4.0.3 2021-03-29 11:57:50 +08:00
53ff37cf10 Add background color to default profile image
Fixes #785
2021-03-29 11:43:45 +08:00
816e1f608e Make image block element by default
By doing that, any possible future image alignment issues in post content can be prevented
refs #786
2021-03-29 11:34:53 +08:00
0d49da97a2 Fix list item spacing issue
List items had both top and bottom margin, and it caused some inconsistent spacing for lists inside post content. This updates fixes the issue by only assigning top margin on list items except the first one.
refs: #787
2021-03-29 10:52:15 +08:00
e34e2e3e0a Fix mobile menu overlapping Portal popup
fixes #784
2021-03-22 11:38:03 +08:00
18ceb822dd Update screen.css (#778) 2021-03-19 07:19:03 -04:00
08c1e38ae1 v4.0.2 2021-03-19 16:47:30 +08:00
d9e9e097cd Fix headings and card caption color on dark mode
refs #780
2021-03-19 14:15:52 +08:00
96aac80081 v4.0.1 2021-03-18 17:35:03 +00:00
3fa7f25147 Add Facebook link to the header
Fixes #776
2021-03-18 14:31:56 +08:00
b16671d8a7 v4.0.0 2021-03-15 23:33:48 +00:00
3d6a3dc68f v4.0.0-rc.2 2021-03-12 20:27:07 +00:00
48d06196c2 Fix horizontal scrolling caused by scaling on the subscribe CTA h2 (#765) 2021-03-12 09:53:43 -05:00
573e384381 Add space between gallery/image cards with caption (#766)
Co-authored-by: John O'Nolan <john@ghost.org>
2021-03-12 08:29:53 -05:00
5f127c395b Fix traditional Instagram embeds (#767)
Highly specific styles for traditional Instagram embeds

Co-authored-by: John O'Nolan <john@ghost.org>
2021-03-12 08:27:58 -05:00
3cc9cb0988 Fix headings typography scale (#771) 2021-03-12 08:25:37 -05:00
ca36c4fe91 Only use post-card-large variation if feature_image exists (#764) 2021-03-11 13:44:10 -05:00
260d5ec4e6 Fix horizontal alignment of smaller post images (#759)
Co-authored-by: John O'Nolan <john@ghost.org>
2021-03-11 13:37:58 -05:00
410ec1a9d5 Fix logo size in header on small screens (#760)
Co-authored-by: John O'Nolan <john@ghost.org>
2021-03-11 13:37:00 -05:00
e72f4236be Fix long links causing horizontal scrolling on small screens (#761)
Co-authored-by: John O'Nolan <john@ghost.org>
2021-03-11 13:36:13 -05:00
c0d5a3d999 Fix broken card layout caused by long strings (#762) 2021-03-11 13:33:25 -05:00
b927cf62ed Adjust infinite scroll selector to target article.post-card (#763)
The tag archive header shares the same classes as post cards, but have different elements.

This changes the selector to target article.post-card, which ignores header.post-card
2021-03-11 13:32:57 -05:00
91ced578c5 Updated tagName in release script
no issue

- as of 4.0, we're shipping tags with the preceding `v`, but this script
  ignored that and so the release was incorrect
- this commit updates the tagName to have the preceding `v`
2021-03-10 21:11:23 +00:00
87772282c8 v4.0.0-rc.1 2021-03-10 21:08:10 +00:00
bcfeb9be74 Update dependency gscan to v4 2021-03-10 21:04:49 +00:00
5b310a00f4 Merged 4.0 into main
no issue

- Casper is now ready for 4.0 so this commit merges the branch in to try
  and keep the Git history as clean as possible
2021-03-10 21:03:13 +00:00
a6a5d1eba1 3.1.3 2021-03-10 21:00:57 +00:00
fa8cc4cf2e Update dependency gulp-zip to v5.1.0 2021-03-10 09:48:00 +00:00
3a5fda7009 Spacing fix on author profile 2021-03-09 22:23:47 -05:00
4f2fe7eb43 Update page template style 2021-03-09 22:02:35 -05:00
be0600a603 Update end of post CTA bg color 2021-03-09 21:33:13 -05:00
e4faa3141a Update dependency postcss to v8.2.8 2021-03-09 22:41:13 +00:00
a78784decf Fix codeblock specificity, props @pauladamdavis 2021-03-09 09:27:47 -05:00
a516282b73 Correct logo height in navbar 2021-03-09 09:04:50 -05:00
ea6942a7fe Fix bug with :not unfixing previous fix of ::not which it turns out is not a thing 2021-03-09 09:03:54 -05:00
b5c2869ff6 Fix bug where incorrect styles were applied if codeblocks have captions 2021-03-08 16:08:47 -05:00
b7faac9eda Dark codeblocks by default 2021-03-08 15:59:11 -05:00
372dca859b Reinstate a class which as it turns out was not unused after all 2021-03-08 11:46:41 -05:00
30cd8d97e0 Remove unused old script from homepage 2021-03-08 11:30:16 -05:00
0584a58c6c Remove overlays from cover image, these only worked when CSS bg image, not img tag 2021-03-08 11:28:11 -05:00
2231274b07 Remove unused old class 2021-03-08 11:25:46 -05:00
715f95d209 Typography fixes 2021-03-06 21:54:43 -05:00
1e0e813931 Update dependency autoprefixer to v10.2.5 2021-03-05 15:52:56 +00:00
2c356f1cc4 Update dates to be locale-friendly, props @levee223 2021-03-05 10:13:14 -05:00
0d1cf89cc0 Update dependency postcss to v8.2.7 2021-03-04 00:43:23 +00:00
9ac38156da Update dependency inquirer to v8 2021-02-26 00:59:59 +00:00
fc8cf0b2f4 Update dependency @tryghost/release-utils to v0.6.12 2021-02-22 08:14:53 +00:00
20 changed files with 1104 additions and 812 deletions

View File

@ -1,2 +1,2 @@
!function(o){"use strict";o.fn.fitVids=function(e){var t,i,n={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(i.childNodes[1])),e&&o.extend(n,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];n.customSelector&&e.push(n.customSelector);var r=".fitvidsignore";n.ignore&&(r=r+", "+n.ignore);e=o(this).find(e.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var e,t,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),e=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(t="fitvid"+o.fn.fitVids._count,i.attr("name",t),o.fn.fitVids._count++),i.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(e){e.addEventListener("DOMContentLoaded",function(){e.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),e=e.attributes.width.value/e.attributes.height.value;t.style.flex=e+" 1 0%"})})}((window,document)),function(t,i){var r,n,o,d,s,a,l,c=i.querySelector("link[rel=next]");function h(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",m);this.response.querySelectorAll(".post-card").forEach(function(e){r.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?c.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",m)),l=i.documentElement.scrollHeight,d=o=!1}function e(){var e;d||(s+a<=l-n?o=!1:(d=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",h),e.open("GET",c.href),e.send(null)))}function u(){o||t.requestAnimationFrame(e),o=!0}function f(){s=t.scrollY,u()}function m(){a=t.innerHeight,l=i.documentElement.scrollHeight,u()}!c||(r=i.querySelector(".post-feed"))&&(d=o=!(n=300),s=t.scrollY,a=t.innerHeight,l=i.documentElement.scrollHeight,t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",m),u())}(window,document);
!function(o){"use strict";o.fn.fitVids=function(e){var t,i,n={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(i.childNodes[1])),e&&o.extend(n,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];n.customSelector&&e.push(n.customSelector);var r=".fitvidsignore";n.ignore&&(r=r+", "+n.ignore);e=o(this).find(e.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var e,t,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),e=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(t="fitvid"+o.fn.fitVids._count,i.attr("name",t),o.fn.fitVids._count++),i.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(t,i){var r,n,o,d,s,a,c,l=i.querySelector("link[rel=next]");function h(){if(404===this.status)return t.removeEventListener("scroll",p),void t.removeEventListener("resize",f);this.response.querySelectorAll("article.post-card").forEach(function(e){r.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?l.href=e.href:(t.removeEventListener("scroll",p),t.removeEventListener("resize",f)),c=i.documentElement.scrollHeight,d=o=!1}function e(){var e;d||(s+a<=c-n?o=!1:(d=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",h),e.open("GET",l.href),e.send(null)))}function u(){o||t.requestAnimationFrame(e),o=!0}function p(){s=t.scrollY,u()}function f(){a=t.innerHeight,c=i.documentElement.scrollHeight,u()}!l||(r=i.querySelector(".post-feed"))&&(d=o=!(n=300),s=t.scrollY,a=t.innerHeight,c=i.documentElement.scrollHeight,t.addEventListener("scroll",p,{passive:!0}),t.addEventListener("resize",f),u())}(window,document);
//# sourceMappingURL=casper.js.map

File diff suppressed because one or more lines are too long

View File

@ -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{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}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:#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;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}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}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 p{margin:.8em 0;font-size:1.2em;font-weight:300}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:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
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}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:#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;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 p{margin:.8em 0;font-size:1.2em;font-weight:300}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}
/*# sourceMappingURL=global.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -108,6 +108,7 @@ table {
border-collapse: collapse;
}
img {
display: block;
max-width: 100%;
height: auto;
}
@ -310,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;
}
@ -345,11 +346,14 @@ 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;
@ -437,8 +441,8 @@ h2 {
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: 600px) {
h3 {
@ -448,15 +452,20 @@ h3 {
h4 {
margin: 1.5em 0 0.5em 0;
font-size: 1.6rem;
font-size: 2rem;
}
@media (max-width: 600px) {
h4 {
font-size: 1.7rem;
}
}
h5 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-size: 2rem;
}
h6 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-size: 1.8rem;
}

View File

@ -68,6 +68,10 @@ production stylesheet in assets/built/screen.css
min-height: 100vh;
}
.site-content {
flex-grow: 1;
}
/* Full width page blocks */
.outer {
position: relative;
@ -102,31 +106,6 @@ production stylesheet in assets/built/screen.css
object-fit: cover;
}
.site-header-cover:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
background: rgba(0,0,0,0.18);
}
.site-header-cover: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.95),rgba(0,0,0,0));
}
.site-header-content {
position: relative;
z-index: 100;
@ -151,6 +130,7 @@ production stylesheet in assets/built/screen.css
}
.site-header-content p {
z-index: 10;
max-width: 600px;
margin: 0 auto;
line-height: 1.2em;
@ -181,6 +161,10 @@ production stylesheet in assets/built/screen.css
background: var(--ghost-accent-color);
}
.site-header-content.large {
padding-top: 28vmin;
padding-bottom: 28vmin;
}
/* 5. Site Navigation
@ -229,7 +213,7 @@ production stylesheet in assets/built/screen.css
}
.gh-head-logo img {
max-height: 40px;
max-height: 26px;
}
@ -298,6 +282,11 @@ production stylesheet in assets/built/screen.css
.gh-social a {
opacity: 0.8
}
.gh-social a + a {
margin-left: 0.8rem;
}
.gh-social a:hover {
opacity: 1;
}
@ -308,15 +297,20 @@ production stylesheet in assets/built/screen.css
fill: #fff;
}
.gh-social-facebook svg {
height: 20px;
width: 20px;
}
a.gh-head-button {
display: block;
padding: 8px 15px;
color: var(--color-darkgrey);
color: var(--button-text-color, var(--color-darkgrey));
font-weight: 500;
letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em;
background: #fff;
background: var(--button-bg-color, #fff);
border-radius: 30px;
}
@ -432,15 +426,9 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
justify-content: space-between;
user-select: none;
}
.home-template #gh-head .gh-head-brand {
.home-template #gh-head.has-cover .gh-head-brand {
justify-content: flex-end;
}
#gh-head .gh-head-logo {
font-size: 2rem;
}
#gh-head .gh-head-logo img {
max-height: 40px;
}
#gh-head .gh-head-menu {
align-self: center;
display: flex;
@ -487,7 +475,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
right: 0;
bottom: 0;
left: 0;
z-index: 9999999;
z-index: 3999999;
overflow-y: scroll;
}
.gh-head-open #gh-head .gh-head-inner {
@ -505,7 +493,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
}
}
.home-template .gh-head {
.home-template .gh-head.has-cover {
position: absolute;
top: 0;
right: 0;
@ -521,10 +509,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
background: var(--ghost-accent-color);
}
.home-template .gh-head-logo {
.home-template .gh-head.has-cover .gh-head-logo {
display: none;
}
.home-template .gh-head-menu {
.home-template .gh-head.has-cover .gh-head-menu {
margin-left: -2.5vmin;
}
@ -540,6 +528,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
padding: 4vmin 0;
}
.post-feed.list {
row-gap: 6vmin;
max-width: 940px;
margin: 2vmin auto 0;
}
@media (max-width: 1000px) {
.post-feed {
grid-template-columns: 1fr 1fr;
@ -559,6 +553,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
flex-direction: column;
min-height: 220px;
background-size: cover;
word-break: break-word;
}
.post-card-image-link {
@ -617,6 +612,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin-top: 0;
}
.has-serif-title .post-card-title {
font-family: var(--font-serif);
}
.post-card-content {
flex-grow: 1;
display: flex;
@ -626,6 +625,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card-excerpt {
max-width: 56em;
color: color-mod(var(--color-midgrey) l(-8%));
font-family: var(--font-serif);
}
.has-sans-body .post-card-excerpt {
font-family: var(--font-sans-serif);
}
.post-card-excerpt p {
@ -634,6 +638,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
overflow-y: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
}
.post-card-meta {
@ -755,6 +760,15 @@ make sure this only happens on large viewports / desktop-ish devices.
border-top: 0;
}
.post-feed.list .post-card-large {
grid-template-columns: 3fr 5fr;
min-height: auto;
}
.post-feed.list .post-card-large.no-image {
grid-template-columns: 1fr;
}
.post-card-large:not(.no-image) .post-card-header {
margin-top: 0;
}
@ -766,6 +780,18 @@ make sure this only happens on large viewports / desktop-ish devices.
min-height: 380px;
}
.post-feed.list .post-card-large .post-card-image-link {
grid-column: 1 / span 1;
height: max-content;
min-height: auto;
}
.post-feed.list .post-card-large .post-card-image-link::after {
content: "";
display: block;
padding-bottom: 60%;
}
.post-card-large .post-card-image {
position: absolute;
width: 100%;
@ -776,13 +802,21 @@ make sure this only happens on large viewports / desktop-ish devices.
justify-content: center;
}
.post-feed.list .post-card-large .post-card-content {
justify-content: flex-start;
margin-top: -6px;
}
.post-card-large .post-card-title {
margin-top: 0;
font-size: 3.2rem;
}
.post-feed.list .post-card-large .post-card-title {
font-size: 2.4rem;
}
.post-card-large .post-card-excerpt p {
margin-bottom: 1.5em;
font-size: 1.7rem;
line-height: 1.55em;
-webkit-line-clamp: 8;
@ -806,6 +840,7 @@ make sure this only happens on large viewports / desktop-ish devices.
.article {
padding: 8vmin 0;
word-break: break-word;
}
.article-header {
@ -830,12 +865,15 @@ make sure this only happens on large viewports / desktop-ish devices.
}
.article-title {
margin: 0;
color: color-mod(var(--color-darkgrey) l(-5%));
}
.has-serif-title .article-title {
font-family: var(--font-serif);
}
.article-excerpt {
margin: 20px 0 10px;
margin: 0 0 1rem;
font-size: 2rem;
line-height: 1.4em;
opacity: 0.6;
@ -847,6 +885,21 @@ make sure this only happens on large viewports / desktop-ish devices.
margin: 6vmin 0 0;
}
.image-full .article-image {
grid-column: full-start / full-end;
}
.image-small .article-image {
grid-column: main-start / main-end;
}
.gh-canvas .article-image img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
@media (max-width: 600px) {
.article-excerpt {
font-size: 1.8rem;
@ -915,6 +968,10 @@ headings, text, images and lists. We deal with cards lower down. */
color: var(--color-darkgrey);
}
.has-serif-title .gh-content > [id] {
font-family: var(--font-serif);
}
/* 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) {
@ -938,12 +995,17 @@ is the very first element in the post content */
}
/* Now the content typography styles */
.gh-content a {
.gh-content a:not(.gh-post-upgrade-cta a):not(.kg-bookmark-container):not(.kg-btn):not(.kg-nft-card-container):not(.kg-callout-card-accent a):not(a.kg-product-card-btn-accent) {
color: var(--ghost-accent-color);
text-decoration: underline;
word-break: break-word;
}
.gh-content .kg-callout-card-accent a {
text-decoration: underline;
}
.gh-content > blockquote,
.gh-content > blockquote:not([class]),
.gh-content > ol,
.gh-content > ul,
.gh-content > dl,
@ -954,19 +1016,50 @@ is the very first element in the post content */
line-height: 1.6em;
}
.gh-content .kg-callout-text,
.gh-content .kg-toggle-content > ol,
.gh-content .kg-toggle-content > ul,
.gh-content .kg-toggle-content > p {
font-family: var(--font-serif);
font-weight: 400;
font-size: 2.0rem;
line-height: 1.6em;
}
.gh-content .kg-callout-emoji {
font-size: 2.2rem;
line-height: 1.5em;
}
.gh-content .kg-toggle-heading-text {
font-size: 2.2rem;
}
.has-sans-body .gh-content > blockquote,
.has-sans-body .gh-content > ol,
.has-sans-body .gh-content > ul,
.has-sans-body .gh-content > dl,
.has-sans-body .gh-content > p,
.has-sans-body .kg-callout-text,
.has-sans-body .kg-toggle-content > ol,
.has-sans-body .kg-toggle-content > ul,
.has-sans-body .kg-toggle-content > p {
font-family: var(--font-sans);
}
.gh-content > ul,
.gh-content > ol,
.gh-content > dl {
padding-left: 1.9em;
}
.gh-content > blockquote {
.gh-content > blockquote:not([class]) {
position: relative;
font-style: italic;
padding: 0;
}
.gh-content > blockquote::before {
.gh-content > blockquote:not([class])::before {
content: "";
position: absolute;
left: -1.5em;
@ -976,7 +1069,7 @@ is the very first element in the post content */
background: var(--ghost-accent-color);
}
.gh-content :not(pre) code {
.gh-content :not(pre) > code {
vertical-align: middle;
padding: 0.15em 0.4em 0.15em;
border: #e1eaef 1px solid;
@ -988,20 +1081,27 @@ is the very first element in the post content */
border-radius: 0.25em;
}
.gh-content > pre {
overflow: scroll;
.gh-content pre {
overflow: auto;
padding: 16px 20px;
background: rgba(255,255,255,0.8);
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);
}
@media (max-width: 650px) {
.gh-content blockquote,
.gh-content ol,
.gh-content ul,
.gh-content dl,
.gh-content p {
.gh-content > blockquote:not([class]),
.gh-content > ol,
.gh-content > ul,
.gh-content > dl,
.gh-content > p,
.kg-callout-text,
.kg-toggle-content > ol,
.kg-toggle-content > ul,
.kg-toggle-content > p {
font-size: 1.7rem;
}
@ -1043,9 +1143,26 @@ except for when immediately preceeded by a heading */
margin: auto;
}
.has-serif-title .kg-toggle-heading-text {
font-family: var(--font-serif);
}
.kg-toggle-content > * + * {
margin-top: min(2.4rem, 4vmin);
}
.kg-blockquote-alt {
font-family: var(--font-serif);
color: var(--color-midgrey);
}
.has-sans-body .kg-blockquote-alt {
font-family: var(--font-sans);
}
/* Captions */
.kg-card figcaption {
figcaption {
padding: 1.5rem 1.5rem 0;
text-align: center;
color: rgba(0,0,0,0.5);
@ -1053,156 +1170,24 @@ except for when immediately preceeded by a heading */
font-size: 1.3rem;
line-height: 1.4em;
}
.kg-card figcaption strong {
figcaption strong {
color: rgba(0,0,0,0.8);
}
/* Galleries
/* ---------------------------------------------------------- */
/* When there are two galleries in a two, reduce margin
between them, so it looks like 1 big gallery */
.kg-gallery-card + .kg-gallery-card {
margin-top: 0.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;
figcaption a {
color: var(--ghost-accent-color);
}
/* 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%;
/* 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;
}
.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;
iframe.instagram-media + script + :not([id]) {
margin-top: 6vmin;
}
@ -1367,21 +1352,42 @@ Ghost editor. */
opacity: 0.15;
}
.page-template .article-title {
margin-bottom: 0;
}
/* 7.3. Subscribe
/* ---------------------------------------------------------- */
.footer-cta {
position: relative;
margin-bottom: -40px;
padding: 9vmin 4vmin 10vmin;
color: #fff;
text-align: center;
background: var(--ghost-accent-color);
background: var(--color-darkgrey);
}
.footer-cta.cta-alt {
padding: 2vmin 4vmin 12vmin;
background: transparent;
}
/* Increases the default h2 size by 15%, for small and large screens */
.footer-cta h2 {
margin: 0 0 30px;
transform: scale(1.15);
font-size: 3.2rem;
}
.footer-cta.cta-alt h2 {
color: var(--color-darkgrey);
}
@media (max-width: 600px) {
.footer-cta h2 {
font-size: 2.65rem;
}
}
.footer-cta-button {
@ -1398,9 +1404,13 @@ Ghost editor. */
border-radius: 8px;
}
.footer-cta.cta-alt .footer-cta-button {
border: 1px solid var(--color-lightgrey);
}
.footer-cta-button span {
display: inline-block;
padding: 10px 20px;
padding: 10px 15px;
color: #fff;
font-weight: 500;
background: var(--ghost-accent-color);
@ -1414,7 +1424,7 @@ Ghost editor. */
.read-more-wrap {
width: 100%;
padding: 4vmin;
margin: 0 auto -40px;
margin: 40px auto -40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: color-mod(var(--color-darkgrey) l(-5%));
}
@ -1492,6 +1502,8 @@ Ghost editor. */
height: 150px;
object-fit: cover;
margin: 0 0 2rem;
background: color-mod(var(--color-lightgrey) l(+10%));
border-radius: 50%;
}
.author-profile h1 {
@ -1500,6 +1512,7 @@ Ghost editor. */
}
.author-profile p {
margin: 0 0 1.5em;
color: color-mod(var(--color-midgrey) l(-8%));
}
@ -1792,28 +1805,33 @@ html.dark-mode .no-image .author-social-link a {
color: rgba(255, 255, 255, 0.75);
}
html.dark-mode .post-full-content h1,
html.dark-mode .post-full-content h2,
html.dark-mode .post-full-content h3,
html.dark-mode .post-full-content h4,
html.dark-mode .post-full-content h6 {
html.dark-mode .gh-content > [id] {
color: rgba(255, 255, 255, 0.9);
}
html.dark-mode .post-full-content a {
color: #fff;
box-shadow: inset 0 -1px 0 #fff;
html.dark-mode .gh-content pre {
background: color-mod(var(--color-darkgrey) l(-8%));
}
html.dark-mode .post-full-content strong {
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 .gh-content a:not(.kg-btn):not(.kg-nft-card-container) {
color: #fff;
}
html.dark-mode .post-full-content em {
html.dark-mode .gh-content strong {
color: #fff;
}
html.dark-mode .post-full-content code {
html.dark-mode .gh-content em {
color: #fff;
}
html.dark-mode .gh-content code {
color: #fff;
background: #000;
}
@ -1822,94 +1840,179 @@ html.dark-mode hr {
border-top-color: color-mod(var(--color-darkmode) l(+8%));
}
html.dark-mode .post-full-content hr:after {
html.dark-mode .gh-content hr:after {
background: color-mod(var(--color-darkmode) l(+8%));
box-shadow: var(--color-darkmode) 0 0 0 5px;
}
html.dark-mode .post-full-content figcaption {
html.dark-mode figcaption {
color: rgba(255, 255, 255, 0.6);
}
html.dark-mode .post-full-content table td:first-child {
html.dark-mode .gh-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 {
html.dark-mode .gh-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 {
html.dark-mode .gh-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 {
html.dark-mode .gh-content table th,
html.dark-mode .gh-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 {
html.dark-mode .gh-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%)));
}
@media (prefers-color-scheme: dark) {
html.auto-color body {
color: rgba(255, 255, 255, 0.75);
background: var(--color-darkmode);
}
html.dark-mode .subscribe-form-title {
color: rgba(255, 255, 255, 0.9);
}
html.auto-color img {
opacity: 0.9;
}
html.dark-mode .subscribe-form p {
color: rgba(255, 255, 255, 0.7);
}
html.auto-color .post-card,
html.auto-color .post-card:hover {
border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
}
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.auto-color .post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
}
html.dark-mode .subscribe-email:focus {
border-color: color-mod(var(--color-darkmode) l(+25%));
}
html.auto-color .post-card-byline-content a:hover {
color: #fff;
}
html.dark-mode .subscribe-form button {
opacity: 0.9;
}
html.auto-color .post-card-image {
background: var(--color-darkmode);
}
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.auto-color .post-card-title {
color: rgba(255, 255, 255, 0.85);
}
html.dark-mode .subscribe-form .success .message-success {
color: color-mod(var(--color-green) l(+5%) s(-5%));
html.auto-color .post-card-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
}
html.auto-color .post-full-content {
background: var(--color-darkmode);
}
html.auto-color .article-title {
color: rgba(255, 255, 255, 0.9);
}
html.auto-color .article-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
}
html.auto-color .post-full-image {
background-color: color-mod(var(--color-darkmode) l(+8%));
}
html.auto-color .article-byline {
border-top-color: color-mod(var(--color-darkmode) l(+15%));
}
html.auto-color .article-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .article-byline-meta h4 a:hover {
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) {
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 {
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 {
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 {
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 {
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);
}
}
/*

View File

@ -1,24 +0,0 @@
/* eslint-env browser */
/**
* Gallery card support
* Used on any individual post/page
*
* Detects when a gallery card has been used and applies sizing to make sure
* the display matches what is seen in the editor.
*/
(function (window, document) {
var resizeImagesInGalleries = function resizeImagesInGalleries() {
var images = document.querySelectorAll('.kg-gallery-image img');
images.forEach(function (image) {
var container = image.closest('.kg-gallery-image');
var width = image.attributes.width.value;
var height = image.attributes.height.value;
var ratio = width / height;
container.style.flex = ratio + ' 1 0%';
});
};
document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);
})(window, document);

View File

@ -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

View File

@ -31,13 +31,13 @@
<div class="author-profile-location">📍 {{location}}</div>
{{/if}}
{{#if website}}
<span ></span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
<span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
{{/if}}
{{#if twitter}}
<span ></span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
<span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
{{/if}}
{{#if facebook}}
<span ></span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
<span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
{{/if}}
</div>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
<head>
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@ -9,6 +9,15 @@
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
{{#if @custom.header_button_background}}
--button-bg-color: {{@custom.header_button_background}};
{{/if}}
--button-text-color: {{#match @custom.header_button_text_color "Light"}}#fff{{else}}var(--color-darkgrey){{/match}};
}
</style>
{{!-- Theme assets - use the {asset} helper to reference styles & scripts,
this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
@ -18,10 +27,10 @@
{{ghost_head}}
</head>
<body class="{{body_class}}">
<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}">
<div class="viewport">
<header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
<header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
<nav class="gh-head-inner inner gh-container">
<div class="gh-head-brand">
@ -43,24 +52,27 @@
</div>
<div class="gh-head-actions">
<div class="gh-social">
{{#if @site.facebook}}
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @site.twitter}}
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#unless @member}}
<a class="gh-head-button" href="#/portal">Subscribe</a>
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}
<a class="gh-head-button" href="#/portal/account">Account</a>
<a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
{{/unless}}
</div>
</nav>
</header>
<main>
<div class="site-content">
{{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
</main>
</div>
{{!-- The global footer at the very bottom of the screen --}}
<footer class="site-footer outer">

View File

@ -80,7 +80,9 @@ function zipper(done) {
'**',
'!node_modules', '!node_modules/**',
'!dist', '!dist/**',
'!yarn-error.log'
'!yarn-error.log',
'!yarn.lock',
'!gulpfile.js'
]),
zip(filename),
dest('dist/')
@ -155,7 +157,7 @@ exports.release = async () => {
const newReleaseResponse = await releaseUtils.releases.create({
draft: true,
preRelease: false,
tagName: newVersion,
tagName: 'v' + newVersion,
releaseName: newVersion,
userAgent: 'Casper',
uri: `https://api.github.com/repos/${REPO}/releases`,

101
index.hbs
View File

@ -2,35 +2,37 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<div class="site-header-content">
{{#if @site.cover_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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
alt=""
/>
{{/if}}
<h1 class="site-title">
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
{{#match @custom.publication_cover_style "!=" "None"}}
<div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
{{#if @site.cover_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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
alt=""
/>
{{/if}}
</h1>
<p>{{@site.description}}</p>
</div>
<h1 class="site-title">
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
{{/if}}
</h1>
<p>{{@site.description}}</p>
</div>
{{/match}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed">
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
@ -41,56 +43,3 @@ into the {body} of the default.hbs template --}}
</div>
</main>
{{!-- Scripts - Sticky behaviour for the header/nav when scrolling --}}
<script>
$(document).ready(function () {
var nav = document.querySelector('.site-nav-main .site-nav');
var feed = document.querySelector('.post-feed');
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = $(document).height();
var ticking = false;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = $(document).height();
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
var trigger = feed.getBoundingClientRect().top + window.scrollY;
var progressMax = lastDocumentHeight - lastWindowHeight;
// show/hide nav
if (lastScrollY >= trigger - 20) {
nav.classList.add('fixed-nav-active');
} else {
nav.classList.remove('fixed-nav-active');
}
ticking = false;
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, false);
update();
});
</script>

View File

@ -2,7 +2,7 @@
"name": "casper",
"description": "A clean, minimal default theme for the Ghost publishing platform",
"demo": "https://demo.ghost.io",
"version": "4.0.0-rc.0",
"version": "4.5.0",
"engines": {
"ghost": ">=4.0.0",
"ghost-api": "v4"
@ -46,19 +46,19 @@
"bugs": "https://github.com/TryGhost/Casper/issues",
"contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
"devDependencies": {
"@tryghost/release-utils": "0.6.11",
"autoprefixer": "10.2.4",
"@tryghost/release-utils": "0.6.12",
"autoprefixer": "10.2.5",
"beeper": "2.1.0",
"cssnano": "4.1.10",
"gscan": "3.6.1",
"gscan": "4.11.1",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2",
"gulp-postcss": "9.0.0",
"gulp-uglify": "3.0.2",
"gulp-zip": "5.0.2",
"inquirer": "7.3.3",
"postcss": "8.2.6",
"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,6 +87,96 @@
"xl": {
"width": 2000
}
},
"card_assets": true,
"custom": {
"title_font": {
"type": "select",
"options": [
"Modern sans-serif",
"Elegant serif"
],
"default": "Modern sans-serif"
},
"body_font": {
"type": "select",
"options": [
"Modern sans-serif",
"Elegant serif"
],
"default": "Elegant serif"
},
"publication_cover_style": {
"type": "select",
"options": [
"None",
"Medium",
"Large"
],
"default": "Medium",
"group": "homepage"
},
"feed_layout": {
"type": "select",
"options": [
"Dynamic grid",
"Simple grid",
"List"
],
"default": "Dynamic grid",
"group": "homepage"
},
"color_scheme": {
"type": "select",
"options": [
"Light",
"Dark",
"Auto"
],
"default": "Light"
},
"header_button_background": {
"type": "color",
"default": "#ffffff"
},
"header_button_text_color": {
"type": "select",
"options": [
"Light",
"Dark"
],
"default": "Dark"
},
"post_image_width": {
"type": "select",
"options": [
"Wide",
"Full",
"Small"
],
"default": "Wide",
"group": "post"
},
"email_signup_for_logged_out_visitors": {
"type": "select",
"options": [
"Footer",
"Bottom of post",
"None"
],
"default": "Footer",
"group": "post"
},
"email_signup_text": {
"type": "text",
"default": "Sign up for more like this.",
"group": "post"
},
"show_recent_posts": {
"type": "boolean",
"default": true,
"group": "post"
}
}
},
"renovate": {

View File

@ -7,37 +7,39 @@ into the {body} tag of the default.hbs template --}}
{{#post}}
{{!-- Everything inside the #post block pulls data from the page --}}
<article class="article {{post_class}}">
<main id="site-main" class="site-main">
<article class="article {{post_class}}">
<header class="article-header gh-canvas">
<header class="article-header gh-canvas">
{{#if feature_image}}
<figure class="article-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 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url feature_image size="xl"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/if}}
</header>
<h1 class="article-title">{{title}}</h1>
<section class="gh-content gh-canvas">
{{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}}
<h1 class="article-title">{{title}}</h1>
{{#if feature_image}}
<figure class="article-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 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}
</header>
{{content}}
<section class="gh-content gh-canvas">
{{content}}
</section>
</section>
</article>
</article>
</main>
{{/post}}

View File

@ -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}} {{#is "home"}}{{#has index="0"}}post-card-large{{/has}}{{/is}}">
<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#if feature_image}}post-card-large{{/if}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
@ -14,7 +14,7 @@ which templates loop over to generate a list of posts. --}}
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
loading="lazy"
/>
</a>
@ -31,9 +31,9 @@ which templates loop over to generate a list of posts. --}}
{{/if}}
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<div class="post-card-excerpt">
<p>{{excerpt}}</p>
</section>
</div>
</a>
<footer class="post-card-meta">
@ -42,7 +42,7 @@ which templates loop over to generate a list of posts. --}}
<li class="author-list-item">
{{#if profile_image}}
<a href="{{url}}" class="static-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" />
</a>
{{else}}
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
@ -52,7 +52,7 @@ which templates loop over to generate a list of posts. --}}
</ul>
<div class="post-card-byline-content">
<span>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
<span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
<span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
</div>
</footer>

159
post.hbs
View File

@ -7,93 +7,101 @@ into the {body} tag of the default.hbs template --}}
{{#post}}
{{!-- Everything inside the #post block pulls data from the post --}}
<article class="article {{post_class}}">
<main id="site-main" class="site-main">
<article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
<header class="article-header gh-canvas">
<header class="article-header gh-canvas">
{{#if primary_tag}}
<section class="article-tag">
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
</section>
{{/if}}
<h1 class="article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}}
<div class="article-byline">
<section class="article-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
{{#if profile_image}}
<a href="{{url}}" class="author-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
{{else}}
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}}
</li>
{{/foreach}}
</ul>
<div class="article-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
</div>
</div>
{{#if primary_tag}}
<section class="article-tag">
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
</section>
</div>
{{/if}}
{{#if feature_image}}
<figure class="article-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 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}
</header>
<h1 class="article-title">{{title}}</h1>
<section class="gh-content gh-canvas">
{{content}}
</section>
{{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}}
{{!--
<section class="article-comments gh-canvas">
If you want to embed comments, this is a good place to paste your code!
</section>
--}}
<div class="article-byline">
<section class="article-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
{{#if profile_image}}
<a href="{{url}}" class="author-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
{{else}}
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}}
</li>
{{/foreach}}
</ul>
<div class="article-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
</div>
</div>
</section>
</div>
</article>
{{#if feature_image}}
<figure class="article-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 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url feature_image size="xl"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/if}}
</header>
<section class="gh-content gh-canvas">
{{content}}
</section>
{{!--
<section class="article-comments gh-canvas">
If you want to embed comments, this is a good place to paste your code!
</section>
--}}
</article>
</main>
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#unless @member}}
<section class="footer-cta">
<div class="inner">
<h2>Sign up for more like this.</h2>
<a class="footer-cta-button" href="#/portal">
<div>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>
{{/unless}}
{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
{{#unless @member}}{{#if access}}
<section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
<div class="inner">
{{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
<a class="footer-cta-button" href="#/portal" data-portal>
<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}}
{{/match}}
{{!-- Read more links, just above the footer --}}
{{#if @custom.show_recent_posts}}
<aside class="read-more-wrap">
<div class="read-more inner">
@ -113,5 +121,6 @@ into the {body} tag of the default.hbs template --}}
</div>
</aside>
{{/if}}
{{/post}}

12
tag.hbs
View File

@ -2,12 +2,12 @@
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
<section class="outer">
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed">
{{#tag}}
<header class="post-card post-card-large">
<section class="post-card post-card-large">
{{#if feature_image}}
<div class="post-card-image-link">
{{!-- This is a responsive image, it loads different sizes depending on device
@ -30,7 +30,7 @@
<div class="post-card-primary-tag">Tagged</div>
<h2 class="post-card-title">{{name}}</h2>
</header>
<section class="post-card-excerpt">
<div class="post-card-excerpt">
<p>
{{#if description}}
{{description}}
@ -38,11 +38,11 @@
A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
{{/if}}
</p>
</section>
</div>
</div>
</div>{{!--/.post-card-content--}}
</header>
</section>
{{/tag}}
{{#foreach posts}}
@ -54,4 +54,4 @@
</div>
</div>
</section>
</main>

730
yarn.lock

File diff suppressed because it is too large Load Diff