From 6ab3533040c0cf721c16e525030c1fbe6f5a9c64 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Wed, 9 Feb 2022 14:22:35 +0100
Subject: [PATCH] feat: add more animations

---
 src/layouts/page.njk       |  2 +-
 src/pages/downloads.njk    | 54 +++++++++++++++++++-------------------
 src/pages/empfehlungen.njk |  6 ++---
 src/pages/glossar.njk      |  4 +--
 src/pages/homepage.njk     |  2 +-
 src/pages/kolophon.njk     | 24 ++++++++---------
 6 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/layouts/page.njk b/src/layouts/page.njk
index 523ed5a..b3ca479 100644
--- a/src/layouts/page.njk
+++ b/src/layouts/page.njk
@@ -6,7 +6,7 @@ layout: narrow
 {% set nextPost = collections.sortedBookPages | getNextCollectionItem(page) %}
 
 <article class="page-container">
-  <h1 class="page-title">{{ title | nbsp | safe }}</h1>
+  <h1 class="page-title" >{{ title | nbsp | safe }}</h1>
   <div class="page">
     {{ content | safe }}
   </div>
diff --git a/src/pages/downloads.njk b/src/pages/downloads.njk
index 8c876a1..45c11d4 100644
--- a/src/pages/downloads.njk
+++ b/src/pages/downloads.njk
@@ -11,7 +11,7 @@ tags:
 {% set previousPost = collections.sortedBookPages | getPreviousCollectionItem(page) %}
 {% set nextPost = collections.sortedBookPages | getNextCollectionItem(page) %}
 
-<div class="downloads-intro">
+<div class="downloads-intro" {{ site.animationDelay }}>
   <h1 class="downloads-title">Downloads</h1>
   <p>
     Hier gibt es das Online-Buch zum Download als eBook, 3D-Modelle von Waffen und Werkzeugen, sowie eine Ninja-Schriftart.
@@ -20,7 +20,32 @@ tags:
 
 
 <article class="downloads-container rowgap">
-  <figure class="downloads-layout downloads-50-start">
+  <figure class="downloads-layout downloads-50-start" {{ site.animation }}>
+    <div class="image-shadow downloads-image-container">
+      <img src="/assets/images/downloads/ingo.jpg" alt=""/>
+    </div>
+    <figcaption>
+      <h2>Iga-Ninja-Font</h2>
+      <p>Das Iga-Ninja Museum hatte vor vielen Jahren ein Bild einer Iga-Ninja-Geheimschrift auf ihrer Website veröffentlicht. Ich habe daraus eine Schriftart entwickelt, die hier heruntergeladen werden kann.</p>
+      <p>
+        {% more "Schrift auf GitHub ansehen", "https://github.com/kogakure/font-ingo", true %}<br />
+        {% download "Schrift herunterladen", "/downloads/iga-ninja-font.zip" %}
+      </p>
+    </figcaption>
+  </figure>
+  <figure class="downloads-layout downloads-50-end" {{ site.animation }}>
+    <div class="image-shadow downloads-image-container">
+      <img src="/assets/images/downloads/ogama.jpg" alt=""/>
+    </div>
+    <figcaption>
+      <h2>3D Modelle von Waffen und Werkzeugen der Ninja</h2>
+      <p>Für die erste Version dieser Website hatte ich 3D-Modelle von Waffen und Werkzeugen erstellt, die ich dann später in das <code>stl</code> Format umgewandelt habe. Die Modelle können auf GitHub direkt im Browser angesehen und von allen Seiten betrachtet werden.</p>
+      <p>
+        {% more "Waffen und Werkzeuge auf GitHub ansehen", "https://github.com/kogakure/3d-models-kogakure", true %}
+      </p>
+    </figcaption>
+  </figure>
+  <figure class="downloads-layout downloads-50-start" {{ site.animation }}>
     <div class="image-shadow downloads-image-container">
       <img src="/assets/images/chronology/gitbook-kogakure.jpg" alt=""/>
     </div>
@@ -34,31 +59,6 @@ tags:
       </p>
     </figcaption>
   </figure>
-  <figure class="downloads-layout downloads-50-end">
-    <div class="image-shadow downloads-image-container">
-      <img src="/assets/images/downloads/ingo.jpg" alt=""/>
-    </div>
-    <figcaption>
-      <h2>Iga-Ninja-Font</h2>
-      <p>Das Iga-Ninja Museum hatte vor vielen Jahren ein Bild einer Iga-Ninja-Geheimschrift auf ihrer Website veröffentlicht. Ich habe daraus eine Schriftart entwickelt, die hier heruntergeladen werden kann.</p>
-      <p>
-        {% more "Schrift auf GitHub ansehen", "https://github.com/kogakure/font-ingo", true %}<br />
-        {% download "Schrift herunterladen", "/downloads/iga-ninja-font.zip" %}
-      </p>
-    </figcaption>
-  </figure>
-  <figure class="downloads-layout downloads-50-start">
-    <div class="image-shadow downloads-image-container">
-      <img src="/assets/images/downloads/ogama.jpg" alt=""/>
-    </div>
-    <figcaption>
-      <h2>3D Modelle von Waffen und Werkzeugen der Ninja</h2>
-      <p>Für die erste Version dieser Website hatte ich 3D-Modelle von Waffen und Werkzeugen erstellt, die ich dann später in das <code>stl</code> Format umgewandelt habe. Die Modelle können auf GitHub direkt im Browser angesehen und von allen Seiten betrachtet werden.</p>
-      <p>
-        {% more "Waffen und Werkzeuge auf GitHub ansehen", "https://github.com/kogakure/3d-models-kogakure", true %}
-      </p>
-    </figcaption>
-  </figure>
 </article>
 
 {% include "pagination.njk" %}
diff --git a/src/pages/empfehlungen.njk b/src/pages/empfehlungen.njk
index 1bc4c4d..498de95 100644
--- a/src/pages/empfehlungen.njk
+++ b/src/pages/empfehlungen.njk
@@ -11,7 +11,7 @@ tags:
 {% set previousPost = collections.sortedBookPages | getPreviousCollectionItem(page) %}
 {% set nextPost = collections.sortedBookPages | getNextCollectionItem(page) %}
 
-<div class="recommendations-intro">
+<div class="recommendations-intro" {{ site.animationDelay }}>
   <h1 class="recommendations-title">Empfehlungen</h1>
   <p>
     Ich empfehle hier <strong>{{ books.length }}</strong> Bücher und
@@ -24,7 +24,7 @@ tags:
   <h2>Bücher</h2>
   <article class="recommendations-container">
     {% for book in books %}
-    <div>
+    <div {{ site.animation }}>
       {% if book.asin %}
       <a
         class="product"
@@ -49,7 +49,7 @@ tags:
   <h2>Filme</h2>
   <article class="recommendations-container">
     {% for movie in movies %}
-    <div>
+    <div {{ site.animation }}>
       {% if movie.asin %}
       <a
         class="product"
diff --git a/src/pages/glossar.njk b/src/pages/glossar.njk
index 30915e1..9a0e69a 100644
--- a/src/pages/glossar.njk
+++ b/src/pages/glossar.njk
@@ -11,7 +11,7 @@ tags:
 {% set previousPost = collections.sortedBookPages | getPreviousCollectionItem(page) %}
 {% set nextPost = collections.sortedBookPages | getNextCollectionItem(page) %}
 
-<div class="glossary-intro">
+<div class="glossary-intro" {{ site.animationDelay }}>
   <h1 class="glossary-title">Glossar</h1>
   <p>
     Dieses Lexikon enthält <strong>{{ glossary.length }}</strong> Einträge aus dem Bereich des Ninjutsu, der
@@ -22,7 +22,7 @@ tags:
 
 <div class="glossary-list">
   {% for item in glossary | sortBySortKey %}
-  <dl class="glossary-list-item">
+  <dl class="glossary-list-item" {{ site.animation }}>
     {% if item.title %}
       <dt class="glossary-list-item-romanji">{{ item.title }}</dt>
     {% endif %}
diff --git a/src/pages/homepage.njk b/src/pages/homepage.njk
index 8fa2afc..42605d8 100644
--- a/src/pages/homepage.njk
+++ b/src/pages/homepage.njk
@@ -6,7 +6,7 @@ css: homepage.css
 isHome: true
 ---
 
-<div class="homepage-intro" {{ site.animation }}>
+<div class="homepage-intro" {{ site.animationDelay }}>
   <h1 class="homepage-title">木隠</h1>
   <p>
     Dies ist 木隠 (jap. <em>kogakure</em>,
diff --git a/src/pages/kolophon.njk b/src/pages/kolophon.njk
index fd7bed6..d0c6951 100644
--- a/src/pages/kolophon.njk
+++ b/src/pages/kolophon.njk
@@ -11,7 +11,7 @@ tags:
 {% set previousPost = collections.sortedBookPages | getPreviousCollectionItem(page) %}
 {% set nextPost = collections.sortedBookPages | getNextCollectionItem(page) %}
 
-<div class="colophon-intro">
+<div class="colophon-intro" {{ site.animationDelay }}>
   <h1 class="colphon-title">Kolophon</h1>
   <p>
     Dies ist 木隠. Seit 1999 kann man hier Artikel, Textsammlungen und
@@ -25,7 +25,7 @@ tags:
   </p>
 </div>
 
-<div class="colophon-meaning">
+<div class="colophon-meaning" {{ site.animation }}>
   <h2>Was bedeutet kogakure?</h2>
   <p>
     Der Name <em>kogakure</em> (木隠) ist japanisch und bedeutet wörtlich übersetzt in
@@ -39,7 +39,7 @@ tags:
   </p>
 </div>
 
-<div class="colophon-why">
+<div class="colophon-why" {{ site.animation }}>
   <h2>Warum gibt es dieses Buch?</h2>
   <p>
     Seit Anfang der 90er, ursprünglich wahrscheinlich durch die Teenage Mutant
@@ -64,7 +64,7 @@ tags:
   </p>
 </div>
 
-<div class="colophon-contact">
+<div class="colophon-contact" {{ site.animation }}>
   <h2>Kontakt</h2>
   <p>
     Man kann mich über meine <span>{% email "E-Mail-Adresse" %}</span>erreichen.
@@ -87,7 +87,7 @@ tags:
 <div class="colophon-faq">
   <h2>FAQ</h2>
   <ul class="colophone-faq-list">
-    <li class="colophon-faq-list-item">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
       <h3>Wo kann ich trainieren?</h3>
       <p>
         Um ein Dōjō für Bujinkan Budō Taijutsu zu finden, solltet ihr am besten
@@ -108,7 +108,7 @@ tags:
         der Name des Buches.
       </p>
     </li>
-    <li class="colophon-faq-list-item">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
       <h3>Was für Bücher gibt es?</h3>
       <p>
         Die Auswahl an Fachbüchern über Ninja und Ninjutsu ist sehr groß. Der größte Teil ist jedoch auf Japanisch oder Englisch. Am
@@ -116,7 +116,7 @@ tags:
         <a href="/empfehlungen/">Empfehlungen</a> schauen.
       </p>
     </li>
-    <li class="colophon-faq-list-item">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
       <h3>Welche Bücher kannst du mir empfehlen?</h3>
       <p>
         Zuerst lege ich euch die Bücher von Dr. <em>Masaaki Hatsumi</em> ans
@@ -127,7 +127,7 @@ tags:
         wie Takamatsu zum Mönch des Tendai ernannt worden.
       </p>
     </li>
-    <li class="colophon-faq-list-item">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
       <h3>Wo bekomme ich Bücher über Ninjutsu her?</h3>
       <p>
         Seit es Buchversender wie z. B.
@@ -143,7 +143,7 @@ tags:
         empfehlen kann.
       </p>
     </li>
-    <li class="colophon-faq-list-item">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
       <h3>Ich möchte auf eine Seite verlinken. Was ist zu beachten?</h3>
       <p>
         Es ist generell untersagt die Verlinkung in einem Frame zu
@@ -163,7 +163,7 @@ tags:
         eingehalten werden).
       </p>
     </li>
-    <li class="colophon-faq-list-item">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
       <h3>Sind Übersetzungen der Texte erlaubt?</h3>
       <p>
         Übersetzungen der Texte in andere Sprachen sind grundsätzlich erlaubt,
@@ -178,7 +178,7 @@ tags:
   </ul>
 </div>
 
-<div class="colophon-donation">
+<div class="colophon-donation" {{ site.animation }}>
   <h2>
     <span class="colophon-donation-heart">♥︎</span>
     Spenden
@@ -252,7 +252,7 @@ bc1quzvqw66khsnrmqh0ds8dprnrtcxfytfa3x2x7m</pre
   </ul>
 </div>
 
-<div class="colophon-tech">
+<div class="colophon-tech" {{ site.animation }}>
   <h2>Technische Informationen</h2>
   <p>
     Wer es bis hier hin durchgehalten hat, den interessieren wahrscheinlich auch