–

marc2o · Feb 29, 2024 · 5dfa297 · 5dfa297
1 parent 29b9d40
commit 5dfa297
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 47 deletions.
diff --git a/_drafts/2023-10-02 Jeden Tag einen Kater.md b/_drafts/2023-10-02 Jeden Tag einen Kater.md
@@ -12,10 +12,12 @@ tags:
 - Burma
 ---
 
-Eigentlich hatte ich gedacht, dass ich ein Hundemensch bin. Katzen waren mir nie geheuer. Eher Ungeheuer. Pelzige Rätsel. Irgendwie süß, aber unberechenbar. Nachdem ich mir als Kind — völlig unverschuldet, wie ich fand[^1] — einen dicken, blutigen Kratzer eingefangen hatte, war das Thema Katze für mich erledigt. Bis 2021.
+Eigentlich hatte ich gedacht, dass ich ein Hundemensch bin. Katzen waren mir nie geheuer. Eher Ungeheuer. Pelzige Rätsel. Süß, aber unberechenbar. Das Thema _Katze_ war für mich im Prinzip erledigt, nachdem ich mir als Kind — völlig unberechtigt, wie ich fand[^1] — einen dicken, blutigen Kratzer eingefangen hatte. Daran hatte sich nichts geändert, bis, ja, bis ich vierfacher Katzenpapa geworden bin.
 
 <!--more-->
 
-…
+Vier Fellnasen. Flauschlinge. Samtpfoten. Stubentiger. Edam, Emil, Caspar und Collin.
+
+Die ersten beiden sind 2021 zu uns gekommen. Die zweiten beiden dann 2023.
 
 [^1]: Purzel. Schwarzweiß gefleckt und das Kätzchen meines Grundschul&shy;klassen&shy;kameraden. Sie hat meinen zaghaften Steichelversuch jäh mit ihrer Pfote beendet. Rückblickend ahne ich, was ich falsch gemacht habe.
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -88,16 +88,16 @@
 				</svg>
 			</span>
 			<span class="title">{{ page.title | default: site.title | default: site.github.repository_name }}</span>
-			<span class="about" id="about_marc2o">
-				<span>{{ page.description | default: site.description | default: site.github.project_tagline }}</span>
-				<span hidden class="hidden">Early adopter and retro&shy;crastinator.</span>
-				<span hidden class="hidden">Pixel pusher and music maker.</span>
-				<span hidden class="hidden">Spare time coder and hand&shy;held gamer.</span>
-				<span hidden class="hidden">Cat dad and dog lover.</span>
-				<span hidden class="hidden">Bike hiker and point-n-click adventurer.</span>
-				<span hidden class="hidden">Monster Hunter and Pokémon Trainer.</span>
-				<!-- <span hidden class="hidden">Linguist and semiotician with a doctoral degree.</span> -->
-			</span>
+			<ul class="about" id="about_marc2o">
+				<li>{{ page.description | default: site.description | default: site.github.project_tagline }}</span>
+				<li>Early adopter and retro&shy;crastinator.</span>
+				<li>Pixel pusher and music maker.</span>
+				<li>Spare time coder and hand&shy;held gamer.</span>
+				<li>Cat dad and dog lover.</span>
+				<li>Bike hiker and point-n-click adventurer.</span>
+				<li>Monster Hunter and Pokémon Trainer.</span>
+				<li>Beginner and completionist.</li>
+			</ul>
 			<span class="about">@{{ page.author | default: "marc2o" }}</span>
 			{% if site.github.is_project_page %}
 			<a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -537,7 +537,6 @@ div>ul>li>a:visited {
 }
 
 header>span.title,
-header>span.about,
 header>span.thumb {
     display: block;
     text-align: center;
@@ -555,40 +554,58 @@ header>span.title {
     font-weight: 300;
 }
 
-#about_marc2o>span,
-#about_marc2o>span.hidden {
-    display: inline-block;
-    opacity: 0;
-}
-
-#about_marc2o>span.hidden {
-    display: none;
-}
-
-#about_marc2o>span:not(.hidden) {
-    animation:
-        fade-stuff-about-marc2o-in-and-out 2.5s ease-out 2 alternate,
-        shift-stuff-about-marc2o-right-to-left 5s ease-out 2;
-}
-
-@keyframes fade-stuff-about-marc2o-in-and-out {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes shift-stuff-about-marc2o-right-to-left {
-    from {
-        margin-left: .5rem;
-    }
-
-    to {
-        margin-left: -.5rem;
-    }
+ul.about {
+  display: block;
+  height: 1em;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  x-overflow: auto;
+  text-align: center;
+  border: 1px solid darkpink;
+}
+ul.about>li {
+  display: inline-block;
+  width: 100%;
+  height: 1em;
+  position: absolute;
+  left: 0;
+  opacity: 0.0;
+  animation-name: floating_text;
+  animation-duration: 96s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+ul.about>li:nth-child(1) { animation-delay:  0s; }
+ul.about>li:nth-child(2) { animation-delay:  6s; }
+ul.about>li:nth-child(3) { animation-delay: 12s; }
+ul.about>li:nth-child(4) { animation-delay: 18s; }
+ul.about>li:nth-child(5) { animation-delay: 24s; }
+ul.about>li:nth-child(6) { animation-delay: 30s; }
+ul.about>li:nth-child(7) { animation-delay: 36s; }
+ul.about>li:nth-child(8) { animation-delay: 42s; }
+
+@keyframes floating_text {
+  0% {
+    transform: translate(20%);
+    opacity: 0.0;
+  }
+  3% {
+    opacity: 0.0;
+  }
+  6.25% {
+    transform: translate(0);
+    opacity: 1.0;
+  }
+  10% {
+    opacity: 0.0;
+  }
+  12.5% {
+    transform: translate(-20%);
+    opacity: 0.0;
+  }
 }
 
 ul.follow {