thallada/thallada.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve blog post headers with flexbox

Browse Source
This commit is contained in:
Tyler Hallada 2022-10-05 18:42:35 -04:00
parent afefaadabd
commit 110fee1fc5
3 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/post.html
View File

@ -2,11 +2,9 @@
layout: default layout: default
--- ---
<div class="card"> <div class="card">
<div class="row clearfix post-header"> <div class="row clearfix">
<div class="column three-fourths"> <div class="column full post-header">
<h2 class="post-title"><a href="{{ post.url }}">{{ page.title }}</a></h2> <h2 class="post-title"><a href="{{ post.url }}">{{ page.title }}</a></h2>
</div>
<div class="column fourth">
<span class="timestamp">{{ page.date | date_to_string }}</span> <span class="timestamp">{{ page.date | date_to_string }}</span>
</div> </div>
</div> </div>

6
blog/index.html
View File

@ -6,11 +6,9 @@ title: Tyler Hallada - Blog
{% for post in paginator.posts %} {% for post in paginator.posts %}
{% if post.hidden == null or post.hidden == false %} {% if post.hidden == null or post.hidden == false %}
<div class="card"> <div class="card">
<div class="row clearfix post-header"> <div class="row clearfix">
<div class="column three-fourths"> <div class="column full post-header">
<h2 class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></h2> <h2 class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
</div>
<div class="column fourth">
<span class="timestamp">{{ post.date | date_to_string }}</span> <span class="timestamp">{{ post.date | date_to_string }}</span>
</div> </div>
</div> </div>

18
css/main.css
View File

@ -148,6 +148,8 @@ blockquote p {
.column.third { width: 33.3%; } .column.third { width: 33.3%; }
.column.fourth { width: 25%; } .column.fourth { width: 25%; }
.column.three-fourths { width: 75%; } .column.three-fourths { width: 75%; }
.column.fifth { width: 20%; }
.column.four-fifths { width: 80%; }
.column.flow-opposite { float: right; } .column.flow-opposite { float: right; }
} }
@ -244,18 +246,18 @@ div.header a {
} }
span.timestamp { span.timestamp {
display: block;
font-size: 0.85rem; font-size: 0.85rem;
margin-top: 7px; margin-top: 8px;
}
@media (min-width: 40rem) {
span.timestamp {
float: right;
}
} }
.post-header { .post-header {
padding-bottom: 10px; padding-bottom: 24px;
display: flex;
align-items: start;
justify-content: space-between;
column-gap: 12px;
flex-wrap: wrap;
} }
a.read-more { a.read-more {