This commit is contained in:
GenZmeY 2023-05-22 22:20:41 +03:00
commit 21adc1d09e
28 changed files with 2937 additions and 2227 deletions

File diff suppressed because one or more lines are too long

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{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:#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 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 */ /*# 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

@ -275,8 +275,8 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
body { body {
color: #35373A; color: var(--color-darkgrey);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: var(--font-sans);
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.6em; line-height: 1.6em;
font-weight: 400; font-weight: 400;

File diff suppressed because it is too large Load Diff

85
assets/js/dropdown.js Normal file
View File

@ -0,0 +1,85 @@
(function () {
const mediaQuery = window.matchMedia('(max-width: 767px)');
const head = document.querySelector('.gh-head');
const menu = head.querySelector('.gh-head-menu');
const nav = menu.querySelector('.nav');
if (!nav) return;
const logo = document.querySelector('.gh-head-logo');
const navHTML = nav.innerHTML;
if (mediaQuery.matches) {
const items = nav.querySelectorAll('li');
items.forEach(function (item, index) {
item.style.transitionDelay = 0.03 * (index + 1) + 's';
});
}
var windowClickListener;
const makeDropdown = function () {
if (mediaQuery.matches) return;
const submenuItems = [];
while ((nav.offsetWidth + 64) > menu.offsetWidth) {
if (nav.lastElementChild) {
submenuItems.unshift(nav.lastElementChild);
nav.lastElementChild.remove();
} else {
return;
}
}
if (!submenuItems.length) {
document.body.classList.add('is-dropdown-loaded');
return;
}
const toggle = document.createElement('button');
toggle.setAttribute('class', 'nav-more-toggle');
toggle.setAttribute('aria-label', 'More');
toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'gh-dropdown');
if (submenuItems.length >= 10) {
document.body.classList.add('is-dropdown-mega');
wrapper.style.gridTemplateRows = 'repeat(' + Math.ceil(submenuItems.length / 2) + ', 1fr)';
} else {
document.body.classList.remove('is-dropdown-mega');
}
submenuItems.forEach(function (child) {
wrapper.appendChild(child);
});
toggle.appendChild(wrapper);
nav.appendChild(toggle);
document.body.classList.add('is-dropdown-loaded');
toggle.addEventListener('click', function () {
document.body.classList.toggle('is-dropdown-open');
});
windowClickListener = function (e) {
if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
document.body.classList.remove('is-dropdown-open');
}
};
window.addEventListener('click', windowClickListener);
}
imagesLoaded(head, function () {
makeDropdown();
});
window.addEventListener('resize', function () {
setTimeout(function () {
window.removeEventListener('click', windowClickListener);
nav.innerHTML = navHTML;
makeDropdown();
}, 1);
});
})();

View File

@ -14,6 +14,8 @@
*/ */
(function (window, document) { (function (window, document) {
if (document.documentElement.classList.contains('no-infinite-scroll')) return;
// next link element // next link element
var nextElement = document.querySelector('link[rel=next]'); var nextElement = document.querySelector('link[rel=next]');
if (!nextElement) { if (!nextElement) {

File diff suppressed because one or more lines are too long

View File

@ -1,57 +1,76 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<section class="outer"> <div class="post-feed">
<div class="inner posts">
<header class="author-profile"> {{#author}}
{{#author}} <section class="post-card post-card-large">
{{!-- Everything inside the #author tags pulls data from the author --}}
<div class="author-profile-content"> {{#if cover_image}}
<div class="post-card-image-link">
{{!-- 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="post-card-image"
srcset="{{img_url cover_image size="s"}} 300w,
{{img_url cover_image size="m"}} 600w,
{{img_url cover_image size="l"}} 1000w,
{{img_url cover_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url cover_image size="m"}}"
alt="{{title}}"
/>
</div>
{{/if}}
<div class="post-card-content">
<div class="post-card-content-link">
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
{{else}}
<span class="author-profile-pic">{{> "icons/avatar"}}</span>
{{/if}} {{/if}}
<h1>{{name}}</h1> <header class="post-card-header">
<p> <h2 class="post-card-title">{{name}}</h2>
{{#if bio}} </header>
{{bio}}
{{else}}
{{plural ../pagination.total empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}
{{/if}}
</p>
<div class="author-profile-meta"> {{#if bio}}
<div class="post-card-excerpt">{{bio}}</div>
{{/if}}
<footer class="author-profile-footer">
{{#if location}} {{#if location}}
<div class="author-profile-location">📍 {{location}}</div> <div class="author-profile-location">{{location}}</div>
{{/if}} {{/if}}
{{#if website}} <div class="author-profile-meta">
<span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span> {{#if website}}
{{/if}} <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{#if twitter}} {{/if}}
<span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span> {{#if twitter}}
{{/if}} <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{#if facebook}} {{/if}}
<span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span> {{#if facebook}}
{{/if}} <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
</div> {{/if}}
</div>
</footer>
</div> </div>
</div>
{{/author}} </section>
</header> {{/author}}
<div class="post-feed"> {{#foreach posts}}
{{#foreach posts}} {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} {{> "post-card"}}
{{> "post-card"}} {{/foreach}}
{{/foreach}}
</div>
</div> </div>
</section>
{{pagination}}
</div>
</main>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}> <html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
<head> <head>
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}} {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@ -9,15 +9,6 @@
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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, {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
this will take care of caching and cache-busting automatically --}} this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
@ -27,47 +18,54 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}} is-head-{{#match @custom.navigation_layout "Logo on cover"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#if @custom.show_publication_cover}} has-cover{{/if}}">
<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"> <div class="viewport">
<header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}"> <header id="gh-head" class="gh-head outer{{#match @custom.header_style "Hidden"}} is-header-hidden{{/match}}">
<nav class="gh-head-inner inner gh-container"> <div class="gh-head-inner inner">
<div class="gh-head-brand"> <div class="gh-head-brand">
<a class="gh-head-logo" href="{{@site.url}}"> <a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" href="{{@site.url}}">
{{#if @site.logo}} {{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}" /> <img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}} {{else}}
{{@site.title}} {{@site.title}}
{{/if}} {{/if}}
</a> </a>
<a class="gh-burger" role="button"> <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-burger-box"> <button class="gh-burger"></button>
<div class="gh-burger-inner"></div>
</div>
</a>
</div> </div>
<div class="gh-head-menu">
{{navigation}}
</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}} <nav class="gh-head-menu">
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a> {{navigation}}
{{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{/unless}}
</nav>
<div class="gh-head-actions">
{{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{else}} {{else}}
<a class="gh-head-button" href="#/portal/account" data-portal="account">{{t "Account"}}</a> <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-head-members">
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="gh-head-link" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
{{else}}
<a class="gh-head-button" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
{{/unless}}
{{else}}
<a class="gh-head-button" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
{{/unless}}
</div>
{{/unless}} {{/unless}}
</div> </div>
</nav> </div>
</header> </header>
<div class="site-content"> <div class="site-content">

View File

@ -24,7 +24,7 @@ Keep this template as lightweight as you can!
{{!-- Given that people landing on this page didn't find what they {{!-- Given that people landing on this page didn't find what they
were looking for, let's give them some alternative stuff to read. --}} were looking for, let's give them some alternative stuff to read. --}}
<aside class="read-more-wrap"> <aside class="read-more-wrap outer">
<div class="read-more inner"> <div class="read-more inner">
{{#get "posts" include="authors" limit="3" as |more_posts|}} {{#get "posts" include="authors" limit="3" as |more_posts|}}
{{#if more_posts}} {{#if more_posts}}

View File

@ -1,9 +1,9 @@
{{!-- {{!--
There are two error files in this theme, one for 404s and one for all other errors. There are two error files in this theme, one for 404s and one for all other errors.
This file is the latter, and handle all 400/500 errors that might occur. This file is the latter, and handles all 400/500 errors that might occur.
Because 500 errors in particular usuall happen when a server is struggling, this Because 500 errors in particular usually happen when a server is struggling, this
template is as simple as possible. No template dependencies, no JS, no API calls. template is as simple as possible. No template dependencies, no JS, no API calls.
This is to prevent rendering the error-page itself compounding the issue causing This is to prevent rendering the error-page itself compounding the issue causing
the error in the first place. the error in the first place.

View File

@ -90,8 +90,9 @@ function zipper(done) {
} }
const cssWatcher = () => watch('assets/css/**', css); const cssWatcher = () => watch('assets/css/**', css);
const jsWatcher = () => watch('assets/js/**', js);
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs); const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const watcher = parallel(cssWatcher, hbsWatcher); const watcher = parallel(cssWatcher, jsWatcher, hbsWatcher);
const build = series(css, js); const build = series(css, js);
exports.build = build; exports.build = build;
@ -123,7 +124,7 @@ exports.release = async () => {
type: 'input', type: 'input',
name: 'compatibleWithGhost', name: 'compatibleWithGhost',
message: 'Which version of Ghost is it compatible with?', message: 'Which version of Ghost is it compatible with?',
default: '4.0.0' default: '5.0.0'
}]); }]);
const compatibleWithGhost = result.compatibleWithGhost; const compatibleWithGhost = result.compatibleWithGhost;

View File

@ -2,8 +2,9 @@
{{!-- The tag above means: insert everything in this file {{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{#match @custom.publication_cover_style "!=" "None"}} <div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}} no-content{{/match}}{{/unless}}">
<div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
{{#if @custom.show_publication_cover}}
{{#if @site.cover_image}} {{#if @site.cover_image}}
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- 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 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@ -14,32 +15,40 @@ into the {body} of the default.hbs template --}}
{{img_url @site.cover_image size="xl"}} 2000w" {{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw" sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}" src="{{img_url @site.cover_image size="xl"}}"
alt="" alt="{{@site.title}}"
/> />
{{/if}} {{/if}}
<h1 class="site-title"> {{/if}}
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" /> {{#match @custom.header_style "!=" "Hidden"}}
{{else}} <div class="site-header-inner inner">
{{@site.title}} {{#match @custom.navigation_layout "Logo on cover"}}
{{#if @site.logo}}
<img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
<h1 class="site-title">{{@site.title}}</h1>
{{/if}}
{{/match}}
{{#if @site.description}}
<p class="site-description">{{@site.description}}</p>
{{/if}} {{/if}}
</h1> </div>
<p>{{@site.description}}</p> {{/match}}
</div>
{{/match}} </div>
{{!-- The main content area --}} {{!-- The main content area --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner posts"> <div class="inner posts">
<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 --}}
{{> "post-card"}}
{{/foreach}}
</div>
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div> </div>
{{pagination}}
</div>
</main> </main>

View File

@ -2,9 +2,9 @@
"name": "casper-i18n", "name": "casper-i18n",
"description": "The same casper theme, but with localization support", "description": "The same casper theme, but with localization support",
"demo": "https://demo.ghost.io", "demo": "https://demo.ghost.io",
"version": "4.7.3", "version": "5.4.11",
"engines": { "engines": {
"ghost": ">=4.0.0" "ghost": ">=5.0.0"
}, },
"license": "MIT", "license": "MIT",
"screenshots": { "screenshots": {
@ -45,21 +45,21 @@
"bugs": "https://github.com/TryGhost/Casper/issues", "bugs": "https://github.com/TryGhost/Casper/issues",
"contributors": "https://github.com/TryGhost/Casper/graphs/contributors", "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
"devDependencies": { "devDependencies": {
"@tryghost/release-utils": "0.6.12", "@tryghost/release-utils": "0.8.1",
"autoprefixer": "10.2.5", "autoprefixer": "10.4.7",
"beeper": "2.1.0", "beeper": "2.1.0",
"cssnano": "4.1.10", "cssnano": "5.1.12",
"gscan": "4.22.0", "gscan": "4.36.1",
"gulp": "4.0.2", "gulp": "4.0.2",
"gulp-concat": "2.6.1", "gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2", "gulp-livereload": "4.0.2",
"gulp-postcss": "9.0.0", "gulp-postcss": "9.0.1",
"gulp-uglify": "3.0.2", "gulp-uglify": "3.0.2",
"gulp-zip": "5.1.0", "gulp-zip": "5.1.0",
"inquirer": "8.0.0", "inquirer": "8.2.4",
"postcss": "8.2.8", "postcss": "8.2.13",
"postcss-color-mod-function": "3.0.3", "postcss-color-mod-function": "3.0.3",
"postcss-easy-import": "3.0.0", "postcss-easy-import": "4.0.0",
"pump": "3.0.0" "pump": "3.0.0"
}, },
"browserslist": [ "browserslist": [
@ -89,6 +89,15 @@
}, },
"card_assets": true, "card_assets": true,
"custom": { "custom": {
"navigation_layout": {
"type": "select",
"options": [
"Logo on cover",
"Logo in the middle",
"Stacked"
],
"default": "Logo on cover"
},
"title_font": { "title_font": {
"type": "select", "type": "select",
"options": [ "options": [
@ -105,24 +114,29 @@
], ],
"default": "Elegant serif" "default": "Elegant serif"
}, },
"publication_cover_style": { "show_publication_cover": {
"type": "boolean",
"default": true,
"group": "homepage"
},
"header_style": {
"type": "select", "type": "select",
"options": [ "options": [
"None", "Center aligned",
"Medium", "Left aligned",
"Large" "Hidden"
], ],
"default": "Medium", "default": "Center aligned",
"group": "homepage" "group": "homepage"
}, },
"feed_layout": { "feed_layout": {
"type": "select", "type": "select",
"options": [ "options": [
"Dynamic grid", "Classic",
"Simple grid", "Grid",
"List" "List"
], ],
"default": "Dynamic grid", "default": "Classic",
"group": "homepage" "group": "homepage"
}, },
"color_scheme": { "color_scheme": {
@ -134,44 +148,23 @@
], ],
"default": "Light" "default": "Light"
}, },
"header_button_background": { "post_image_style": {
"type": "color",
"default": "#ffffff"
},
"header_button_text_color": {
"type": "select",
"options": [
"Light",
"Dark"
],
"default": "Dark"
},
"post_image_width": {
"type": "select", "type": "select",
"options": [ "options": [
"Wide", "Wide",
"Full", "Full",
"Small" "Small",
"Hidden"
], ],
"default": "Wide", "default": "Wide",
"group": "post" "group": "post"
}, },
"email_signup_for_logged_out_visitors": {
"type": "select",
"options": [
"Footer",
"Bottom of post",
"None"
],
"default": "Footer",
"group": "post"
},
"email_signup_text": { "email_signup_text": {
"type": "text", "type": "text",
"default": "Sign up for more like this.", "default": "Sign up for more like this.",
"group": "post" "group": "post"
}, },
"show_recent_posts": { "show_recent_posts_footer": {
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"group": "post" "group": "post"

View File

@ -8,10 +8,13 @@ into the {body} tag of the default.hbs template --}}
{{!-- Everything inside the #post block pulls data from the page --}} {{!-- Everything inside the #post block pulls data from the page --}}
<main id="site-main" class="site-main"> <main id="site-main" class="site-main">
<article class="article {{post_class}}"> <article class="article {{post_class}}">
<header class="article-header gh-canvas"> <header class="article-header gh-canvas">
{{#if feature_image}}
<h1 class="article-title">{{title}}</h1>
{{#if feature_image}}
<figure class="article-image"> <figure class="article-image">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- 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 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@ -28,18 +31,15 @@ into the {body} tag of the default.hbs template --}}
<figcaption>{{feature_image_caption}}</figcaption> <figcaption>{{feature_image_caption}}</figcaption>
{{/if}} {{/if}}
</figure> </figure>
{{/if}} {{/if}}
</header>
<section class="gh-content gh-canvas"> </header>
<h1 class="article-title">{{title}}</h1> <section class="gh-content gh-canvas">
{{content}}
</section>
{{content}} </article>
</section>
</article>
</main> </main>
{{/post}} {{/post}}

View File

@ -1 +1 @@
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg> <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>

Before

Width:  |  Height:  |  Size: 350 B

After

Width:  |  Height:  |  Size: 531 B

3
partials/icons/fire.hbs Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

After

Width:  |  Height:  |  Size: 538 B

5
partials/icons/lock.hbs Normal file
View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path>
</svg>

After

Width:  |  Height:  |  Size: 932 B

View File

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

After

Width:  |  Height:  |  Size: 248 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg> <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

Before

Width:  |  Height:  |  Size: 888 B

After

Width:  |  Height:  |  Size: 752 B

View File

@ -1,10 +1,11 @@
{{!-- This is a partial file used to generate a post "card" {{!-- This is a partial file used to generate a post "card"
which templates loop over to generate a list of posts. --}} which templates loop over to generate a list of posts. --}}
<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}}"> <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}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- 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 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image" <img class="post-card-image"
@ -17,6 +18,20 @@ which templates loop over to generate a list of posts. --}}
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
loading="lazy" loading="lazy"
/> />
{{#unless access}}
{{^has visibility="public"}}
<div class="post-card-access">
{{> "icons/lock"}}
{{#has visibility="members"}}
Members only
{{else}}
Paid-members only
{{/has}}
</div>
{{/has}}
{{/unless}}
</a> </a>
{{/if}} {{/if}}
@ -24,38 +39,40 @@ which templates loop over to generate a list of posts. --}}
<a class="post-card-content-link" href="{{url}}"> <a class="post-card-content-link" href="{{url}}">
<header class="post-card-header"> <header class="post-card-header">
{{#if primary_tag}} <div class="post-card-tags">
{{#primary_tag}} {{#primary_tag}}
<div class="post-card-primary-tag">{{name}}</div> <span class="post-card-primary-tag">{{name}}</span>
{{/primary_tag}} {{/primary_tag}}
{{/if}} {{#if featured}}
<h2 class="post-card-title">{{title}}</h2> <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}}
</div>
<h2 class="post-card-title">
{{#unless access}}
{{^has visibility="public"}}
{{#unless feature_image}}
{{> "icons/lock"}}
{{/unless}}
{{/has}}
{{/unless}}
{{title}}
</h2>
</header> </header>
<div class="post-card-excerpt"> {{#if excerpt}}
<p>{{excerpt}}</p> <div class="post-card-excerpt">{{excerpt}}</div>
</div> {{/if}}
</a> </a>
<footer class="post-card-meta"> <footer class="post-card-meta">
<ul class="author-list"> <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
{{#foreach authors}} {{#if reading_time}}
<li class="author-list-item"> <span class="post-card-meta-length">{{reading_time}}</span>
{{#if profile_image}} {{/if}}
<a href="{{url}}" class="static-avatar"> {{#if @site.comments_enabled}}
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" /> {{comment_count}}
</a> {{/if}}
{{else}}
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}}
</li>
{{/foreach}}
</ul>
<div class="post-card-byline-content">
<span class="post-card-byline-author">{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
<span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <span class="bull">&bull;</span> {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
</div>
</footer> </footer>
</div>{{!--/.post-card-content--}} </div>
</article> </article>

121
post.hbs
View File

@ -8,48 +8,59 @@ into the {body} tag of the default.hbs template --}}
{{!-- Everything inside the #post block pulls data from the post --}} {{!-- Everything inside the #post block pulls data from the post --}}
<main id="site-main" class="site-main"> <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}}"> <article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
<header class="article-header gh-canvas"> <header class="article-header gh-canvas">
{{#if primary_tag}} <div class="article-tag post-card-tags">
<section class="article-tag"> {{#primary_tag}}
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> <span class="post-card-primary-tag">
</section> <a href="{{url}}">{{name}}</a>
</span>
{{/primary_tag}}
{{#if featured}}
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}} {{/if}}
</div>
<h1 class="article-title">{{title}}</h1> <h1 class="article-title">{{title}}</h1>
{{#if custom_excerpt}} {{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p> <p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}} {{/if}}
<div class="article-byline"> <div class="article-byline">
<section class="article-byline-content"> <section class="article-byline-content">
<ul class="author-list">
{{#foreach authors}} <ul class="author-list">
<li class="author-list-item"> {{#foreach authors}}
{{#if profile_image}} <li class="author-list-item">
<a href="{{url}}" class="author-avatar"> {{#if profile_image}}
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" /> <a href="{{url}}" class="author-avatar">
</a> <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
{{else}} </a>
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a> {{else}}
{{/if}} <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
</li> {{/if}}
{{/foreach}} </li>
</ul> {{/foreach}}
<div class="article-byline-meta"> </ul>
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content"> <div class="article-byline-meta">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <h4 class="author-name">{{authors}}</h4>
<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span> <div class="byline-meta-content">
</div> <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
</div> {{#if reading_time}}
</section> <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
{{/if}}
</div>
</div> </div>
{{#if feature_image}} </section>
</div>
{{#match @custom.post_image_style "!=" "Hidden"}}
{{#if feature_image}}
<figure class="article-image"> <figure class="article-image">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- 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 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@ -66,50 +77,54 @@ into the {body} tag of the default.hbs template --}}
<figcaption>{{feature_image_caption}}</figcaption> <figcaption>{{feature_image_caption}}</figcaption>
{{/if}} {{/if}}
</figure> </figure>
{{/if}} {{/if}}
</header> {{/match}}
<section class="gh-content gh-canvas"> </header>
{{content}}
</section>
{{!-- <section class="gh-content gh-canvas">
{{content}}
</section>
{{#if comments}}
<section class="article-comments gh-canvas"> <section class="article-comments gh-canvas">
If you want to embed comments, this is a good place to paste your code! {{comments}}
</section> </section>
--}} {{/if}}
</article> </article>
</main> </main>
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}} {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}} {{#if @site.members_enabled}}
{{#unless @member}}{{#if access}} {{#unless @member}}
<section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}"> {{#unless @site.comments_enabled}}
{{#if access}}
<section class="footer-cta outer">
<div class="inner"> <div class="inner">
{{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}} {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
<a class="footer-cta-button" href="#/portal" data-portal> <a class="footer-cta-button" href="#/portal" data-portal>
<div class="footer-cta-input">{{t "Enter your email"}}</div> <div class="footer-cta-input">{{t "Enter your email"}}</div>
<span>{{t "Subscribe"}}</span> <span>{{t "Subscribe"}}</span>
</a> </a>
{{!-- ^ This looks like a form element, but it's just a link to Portal,
making the form validation and submission much simpler. --}}
</div> </div>
</section> </section>
{{/if}}{{/unless}} {{/if}}
{{/match}} {{/unless}}
{{/unless}}
{{/if}}
{{!-- Read more links, just above the footer --}} {{!-- Read more links, just above the footer --}}
{{#if @custom.show_recent_posts}} {{#if @custom.show_recent_posts_footer}}
{{!-- The {#get} helper below fetches some of the latest posts here {{!-- The {#get} helper below fetches some of the latest posts here
so that people have something else to read when they finish this one. so that people have something else to read when they finish this one.
This query gets the latest 3 posts on the site, but adds a filter to This query gets the latest 3 posts on the site, but adds a filter to
exclude the post we're currently on from being included. --}} exclude the post we're currently on from being included. --}}
{{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}} {{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
{{#if more_posts}} {{#if more_posts}}
<aside class="read-more-wrap"> <aside class="read-more-wrap outer">
<div class="read-more inner"> <div class="read-more inner">
{{#foreach more_posts}} {{#foreach more_posts}}
{{> "post-card"}} {{> "post-card"}}

90
tag.hbs
View File

@ -1,57 +1,55 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner posts"> <div class="inner posts">
<div class="post-feed"> <div class="post-feed">
{{#tag}} {{#tag}}
<section class="post-card post-card-large"> <section class="post-card post-card-large">
{{#if feature_image}}
<div class="post-card-image-link"> {{#if feature_image}}
{{!-- This is a responsive image, it loads different sizes depending on device <div class="post-card-image-link">
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} {{!-- This is a responsive image, it loads different sizes depending on device
<img class="post-card-image" https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
srcset="{{img_url feature_image size="s"}} 300w, <img class="post-card-image"
{{img_url feature_image size="m"}} 600w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="l"}} 1000w,
sizes="(max-width: 1000px) 400px, 800px" {{img_url feature_image size="xl"}} 2000w"
src="{{img_url feature_image size="m"}}" sizes="(max-width: 1000px) 400px, 800px"
alt="{{title}}" src="{{img_url feature_image size="m"}}"
loading="lazy" alt="{{title}}"
/> />
</div>
{{/if}}
<div class="post-card-content">
<div class="post-card-content-link">
<header class="post-card-header">
<h2 class="post-card-title">{{name}}</h2>
</header>
<div class="post-card-excerpt">
{{#if description}}
{{description}}
{{else}}
A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
{{/if}}
</div> </div>
{{/if}} </div>
<div class="post-card-content"> </div>
<div class="post-card-content-link">
<header class="post-card-header">
<div class="post-card-primary-tag">Tagged</div>
<h2 class="post-card-title">{{name}}</h2>
</header>
<div class="post-card-excerpt">
<p>
{{#if description}}
{{description}}
{{else}}
{{plural ../pagination.total empty=(t "A collection of posts") singular=(t "A collection of 1 post") plural=(t "A collection of % posts")}}
{{/if}}
</p>
</div>
</div>
</div>{{!--/.post-card-content--}}
</section> </section>
{{/tag}} {{/tag}}
{{#foreach posts}} {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div> </div>
{{pagination}}
</div>
</main> </main>

2657
yarn.lock

File diff suppressed because it is too large Load Diff