style: improve index page design

2026-04-13 15:43:45 +02:00 · 2026-04-13 15:43:45 +02:00 · b1d7f58029
commit b1d7f58029
parent dc4473376e
1 changed files with 83 additions and 7 deletions
--- a/index.html
+++ b/index.html
@ -5,18 +5,94 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ugo Preiswerk</title>
  <style>
-    body { font-family: sans-serif; max-width: 480px; margin: 80px auto; padding: 0 20px; }
-    h1 { font-size: 1.4rem; margin-bottom: 8px; }
-    p { color: #666; margin-bottom: 32px; }
-    a { display: block; padding: 14px 18px; margin-bottom: 12px; border: 1px solid #e0e0e0; border-radius: 8px; text-decoration: none; color: #111; transition: background .15s; }
-    a:hover { background: #f5f5f5; }
+    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+
+    :root {
+      --bg: #f3f4ef;
+      --panel: #fbfbf8;
+      --text: #16211d;
+      --muted: #5f6e67;
+      --line: #dde3de;
+      --accent: #1f6b55;
+      --accent-soft: #ecf5f1;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      font-family: 'DM Sans', 'Segoe UI', sans-serif;
+      color: var(--text);
+      max-width: 520px;
+      margin: 0 auto;
+      padding: 72px 20px;
+      min-height: 100vh;
+      background:
+        radial-gradient(1200px 500px at 20% -20%, #ffffff 0%, transparent 60%),
+        radial-gradient(800px 400px at 100% 120%, #e7f1ec 0%, transparent 60%),
+        var(--bg);
+    }
+
+    h1 {
+      font-size: 1.7rem;
+      line-height: 1.2;
+      margin: 0 0 8px;
+      letter-spacing: 0.01em;
+    }
+
+    p {
+      color: var(--muted);
+      margin: 0 0 26px;
+      font-size: 0.98rem;
+    }
+
+    a {
+      display: block;
+      position: relative;
+      padding: 14px 18px;
+      margin-bottom: 12px;
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      text-decoration: none;
+      color: var(--text);
+      background: var(--panel);
+      box-shadow: 0 6px 20px rgba(22, 33, 29, 0.05);
+      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+    }
+
+    a::after {
+      content: '↗';
+      position: absolute;
+      right: 14px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--muted);
+      font-size: 0.95rem;
+    }
+
+    a:hover,
+    a:focus-visible {
+      background: var(--accent-soft);
+      border-color: #c8d7d0;
+      transform: translateY(-1px);
+      outline: none;
+    }
+
+    @media (max-width: 480px) {
+      body {
+        padding-top: 56px;
+      }
+
+      h1 {
+        font-size: 1.55rem;
+      }
+    }
  </style>
 </head>
 <body>
  <h1>Ugo Preiswerk</h1>
  <p>Dev junior · DevOps learner</p>
-  <a href="https://ugo-preiswerk.site">Portfolio</a>
-  <a href="https://blog.ugo-preiswerk.site">Blog</a>
+  <a href="https://ugo-preiswerk.netlify.app">Portfolio</a>
+  <a href="https://tech-blog-dev.netlify.app">Blog</a>
  <a href="https://git.ugo-preiswerk.site">Gitea</a>
  <a href="https://uptime.ugo-preiswerk.site">Uptime</a>
 </body>