Rewrote lists to use tables instead of flexbox

This commit is contained in:
Nox Sluijtman 2022-09-26 19:23:45 +02:00
parent 321d3a19f9
commit 0934cae834
3 changed files with 34 additions and 74 deletions

View file

@ -8,45 +8,25 @@
{{ if .IsHome }}
{{ $PageContext = .Site }}
{{ end }}
{{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
{{ range $paginator.Pages }}
<article class="post on-list">
<div class="post-meta">
{{ if .Params.Date }}
<span>
<a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
<span> - </span>
<span class="post-date">
{{ .Date.Format "2006-01-02" }}
{{ if $.Site.Params.showLastUpdated }}
{{or $.Site.Params.updatedDatePrefix "Updated"}}: {{ .Lastmod.Format "2006-01-02" }}]
<div class="posts">
<table class="post-meta">
{{ range .Paginator.Pages }}
<tr>
<td><a href="{{ .RelPermalink }}">{{ .Title | markdownify}}</a></td>
<td>{{ .Params.Date.Format "2006-01-02" }}</td>
<td>{{ .Params.Author }}</td>
<td > {{ range .Params.tags }} #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp; {{ end }}</td>
<!--
{{ if and (.Param "readingTime") (eq (.Param "readingTime") true) }}
<td class="post-reading-time">- {{ .ReadingTime }} min read ({{ .WordCount }} words)</td>
{{ end }}
</span>
-->
</tr>
{{ end }}
{{ with .Params.Author }}
<span> - </span>
<span class="post-author">{{ . }}</span>
{{ end }}
{{ if and (.Param "readingTime") (eq (.Param "readingTime") true) }}
<span class="post-reading-time">- {{ .ReadingTime }} min read ({{ .WordCount }} words)</span>
{{ end }}
</span>
{{ if .Params.tags }}
<span class="post-tags">
{{ range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp;
{{ end }}
</span>
{{ end }}
</div>
</article>
{{ end }}
</table>
</div>
{{ partial "pagination.html" . }}
{{ partial "stickers.html" . }}
</div>

View file

@ -4,42 +4,22 @@
{{ .Content -}}
</article>
{{ end }}
<div class="posts">
<div class="posts">
<table class="post-meta">
{{ range .Paginator.Pages }}
<div class="post-meta">
{{ if .Params.Date }}
<span>
<a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
<span> - </span>
<span class="post-date">
{{ .Date.Format "2006-01-02" }}
{{ if $.Site.Params.showLastUpdated }}
{{or $.Site.Params.updatedDatePrefix "Updated"}}: {{ .Lastmod.Format "2006-01-02" }}]
{{ end }}
</span>
{{ end }}
{{ with .Params.Author }}
<span> - </span>
<span class="post-author">{{ . }}</span>
{{ end }}
<tr>
<td><a href="{{ .RelPermalink }}">{{ .Title | markdownify}}</a></td>
<td>{{ .Params.Date.Format "2006-01-02" }}</td>
<td>{{ .Params.Author }}</td>
<td > {{ range .Params.tags }} #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp; {{ end }}</td>
<!--
{{ if and (.Param "readingTime") (eq (.Param "readingTime") true) }}
<span class="post-reading-time">- {{ .ReadingTime }} min read ({{ .WordCount }} words)</span>
<td class="post-reading-time">- {{ .ReadingTime }} min read ({{ .WordCount }} words)</td>
{{ end }}
</span>
{{ if .Params.tags }}
<span class="post-tags">
{{ range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp;
{{ end }}
</span>
{{ end }}
</div>
</div>
{{ end }}
-->
</tr>
{{ end }}
</table>
</div>
{{ partial "pagination.html" . }}
{{ end }}

View file

@ -76,10 +76,10 @@ header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; fo
-moz-animation: gay 8s ease-in-out infinite;
-webkit-animation: gay 8s ease-in-out infinite;
}
.post-meta{margin-bottom: .5em; border-bottom: solid 1pt;}
.on-list{color: var(--ansi07);}
.post-meta{color: var(--ansi07); display:flex; justify-content: space-between; }
.post-tags a{text-decoration:none; color:inherit;}
table{color: var(--ansi07); margin-bottom: .5em; }
.post-meta{ width: 100%; background-color: var(--ansi00); border-radius: 1em; padding:.5em;}
.post-meta a{text-decoration: none;}
.post-tags a{ color:inherit;}
.post-tags a:hover{text-decoration:none; color:var(--ansi15); background:inherit;}
.button{padding:.3em;border-radius:.3em;}
.pagination__buttons{display:flex; justify-content:center;}