updated list and terms layout based on inspiration from laurakalbag

This commit is contained in:
wgroeneveld 2020-05-27 15:08:13 +02:00
parent 7121123b05
commit 9cd9d6654f
10 changed files with 108 additions and 54 deletions

View File

@ -3,9 +3,9 @@
<main>
{{ if .Title }}
<h2>
<h1>
<i class='fa {{ .Params.icontag }}'></i>&nbsp;{{ .Title }}
</h2>
</h1>
<hr/>
{{ end }}
@ -13,35 +13,44 @@
<div class="text-justify">
{{ . }}
</div>
<hr/>
{{ end }}
{{ if (not .Params.disableList) }}
{{ range .Data.Pages.GroupByDate "01-2006" "desc" }}
<h4 style="float: left; color: grey;">{{ .Key }}</h4>
<ul style="text-align: left; float: left; margin-left: 20px; width: 80%; list-style-type: none; border-left: #eee 1px solid;">
{{ range .Pages.ByDate.Reverse }}
{{ .Date.Format (.Site.Params.dateFormat | default "2 January") | $.Scratch.Set "subtitle" }}
{{ with .Description }} {{ $.Scratch.Set "subtitle" . }} {{ end }}
<div class="list">
{{ range .Paginator.Pages.GroupByDate "2006" "desc" }}
<h2>{{ .Key }}</h2>
<li style="margin-bottom: 15px;">
{{ range .Pages.GroupByDate "January" }}
<h3>{{ .Key }}</h3>
<ul class="list-ul">
{{ range .Pages.ByDate.Reverse }}
<li>
<span class="list-date">{{ .Date.Format ("02") }}</span>
<div class="list-title">
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
{{ .Params.subtitle }}
</div>
{{ if isset .Params "tags" }}
<div class="list-tags">
<i class='fa fa-tags' style='color: grey;'></i>&nbsp;
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>
{{ end }}
</li>
{{ end }}
</ul>
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
{{ with .Params.archived }}
<kbd class="item-tag">Archived</kbd>
{{ end }}
{{ .Params.subtitle }}
<span style="color: lightgrey;">
<i class='fa fa-calendar'></i>&nbsp;{{ $.Scratch.Get "subtitle" }}
</span>
</li>
{{ end }}
</ul>
<hr style="clear: both;"/>
{{ end }}
{{ end }}
{{ end }}
</div>
{{ end }}
{{ template "_internal/pagination.html" . }}
</main>

View File

@ -5,40 +5,41 @@
<h2>
<i class='fa fa-tags'></i>&nbsp;Tagged with: <br/>"{{ .Title }}"
</h2>
<hr/>
{{ with .Content }}
<div class="text-justify">
{{ . }}
</div>
<hr/>
{{ end }}
<div class="list">
{{ range .Paginator.Pages.GroupByDate "2006" "desc" }}
<h2>{{ .Key }}</h2>
{{ range .Data.Pages.GroupByDate "01-2006" "desc" }}
<h4 style="float: left; color: grey;">{{ .Key }}</h4>
<ul style="text-align: left; float: left; margin-left: 20px; width: 80%; list-style-type: none; border-left: #eee 1px solid;">
{{ range .Pages.ByDate.Reverse }}
{{ .Date.Format (.Site.Params.dateFormat | default "2 January") | $.Scratch.Set "subtitle" }}
{{ with .Description }} {{ $.Scratch.Set "subtitle" . }} {{ end }}
{{ range .Pages.GroupByDate "January" }}
<h3>{{ .Key }}</h3>
<li style="margin-bottom: 15px;">
<ul class="list-ul">
{{ range .Pages.ByDate.Reverse }}
<li>
<span class="list-date">{{ .Date.Format ("02") }}</span>
<div class="list-title">
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
{{ .Params.subtitle }}
</div>
{{ if isset .Params "tags" }}
<div class="list-tags">
<i class='fa fa-tags' style='color: grey;'></i>&nbsp;
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>
{{ end }}
</li>
{{ end }}
</ul>
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
{{ with .Params.archived }}
<kbd class="item-tag">Archived</kbd>
{{ end }}
{{ .Params.subtitle }}
<span style="color: lightgrey;">
<i class='fa fa-calendar'></i>&nbsp;{{ $.Scratch.Get "subtitle" }}
</span>
</li>
{{ end }}
</ul>
<hr style="clear: both;"/>
{{ end }}
{{ end }}
</div>
{{ template "_internal/pagination.html" . }}
</main>

View File

@ -13,7 +13,7 @@
</div>
{{ end }}
<div class="text-justify">
<div class="list">
<!-- https://discourse.gohugo.io/t/lists-of-content-divided-by-posts-first-letter/8534/2 - create a list with all uppercase letters -->
{{ $letters := split "ABCDEFGHIJKLMNOPQRSTUVWXYZ" "" }}

View File

@ -1,3 +1,47 @@
.list {
text-align: left;
padding-left: 4rem;
}
.list h2 {
border-top: 1px solid #eee;
padding-top: 1rem;
}
.list h3 {
color: #999;
}
.list-ul {
list-style: none;
margin: 0;
padding: 0;
}
.list-ul li {
padding: 1rem;
}
.list-ul .list-date {
font-weight: normal;
padding-left: 0.6rem;
padding-right: 0.6rem;
color: white;
background-color: var(--accent);
border-radius: 2rem;
margin-top: 1.5rem;
float: left;
}
.list-ul div {
margin-left: 60px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
background-color: white !important;
border-color: var(--accent) !important;
}
/** commento specific **/
.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
.commento-root .commento-round-check input[type=radio]:checked+label:before {

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

BIN
static/img/trackers-js.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB