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

Blog: enhance layout

Browse source
This commit is contained in:
Théophile Bastian 2024-04-10 15:43:52 +02:00
parent de415ad907
commit e59b755090
6 changed files with 157 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/_default/baseof.html
View file

@ -31,7 +31,7 @@
{{ partial "menu" . }}
</div>
<div id="content">
<div id="content" class="{{ block "contentclass" . }}{{ end }}">
{{ block "pagename" . }}
{{ end }}

1
layouts/blog/list.html
View file

@ -10,7 +10,6 @@
<div id="entries">
{{ range .Pages }}
{{ partial "blog/entry_list.html" . }}
<hr />
{{ end }}
</div>
{{ end }}

20
layouts/blog/single.html Normal file
View file

@ -0,0 +1,20 @@
{{ define "profilepic" }}<div class="nopic"></div>{{ end }}
{{ define "contentclass" }}blog{{ end }}
{{ define "pagename" }}
<div id="post_head">
<div id="post_date">{{ .Date | time.Format ":date_medium" }}</div>
{{ with .GetTerms "blog/tags" }}
<ul id="post_tags">
{{ range . -}}
<li class="tag"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
{{ end }}
<h1>{{ .Title }}</h1>
</div>
{{ end }}
{{ define "main" }}
{{ .Content }}
{{ end }}

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

@ -1,13 +1,13 @@
<div class="blog_entry">
<div class="blog_entry_descr">
<a href="{{ .Permalink }}" class="blog_entry_title">{{ .Title }}</a>
<span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
</div>
<div class="blog_entry_meta">
{{ with .GetTerms "blog/tags" }}
<ul class="blog_entry_tags">
{{ range . -}}
<li class="tag"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</li>
</ul>
{{ end }}
<span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
</div>
<a href="{{ .Permalink }}" class="blog_entry_title">{{ .Title }}</a>
</div>

82
scss/_blog.scss
View file

@ -5,48 +5,94 @@
#entries {
.blog_entry {
padding: 15px 0;
.blog_entry_descr {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
.blog_entry_title {
display: block;
font-size: 1.1em;
text-align: left;
}
.blog_entry_date {
color: $fg_color_light;
.blog_entry_meta {
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 10px;
font-style: italic;
font-size: 0.9em;
color: $fg_color_light;
}
.blog_entry_date {
display: block;
align-self: flex-start;
}
}
.blog_entry_tags::before {
content: "Tags:"
}
.blog_entry_tags {
list-style: none;
padding-left: 0;
margin: 5px 0;
font-size: 0.9em;
margin: 0;
li {
display: inline;
}
li ~ li::before {
content: ", ";
}
&::before {
content: "Tags:"
}
}
}
}
#post_head {
margin: 20px 0;
h1 {
margin: 5px 0;
}
#post_date {
text-align: right;
font-style: italic;
}
#post_tags {
display: flex;
justify-content: flex-end;
list-style: none;
padding-left: 0;
margin: 5px 0;
&::before {
content: "Tags: ";
font-style: italic;
padding-right: 1em;
}
li {
font-style: italic;
}
li ~ li::before {
content: ", ";
}
}
}
.blog {
.highlight>pre {
padding: 10px;
border-radius: 10px;
}
hr {
width: 80%;
border-color: $fg_color_light;
img {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 60vh;
border-radius: 10px;
}
hr:last-child {
display: none;
blockquote {
font-style: italic;
border-left: 3px solid #8b8bbd;
padding-left: 15px;
margin-left: 25px;
}
}

69
static/css/style.css
View file

@ -2,39 +2,70 @@
@import url("fonts.css");
#entries .blog_entry {
padding: 15px 0; }
#entries .blog_entry .blog_entry_descr {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px; }
#entries .blog_entry .blog_entry_descr .blog_entry_title {
#entries .blog_entry .blog_entry_title {
display: block;
font-size: 1.1em;
text-align: left; }
#entries .blog_entry .blog_entry_descr .blog_entry_date {
color: #555555bb;
#entries .blog_entry .blog_entry_meta {
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 10px;
font-style: italic;
font-size: 0.9em;
color: #555555bb; }
#entries .blog_entry .blog_entry_date {
display: block;
align-self: flex-start; }
#entries .blog_entry .blog_entry_tags::before {
content: "Tags:"; }
#entries .blog_entry .blog_entry_tags {
list-style: none;
padding-left: 0;
margin: 5px 0;
font-size: 0.9em; }
margin: 0; }
#entries .blog_entry .blog_entry_tags li {
display: inline;
font-style: italic; }
display: inline; }
#entries .blog_entry .blog_entry_tags li ~ li::before {
content: ", "; }
#entries .blog_entry .blog_entry_tags::before {
content: "Tags:"; }
#entries hr {
width: 80%;
border-color: #555555bb; }
#post_head {
margin: 20px 0; }
#post_head h1 {
margin: 5px 0; }
#post_head #post_date {
text-align: right;
font-style: italic; }
#post_head #post_tags {
display: flex;
justify-content: flex-end;
list-style: none;
padding-left: 0;
margin: 5px 0; }
#post_head #post_tags::before {
content: "Tags: ";
font-style: italic;
padding-right: 1em; }
#post_head #post_tags li {
font-style: italic; }
#post_head #post_tags li ~ li::before {
content: ", "; }
#entries hr:last-child {
display: none; }
.blog .highlight > pre {
padding: 10px;
border-radius: 10px; }
.blog img {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 60vh;
border-radius: 10px; }
.blog blockquote {
font-style: italic;
border-left: 3px solid #8b8bbd;
padding-left: 15px;
margin-left: 25px; }
html {
background-color: white; }