tobast/tobast.fr-hugo
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Blog list: better layout

Browse source
This commit is contained in:
Théophile Bastian 2024-04-10 17:33:23 +02:00
parent acc6b594f8
commit f0dc1483a4
3 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/blog/entry_list.html
View file

@ -1,5 +1,6 @@
<div class="blog_entry"> <div class="blog_entry">
<div class="blog_entry_meta"> <div class="blog_entry_meta">
<span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
{{ with .GetTerms "blog/tags" }} {{ with .GetTerms "blog/tags" }}
<ul class="blog_entry_tags"> <ul class="blog_entry_tags">
{{ range . -}} {{ range . -}}
@ -7,7 +8,6 @@
{{- end }} {{- end }}
</ul> </ul>
{{ end }} {{ end }}
<span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
</div> </div>
<a href="{{ .Permalink }}" class="blog_entry_title">{{ .Title }}</a> <a href="{{ .Permalink }}" class="blog_entry_title">{{ .Title }}</a>
</div> </div>

6
scss/_blog.scss
View file

@ -4,7 +4,9 @@
#entries { #entries {
.blog_entry { .blog_entry {
padding: 25px 0; padding: 5px 0;
margin: 20px 0;
display: block;
.blog_entry_title { .blog_entry_title {
display: block; display: block;
@ -13,7 +15,7 @@
} }
.blog_entry_meta { .blog_entry_meta {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
align-items: center; align-items: center;
column-gap: 20px; column-gap: 20px;

6
static/css/style.css
View file

@ -1,14 +1,16 @@
@charset "UTF-8"; @charset "UTF-8";
@import url("fonts.css"); @import url("fonts.css");
#entries .blog_entry { #entries .blog_entry {
padding: 25px 0; } padding: 5px 0;
margin: 20px 0;
display: block; }
#entries .blog_entry .blog_entry_title { #entries .blog_entry .blog_entry_title {
display: block; display: block;
font-size: 1.1em; font-size: 1.1em;
text-align: left; } text-align: left; }
#entries .blog_entry .blog_entry_meta { #entries .blog_entry .blog_entry_meta {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
align-items: center; align-items: center;
column-gap: 20px; column-gap: 20px;
font-style: italic; font-style: italic;