layout: improve post info in single or list pages
* Adds a lists-footer partial. * Uses breakpoints to adapt how the post informations is aligned and separated when the screen gets bigger. * Adds some space between posts in a list or section, to improve readability. * Removes useless article level and renames a section into article in the list template. * Uses breakpoints to adapt the navigation font-size when the screen gets bigger. * Improves the font-size variables, in order to get a font-size-small smaller. * Restores the section template that wasn't right, I don't know what I've done when rebasing and resolving conflicts… Co-Authored-by: Igor Milhit <igor@milhit.ch>merge-requests/4/head
parent
e1cf9185f3
commit
817756034b
|
@ -20,6 +20,12 @@ nav,
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include breakpoint(laptop) {
|
||||||
|
nav {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
line-height: 1.4; // TODO: fix homepage
|
line-height: 1.4; // TODO: fix homepage
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,5 +8,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
|
|
||||||
|
> article {
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,14 +13,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-info {
|
.post-info {
|
||||||
display: flex;
|
font-size: $font-size-small;
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
padding-right: .5rem;
|
padding-right: .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
@ -41,8 +39,27 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
.post-info {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
> li:not(:last-child) {
|
||||||
|
&::after {
|
||||||
|
content: ' /';
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.post-taxonomies:not(:last-child) {
|
.post-taxonomies:not(:last-child) {
|
||||||
&::after {
|
&::after {
|
||||||
content: ', ';
|
content: ', ';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-footer {
|
||||||
|
font-size: $font-size-small;
|
||||||
|
padding-left: .5em;
|
||||||
|
}
|
||||||
|
|
|
@ -4,8 +4,9 @@
|
||||||
// //
|
// //
|
||||||
///////////////////
|
///////////////////
|
||||||
|
|
||||||
$font-size-base: 1.25rem; // 20 px
|
$font-size-base: 1.25rem !default; // 25 px
|
||||||
$font-size-small: 1rem; // 16 px
|
$font-size-small: .9rem; // 18 px
|
||||||
|
|
||||||
|
|
||||||
/////////////////////
|
/////////////////////
|
||||||
// //
|
// //
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
<main class="container">
|
||||||
<header>
|
<header>
|
||||||
<h1>{{.Title}}</h1>
|
<h1>{{.Title}}</h1>
|
||||||
</header>
|
</header>
|
||||||
|
@ -6,17 +7,12 @@
|
||||||
{{.Content}}
|
{{.Content}}
|
||||||
<article class="posts-list">
|
<article class="posts-list">
|
||||||
<!-- Ranges through content/posts/*.md -->
|
<!-- Ranges through content/posts/*.md -->
|
||||||
{{ range .Pages.ByPublishDate.Reverse }}
|
{{ range .Pages }}
|
||||||
<article class="posts-list">
|
|
||||||
<article>
|
<article>
|
||||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
|
<a href="{{.Permalink}}">{{.Title}}</a>
|
||||||
</article>
|
{{ partial "lists-footer.html" . }}
|
||||||
<footer>
|
|
||||||
{{ if isset .Params "publishdate" }}
|
|
||||||
{{.PublishDate.Format "2006-01-02"}}
|
|
||||||
{{ end }}
|
|
||||||
</footer>
|
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</article>
|
</article>
|
||||||
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,31 +1,21 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<header>
|
<header>
|
||||||
<h1>{{.Title}}</h1>
|
<h1>{{.Title}}</h1>
|
||||||
</header>
|
</header>
|
||||||
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
||||||
<section>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
{{.Content }}
|
{{.Content }}
|
||||||
</header>
|
</header>
|
||||||
<section class="posts-list">
|
|
||||||
{{ range .Pages.ByPublishDate.Reverse }}
|
|
||||||
<article class="posts-list">
|
<article class="posts-list">
|
||||||
|
{{ range .Pages.ByPublishDate.Reverse }}
|
||||||
<article>
|
<article>
|
||||||
<a href="{{ .Permalink }}">
|
<a href="{{ .Permalink }}">
|
||||||
{{.Title}}
|
{{.Title}}
|
||||||
</a>
|
</a>
|
||||||
</article>
|
{{ partial "lists-footer.html" . }}
|
||||||
<footer>
|
|
||||||
{{ .PublishDate.Format "2006-01-02" }}
|
|
||||||
{{ with .Params.categories }}
|
|
||||||
{{ range . }}
|
|
||||||
/ <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</footer>
|
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</article>
|
||||||
</section>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
<footer class="list-footer">
|
||||||
|
{{ .Date.Format "2006-01-02" }}
|
||||||
|
{{ with .Params.categories }}
|
||||||
|
{{ range sort . }}
|
||||||
|
/ <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</footer>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<li>Catégories :
|
<li>Catégories :
|
||||||
<ul>
|
<ul>
|
||||||
{{ range sort . }}
|
{{ range sort . }}
|
||||||
<li class="post-taxonomies"> <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> </li>
|
<li><a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
@ -22,4 +22,3 @@
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue