peterkrzyzek/ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Simple post list styling

Browse source
This commit is contained in:
John O'Nolan 2019-11-14 00:02:21 +07:00
parent 974a9e8df6
commit 137d1675ba
5 changed files with 43 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

6
assets/css/components/global.css
View file

@ -125,7 +125,7 @@ h4,
h5,
h6 {
margin: 0;
line-height: 1.1em;
line-height: 1.15em;
font-weight: 700;
}
@ -140,11 +140,11 @@ h1 {
}
h2 {
font-size: 3.4rem;
font-size: 3.6rem;
}
@media (max-width: 500px) {
h2 {
font-size: 2rem;
font-size: 2.2rem;
}
}

37
assets/css/screen.css
View file

@ -75,19 +75,46 @@ html,
/* ---------------------------------------------------------- */
.post-card {
margin: 0 0 4vw;
margin: 0 auto 6vw;
}
.post-card-link {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.post-card-image {
margin-left: 4vw;
width: 300px;
height: 200px;
width: 100%;
max-height: 700px;
object-fit: cover;
margin-bottom: 2vw;
}
.post-card-meta {
display: block;
margin: 0 0 1rem;
font-size: 1.3rem;
text-transform: uppercase;
opacity: 0.6;
}
.post-card-content {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.post-card-content p {
margin: 1rem 0;
padding: 0 4vw;
}
.post-card-content > strong {
display: inline-block;
padding: 1px 0;
font-weight: 500;
box-shadow: 0 -1px 0 0 inset currentColor;
opacity: 0.6;
}

10
partials/post-card.hbs
View file

@ -4,10 +4,6 @@ Re-usable card for linking to posts
<article class="post-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
<a class="post-card-link" href="{{url}}">
<div class="post-card-content">
<h2 class="post-card-title">{{title}}</h2>
<p>{{excerpt}}</p>
</div>
{{#if feature_image}}
<img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,
@ -19,5 +15,11 @@ Re-usable card for linking to posts
alt="{{title}}"
/>
{{/if}}
<div class="post-card-content">
<span class="post-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
<h2 class="post-card-title">{{title}}</h2>
<p>{{excerpt}}</p>
<strong>Read more</strong>
</div>
</a>
</article>