nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved mobile layout

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-25 14:31:52 +01:00
parent da0c3b5b67
commit 52e11a422c
2 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/layouts/Layout.astro
View File

@@ -42,26 +42,26 @@ try {
<body class={`bg-base text-text selection:bg-surface2 selection:text-text ${siteConfig.theme}`}> <body class={`bg-base text-text selection:bg-surface2 selection:text-text ${siteConfig.theme}`}>
<div class="fixed inset-0 z-[-1] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-surface0 via-base to-base"></div> <div class="fixed inset-0 z-[-1] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-surface0 via-base to-base"></div>
<nav class="max-w-6xl mx-auto px-6 py-8"> <nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
<header class="glass px-6 py-4 flex items-center justify-between"> <header class="glass px-4 py-3 md:px-6 md:py-4 flex items-center justify-between">
<div> <div>
<a href="/" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block"> <a href="/" class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
{siteConfig.title} {siteConfig.title}
</a> </a>
<p class="text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p> <p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
</div> </div>
<div class="flex gap-4 items-center"> <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base">
<a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a> <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
<a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a> <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
</div> </div>
</header> </header>
</nav> </nav>
<main class="max-w-6xl mx-auto px-6 py-8"> <main class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
<slot /> <slot />
</main> </main>
<footer class="max-w-6xl mx-auto px-6 py-12 text-center text-sm text-subtext1 border-t border-white/5 mt-12"> <footer class="max-w-6xl mx-auto px-4 md:px-6 py-8 md:py-12 text-center text-xs md:text-sm text-subtext1 border-t border-white/5 mt-8 md:mt-12">
<p class="mb-2">{siteConfig.footer}</p> <p class="mb-2">{siteConfig.footer}</p>
<div class="text-subtext0 opacity-50"> <div class="text-subtext0 opacity-50">
&copy; {new Date().getFullYear()} {siteConfig.title} &copy; {new Date().getFullYear()} {siteConfig.title}

28
frontend/src/pages/index.astro
View File

@@ -33,44 +33,42 @@ function formatSlug(slug: string) {
--- ---
<Layout title="Home"> <Layout title="Home">
<div class="space-y-8"> <div class="space-y-6 md:space-y-8">
<section class="text-center py-12"> <section class="text-center py-6 md:py-12">
<h1 class="text-5xl font-extrabold mb-4 pb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal"> <h1 class="text-3xl md:text-5xl font-extrabold mb-3 md:mb-4 pb-2 md:pb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
Welcome to my blog Welcome to my blog
</h1> </h1>
<p class="text-subtext1 text-lg max-w-2xl mx-auto"> <p class="text-subtext1 text-base md:text-lg max-w-2xl mx-auto px-4 md:px-0">
Thoughts on software, design, and building things with Rust and Astro. Thoughts on software, design, and building things with Rust and Astro.
</p> </p>
</section> </section>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
{error && ( {error && (
<div class="glass p-6 text-red text-center border-red/20"> <div class="glass p-4 md:p-6 text-red text-center border-red/20 text-sm md:text-base">
{error} {error}
</div> </div>
)} )}
{posts.length === 0 && !error && ( {posts.length === 0 && !error && (
<div class="glass p-12 text-center text-subtext0"> <div class="glass p-8 md:p-12 text-center text-subtext0 text-sm md:text-base">
<p>No posts found yet. Add some .md files to the data/posts directory!</p> <p>No posts found yet. Add some .md files to the data/posts directory!</p>
</div> </div>
)} )}
{posts.map((post) => ( {posts.map((post) => (
<a href={`/posts/${post.slug}`} class="group"> <a href={`/posts/${post.slug}`} class="group block">
<article class="glass p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99]"> <article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] h-full flex flex-col justify-between">
<div class="flex justify-between items-start">
<div> <div>
<h2 class="text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2"> <h2 class="text-xl md:text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-1 md:mb-2 line-clamp-2">
{formatSlug(post.slug)} {formatSlug(post.slug)}
</h2> </h2>
<p class="text-subtext0"> <p class="text-subtext0 text-sm md:text-base line-clamp-3">
Read more about {formatSlug(post.slug)}... Read more about {formatSlug(post.slug)}...
</p> </p>
</div> </div>
<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity"> <div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end mt-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-6 md:h-6"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div> </div>
</article> </article>
</a> </a>