added flip hint animation labeled flip buttons and tap anywhere on front fixed flash on reload with anchor smaller footer on mobile

assets/css/style.css

@@ -64,6 +64,10 @@ body {
     opacity: 0.5;
 }
 
+.preload * {
+    transition: none !important;
+}
+
 .card-container {
     width: var(--width);
     height: var(--height);
@@ -92,6 +96,19 @@ body {
     height: 100%;
     transition: transform 1s;
     transform-style: preserve-3d;
+
+    animation: hint-x 0.9s ease-in-out 1.2s;
+    animation-composition: add;
+}
+
+@keyframes hint-x {
+    35% { transform: rotateX(25deg); }
+    70% { transform: rotateX(-6deg); }
+}
+
+@keyframes hint-y {
+    35% { transform: rotateY(25deg); }
+    70% { transform: rotateY(-6deg); }
 }
 
 #flip:target, .card-container:has(.back :focus-visible) .card {
@@ -368,10 +385,21 @@ body {
     bottom: 0;
     padding: 0 25px 15px 0;
 
-    font-size: 1em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    font-size: 0.85em;
     color: #808080;
 }
 
+.card .front .flip-button {
+    top: 0;
+    left: 0;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
 .card .flip-button i {
     width: 1.25em;
     text-align: center;
@@ -438,6 +466,13 @@ li .spacer {
         --width-expanded: min(440px, calc(100vw - 24px));
         --height-expanded: calc(100dvh - 110px);
     }
+    .footer-container {
+        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+        right: 6px;
+        gap: 6px;
+        font-size: 0.7em;
+        padding: 3px 10px;
+    }
     .card .front, .card .back-main {
         flex-direction: column;
     }
@@ -447,6 +482,9 @@ li .spacer {
     .card .back {
         transform: rotateY(180deg);
     }
+    .card {
+        animation-name: hint-y;
+    }
     .card .front img {
         max-height: min(200px, 30dvh);
     }
@@ -545,5 +583,6 @@ li .spacer {
 @media (prefers-reduced-motion: reduce) {
     .card, .card-container, .card .back-main, .card .details {
         transition: none;
+        animation: none;
     }
 }

assets/js/script.js

@@ -25,3 +25,5 @@ function contact(element) {
 var now = new Date();
 document.getElementById("age").textContent = now.getFullYear() - 2003 - (now.getMonth() < 8 ? 1 : 0);
 document.getElementById("linux-years").textContent = now.getFullYear() - 2017;
+
+requestAnimationFrame(() => requestAnimationFrame(() => document.documentElement.classList.remove("preload")));

index.html

@@ -11,6 +11,7 @@
         <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
         <link rel="canonical" href="https://www.elias-mueller.com/aboutme/">        
 
+        <script>document.documentElement.classList.add("preload");</script>
         <script src="assets/js/script.js" defer></script>
    
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -43,7 +44,7 @@
                         </ul>
                         <p class="slogan">Von Elektronik über Infrastruktur<br>und Applikationen bis zum Nutzer</p>
                     </div>
-                    <a class="cap-visibleWhenCanHover flip-button" href="#flip" aria-label="Karte umdrehen"><i class="fa-solid fa-angles-right"></i></a>
+                    <a class="flip-button flip-front" href="#flip">Umdrehen<i class="fa-solid fa-angles-right"></i></a>
                 </div>
                 <div class="back">
                     <a class="details-button details-open" href="#details">Mehr<i class="fa-solid fa-chevron-down"></i></a>
@@ -113,7 +114,7 @@
                             Am meisten Spaß macht es mir, Dinge von Grund auf zu bauen: vom ersten Gespräch über die Anforderungen bis zur fertigen Lösung.
                         </p>
                     </div>
-                    <a class="cap-visibleWhenCanHover flip-button" href="#unflip" aria-label="Karte zurückdrehen"><i class="fa-solid fa-angles-left"></i></a>
+                    <a class="cap-visibleWhenCanHover flip-button" href="#unflip"><i class="fa-solid fa-angles-left"></i>Zurück</a>
                     <a class="cap-visibleWhenUnPinned flip-button" href="#flip" aria-label="Rückseite anpinnen" title="Anpinnen"><i class="fa-solid fa-thumbtack"></i></a>
                     <a class="cap-visibleWhenPinned flip-button" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
                 </div>