Post card

This commit is contained in:
Sodbileg Gansukh 2022-05-06 15:36:35 +08:00
parent f74e9241bb
commit 5672c0b6c8
4 changed files with 80 additions and 73 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

@ -37,6 +37,7 @@ production stylesheet in assets/built/screen.css
--color-darkgrey: #15171A; --color-darkgrey: #15171A;
--color-midgrey: #738a94; --color-midgrey: #738a94;
--color-lightgrey: #c5d2d9; --color-lightgrey: #c5d2d9;
--color-secondary-text: #979797;
--color-wash: #e5eff5; --color-wash: #e5eff5;
--color-darkmode: #151719; --color-darkmode: #151719;
@ -510,9 +511,9 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-feed { .post-feed {
position: relative; position: relative;
display: grid; display: grid;
grid-gap: 4vmin; gap: 64px 48px;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(6, 1fr);
padding: 4vmin 0; padding: 64px 0;
} }
.post-feed.list { .post-feed.list {
@ -535,6 +536,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card { .post-card {
position: relative; position: relative;
grid-column: span 2;
flex: 1 1 301px; flex: 1 1 301px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -552,15 +554,21 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card-image-link { .post-card-image-link {
position: relative; position: relative;
display: block; display: block;
overflow: hidden; margin-bottom: 32px;
border-radius: 3px; }
.post-card-image-link::after {
content: "";
display: block;
padding-bottom: 55%;
} }
.post-card-image { .post-card-image {
position: absolute;
inset: 0;
width: 100%; width: 100%;
height: 200px; height: 100%;
background: var(--color-lightgrey) no-repeat center center; background: var(--color-lightgrey) no-repeat center center;
object-fit: cover; object-fit: cover;
} }
@ -574,10 +582,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
text-decoration: none; text-decoration: none;
} }
.post-card-header {
margin: 20px 0 0;
}
.post-feed .no-image .post-card-content-link { .post-feed .no-image .post-card-content-link {
padding: 0; padding: 0;
} }
@ -587,17 +591,17 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
} }
.post-card-primary-tag { .post-card-primary-tag {
margin: 0 0 0.2em; margin: 0 0 10px;
color: var(--ghost-accent-color); color: var(--color-secondary-text);
font-size: 1.2rem; font-size: 1.4rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.2px; line-height: 1;
text-transform: uppercase;
} }
.post-card-title { .post-card-title {
margin: 0 0 0.4em; margin: 0;
font-size: 2.4rem; font-size: 2.6rem;
font-weight: 800;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
} }
@ -616,28 +620,31 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
} }
.post-card-excerpt { .post-card-excerpt {
display: -webkit-box;
overflow-y: hidden;
margin-top: 12px;
max-width: 56em; max-width: 56em;
color: color-mod(var(--color-midgrey) l(-8%)); line-height: 1.5;
font-family: var(--font-serif); -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
} }
.has-sans-body .post-card-excerpt { .has-sans-body .post-card-excerpt {
font-family: var(--font-sans-serif); font-family: var(--font-sans-serif);
} }
.post-card-excerpt p {
margin-bottom: 1em;
display: -webkit-box;
overflow-y: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
}
.post-card-meta { .post-card-meta {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 12px;
padding: 0; padding: 0;
font-size: 1.3rem;
color: var(--color-secondary-text);
}
.post-card-meta .sep {
margin: 0 4px;
} }
.author-profile-image, .author-profile-image,
@ -769,10 +776,10 @@ make sure this only happens on large viewports / desktop-ish devices.
@media (min-width: 1001px) { @media (min-width: 1001px) {
.post-card-large { .post-card-large {
grid-column: 1 / span 3; grid-column: span 6;
display: grid; display: grid;
grid-gap: 4vmin; grid-gap: 4vmin;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(20, 1fr);
min-height: 280px; min-height: 280px;
border-top: 0; border-top: 0;
} }
@ -783,11 +790,35 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-card-large .post-card-image-link { .post-card-large .post-card-image-link {
position: relative; position: relative;
grid-column: 1 / span 2; grid-column: span 13;
margin-bottom: 0; margin-bottom: 0;
min-height: 380px; min-height: 380px;
} }
.post-card-large .post-card-content {
grid-column: span 7;
}
.post-card-large .post-card-image {
position: absolute;
width: 100%;
height: 100%;
}
.post-card-large .post-card-primary-tag {
margin-bottom: 14px;
}
.post-card-large .post-card-title {
margin-top: 0;
font-size: 4rem;
line-height: 1.05;
}
.post-card-large .post-card-excerpt {
margin-top: 16px;
}
.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;
@ -800,29 +831,17 @@ make sure this only happens on large viewports / desktop-ish devices.
padding-bottom: 60%; padding-bottom: 60%;
} }
.post-card-large .post-card-image {
position: absolute;
width: 100%;
height: 100%;
}
.post-card-large .post-card-content {
justify-content: center;
}
.post-card-large .post-card-title {
margin-top: 0;
font-size: 3.2rem;
}
.post-feed.list .post-card-large .post-card-title { .post-feed.list .post-card-large .post-card-title {
font-size: 2.4rem; font-size: 2.4rem;
} }
.post-card-large .post-card-excerpt p { .post-card:nth-child(2),
font-size: 1.7rem; .post-card:nth-child(3) {
line-height: 1.55em; grid-column: span 3;
-webkit-line-clamp: 8; }
.post-card:is(:nth-child(2), :nth-child(3)) .post-card-title {
font-size: 3rem;
} }
} }

View File

@ -31,29 +31,17 @@ which templates loop over to generate a list of posts. --}}
{{/if}} {{/if}}
<h2 class="post-card-title">{{title}}</h2> <h2 class="post-card-title">{{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="sep">—</span>
{{#if profile_image}} <span class="post-card-meta-length">{{reading_time}}</span>
<a href="{{url}}" class="static-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" />
</a>
{{else}}
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}} {{/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}}</span>
</div>
</footer> </footer>
</div>{{!--/.post-card-content--}} </div>{{!--/.post-card-content--}}