Author and tag templates

This commit is contained in:
Sodbileg Gansukh 2022-05-16 12:08:19 +08:00
parent b811b72333
commit d9f92dfe89
8 changed files with 117 additions and 288 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

@ -262,7 +262,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 24px; gap: 32px;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -282,10 +282,6 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
color: #fff; color: #fff;
} }
.gh-head-menu .nav a:hover {
opacity: 1;
}
/* Secondary Navigation /* Secondary Navigation
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -298,47 +294,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
text-align: right; text-align: right;
} }
.gh-head-actions-list { .gh-head-button {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.gh-head-actions-list a:not([class]) {
display: inline-block;
margin: 0 0 0 1.5vmin;
padding: 5px 0;
}
.gh-social {
margin: 0 1.5vmin 0 0;
}
.gh-social a {
opacity: 0.8
}
.gh-social a + a {
margin-left: 0.8rem;
}
.gh-social a:hover {
opacity: 1;
}
.gh-social svg {
height: 22px;
width: 22px;
fill: #fff;
}
.gh-social-facebook svg {
height: 20px;
width: 20px;
}
a.gh-head-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 8px 16px; padding: 8px 16px;
@ -351,7 +307,7 @@ a.gh-head-button {
background: var(--ghost-accent-color); background: var(--ghost-accent-color);
} }
.has-cover-image a.gh-head-button { .has-cover-image .gh-head-button {
color: var(--color-darkgrey); color: var(--color-darkgrey);
background: #fff; background: #fff;
} }
@ -562,6 +518,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.post-feed { .post-feed {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -572,20 +529,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card { .post-card {
position: relative; position: relative;
grid-column: span 2; grid-column: span 2;
flex: 1 1 301px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 220px;
background-size: cover; background-size: cover;
word-break: break-word; word-break: break-word;
} }
@media (max-width: 700px) {
.post-card {
min-height: auto;
}
}
.post-card-image-link { .post-card-image-link {
position: relative; position: relative;
display: block; display: block;
@ -629,7 +578,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin: 0 0 10px; margin: 0 0 10px;
color: var(--color-secondary-text); color: var(--color-secondary-text);
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 500; font-weight: 600;
line-height: 1; line-height: 1;
} }
@ -682,8 +631,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin: 0 4px; margin: 0 4px;
} }
.author-profile-image, .author-profile-image {
.avatar-wrapper {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -693,11 +641,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
object-fit: cover; object-fit: cover;
} }
.post-card-meta .profile-image-wrapper,
.post-card-meta .avatar-wrapper {
position: relative;
}
.author-list { .author-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -713,69 +656,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
padding: 0; padding: 0;
} }
.static-avatar {
display: block;
overflow: hidden;
margin: 0 0 0 -6px;
width: 36px;
height: 36px;
border-radius: 100%;
box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.post-card-byline-content {
flex: 1 1 50%;
display: flex;
flex-direction: column;
margin: 0 0 0 8px;
color: color-mod(var(--color-midgrey) l(+10%));
font-size: 1.4rem;
line-height: 1.2em;
font-weight: 400;
}
.post-card-byline-content span {
margin: 0;
}
.post-card-byline-content a {
color: color-mod(var(--color-darkgrey) l(+15%));
font-weight: 600;
}
.post-card-byline-date {
font-size: 1.3rem;
line-height: 1.5em;
}
.post-card-byline-date .bull {
display: inline-block;
margin: 0 2px;
opacity: 0.6;
}
.single-author-byline {
display: flex;
flex-direction: column;
margin-left: 5px;
color: color-mod(var(--color-midgrey) l(-10%));
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 500;
}
.single-author {
display: flex;
align-items: center;
}
.single-author .static-avatar {
margin-left: -2px;
}
.single-author-name {
display: inline-block;
}
/* Special Styling for home page grid (below): /* Special Styling for home page grid (below):
@ -791,7 +671,6 @@ make sure this only happens on large viewports / desktop-ish devices.
display: grid; display: grid;
grid-gap: 4vmin; grid-gap: 4vmin;
grid-template-columns: 3fr 5fr; grid-template-columns: 3fr 5fr;
min-height: auto;
border-top: 0; border-top: 0;
} }
@ -815,7 +694,6 @@ make sure this only happens on large viewports / desktop-ish devices.
display: grid; display: grid;
grid-gap: 4vmin; grid-gap: 4vmin;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
min-height: 280px;
border-top: 0; border-top: 0;
} }
@ -827,7 +705,6 @@ make sure this only happens on large viewports / desktop-ish devices.
position: relative; position: relative;
grid-column: span 2; grid-column: span 2;
margin-bottom: 0; margin-bottom: 0;
min-height: 380px;
} }
.post-card-large .post-card-content { .post-card-large .post-card-content {
@ -857,7 +734,6 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-feed.list .post-card-large .post-card-image-link { .post-feed.list .post-card-large .post-card-image-link {
grid-column: 1 / span 1; grid-column: 1 / span 1;
height: max-content; height: max-content;
min-height: auto;
} }
.post-feed.list .post-card-large .post-card-image-link::after { .post-feed.list .post-card-large .post-card-image-link::after {
@ -1560,94 +1436,41 @@ iframe.instagram-media + script + :not([id]) {
/* 8. Author Template /* 8. Author Template
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.author-template .posts {
position: relative;
height: 100%;
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-gap: 4vmin;
}
.author-template .posts .post-feed {
grid-column: 2 / 4;
grid-template-columns: 1fr 1fr;
}
.author-profile {
padding: 4vmin 0;
}
.author-profile-content {
height: auto;
position: sticky;
top: 4vmin;
font-size: 1.4rem;
line-height: 1.4em;
}
.author-profile-pic { .author-profile-pic {
display: block; display: block;
width: 150px; width: 80px;
height: 150px; height: 80px;
object-fit: cover; object-fit: cover;
margin: 0 0 2rem; margin: 0 0 2rem;
background: color-mod(var(--color-lightgrey) l(+10%)); background: color-mod(var(--color-lightgrey) l(+10%));
border-radius: 50%; border-radius: 50%;
} }
.author-profile h1 { .author-profile-footer {
margin: 0 0 0.3em; margin-top: 16px;
font-size: 2rem;
}
.author-profile p {
margin: 0 0 1.5em;
color: color-mod(var(--color-midgrey) l(-8%));
} }
.author-profile-location { .author-profile-location {
margin: 0 0 1.5em;
font-weight: 700; font-weight: 700;
} }
.author-profile-meta {
display: flex;
gap: 10px;
}
.author-profile-social-link { .author-profile-social-link {
display: block;
padding: 0 0 5px;
font-size: 1.3rem; font-size: 1.3rem;
color: color-mod(var(--color-midgrey) l(-8%)); color: var(--color-secondary-text);
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
} }
.author-profile-social-link:hover { .author-profile-social-link:hover {
color: var(--color-darkgrey); color: var(--color-darkgrey);
} }
@media (max-width: 900px) { .author-profile-social-link svg {
.author-template .posts .post-feed { width: 16px;
grid-template-columns: 1fr; height: 16px;
}
}
@media (max-width: 650px) {
.author-template .posts {
grid-template-columns: 1fr;
grid-gap: 0;
}
.author-template .posts .post-feed {
grid-column: 1 / auto;
}
.author-profile {
padding-right: 0;
}
.author-profile-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
} }

View File

@ -1,57 +1,70 @@
{{!< 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="post-feed inner">
<section class="outer"> {{#author}}
<div class="inner posts"> <section class="post-card post-card-large">
<header class="author-profile"> {{#if feature_image}}
{{#author}} <div class="post-card-image-link">
{{!-- Everything inside the #author tags pulls data from the author --}} {{!-- 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}}
<div class="author-profile-content"> <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}} {{/if}}
<span class="author-profile-pic">{{> "icons/avatar"}}</span>
<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}}
<h1>{{name}}</h1>
<p>
{{#if bio}}
{{bio}}
{{else}}
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} published
{{/if}}
</p>
<div class="author-profile-meta"> <div class="author-profile-meta">
{{#if location}}
<div class="author-profile-location">📍 {{location}}</div>
{{/if}}
{{#if website}} {{#if website}}
<span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span> <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{/if}} {{/if}}
{{#if twitter}} {{#if twitter}}
<span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span> <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}} {{/if}}
{{#if facebook}} {{#if facebook}}
<span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span> <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}} {{/if}}
</div> </div>
</footer>
</div> </div>
{{/author}}
</header>
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div> </div>
</div> </section>
</section> {{/author}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</main>

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"><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: 511 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"><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: 732 B

View File

@ -1,7 +1,7 @@
{{!-- 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}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{/is}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}"> <article class="post-card {{post_class}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{/is}}{{/is}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}">
{{#if feature_image}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">
@ -24,11 +24,9 @@ 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}} {{#primary_tag}}
{{#primary_tag}}
<div class="post-card-primary-tag">{{name}}</div> <div class="post-card-primary-tag">{{name}}</div>
{{/primary_tag}} {{/primary_tag}}
{{/if}}
<h2 class="post-card-title">{{title}}</h2> <h2 class="post-card-title">{{title}}</h2>
</header> </header>
{{#if excerpt}} {{#if excerpt}}

87
tag.hbs
View File

@ -1,57 +1,52 @@
{{!< 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}}
A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% 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>
</div>
</main> </main>