From 6654e4b9547e2119d03240637544dceb078be3c5 Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Sun, 22 Mar 2026 11:08:47 +0100 Subject: [PATCH] Better responsive design --- src/components/Navigation.astro | 11 ++- src/layouts/BaseLayout.astro | 1 + src/pages/index.astro | 116 +++++++++++++++++++++++--------- src/styles/global.css | 67 +++++++++++++++--- 4 files changed, 152 insertions(+), 43 deletions(-) diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 94bcd14..21d2b6a 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -7,7 +7,7 @@ import Logo from "../assets/logo.svg";
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 969b7ba..edda8c4 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -20,6 +20,7 @@ const { + diff --git a/src/pages/index.astro b/src/pages/index.astro index 0dab9b6..dbc7e81 100644 --- 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"; --- +
- {socials.map(({ name, url, icon }) => ( - - ))} + { + socials.map(({ name, url, icon }) => ( + + )) + }

Willkommen auf meiner Seite.

-

- Hier geht es unter anderem um: -

+

Hier geht es unter anderem um:

@@ -29,7 +30,7 @@ import socials from "../data/socials.json";

Meine neuesten Projekte und Experimente.

- +
@@ -37,7 +38,7 @@ import socials from "../data/socials.json";

Einige planlose Gedanken über Technologie und Design.

 - +
@@ -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,27 +187,63 @@ 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 { animation: fadeUp 0.8s ease-out forwards; } - + .fade-in-up { animation: fadeUp 1s ease-out forwards; opacity: 0; @@ -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; diff --git a/src/styles/global.css b/src/styles/global.css index a9d446b..8b5dd35 100644 --- 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: ''; inherits: true; initial-value: url('../assets/backgrounds/bubble.svg'); } + @property --bg-image-static { syntax: ''; inherits: true; initial-value: url('../assets/backgrounds/bubble-static.svg'); } + @property --glass-bg { syntax: ''; inherits: true; initial-value: rgba(20, 25, 35, 0.4); } + @property --glass-border { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0.08); } + @property --glass-blur { syntax: ''; inherits: true; initial-value: 16px; } + @property --glass-shadow { syntax: ''; inherits: true; initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } + @property --text-main { syntax: ''; inherits: true; initial-value: #e0e7f0; } + @property --text-muted { syntax: ''; inherits: true; initial-value: #92a1b6; } + @property --bg-color { syntax: ''; inherits: true; initial-value: #0d0117; } + @property --accent-base--default { syntax: ''; inherits: true; initial-value: 214, 134, 249; } + @property --accent-base--portfolio { syntax: ''; inherits: true; initial-value: 255, 181, 102; } + @property --accent-base--blog { syntax: ''; inherits: true; initial-value: 111, 221, 246; } + @property --accent-base--book { syntax: ''; inherits: true; @@ -87,7 +102,7 @@ --bg-color: #0d0117; --text-main: #e0e7f0; --text-muted: #92a1b6; - + --glass-bg: rgba(20, 25, 35, 0.4); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 16px; @@ -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; + } +} \ No newline at end of file