Create mobile firndly archive

Closes #22
This commit is contained in:
Christian Wolf 2024-01-07 12:51:52 +01:00
parent 7642b6ac29
commit f66e4aa190
3 changed files with 110 additions and 0 deletions

View File

@ -3,6 +3,7 @@ title: "Archiv"
date: 2023-01-20T16:27:40+01:00 date: 2023-01-20T16:27:40+01:00
draft: false draft: false
# type: home # type: home
layout: archive
menu: menu:
main: main:
weight: 4 weight: 4

View File

@ -27,6 +27,12 @@ $gap_columns_persons: 25px;
} }
} }
@mixin mouse-available {
@media screen and (pointer: fine) {
@content;
}
}
/* main styling */ /* main styling */
body { body {
@ -630,6 +636,46 @@ h1 {
} }
} }
.archive-short-links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0;
li {
display: block;
padding: 5px;
}
}
.archive-year-list {
display: flex;
margin: 5px 0;
align-items: baseline;
@include mouse-available() {
margin: 0;
}
.date {
font-weight: bold;
// height: 100%;
}
.title {
margin: 0 0 0 10px;
text-align: left;
a {
display: block;
padding: 6.5px 0;
@include mouse-available() {
padding: 3px 0;
}
}
}
}
@font-face{ @font-face{
font-family: 'Open Sans Condensed'; font-family: 'Open Sans Condensed';
font-style: normal; font-style: normal;

View File

@ -0,0 +1,63 @@
{{ define "main" }}
<a name="top">
<h1>{{ .Title }}</h1>
</a>
{{ $archiveGroups := (( where .Site.RegularPages "Section" "==" "news").GroupByDate "2006" ) }}
<ul class="archive-short-links">
{{ range $archiveGroups }}
<li><a href="#year-{{ .Key }}">{{ .Key }}</a></li>
{{ end }}
</ul>
{{ range $archiveGroups }}
<h2><a id="year-{{ .Key }}">{{ .Key }}</a></h2>
{{ range .Pages.ByDate.Reverse }}
<div class="archive-year-list">
<div class="date">{{ .Date.Format "02.01.2006" }}</div>
<div class="title">
<a href="{{ .RelPermalink}}">
{{ .Title }}
</a>
</div>
</div>
{{ end }}
<div class="archive-to-top">
[<a href="#top">Zurück</a>]
</div>
{{ end }}
<!-- <div class="news-blog">
{{ range (.Paginate (first 30 ( where .Site.RegularPages "Section" "==" "news")) 10 ).Pages }}
{{ $urlBlogEntry := .RelPermalink}}
<div class="blog-entry">
<div class="header">
{{ .Date.Format "02.01.2006" }}
<a href="{{ $urlBlogEntry }}">{{ .Title }}</a>
</div>
<div class="details">
<div class="teaser-image">
{{ $page := . }}
{{ if .Params.Image }}
{{ with (.Resources.GetMatch (.Params.Image)).Fit "290x190 webp" }}
<a href="{{ $urlBlogEntry }}">
<img src="{{ .RelPermalink }}">
</a>
{{ end }}
{{ end }}
</div>
<div class="right-side">
<div class="intro">
{{ with .Summary }}
{{ . }}
{{ end }}
</div>
<div class="more"><a href="{{ $urlBlogEntry }}">MEHR...</a></div>
</div>
</div>
</div>
{{ end }}
{{ template "_internal/pagination.html" . }}
</div>
{{ .Content }} -->
{{ partial "totop" }}
{{ end }}