update styling

Signed-off-by: Max Schmidt <max.schmidt@outlook.de>
This commit is contained in:
Max Schmidt 2023-08-15 21:08:39 +02:00
parent a6d794000a
commit fd20d085ba
3 changed files with 4 additions and 5 deletions

View File

@ -1,5 +1,4 @@
--- ---
import "@/global.css";
import ViewTransitions from "astro/components/ViewTransitions.astro"; import ViewTransitions from "astro/components/ViewTransitions.astro";
export interface Props { export interface Props {

View File

@ -7,7 +7,7 @@ const posts = await getPosts();
<Layout title="Astroad"> <Layout title="Astroad">
<main class="" > <main class="" >
<h1>Astroad</h1> <h1 class="font-bold text-5xl">Astroad</h1>
<p class="mt-3 text-lg"> <p class="mt-3 text-lg">
Astroad is a pre-configured setup for Astro and Payloadcms that makes it Astroad is a pre-configured setup for Astro and Payloadcms that makes it
easy to get started with building your website. With Astroad, you'll have easy to get started with building your website. With Astroad, you'll have
@ -20,14 +20,14 @@ const posts = await getPosts();
reverse proxy. This setup provides a secure and scalable production reverse proxy. This setup provides a secure and scalable production
environment for your website. environment for your website.
</p> </p>
<h2 class="mt-6">Posts</h2> <h2 class="mt-6 font-bold text-2xl">Posts</h2>
<div class="flex gap-4 mt-3 flex-wrap"> <div class="flex gap-4 mt-3 flex-wrap">
{ {
posts.length > 0 ? ( posts.length > 0 ? (
posts.map((post) => ( posts.map((post) => (
<a href={`/posts/${post.id}/`}> <a href={`/posts/${post.id}/`}>
<article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform"> <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
<h3 transition:name=`title-${post.id}`>{post.title}</h3> <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
{post.publishedDate && ( {post.publishedDate && (
<p> <p>
{new Date(post.publishedDate).toLocaleDateString("de-DE")} {new Date(post.publishedDate).toLocaleDateString("de-DE")}

View File

@ -21,7 +21,7 @@ const post = id && (await getPost(id));
<Layout title={`Astroad | ${post.title!}`}> <Layout title={`Astroad | ${post.title!}`}>
<div class="space-y-3 my-3"> <div class="space-y-3 my-3">
<a href="/">BACK</a> <a href="/">BACK</a>
<h1 transition:name=`title-${post.id}`>{post.title}</h1> <h1 class="font-bold text-5xl" transition:name=`title-${post.id}`>{post.title}</h1>
{post.content && <Content content={post.content} />} {post.content && <Content content={post.content} />}
</div> </div>
</Layout> </Layout>