From e2a46617d144081cbd02bd5ff1045506097b1191 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20M=C3=BCller?= <elias@elias-mueller.com>
Date: Sun, 11 Oct 2026 00:13:29 +0200
Subject: [PATCH] improved mobile layout centered front and responsive card
 added about heading and grid for expanded view

---
 assets/css/style.css | 102 ++++++++++++++++++++++++++++++-------------
 index.html           |   1 +
 2 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index f4dffb7..16ea329 100644
--- a/assets/css/style.css
+++ b/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: 300px;
-        --width-expanded: var(--width);
-        --height-expanded: min(700px, calc(100dvh - 80px));
+        --width: min(300px, calc(100vw - 32px));
+        --height: min(550px, calc(100dvh - 110px));
+        --width-expanded: min(440px, calc(100vw - 24px));
+        --height-expanded: calc(100dvh - 110px);
     }
     .card .front, .card .back-main {
         flex-direction: column;
@@ -440,24 +447,53 @@ li .spacer {
     .card .back {
         transform: rotateY(180deg);
     }
-    .card .back-main {
-        justify-content: space-evenly;
+    .card .front img {
+        max-height: min(200px, 30dvh);
     }
-    .card .details {
-        padding: 0 25px 25px 25px;
+    .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 {
+        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 {
-        order: -1;
         flex: none;
-        padding: 25px 20px 10px 20px;
+        overflow: visible;
+        padding: 20px 25px 5px 25px;
     }
     #details:target + .card-container .back-main {
-        flex: 1;
+        flex: none;
         height: auto;
-        overflow-y: auto;
+        overflow: visible;
         justify-content: flex-start;
-        padding: 10px 20px 15px 20px;
-        margin-bottom: 40px;
+        padding: 15px 25px 0 25px;
     }
     #details:target + .card-container .back-main > ul,
     #details:target + .card-container .back-main > hr {
@@ -466,31 +502,37 @@ li .spacer {
     #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: 8px;
+        margin-top: 10px;
     }
     #details:target + .card-container .interests .icons {
-        flex-wrap: wrap;
-        gap: 6px 4px;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 8px 4px;
     }
     #details:target + .card-container .interests .skill {
         width: auto;
-        min-width: 3em;
+        min-width: 0;
     }
-    .card .front hr, .card .back hr {
-        width: calc(var(--width) / 2);
-        height: 0px;
-    
-        border-radius: 10px;
-        border: 2px dashed lightgray;
-    
-        margin: 0 10px;
+    #details:target + .card-container .interests .caption {
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        overflow-wrap: break-word;
+        max-width: 100%;
     }
-    .card .front .name {
-        margin-top: 30px;
-        margin-left: 0;
+    #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%);
     }
 }
 
diff --git a/index.html b/index.html
index ef7d1f9..e54ff2a 100644
--- a/index.html
+++ b/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.