unify toc layouts

This commit is contained in:
Jan Wolff 2023-11-05 15:51:37 +01:00
parent 62445877d4
commit 04e18b763a
4 changed files with 26 additions and 66 deletions

View file

@ -7,15 +7,23 @@
</header>
{{.Content}}
</article>
<ul class="blogtoc">
<ul class="toc">
{{ range .Pages }}
<li>
<a class="sub-container" href="{{.Permalink}}">
<span>{{.Date.Format "02. January 2006"}}</span><br>
<span>{{.Title}}</span>
<div>
<span>{{.Date.Format "02. January 2006"}}</span><br>
<span>{{.Title}}</span>
</div>
{{if .Params.teaser}}
<div class="img-container">
<div class="img-container-child" style="background-image: url({{.Params.teaser}})">
</div>
</div>
{{end}}
</a>
</li>
{{ end }}
</ul>
</main>
{{ end }}
{{ end }}

View file

@ -1,26 +0,0 @@
{{ define "main" }}
<main class="big-container">
<article>
<header>
<h1>{{.Title}}</h1>
</header>
{{.Content}}
</article>
<ul class="projecttoc">
{{ range .Pages }}
<li>
<a class="sub-container" href="{{.Permalink}}">
{{if .Params.teaser}}
<div class="img-container">
<div class="img-container-child" style="background-image: url({{.Params.teaser}})">
</div>
</div>
{{end}}
<span>{{.Title}} ({{ .Date.Format "2006" }})</span>
</a>
</li>
{{ end }}
</ul>
</main>
{{ end }}

View file

@ -1,28 +0,0 @@
{{ define "main" }}
<section id="main" class="big-container">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
<aside id="meta" class="big-container">
<div>
{{ with .Params.topics }}
<ul id="topics">
{{ range . }}
<li><a href="{{ "topics" | absURL}}{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
{{ end }}
{{ with .Params.tags }}
<ul id="tags">
{{ range . }}
<li> <a href="{{ "tags" | absURL }}{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
{{ end }}
</div>
</aside>
{{ end }}

View file

@ -104,22 +104,24 @@ nav li.active a {
text-decoration: underline;
}
ul.blogtoc, ul.projecttoc {
ul.toc {
list-style-type: none;
padding: 0;
}
ul.blogtoc li {
ul li {
margin: 1em 0;
}
.projecttoc {
ul.toc > li > .sub-container {
display: flex;
flex-wrap: wrap;
}
ul.projecttoc li {
flex: 1 0 50%;
ul.toc > li > .sub-container > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
pre {
@ -148,8 +150,12 @@ footer {
margin: 0.2em 0;
}
ul.projecttoc li {
flex: 1 0 100%;
ul.toc > li > .sub-container {
flex-direction: column;
}
ul.toc > li > .sub-container > div {
flex: unset;
}
}