Redesign archive

_includes/head.html

@@ -7,6 +7,7 @@
 
   <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link href="/css/custom.css" rel="stylesheet">
+  <link href="/css/archive_cards.css" rel="stylesheet">
   <link href="/css/syntax.css" rel="stylesheet">
   <link href="/css/admonition.css" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"

_layouts/archive.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+<div class="container sidebar-sticky">
+  <div id="toc-sidebar-title">
+    Auf dieser Seite:
+  </div>
+  <nav class="toc-sidebar">
+    {% include toc.html html=content sanitize=true h_min=1 h_max=3 %}
+  </nav>
+</div>
+
+{{ content }}

archive.md

@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: archive
 permalink: /archive/
 title: Archiv
 description: Hier befinden sich die Materialien vergangener Veranstaltungen.
@@ -40,9 +40,10 @@ description: Hier befinden sich die Materialien vergangener Veranstaltungen.
 <!-- - <a href="https://github.com/pep-dortmund/toolbox-workshop-protocol-template" target="_blank">LaTeX Vorlage für Protokolle</a> -->
 
 #### Alles zusammen als Archiv
-<!-- - [Archiv download](/files/archive/current.tar.gz) -->
+<!-- - [Archiv-Download `.tar.gz`](/files/archive/current.tar.gz) -->
+<!-- - [Archiv-Download `.zip`](/files/archive/current.zip) -->
 
-<p class="lead">Hier befinden sich die Materialien vergangener Veranstaltungen.</p>
+---
 
 ## Wintersemester 2023/24
 [//]: <> (Referring to latest version.)
@@ -77,51 +78,114 @@ description: Hier befinden sich die Materialien vergangener Veranstaltungen.
 - <a href="https://github.com/pep-dortmund/toolbox-workshop-protocol-template" target="_blank">LaTeX Vorlage für Protokolle</a>
 
 #### Alles zusammen als Archiv
-- [Archiv download](/files/archive/latest.tar.gz)
-
-
-## Wintersemester 2022/23
-
-- [Archiv download](/files/archive/2022.tar.gz)
-
-## Wintersemester 2021/22
-
-- [Archiv download](/files/archive/2021.tar.gz)
-
-## Wintersemester 2020/21
-
-- [Archiv download](/files/archive/2020.tar.gz)
-
-## Wintersemester 2019/20
-
-- [Archiv download](/files/archive/2019.tar.gz)
-
-## Wintersemester 2018/19
-
-- [Archiv download](/files/archive/2018.tar.gz)
+- [Archiv-Download `.tar.gz`](/files/archive/latest.tar.gz)
+- [Archiv-Download `.zip`](/files/archive/latest.zip)
 
-## Wintersemester 2017/18
-
-- [Archiv download](/files/archive/2017.tar.gz)
-
-## Wintersemester 2016/17
-
-- [Archiv download](/files/archive/2016.tar.gz)
-
-## Wintersemester 2015/16
-
-- [Archiv download](/files/archive/2015.tar.gz)
-
-## Wintersemester 2014/15
-
-- [Archiv download](/files/archive/2014.tar.gz)
-
-## Wintersemester 2013/14
-
-- [Archiv download](/files/archive/2013.tar.gz)
-
-## Wintersemester 2012/13
+---
 
-- [Archiv download](/files/archive/2012.tar.gz)
+## Materialien älterer Veranstaltungen
+
+<div class="archive-grid">
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2022/23</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2022.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2022.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2021/22</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2021.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2021.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2020/21</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2020.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2020.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2019/20</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2019.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2019.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2018/19</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2018.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2018.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2017/18</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2017.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2017.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2016/17</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2016.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2016.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2015/16</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2015.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2015.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2014/15</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2014.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2014.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2013/14</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2013.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2013.zip" class="archive-dl"></a>
+    </div>
+  </div>
+  <div class="grid-item">
+    <div class="archive-card">
+      <div class="archive-title">WS 2012/13</div>
+      <div class="archive-body"> tar</div>
+      <a href="/files/archive/2012.tar.gz" class="archive-dl"></a>
+      <div class="archive-body"> zip</div>
+      <a href="/files/archive/2012.zip" class="archive-dl"></a>
+    </div>
+  </div>
+</div>
 
+---
 Der Programm-Code befindet sich unter der [MIT-Lizenz](http://opensource.org/licenses/MIT), die Texte unter [Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0/).

css/archive_cards.css

@@ -0,0 +1,72 @@
+.archive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 10px;
+  align-items: center;
+  justify-items: center;
+}
+
+.archive-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 21rem;
+  height: 9rem;
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  font-size: 1.5rem;
+  --gradient: linear-gradient(to bottom, var(--pep-blue), white);
+  --color: #32a6ff;
+  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
+}
+
+.archive-card:after {
+  position: absolute;
+  content: "";
+  width: 0.25rem;
+  inset: 0.65rem auto 0.65rem 0.5rem;
+  border-radius: 0.125rem;
+  background: var(--pep-blue);
+  transition: transform 300ms ease;
+  z-index: 4;
+}
+
+.archive-title {
+  opacity: 1;
+  color: var(--pep-gray);
+  padding: 0rem 0.25rem 0.4rem 1rem;
+  font-weight: 1000;
+  font-size: 2.5rem;
+  transition: transform 300ms ease;
+  z-index: 4;
+}
+
+.archive-body {
+  opacity: 0.7;
+  color: var(--pep-blue);
+  padding: 0 1.25rem;
+  transition: transform 300ms ease;
+  z-index: 5;
+}
+
+.archive-body::before {
+  content: "Archiv-Download";
+}
+
+.archive-card:hover .archive-title {
+  transform: translateX(0.5rem);
+}
+
+.archive-card:hover .archive-body {
+  transform: translateX(0.5rem);
+}
+
+.archive-dl {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}

files/archive/current.zip

@@ -0,0 +1 @@
+2024.zip

files/archive/latest.zip

@@ -0,0 +1 @@
+2023.zip