improved mobile layout centered front and responsive card added about heading and grid for expanded view

assets/css/style.css

@@ -2,7 +2,7 @@
     --height: 300px;
     --width: 550px;
     --width-expanded: min(780px, calc(100vw - 40px));
-    --height-expanded: min(615px, calc(100dvh - 40px));
+    --height-expanded: min(640px, calc(100dvh - 40px));
 }
 
 @font-face {
@@ -202,6 +202,13 @@ body {
     transition: opacity 0.2s 0.1s, visibility 0s;
 }
 
+.card .details h2 {
+    margin: 0 0 6px 0;
+    font-size: 0.85em;
+    font-weight: 300;
+    color: #606060;
+}
+
 .card .details p {
     margin: 0;
     line-height: 1.4em;
@@ -426,10 +433,10 @@ li .spacer {
 
 @media only screen and (max-width: 600px) {
     :root {
-        --height: 550px;
+        --width: min(300px, calc(100vw - 32px));
-        --width: 300px;
+        --height: min(550px, calc(100dvh - 110px));
-        --width-expanded: var(--width);
+        --width-expanded: min(440px, calc(100vw - 24px));
-        --height-expanded: min(700px, calc(100dvh - 80px));
+        --height-expanded: calc(100dvh - 110px);
     }
     .card .front, .card .back-main {
         flex-direction: column;
@@ -440,44 +447,8 @@ li .spacer {
     .card .back {
         transform: rotateY(180deg);
     }
-    .card .back-main {
+    .card .front img {
-        justify-content: space-evenly;
+        max-height: min(200px, 30dvh);
-    }
-    .card .details {
-        padding: 0 25px 25px 25px;
-    }
-    #details:target + .card-container .details {
-        order: -1;
-        flex: none;
-        padding: 25px 20px 10px 20px;
-    }
-    #details:target + .card-container .back-main {
-        flex: 1;
-        height: auto;
-        overflow-y: auto;
-        justify-content: flex-start;
-        padding: 10px 20px 15px 20px;
-        margin-bottom: 40px;
-    }
-    #details:target + .card-container .back-main > ul,
-    #details:target + .card-container .back-main > hr {
-        display: none;
-    }
-    #details:target + .card-container .interests {
-        grid-template-columns: 1fr;
-        row-gap: 4px;
-    }
-    #details:target + .card-container .interests .label {
-        text-align: left;
-        margin-top: 8px;
-    }
-    #details:target + .card-container .interests .icons {
-        flex-wrap: wrap;
-        gap: 6px 4px;
-    }
-    #details:target + .card-container .interests .skill {
-        width: auto;
-        min-width: 3em;
     }
     .card .front hr, .card .back hr {
         width: calc(var(--width) / 2);
@@ -486,11 +457,82 @@ li .spacer {
         border-radius: 10px;
         border: 2px dashed lightgray;
 
-        margin: 0 10px;
+        margin: 0;
     }
     .card .front .name {
-        margin-top: 30px;
+        margin-top: 25px;
         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;
+    }
+    #details:target + .card-container .details {
+        flex: none;
+        overflow: visible;
+        padding: 20px 25px 5px 25px;
+    }
+    #details:target + .card-container .back-main {
+        flex: none;
+        height: auto;
+        overflow: visible;
+        justify-content: flex-start;
+        padding: 15px 25px 0 25px;
+    }
+    #details:target + .card-container .back-main > ul,
+    #details:target + .card-container .back-main > hr {
+        display: none;
+    }
+    #details:target + .card-container .interests {
+        grid-template-columns: 1fr;
+        row-gap: 4px;
+        width: 100%;
+    }
+    #details:target + .card-container .interests .label {
+        text-align: left;
+        margin-top: 10px;
+    }
+    #details:target + .card-container .interests .icons {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 8px 4px;
+    }
+    #details:target + .card-container .interests .skill {
+        width: auto;
+        min-width: 0;
+    }
+    #details:target + .card-container .interests .caption {
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        overflow-wrap: break-word;
+        max-width: 100%;
+    }
+    #details:target + .card-container .details-close {
+        position: sticky;
+        order: 1;
+        left: auto;
+        transform: none;
+        flex: none;
+        justify-content: center;
+        margin-top: auto;
+        padding: 18px 0 15px 0;
+        background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgb(248, 248, 248) 45%);
     }
 }
 

index.html

@@ -102,6 +102,7 @@
                         </div>
                     </div>
                     <div class="details">
+                        <h2>Über mich</h2>
                         <p>
                             Ich bin Elias und komme aus der Nähe von Fulda in Hessen.
                             Angefangen habe ich mit Webentwicklung, heute liegt mein Schwerpunkt im Backend, bei Bedarf ergänzt durch plattformübergreifende Apps mit Flutter.