update styling
Signed-off-by: Max Schmidt <max.schmidt@outlook.de>
This commit is contained in:
parent
a6d794000a
commit
fd20d085ba
@ -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 {
|
||||||
|
@ -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")}
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user