code cleanup simplified css with flip axis variable and shared rules subset roboto font as woff2

assets/css/style.css

@@ -3,11 +3,20 @@
     --width: 550px;
     --width-expanded: min(780px, calc(100vw - 40px));
     --height-expanded: min(640px, calc(100dvh - 40px));
+    --height-main-expanded: 360px;
+
+    --flip-axis: 1, 0, 0;
+    --ease-expand: cubic-bezier(0.2, 0.9, 0.3, 1);
+
+    --color-icon: #404040;
+    --color-muted: #606060;
+    --color-control: #808080;
 }
 
 @font-face {
     font-family: "Roboto";
-    src: local("Roboto"), url("font/roboto.ttf") format("truetype");
+    src: local("Roboto"), url("font/roboto.woff2") format("woff2");
+    font-weight: 100 900;
     font-display: swap;
 }
 
@@ -24,7 +33,6 @@ body {
     justify-content: center;
     align-items: center;
 
-    padding: 0;
     margin: 0;
     height: 100dvh;
     width: 100vw;
@@ -72,7 +80,7 @@ body {
     width: var(--width);
     height: var(--height);
     perspective: 1000px;
-    transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
+    transition: width 0.3s var(--ease-expand), height 0.3s var(--ease-expand);
 }
 
 .anchor {
@@ -86,10 +94,6 @@ body {
     height: var(--height-expanded);
 }
 
-#details:target + .card-container .card {
-    transform: rotateX(180deg);
-}
-
 .card {
     position: relative;
     width: 100%;
@@ -97,33 +101,30 @@ body {
     transition: transform 1s;
     transform-style: preserve-3d;
 
-    animation: hint-x 0.9s ease-in-out 1.2s;
+    animation: hint 0.9s ease-in-out 1.2s;
     animation-composition: add;
 }
 
-@keyframes hint-x {
+@keyframes hint {
-    35% { transform: rotateX(25deg); }
+    35% { transform: rotate3d(var(--flip-axis), 25deg); }
-    70% { transform: rotateX(-6deg); }
+    70% { transform: rotate3d(var(--flip-axis), -6deg); }
 }
 
-@keyframes hint-y {
+#flip:target,
-    35% { transform: rotateY(25deg); }
+#details:target + .card-container .card,
-    70% { transform: rotateY(-6deg); }
+.card-container:has(.back :focus-visible) .card,
-}
+.card .back {
-
+    transform: rotate3d(var(--flip-axis), 180deg);
-#flip:target, .card-container:has(.back :focus-visible) .card {
-    transform: rotateX(180deg);
 }
 
 @media (hover: hover) {
     .card-container:hover .card {
-        transform: rotateX(180deg);
+        transform: rotate3d(var(--flip-axis), 180deg);
     }
 }
 
 .card .front, .card .back {
     background-image: url("../img/noise.png");
-    background-repeat: repeat;
 
     position: absolute;
     width: 100%;
@@ -136,7 +137,6 @@ body {
 
 .card .front {
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: center;
 }
@@ -161,9 +161,7 @@ body {
 }
 
 .card .front .name h1 {
-    text-align: left;
     margin: 0 0 10px 0;
-    padding: 0;
 }
 
 .card .front .name ul {
@@ -172,16 +170,19 @@ body {
     list-style: square;
 }
 
-.card .front .name .slogan {
+.card .front .name .slogan,
-    margin: 12px 0 0 0;
+.card .details h2,
+.card .back .interests .label {
     font-size: 0.85em;
     font-weight: 300;
-    color: #606060;
+    color: var(--color-muted);
+}
+
+.card .front .name .slogan {
+    margin: 12px 0 0 0;
 }
 
 .card .back {
-    transform: rotateX(180deg);
-
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -191,10 +192,9 @@ body {
     flex-shrink: 0;
     height: var(--height);
     overflow: hidden;
-    transition: height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.15s;
+    transition: height 0.3s var(--ease-expand), opacity 0.15s;
 
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: center;
 }
@@ -210,7 +210,7 @@ body {
 }
 
 #details:target + .card-container .back-main {
-    height: 360px;
+    height: var(--height-main-expanded);
 }
 
 #details:target + .card-container .details {
@@ -221,9 +221,6 @@ body {
 
 .card .details h2 {
     margin: 0 0 6px 0;
-    font-size: 0.85em;
-    font-weight: 300;
-    color: #606060;
 }
 
 .card .details p {
@@ -235,20 +232,23 @@ body {
     margin-top: 0.7em;
 }
 
-.card .details-button {
+.card .flip-button, .card .details-button {
     position: absolute;
-    z-index: 1;
-    left: 50%;
     bottom: 0;
-    transform: translateX(-50%);
-    padding: 0 0 15px 0;
 
     display: flex;
     align-items: center;
     gap: 6px;
 
     font-size: 0.85em;
-    color: #808080;
+    color: var(--color-control);
+}
+
+.card .details-button {
+    z-index: 1;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 0 15px 0;
 }
 
 .card .details-button i {
@@ -268,27 +268,12 @@ body {
     visibility: visible;
 }
 
-.card .details-close-hover {
-    display: none;
-}
-
-@media (hover: hover) {
-    .card .details-close-touch {
-        display: none;
-    }
-
-    .card .details-close-hover {
-        display: flex;
-    }
-}
-
 .card .back hr {
     margin: 0 20px;
 }
 
 .card .back ul {
     list-style: none;
-    text-align: left;
     padding: 0;
     margin: 0;
 }
@@ -301,7 +286,7 @@ body {
     width: 20px;
     margin-right: 7px;
     text-align: center;
-    color: #404040;
+    color: var(--color-icon);
     font-size: 0.9em;
     line-height: 1em;
 }
@@ -316,9 +301,6 @@ body {
 
 .card .back .interests .label {
     text-align: right;
-    font-size: 0.85em;
-    font-weight: 300;
-    color: #606060;
 }
 
 .card .back .interests .icons {
@@ -326,7 +308,7 @@ body {
     align-items: center;
     gap: 0.4em;
     font-size: 1.25em;
-    color: #404040;
+    color: var(--color-icon);
 }
 
 .card .back .interests .skill {
@@ -336,7 +318,7 @@ body {
     width: 1.25em;
 }
 
-.card .back .interests .skill > i {
+.card .back .interests .skill > i, .card .flip-button i {
     width: 1.25em;
     text-align: center;
 }
@@ -353,7 +335,7 @@ body {
 
     font-size: 0.5em;
     line-height: 1.2em;
-    color: #606060;
+    color: var(--color-muted);
     text-align: center;
     hyphens: auto;
 }
@@ -380,17 +362,8 @@ body {
 }
 
 .card .flip-button {
-    position: absolute;
     right: 0;
-    bottom: 0;
     padding: 0 25px 15px 0;
-
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    font-size: 0.85em;
-    color: #808080;
 }
 
 .card .front .flip-button {
@@ -400,71 +373,47 @@ body {
     align-items: flex-end;
 }
 
-.card .flip-button i {
+.card .pin-remove, #flip:target .pin-add {
-    width: 1.25em;
+    display: none;
-    text-align: center;
 }
 
-.cap-visibleWhenCanHover {
+#flip:target .pin-remove {
-    visibility: visible;
+    display: flex;
 }
 
-.cap-visibleWhenPinned {
+@media (hover: hover) {
-    visibility: hidden;
+    .touch-only {
+        display: none !important;
+    }
 }
 
-.cap-visibleWhenUnPinned {
+@media not (hover: hover) {
-    visibility: hidden;
+    .hover-only {
+        display: none !important;
+    }
 }
 
 a {
-    font-style: normal;
     text-decoration: none;
     color: black;
-    cursor: pointer;
-}
-
-li .spacer {
-    height: 1rem;
 }
 
 .clickable {
     cursor: pointer;
 }
 
-.requires-js {
+html:not(.js) .requires-js {
     display: none;
 }
 
-@media (hover: hover) {
-    .cap-visibleWhenCanHover {
-        visibility: hidden;
-    }
-
-    .cap-visibleWhenPinned {
-        visibility: hidden;
-    }
-    
-    .cap-visibleWhenUnPinned {
-        visibility: visible;
-    }
-    
-    #flip:target .cap-visibleWhenPinned {
-        visibility: visible;
-    }
-    
-    #flip:target .cap-visibleWhenUnPinned {
-        visibility: hidden;
-    }
-    
-}
-
 @media only screen and (max-width: 600px) {
     :root {
+        --max-height: calc(100dvh - 110px);
         --width: min(300px, calc(100vw - 32px));
-        --height: min(550px, calc(100dvh - 110px));
+        --height: min(550px, var(--max-height));
         --width-expanded: min(440px, calc(100vw - 24px));
-        --height-expanded: calc(100dvh - 110px);
+        --height-expanded: var(--max-height);
+        --flip-axis: 0, 1, 0;
     }
     .footer-container {
         bottom: calc(6px + env(safe-area-inset-bottom, 0px));
@@ -476,25 +425,12 @@ li .spacer {
     .card .front, .card .back-main {
         flex-direction: column;
     }
-    #flip:target, #details:target + .card-container .card, .card-container:has(.back :focus-visible) .card {
-        transform: rotateY(180deg);
-    }
-    .card .back {
-        transform: rotateY(180deg);
-    }
-    .card {
-        animation-name: hint-y;
-    }
     .card .front img {
         max-height: min(200px, 30dvh);
     }
     .card .front hr, .card .back hr {
         width: calc(var(--width) / 2);
         height: 0px;
-
-        border-radius: 10px;
-        border: 2px dashed lightgray;
-
         margin: 0;
     }
     .card .front .name {
@@ -502,22 +438,15 @@ li .spacer {
         margin-left: 0;
         text-align: center;
     }
-    .card .front .name h1 {
-        text-align: center;
-    }
     .card .front .name ul {
         padding: 0;
         list-style: none;
     }
     .card .back-main {
-        justify-content: center;
         gap: 28px;
         padding-bottom: 30px;
         box-sizing: border-box;
     }
-    .card .back hr {
-        margin: 0;
-    }
     #details:target + .card-container .back {
         overflow-y: auto;
     }
@@ -557,7 +486,6 @@ li .spacer {
     }
     #details:target + .card-container .interests .caption {
         -webkit-hyphens: auto;
-        hyphens: auto;
         overflow-wrap: break-word;
         max-width: 100%;
     }
@@ -574,12 +502,6 @@ li .spacer {
     }
 }
 
-@media (hover: hover) and (max-width: 600px) {
-    .card-container:hover .card {
-        transform: rotateY(180deg);
-    }
-}
-
 @media (prefers-reduced-motion: reduce) {
     .card, .card-container, .card .back-main, .card .details {
         transition: none;

assets/js/script.js

@@ -1,24 +1,20 @@
-var jsBlocks = document.getElementsByClassName("requires-js");
+var isCopyTimeout = false;
-Array.from(jsBlocks).forEach(block => block.style.display = "block");
-var isCopyTimout = false;
 
 function contact(element) {
-    var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
+    var address = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
-    var uri = atob("bWFpbHRv") + ":" + adress;
+    window.location.href = atob("bWFpbHRv") + ":" + address;
-    window.location.href = uri;
 
     if(!navigator.clipboard) return;
-    navigator.clipboard.writeText(adress);
+    navigator.clipboard.writeText(address);
 
-    if(isCopyTimout) return;
+    if(isCopyTimeout) return;
-    var indicatorContent = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
     var previousContent = element.innerHTML;
-    element.innerHTML = indicatorContent;
+    element.innerHTML = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
-    isCopyTimout = true;
+    isCopyTimeout = true;
 
     setTimeout(() => {
         element.innerHTML = previousContent;
-        isCopyTimout = false;
+        isCopyTimeout = false;
     }, 3000)
 }
 

index.html

@@ -11,7 +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>document.documentElement.classList.add("js", "preload");</script>
         <script src="assets/js/script.js" defer></script>
    
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -48,8 +48,8 @@
                 </div>
                 <div class="back">
                     <a class="details-button details-open" href="#details">Mehr<i class="fa-solid fa-chevron-down"></i></a>
-                    <a class="details-button details-close details-close-touch" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
+                    <a class="details-button details-close touch-only" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
-                    <a class="details-button details-close details-close-hover" href="#unflip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
+                    <a class="details-button details-close hover-only" href="#unflip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
                     <div class="back-main">
                         <ul>
                             <li class="requires-js"><i class="fa-solid fa-person"></i><span id="age">?</span> Jahre</li>
@@ -114,9 +114,9 @@
                             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"><i class="fa-solid fa-angles-left"></i>Zurück</a>
+                    <a class="flip-button touch-only" 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="flip-button hover-only pin-add" 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>
+                    <a class="flip-button hover-only pin-remove" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
                 </div>
             </div>
         </div>