Viel

layouts/shows/list.html

@@ -1,59 +1,32 @@
 {{ define "main" }}
+{{ $upcoming := (where .Pages "Date" "ge" now).ByDate }}
+{{ $past := (where .Pages "Date" "lt" now).ByDate.Reverse }}
 
-    <h1>{{ .Title }}</h1>
-    <ul>
-        {{ range .Pages }}
+<header class="page-head wrap">
+    <h1 class="display display--xl">{{ .Title }}</h1>
+    {{ with .Content }}<div class="page-head__lead">{{ . }}</div>{{ end }}
+</header>
 
-        <div id="shows">
-            <div class="shows-row">
-                <div id="shows-image">
-                    <img src="{{ .Params.poster}}" width="300" height="300">
-                </div>
-                <div class="shows-text">
-                    <strong>{{ .Params.date.Format "2006-01-02" }}</strong> – {{ .Params.location }} – {{ .Title }}
-                </div>
-                
-            </div>
+<section class="wrap shows-block" aria-labelledby="kommend">
+    <h2 id="kommend" class="display">Kommende Termine</h2>
+    {{ with $upcoming }}
+    <div class="flyer-wall">
+        {{ range . }}{{ partial "show-card.html" . }}{{ end }}
+    </div>
+    {{ else }}
+    <p class="live__empty">Gerade sind keine Termine angekündigt. Ihr wollt uns auf eurer Bühne? Schreibt an <a href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>.</p>
+    {{ end }}
+</section>
+
+<section class="wrap shows-block" aria-labelledby="archiv">
+    <h2 id="archiv" class="display">Archiv</h2>
+    {{ range $past.GroupByDate "2006" }}
+    <div class="year-group">
+        <h3 class="year-group__year">{{ .Key }}</h3>
+        <div class="flyer-wall">
+            {{ range .Pages }}{{ partial "show-card.html" . }}{{ end }}
         </div>
-
-        {{ end }}
-    </ul>
-
-<style>
-#shows {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-.shows-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 2rem 0;
-    gap: 2rem;
-}
-
-.shows-text {
-    flex: 1;
-}
-
-.shows-image img {
-    width: 300px;
-    height: auto;
-    border-radius: 10px;
-}
-
-@media (max-width: 768px) {
-    .shows-row {
-        flex-direction: column-reverse;
-        text-align: center;
-    }
-    .shows-image img {
-        width: 80%;
-        margin: 0 auto;
-    }
-}
-</style>
+    </div>
+    {{ end }}
+</section>
 {{ end }}
-