feat: add more animations

2026-02-03 12:15:28 +00:00 · 2022-02-09 14:22:35 +01:00
parent 2fa23ee566
commit 6ab3533040
6 changed files with 46 additions and 46 deletions
--- 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" %}
--- 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"
--- 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 %}
--- 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>,
--- 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