mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 11:37:38 +00:00
Author and tag templates
This commit is contained in:
Sodbileg Gansukh
parent
b811b72333
commit
d9f92dfe89
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -262,7 +262,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: 32px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -282,10 +282,6 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Secondary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -298,47 +294,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-head-actions-list {
|
||||
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 {
|
||||
.gh-head-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
@ -351,7 +307,7 @@ a.gh-head-button {
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.has-cover-image a.gh-head-button {
|
||||
.has-cover-image .gh-head-button {
|
||||
color: var(--color-darkgrey);
|
||||
background: #fff;
|
||||
}
|
||||
@ -562,6 +518,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.post-feed {
|
||||
grid-template-columns: 1fr;
|
||||
@ -572,20 +529,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
.post-card {
|
||||
position: relative;
|
||||
grid-column: span 2;
|
||||
flex: 1 1 301px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 220px;
|
||||
background-size: cover;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.post-card {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.post-card-image-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -629,7 +578,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
margin: 0 0 10px;
|
||||
color: var(--color-secondary-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@ -682,8 +631,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.author-profile-image,
|
||||
.avatar-wrapper {
|
||||
.author-profile-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -693,11 +641,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.post-card-meta .profile-image-wrapper,
|
||||
.post-card-meta .avatar-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.author-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -713,69 +656,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
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):
|
||||
|
||||
@ -791,7 +671,6 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
display: grid;
|
||||
grid-gap: 4vmin;
|
||||
grid-template-columns: 3fr 5fr;
|
||||
min-height: auto;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@ -815,7 +694,6 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
display: grid;
|
||||
grid-gap: 4vmin;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
min-height: 280px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@ -827,7 +705,6 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
position: relative;
|
||||
grid-column: span 2;
|
||||
margin-bottom: 0;
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
grid-column: 1 / span 1;
|
||||
height: max-content;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.post-feed.list .post-card-large .post-card-image-link::after {
|
||||
@ -1560,94 +1436,41 @@ iframe.instagram-media + script + :not([id]) {
|
||||
/* 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 {
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
margin: 0 0 2rem;
|
||||
background: color-mod(var(--color-lightgrey) l(+10%));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.author-profile h1 {
|
||||
margin: 0 0 0.3em;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.author-profile p {
|
||||
margin: 0 0 1.5em;
|
||||
color: color-mod(var(--color-midgrey) l(-8%));
|
||||
.author-profile-footer {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.author-profile-location {
|
||||
margin: 0 0 1.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.author-profile-meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.author-profile-social-link {
|
||||
display: block;
|
||||
padding: 0 0 5px;
|
||||
font-size: 1.3rem;
|
||||
color: color-mod(var(--color-midgrey) l(-8%));
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
color: var(--color-secondary-text);
|
||||
}
|
||||
|
||||
.author-profile-social-link:hover {
|
||||
color: var(--color-darkgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.author-template .posts .post-feed {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
.author-profile-social-link svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
87
author.hbs
87
author.hbs
@ -1,57 +1,70 @@
|
||||
{{!< default}}
|
||||
{{!-- 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">
|
||||
<div class="inner posts">
|
||||
{{#author}}
|
||||
<section class="post-card post-card-large">
|
||||
|
||||
<header class="author-profile">
|
||||
{{#author}}
|
||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
{{#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}}
|
||||
|
||||
<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}}" />
|
||||
{{else}}
|
||||
<span class="author-profile-pic">{{> "icons/avatar"}}</span>
|
||||
{{/if}}
|
||||
|
||||
<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}}
|
||||
|
||||
<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">
|
||||
{{#if location}}
|
||||
<div class="author-profile-location">📍 {{location}}</div>
|
||||
{{/if}}
|
||||
{{#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 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 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}}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</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>
|
||||
|
||||
@ -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 |
@ -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 |
@ -1,7 +1,7 @@
|
||||
{{!-- This is a partial file used to generate a post "card"
|
||||
which templates loop over to generate a list of posts. --}}
|
||||
|
||||
<article class="post-card {{post_class}}{{^is "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}}
|
||||
<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}}">
|
||||
<header class="post-card-header">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<div class="post-card-primary-tag">{{name}}</div>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{/primary_tag}}
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</header>
|
||||
{{#if excerpt}}
|
||||
|
||||
87
tag.hbs
87
tag.hbs
@ -1,57 +1,52 @@
|
||||
{{!< default}}
|
||||
{{!-- 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">
|
||||
<div class="post-feed">
|
||||
<div class="inner posts">
|
||||
<div class="post-feed">
|
||||
|
||||
{{#tag}}
|
||||
<section class="post-card post-card-large">
|
||||
{{#if feature_image}}
|
||||
<div class="post-card-image-link">
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
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}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
{{#tag}}
|
||||
<section class="post-card post-card-large">
|
||||
|
||||
{{#if feature_image}}
|
||||
<div class="post-card-image-link">
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
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="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>
|
||||
{{/if}}
|
||||
<div class="post-card-content">
|
||||
<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--}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{{/tag}}
|
||||
</section>
|
||||
{{/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>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user