autonomic-cooperative/astro-payload-test
0
0
Fork 0
generated from autonomic-cooperative/astro-payload-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Configure reasonable-ish CSS defaults

Browse Source
This commit is contained in:
tobias 2024-05-19 15:33:37 +02:00
parent 36b5ab7cd2
commit 456db37eb6
7 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
astro/src/components/Content.astro
View File

@ -5,8 +5,6 @@ import { getImageSrc } from "@/utils/payload";
const { content } = Astro.props; const { content } = Astro.props;
const contentArray = getContentArray(content); const contentArray = getContentArray(content);
--- ---
<article>
{ {
contentArray.map((value) => { contentArray.map((value) => {
if (typeof value === "string") { if (typeof value === "string") {
@ -23,5 +21,4 @@ const contentArray = getContentArray(content);
); );
} }
}) })
} }
</article>

8
astro/src/components/Header.astro
View File

@ -18,16 +18,16 @@ const links = [
<header class="flex justify-between py-6"> <header class="flex justify-between py-6">
<div> <div>
<a href="/"> <a href="/" class="decoration-transparent">
<span class="font-extrabold"> <span class="text-2xl font-extrabold ">
Logo Logo
</span> </span>
</a> </a>
</div> </div>
<nav> <nav>
<ul class="flex gap-4 font-bold"> <ul class="flex gap-4 font-bold list-none">
{links.map((item, index) => ( {links.map((item, index) => (
<li> <li class="decoration-transparent">
<a href={item.link}>{item.label}</a> <a href={item.link}>{item.label}</a>
</li> </li>
))} ))}

46
astro/src/global.css
View File

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.autonomic { .autonomic {
/* Palette */ /* Palette */
/* RGBA instead of hex so that opacity will work */ /* RGBA instead of hex so that opacity will work */
@ -15,5 +19,45 @@
--text: var(--shocking-pink); --text: var(--shocking-pink);
--textInverted: var(--absolute-white); --textInverted: var(--absolute-white);
--link: var(--shamrock-green);
--background: var(--white); --background: var(--white);
} }
@layer components {
:root {
@apply ring-secondary;
}
h1 {
@apply text-5xl font-bold;
}
h2 {
@apply text-4xl font-semibold;
}
h3 {
@apply text-2xl font-semibold;
}
h4, h5, h6 {
@apply text-xl font-semibold;
}
p, span, li, a {
@apply text-xl;
}
a {
@apply text-link underline;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
}

2
astro/src/layouts/BaseLayout.astro
View File

@ -31,7 +31,7 @@ import "@/global.css"
} }
</style> </style>
</head> </head>
<body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 font-plex text-primary bg-background"> <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 text-primary bg-background">
<slot /> <slot />
</body> </body>
</html> </html>

4
astro/src/pages/index.astro
View File

@ -7,8 +7,8 @@ const posts = await getPosts();
<ContentLayout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <main class="" >
<h1 class="font-bold text-5xl text-">Paystro</h1> <h1 class="">Paystro</h1>
<p class="mt-3 text-lg"> <p class="mt-3">
Paystro is a pre-configured setup for Astro and Payloadcms that makes it Paystro is a pre-configured setup for Astro and Payloadcms that makes it
easy to get started with building your website. With Paystro, you'll have easy to get started with building your website. With Paystro, you'll have
a complete development environment that you can run locally using Docker. a complete development environment that you can run locally using Docker.

6
astro/src/pages/posts/[id].astro
View File

@ -19,10 +19,10 @@ const post = id && (await getPost(id));
{ {
post ? ( post ? (
<ContentLayout title={`Paystro | ${post.title!}`}> <ContentLayout title={`Paystro | ${post.title!}`}>
<div class="space-y-3 my-3"> <article class="space-y-3 my-3 max-w-prose">
<h1 class="font-bold text-5xl">{post.title}</h1> <h1 class="">{post.title}</h1>
{post.content && <Content content={post.content} />} {post.content && <Content content={post.content} />}
</div> </article>
</ContentLayout> </ContentLayout>
) : ( ) : (
<div>404</div> <div>404</div>

1
astro/tailwind.config.cjs
View File

@ -12,6 +12,7 @@ module.exports = {
tertiary: "rgba(var(--tertiary))", tertiary: "rgba(var(--tertiary))",
text: "rgba(var(--text))", text: "rgba(var(--text))",
textInverted: "rgba(var(--textInverted))", textInverted: "rgba(var(--textInverted))",
link: "rgba(var(--link))",
background: "rgba(var(--background))", background: "rgba(var(--background))",
}, },
}, },