Better responsive design

2026-03-22 11:08:47 +01:00
parent 12a39bf8b4
commit 6654e4b954
4 changed files with 152 additions and 43 deletions
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -7,7 +7,7 @@ import Logo from "../assets/logo.svg";
  <div class="nav-content">
    <a href="/" class="logo">
      <Logo class="logo-img" />
-      c0ntroller.de
+      <span class="logo-text">c0ntroller.de</span>
    </a>
    <div class="links">
      <a
@@ -83,4 +83,13 @@ import Logo from "../assets/logo.svg";
    color: rgb(var(--accent-base));
    font-weight: 600;
  }
+
+  @media (max-width: 500px) {
+    .logo-text {
+      display: none;
+    }
+    .links {
+      gap: 1rem;
+    }
+  }
 </style>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -20,6 +20,7 @@ const {
 <html lang="de">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="description" content={description} />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,24 @@
 ---
-import WelcomeTypewriter from '../components/WelcomeTypewriter.astro';
-import BaseLayout from '../layouts/BaseLayout.astro';
-import { Icon } from 'astro-icon/components';
+import WelcomeTypewriter from "../components/WelcomeTypewriter.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { Icon } from "astro-icon/components";
 import socials from "../data/socials.json";
 ---
+
 <BaseLayout title="c0ntroller.de" theme="default">
  <div class="landing-wrapper">
    <div class="hero-section">
      <div class="socials fade-in-up shadow-glow glass-bg glass-container">
-        {socials.map(({ name, url, icon }) => (
-          <a href={url} target="_blank" rel="noreferrer" class="social-link">
-            <Icon name={icon} desc={name} />
-          </a>
-        ))}
+        {
+          socials.map(({ name, url, icon }) => (
+            <a href={url} target="_blank" rel="noreferrer" class="social-link">
+              <Icon name={icon} desc={name} />
+            </a>
+          ))
+        }
      </div>
      <h1 class="gradient-text reveal-text">Willkommen auf meiner Seite.</h1>
-      <p class="subtitle fade-in-up">
-        Hier geht es unter anderem um:
-      </p>
+      <p class="subtitle fade-in-up">Hier geht es unter anderem um:</p>
      <WelcomeTypewriter class="fade-in-up" />
    </div>

@@ -82,7 +83,7 @@ import socials from "../data/socials.json";
    display: flex;
    flex-direction: row;
    justify-content: center;
-    gap: .5rem;
+    gap: 0.5rem;
    margin: 0 auto 2rem auto;
    padding: 0.5rem 1rem;
    backdrop-filter: blur(24px);
@@ -116,10 +117,19 @@ import socials from "../data/socials.json";
    max-width: 1000px;
  }

-  @media (max-width: 800px) {
+  @media (max-width: 700px) {
+    .landing-wrapper {
+      padding: 0;
+      margin-top: -1rem;
+    }
+
    .bento-grid {
      grid-template-columns: 1fr;
    }
+
+    .hero-section {
+      margin-bottom: 2rem;
+    }
  }

  .bento-card {
@@ -177,21 +187,57 @@ import socials from "../data/socials.json";
    font-size: 1rem;
  }

-  .portfolio { background: linear-gradient(135deg, rgba(var(--accent-base--portfolio), 0.5) 0%, rgba(var(--accent-base--portfolio), 0.15) 100%); }
-  .blog { background: linear-gradient(135deg, rgba(var(--accent-base--blog), 0.8) 0%, rgba(var(--accent-base--blog), 0.15) 100%); }
-  .book { background: linear-gradient(135deg, rgba(var(--accent-base--book), 0.8) 0%, rgba(var(--accent-base--book), 0.15) 100%); }
+  .portfolio {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--accent-base--portfolio), 0.5) 0%,
+      rgba(var(--accent-base--portfolio), 0.15) 100%
+    );
+  }
+  .blog {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--accent-base--blog), 0.8) 0%,
+      rgba(var(--accent-base--blog), 0.15) 100%
+    );
+  }
+  .book {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--accent-base--book), 0.8) 0%,
+      rgba(var(--accent-base--book), 0.15) 100%
+    );
+  }

-  .portfolio:hover { box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1); }
-  .blog:hover { box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4); }
-  .book:hover { box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4); }
+  .portfolio:hover {
+    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1);
+  }
+  .blog:hover {
+    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4);
+  }
+  .book:hover {
+    box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4);
+  }

-  .portfolio .icon { color: rgb(var(--accent-base--portfolio)); }
-  .blog .icon { color: rgb(var(--accent-base--blog)); }
-  .book .icon { color: rgb(var(--accent-base--book)); }
+  .portfolio .icon {
+    color: rgb(var(--accent-base--portfolio));
+  }
+  .blog .icon {
+    color: rgb(var(--accent-base--blog));
+  }
+  .book .icon {
+    color: rgb(var(--accent-base--book));
+  }

  @keyframes fadeUp {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
  }

  .reveal-text {
@@ -209,12 +255,20 @@ import socials from "../data/socials.json";
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
  }
-  .portfolio { animation-delay: 0.4s; }
-  .blog { animation-delay: 0.6s; }
-  .book { animation-delay: 0.8s; }
+  .portfolio {
+    animation-delay: 0.4s;
+  }
+  .blog {
+    animation-delay: 0.6s;
+  }
+  .book {
+    animation-delay: 0.8s;
+  }

  @media (prefers-reduced-motion: reduce) {
-    .bento-card, .fade-in-up, .reveal-text {
+    .bento-card,
+    .fade-in-up,
+    .reveal-text {
      animation: none;
      opacity: 1;
      transform: none;
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,6 @@
-*, *::before, *::after {
+*,
+*::before,
+*::after {
  box-sizing: border-box;
  transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
 }
@@ -16,66 +18,79 @@
  inherits: true;
  initial-value: 214, 134, 249;
 }
+
@property --bg-image {
  syntax: '<image>';
  inherits: true;
  initial-value: url('../assets/backgrounds/bubble.svg');
 }
+
@property --bg-image-static {
  syntax: '<image>';
  inherits: true;
  initial-value: url('../assets/backgrounds/bubble-static.svg');
 }
+
@property --glass-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(20, 25, 35, 0.4);
 }
+
@property --glass-border {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.08);
 }
+
@property --glass-blur {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
 }
+
@property --glass-shadow {
  syntax: '<shadow>';
  inherits: true;
  initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 }
+
@property --text-main {
  syntax: '<color>';
  inherits: true;
  initial-value: #e0e7f0;
 }
+
@property --text-muted {
  syntax: '<color>';
  inherits: true;
  initial-value: #92a1b6;
 }
+
@property --bg-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #0d0117;
 }
+
@property --accent-base--default {
  syntax: '<color>';
  inherits: true;
  initial-value: 214, 134, 249;
 }
+
@property --accent-base--portfolio {
  syntax: '<color>';
  inherits: true;
  initial-value: 255, 181, 102;
 }
+
@property --accent-base--blog {
  syntax: '<color>';
  inherits: true;
  initial-value: 111, 221, 246;
 }
+
@property --accent-base--book {
  syntax: '<color>';
  inherits: true;
@@ -123,10 +138,24 @@ body[data-theme="book"] {
  --bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg');
 }

-body:has(nav a[href="/"]:hover) { --accent-base: var(--accent-base--default);}
-body:has(nav a[href="/portfolio"]:hover), body:has(.portfolio:hover) { --accent-base: var(--accent-base--portfolio); }
-body:has(nav a[href="/blog"]:hover), body:has(.blog:hover) { --accent-base: var(--accent-base--blog); }
-body:has(nav a[href="/book"]:hover), body:has(.book:hover) { --accent-base: var(--accent-base--book); }
+body:has(nav a[href="/"]:hover) {
+  --accent-base: var(--accent-base--default);
+}
+
+body:has(nav a[href="/portfolio"]:hover),
+body:has(.portfolio:hover) {
+  --accent-base: var(--accent-base--portfolio);
+}
+
+body:has(nav a[href="/blog"]:hover),
+body:has(.blog:hover) {
+  --accent-base: var(--accent-base--blog);
+}
+
+body:has(nav a[href="/book"]:hover),
+body:has(.book:hover) {
+  --accent-base: var(--accent-base--book);
+}

 html {
  background-color: var(--bg-color);
@@ -153,7 +182,12 @@ body {
  }
 }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  color: rgb(var(--accent-base));
  font-weight: 600;
  margin-top: 2rem;
@@ -215,13 +249,24 @@ a:hover {
 }

 /* Mobile Responsiveness */
-@media (max-width: 600px) {
+@media (max-width: 500px) {
  .container {
    padding: 1rem;
  }
+
  .glass-container {
    padding: 1.25rem;
  }
-  h1 { font-size: 1.75rem; }
-  h2 { font-size: 1.5rem; }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
 }