Compare commits

...

11 Commits

Author SHA1 Message Date
55a90a9252 v5.4.2 2022-12-12 14:55:31 +08:00
b20dceae22 Rebuilt assets 2022-12-12 14:55:02 +08:00
88ca182a58 Added regular pagination option
Casper comes with infinite scrolling by default. This update makes it possible to go with the default pagination style when the <html> element has a class no-infinite-scroll.
2022-12-08 12:50:24 +08:00
140632b885 fixes #910
When the publication cover is turned off and the header style is set to hidden, the header section shouldn't be taking much space like it does regularly.
2022-12-07 15:29:23 +08:00
8f2b806673 v5.4.1 2022-11-14 11:05:28 +08:00
4af198a19f Fixed dropdown menu width 2022-11-14 10:42:10 +08:00
f846ceb7ed Fixed minor spacing issues on the header 2022-11-14 10:37:50 +08:00
7390c17a26 Fix for intended location of search icon 2022-11-14 10:31:51 +08:00
55d5345800 v5.4.0 2022-11-11 11:31:39 +08:00
cf30adacce Added navbar options (#906) 2022-11-11 11:30:32 +08:00
38426cd9e6 Added aria-label to search button (#896) 2022-10-31 16:01:42 +08:00
14 changed files with 571 additions and 293 deletions

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

File diff suppressed because one or more lines are too long

View File

@ -112,8 +112,8 @@ production stylesheet in assets/built/screen.css
z-index: 100;
display: flex;
align-items: center;
padding-top: 6.4vmin;
padding-bottom: 6.4vmin;
padding-top: calc(19vmin + 44px);
padding-bottom: 19vmin;
text-align: center;
color: var(--color-darkgrey);
}
@ -124,10 +124,6 @@ production stylesheet in assets/built/screen.css
color: #fff;
}
body:not(.has-cover) .site-header-content:not(.left-aligned) {
padding-bottom: max(4.8vmin, 24px);
}
.site-header-content.left-aligned {
padding-bottom: 0;
text-align: left;
@ -135,11 +131,12 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
.has-cover .site-header-content.left-aligned {
align-items: flex-end;
padding-bottom: 6.4vmin;
padding-bottom: max(4vmin, 32px);
}
.site-header-content.no-content {
padding-top: 0;
padding-bottom: 2vmin;
}
.site-header-inner {
@ -189,16 +186,18 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
.site-description {
display: inline-block;
z-index: 10;
max-width: 560px;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.4;
max-width: 960px;
font-size: 6rem;
font-weight: 700;
line-height: 1.1;
}
:is(.site-logo, .site-title) + .site-description {
margin-top: 8px;
font-size: 2.1rem;
max-width: 640px;
margin-top: 16px;
font-size: 2.4rem;
font-weight: 400;
line-height: 1.4;
}
.site-logo + .site-description {
@ -210,7 +209,6 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
}
.has-cover .site-description {
font-size: 3.2rem;
letter-spacing: -0.005em;
color: #fff;
}
@ -223,6 +221,18 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
font-size: 2.2rem;
}
@media (min-width: 992px) {
.is-head-stacked.has-cover .site-header-content {
padding-top: calc(19vmin + 120px);
}
}
@media (max-width: 991px) {
.site-header-content {
padding-top: calc(19vmin + 32px);
}
}
@media (max-width: 767px) {
.has-cover .site-header-content {
min-height: 240px;
@ -237,7 +247,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
font-size: 3.4rem !important;
}
.site-description {
font-size: 1.9rem !important;
font-size: 2.8rem !important;
}
.site-logo + .site-description {
margin-top: 12px !important;
@ -252,8 +262,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
/* ---------------------------------------------------------- */
.gh-head {
padding-top: min(24px, 3.6vmin);
padding-bottom: min(24px, 3.6vmin);
height: 88px;
font-size: 1.6rem;
line-height: 1.3em;
background-color: #fff;
@ -264,7 +273,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
color: #fff;
}
.home-template.has-cover .gh-head {
:is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
position: absolute;
top: 0;
right: 0;
@ -280,11 +289,108 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
.gh-head-inner {
display: grid;
grid-gap: 40px;
grid-template-columns: auto auto 1fr;
column-gap: 40px;
grid-template-columns: auto 1fr auto;
grid-auto-flow: row dense;
align-items: center;
height: 100%;
}
/* Header styles
/* ---------------------------------------------------------- */
.is-head-left-logo .gh-head-inner {
grid-template-columns: auto 1fr auto;
}
.is-head-left-logo.home-template .gh-head-logo {
display: none;
}
.is-head-left-logo.home-template .gh-head-menu {
margin-left: -40px;
}
@media (min-width: 992px) {
.is-head-left-logo .gh-head-menu {
margin-right: 32px;
margin-left: 16px;
}
}
.is-head-middle-logo .gh-head-inner {
grid-template-columns: 1fr auto 1fr;
}
.is-head-middle-logo .gh-head-brand {
grid-column-start: 2;
}
@media (min-width: 992px) {
.is-head-middle-logo .gh-head-menu {
margin-right: 64px;
}
}
.is-head-stacked .gh-head {
height: auto;
}
.is-head-stacked .gh-head-inner {
grid-template-columns: 1fr auto 1fr;
}
.is-head-stacked .gh-head-brand {
grid-row-start: 1;
grid-column-start: 2;
}
@media (min-width: 992px) {
.is-head-stacked .gh-head-inner {
padding: 0;
}
.is-head-stacked .gh-head-brand {
position: relative;
display: flex;
align-items: center;
height: 80px;
}
.is-head-stacked .gh-head-menu {
grid-row-start: 2;
grid-column: 1 / 4;
justify-content: center;
height: 56px;
margin: 0 48px;
}
.is-head-stacked .gh-head-menu::before,
.is-head-stacked .gh-head-menu::after {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: 1px;
content: "";
background-color: var(--color-lightgrey);
}
.is-head-stacked.has-cover .gh-head-menu::before,
.is-head-stacked.has-cover .gh-head-menu::after {
background-color: rgba(255, 255, 255, 0.2);
}
.is-head-stacked .gh-head-menu::after {
top: 136px;
}
.is-head-stacked .gh-head-actions {
grid-row-start: 1;
grid-column: 1 / 4;
justify-content: space-between;
}
}
/* Brand
/* ---------------------------------------------------------- */
@ -293,7 +399,6 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
display: flex;
align-items: center;
height: 40px;
max-width: 400px;
word-break: break-all;
}
@ -303,6 +408,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
font-size: 2.6rem;
letter-spacing: -0.02em;
color: inherit;
white-space: nowrap;
}
.gh-head-logo.no-image {
@ -313,17 +419,8 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
color: #fff;
}
.no-logo .gh-head-logo {
display: none;
}
.gh-head-logo img {
max-height: 26px;
}
.gh-head-brand-wrapper {
display: flex;
align-items: center;
max-height: 40px;
}
@ -337,14 +434,10 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
font-weight: 500;
}
.no-logo .gh-head-menu {
margin-left: -40px;
}
.gh-head-menu .nav {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
flex-wrap: wrap;
gap: 32px;
list-style: none;
margin: 0;
@ -366,6 +459,80 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
opacity: 0.9;
}
.gh-head-menu .nav-more-toggle {
position: relative;
width: 30px;
height: 30px;
margin: 0 -6px;
padding: 0;
font-size: inherit;
background-color: transparent;
text-transform: inherit;
}
.gh-head-menu .nav-more-toggle svg {
width: 24px;
height: 24px;
}
@media (min-width: 992px) {
body:not(.is-dropdown-loaded) .gh-head-menu .nav > li {
opacity: 0;
}
}
/* Dropdown
/* ---------------------------------------------------------- */
.gh-dropdown {
position: absolute;
top: 100%;
right: -16px;
z-index: 90;
width: 200px;
padding: 12px 0;
margin-top: 24px;
opacity: 0;
visibility: hidden;
text-align: left;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 7px 20px -5px rgba(0, 0, 0, 0.15);
transform: translate3d(0, 6px, 0);
transition: opacity 0.3s, transform 0.2s;
}
.is-head-middle-logo .gh-dropdown {
right: auto;
left: -24px;
}
.is-dropdown-mega .gh-dropdown {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
column-gap: 40px;
min-width: 320px;
padding: 20px 32px;
}
.is-dropdown-open .gh-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.gh-head-menu .gh-dropdown li a {
display: block;
padding: 6px 20px;
color: #15171a;
}
.is-dropdown-mega .gh-dropdown li a {
padding: 8px 0;
}
/* Secondary Navigation
/* ---------------------------------------------------------- */
@ -401,13 +568,14 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
.gh-head-button {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 8px 16px;
height: 40px;
padding: 8px 20px;
height: 44px;
font-weight: 600;
letter-spacing: -0.005em;
font-size: 1.5rem;
border-radius: 6px;
font-size: 1.6rem;
border-radius: 48px;
color: #fff;
background: var(--ghost-accent-color);
}
@ -417,38 +585,6 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
background: #fff;
}
/* Search
/* ---------------------------------------------------------- */
.gh-search {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
cursor: pointer;
background-color: transparent;
border: 0;
outline: none;
}
.gh-search:hover {
opacity: 0.9;
}
@media (max-width: 991px) {
.gh-head-actions .gh-search {
display: none;
}
}
@media (min-width: 992px) {
.gh-head-brand .gh-search {
display: none;
}
}
/* Search
/* ---------------------------------------------------------- */
@ -475,7 +611,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
}
.gh-head-actions .gh-search {
margin-right: -10px;
margin-right: -4px;
}
@media (max-width: 991px) {
@ -497,86 +633,48 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
.gh-burger {
position: relative;
display: none;
width: 30px;
height: 30px;
padding: 0;
margin-right: -3px;
cursor: pointer;
background-color: transparent;
border: 0;
appearance: none;
}
.gh-burger-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
}
.has-cover .gh-burger-box {
color: #fff;
}
.gh-burger-inner {
width: 100%;
height: 100%;
}
.gh-burger-box::before {
.gh-burger::before,
.gh-burger::after {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
margin: auto;
content: '';
width: 100%;
left: 3px;
width: 24px;
height: 1px;
background: currentcolor;
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
will-change: transform, width;
content: "";
background-color: var(--color-darkgrey);
transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.gh-burger-inner::before,
.gh-burger-inner::after {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
margin: auto;
content: '';
width: 100%;
height: 1px;
background: currentcolor;
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
will-change: transform, width;
.has-cover .gh-burger::before,
.has-cover .gh-burger::after {
background-color: #fff;
}
.gh-burger-inner::before {
transform: translatey(-6px);
}
.gh-burger-inner::after {
transform: translatey(6px);
.gh-burger::before {
top: 11px;
}
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
transform: translatey(-8px);
}
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
transform: translatey(8px);
.gh-burger::after {
bottom: 11px;
}
.gh-head-open .gh-burger-box::before {
width: 0;
transform: translatex(19px);
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
.gh-head-open .gh-burger::before {
top: 15px;
transform: rotate(45deg);
}
.gh-head-open .gh-burger-inner::before {
width: 26px;
transform: translatex(6px) rotate(135deg);
}
.gh-head-open .gh-burger-inner::after {
width: 26px;
transform: translatex(6px) rotate(-135deg);
.gh-head-open .gh-burger::after {
bottom: 14px;
transform: rotate(-45deg);
}
@ -585,91 +683,129 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
/* IDs needed to ensure sufficient specificity */
@media (max-width: 991px) {
.gh-burger {
display: inline-block;
}
#gh-head {
overflow: hidden;
height: 64px;
}
#gh-head .gh-head-inner {
height: 100%;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
gap: 48px;
}
#gh-head .gh-head-brand {
position: relative;
z-index: 10;
grid-column-start: auto;
max-width: none;
display: flex;
display: grid;
grid-template-columns: 1fr auto auto;
grid-column-start: 1;
align-items: center;
justify-content: space-between;
user-select: none;
height: 64px;
}
.no-logo #gh-head .gh-head-brand {
justify-content: flex-end;
#gh-head .gh-head-logo {
font-size: 2.2rem;
}
#gh-head .gh-head-menu {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 0 10vh 0;
font-weight: 300;
font-size: 3.6rem;
line-height: 1.1em;
#gh-head .gh-head-brand .gh-search {
margin-left: -6px;
}
#gh-head .gh-head-menu .nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
font-weight: 500;
#gh-head .gh-burger {
display: block;
}
#gh-head .gh-head-menu,
#gh-head .gh-head-actions {
flex-direction: column-reverse;
position: fixed;
justify-content: center;
padding: 20px 0 32px;
text-align: left;
visibility: hidden;
opacity: 0;
}
/* Hide collapsed content */
#gh-head .gh-head-actions,
#gh-head .gh-head-menu {
display: none;
margin: 0;
transition: none;
transform: translateY(0);
}
/* Open the menu */
.gh-head-open {
overflow: hidden;
height: 100vh;
#gh-head .nav {
gap: 16px;
align-items: center;
line-height: 1.4;
}
#gh-head .nav a {
font-size: 2.6rem;
font-weight: 600;
text-transform: none;
}
#gh-head .nav li {
opacity: 0;
transform: translateY(-4px);
}
#gh-head .gh-head-button {
width: 100%;
font-size: 1.8rem;
text-transform: none;
opacity: 0;
transform: translateY(8px);
}
.gh-head-open #gh-head {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 3999999;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.gh-head-open.has-cover #gh-head,
.gh-head-open.has-cover #gh-head .gh-head-actions {
background-color: var(--ghost-accent-color);
}
.gh-head-open #gh-head .gh-head-menu,
.gh-head-open #gh-head .gh-head-actions {
position: static;
visibility: visible;
opacity: 1;
}
.gh-head-open #gh-head .nav {
display: flex;
flex-direction: column;
}
.gh-head-open #gh-head .nav li {
opacity: 1;
transition: transform 0.2s, opacity 0.2s;
transform: translateY(0);
}
.gh-head-open #gh-head .gh-head-actions {
position: sticky;
right: 0;
bottom: 0;
left: 0;
z-index: 3999999;
overflow-y: scroll;
display: inline-flex;
flex-direction: column;
gap: 12px;
align-items: center;
padding: max(4vmin, 20px) 0;
background-color: #fff;
}
.gh-head-open #gh-head .gh-head-inner {
grid-template-rows: auto 1fr auto;
}
.gh-head-open #gh-head .gh-head-actions,
.gh-head-open #gh-head .gh-head-menu {
display: flex;
}
}
@media (max-width: 600px) {
#gh-head .gh-head-menu {
font-size: 6vmin;
.gh-head-open #gh-head .gh-head-button {
opacity: 1;
transition: transform 0.4s, opacity 0.4s;
transition-delay: 0.2s;
transform: translateY(0);
}
}
.has-cover.gh-head-open .gh-head {
background: var(--ghost-accent-color);
}
/* 6. Post Feed
/* ---------------------------------------------------------- */
@ -810,6 +946,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin: 0;
font-size: 2.6rem;
font-weight: 800;
line-height: 1.2;
}
.post-card-content-link:hover .post-card-title {
@ -962,7 +1099,7 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-card-large .post-card-title {
margin-top: 0;
font-size: 4.4rem;
line-height: 1;
line-height: 1.05;
}
.post-card-large .post-card-excerpt {
@ -1008,6 +1145,41 @@ make sure this only happens on large viewports / desktop-ish devices.
}
}
/* Pagination
/* ---------------------------------------------------------- */
.pagination {
display: none;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 8vmin;
}
html.no-infinite-scroll .pagination {
display: grid;
}
.pagination a {
font-size: 1.7rem;
font-weight: 600;
}
.pagination .page-number {
grid-column-start: 2;
color: var(--color-secondary-text);
}
.pagination .older-posts {
grid-column-start: 3;
text-align: right;
}
@media (max-width: 767px) {
.pagination .page-number {
display: none;
}
}
/* 7. Single Post
/* ---------------------------------------------------------- */
@ -1042,7 +1214,7 @@ make sure this only happens on large viewports / desktop-ish devices.
margin-bottom: 0;
font-size: clamp(3.2rem, 5vw, 5.2rem);
font-weight: 800;
line-height: 1;
line-height: 1.05;
color: var(--color-darkgrey);
}
@ -1719,7 +1891,7 @@ iframe.instagram-media + script + :not([id]) {
}
@media (min-width: 1001px) {
.author-template .post-card-large .post-card-content {
.author-template .post-card-large .post-card-content:only-child {
grid-column: span 2;
max-width: 640px;
}
@ -1739,7 +1911,7 @@ iframe.instagram-media + script + :not([id]) {
}
@media (min-width: 1001px) {
.tag-template .post-card-large .post-card-content {
.tag-template .post-card-large .post-card-content:only-child {
grid-column: span 2;
max-width: 640px;
}

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

@ -0,0 +1,81 @@
(function () {
const mediaQuery = window.matchMedia('(max-width: 991px)');
const menu = document.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';
});
}
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');
});
window.addEventListener('click', function (e) {
if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
document.body.classList.remove('is-dropdown-open');
}
});
}
imagesLoaded(logo, function () {
makeDropdown();
});
window.addEventListener('resize', function () {
setTimeout(function () {
nav.innerHTML = navHTML;
makeDropdown();
}, 1);
});
})();

View File

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

File diff suppressed because one or more lines are too long

View File

@ -2,69 +2,75 @@
{{!-- 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="post-feed inner">
<div class="inner posts">
{{#author}}
<section class="post-card post-card-large">
<div class="post-feed">
{{#if feature_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 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="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
</div>
{{/if}}
{{#author}}
<section class="post-card post-card-large">
<div class="post-card-content">
<div class="post-card-content-link">
{{#if profile_image}}
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
{{#if feature_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 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="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
</div>
{{/if}}
<header class="post-card-header">
<h2 class="post-card-title">{{name}}</h2>
</header>
<div class="post-card-content">
<div class="post-card-content-link">
{{#if bio}}
<div class="post-card-excerpt">{{bio}}</div>
{{/if}}
<footer class="author-profile-footer">
{{#if location}}
<div class="author-profile-location">{{location}}</div>
{{#if profile_image}}
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
{{/if}}
<div class="author-profile-meta">
{{#if website}}
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
<header class="post-card-header">
<h2 class="post-card-title">{{name}}</h2>
</header>
{{#if bio}}
<div class="post-card-excerpt">{{bio}}</div>
{{/if}}
<footer class="author-profile-footer">
{{#if location}}
<div class="author-profile-location">{{location}}</div>
{{/if}}
{{#if twitter}}
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
{{#if facebook}}
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
</div>
</footer>
<div class="author-profile-meta">
{{#if website}}
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{/if}}
{{#if twitter}}
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
{{#if facebook}}
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
</div>
</footer>
</div>
</div>
</div>
</div>
</section>
{{/author}}
</section>
{{/author}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
{{pagination}}
</div>
</main>

View File

@ -18,51 +18,51 @@
{{ghost_head}}
</head>
<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}}{{#if @custom.show_publication_cover}} has-cover{{/if}}{{#is "home"}}{{#unless @custom.show_logo_in_navigation}} no-logo{{/unless}}{{/is}}">
<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}}">
<div class="viewport">
<header id="gh-head" class="gh-head outer">
<nav class="gh-head-inner inner">
<div class="gh-head-inner inner">
<div class="gh-head-brand">
<a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" href="{{@site.url}}">
<a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}" />
<img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
{{@site.title}}
{{/if}}
</a>
<div class="gh-head-brand-wrapper">
<button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
<a class="gh-burger" role="button">
<div class="gh-burger-box">
<div class="gh-burger-inner"></div>
</div>
</a>
</div>
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
<button class="gh-burger"></button>
</div>
<div class="gh-head-menu">
<nav class="gh-head-menu">
{{navigation}}
</div>
{{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{/unless}}
</nav>
<div class="gh-head-actions">
<button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-social">
{{#if @site.facebook}}
<a class="gh-social-link gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="me noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @site.twitter}}
<a class="gh-social-link gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="me noopener">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @site.members_enabled}}
{{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{else}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{#unless @member}}
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{#unless @site.members_invite_only}}
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}
<a class="gh-head-button" href="#/portal/signin" data-portal="signin">Login</a>
{{/unless}}
{{else}}
<a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
{{/unless}}
{{/if}}
{{/unless}}
</div>
</nav>
</div>
</header>
<div class="site-content">

View File

@ -90,8 +90,9 @@ function zipper(done) {
}
const cssWatcher = () => watch('assets/css/**', css);
const jsWatcher = () => watch('assets/js/**', js);
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const watcher = parallel(cssWatcher, hbsWatcher);
const watcher = parallel(cssWatcher, jsWatcher, hbsWatcher);
const build = series(css, js);
exports.build = build;

View File

@ -22,13 +22,13 @@ into the {body} of the default.hbs template --}}
{{#match @custom.header_style "!=" "Hidden"}}
<div class="site-header-inner inner">
{{#unless @custom.show_logo_in_navigation}}
{{#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}}
{{/unless}}
{{/match}}
{{#if @site.description}}
<p class="site-description">{{@site.description}}</p>
{{/if}}
@ -48,5 +48,7 @@ into the {body} of the default.hbs template --}}
{{/foreach}}
</div>
{{pagination}}
</div>
</main>

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": "5.3.2",
"version": "5.4.2",
"engines": {
"ghost": ">=5.0.0"
},
@ -89,6 +89,15 @@
},
"card_assets": true,
"custom": {
"navigation_layout": {
"type": "select",
"options": [
"Logo on cover",
"Logo in the middle",
"Stacked"
],
"default": "Logo on cover"
},
"title_font": {
"type": "select",
"options": [
@ -120,11 +129,6 @@
"default": "Center aligned",
"group": "homepage"
},
"show_logo_in_navigation": {
"type": "boolean",
"default": false,
"group": "homepage"
},
"feed_layout": {
"type": "select",
"options": [

View File

@ -48,5 +48,8 @@
{{/foreach}}
</div>
{{pagination}}
</div>
</main>