Create mobile firndly archive

Closes #22

content/page/aktuell/archiv/_index.md

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

themes/tsc_vfl/assets/css/main.scss

@@ -27,6 +27,12 @@ $gap_columns_persons: 25px;
     }
 }
 
+@mixin mouse-available {
+    @media screen and (pointer: fine) {
+        @content;
+    }
+}
+
 /* main styling */
 
 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-family: 'Open Sans Condensed';
     font-style: normal;

themes/tsc_vfl/layouts/_default/archive.html

@@ -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 }}
+