Many tweaks
This commit is contained in:
parent
eda0ec4db2
commit
ad9cb81a06
4 changed files with 34 additions and 8 deletions
|
@ -294,6 +294,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||||
|
|
||||||
.post-card {
|
.post-card {
|
||||||
flex: 1 1 300px;
|
flex: 1 1 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
margin: 0 15px 30px;
|
margin: 0 15px 30px;
|
||||||
background: #fff center center;
|
background: #fff center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
@ -339,6 +341,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-excerpt {
|
.post-card-excerpt {
|
||||||
|
@ -349,6 +352,20 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||||
padding: 0 25px 25px;
|
padding: 0 25px 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-profile-image {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
margin-right: 5px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-author {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
/* Special Styling for first item (below):
|
/* Special Styling for first item (below):
|
||||||
|
|
||||||
The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
|
The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
|
||||||
|
@ -359,7 +376,7 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||||
|
|
||||||
.post-feed .post-card:nth-child(6n+1) {
|
.post-feed .post-card:nth-child(6n+1) {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
display: flex;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-feed .post-card:nth-child(6n+1) .post-card-image-link {
|
.post-feed .post-card:nth-child(6n+1) .post-card-image-link {
|
||||||
|
@ -479,7 +496,7 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: -5px;
|
left: -5px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background: rgba(39,44,49,0.20);
|
background: rgba(39,44,49,0.15);
|
||||||
filter: blur(5px);
|
filter: blur(5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -493,10 +510,15 @@ The first (most recent) post in the list is styled to be bigger than the others
|
||||||
top: 15px;
|
top: 15px;
|
||||||
right: -5px;
|
right: -5px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background: rgba(39,44,49,0.20);
|
background: rgba(39,44,49,0.15);
|
||||||
filter: blur(5px);
|
filter: blur(5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-full-content > p:first-of-type {
|
||||||
|
font-size: 2.7rem;
|
||||||
|
line-height: 1.55em;
|
||||||
|
}
|
||||||
|
|
||||||
.post-full-content blockquote {
|
.post-full-content blockquote {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -17,9 +17,13 @@
|
||||||
</section>
|
</section>
|
||||||
</a>
|
</a>
|
||||||
<footer class="post-card-meta">
|
<footer class="post-card-meta">
|
||||||
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
|
{{#if author.profile_image}}
|
||||||
{{author}}
|
<img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />
|
||||||
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
|
{{/if}}
|
||||||
|
<span class="post-card-author">{{author}}</span>
|
||||||
|
{{#if tags}}
|
||||||
|
<span class="poar-card-tags"> in <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
|
||||||
|
{{/if}}
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
Loading…
Reference in a new issue