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

Create autonomic color theme
continuous-integration/drone/push Build is passing Details

This commit is contained in:
tobias 2024-05-19 12:22:42 +02:00
parent 03c14f0ca7
commit 36b5ab7cd2
4 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
astro/src/global.css Normal file
View File

@ -0,0 +1,19 @@
.autonomic {
/* Palette */
/* RGBA instead of hex so that opacity will work */
--absolute-white: 255, 255, 255;
--white: 243, 252, 248;
--shocking-pink: 253, 0, 159;
--shamrock-green: 0, 198, 88;
--bubblegum-pink: 255, 133, 203;
--bright-orange: 255, 96, 21;
/* Use these in tailwind.config.cjs */
--primary: var(--shocking-pink);
--secondary: var(--shamrock-green);
--tertiary: var(--bright-orange);
--text: var(--shocking-pink);
--textInverted: var(--absolute-white);
--background: var(--white);
}

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

@ -4,6 +4,7 @@ export interface Props {
title: string;
}
const { title } = Astro.props;
import "@/global.css"
---
<!DOCTYPE html>
@ -30,7 +31,7 @@ const { title } = Astro.props;
}
</style>
</head>
<body class="min-h-screen flex flex-col mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200">
<body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 font-plex text-primary bg-background">
<slot />
</body>
</html>

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

@ -7,7 +7,7 @@ const posts = await getPosts();
<ContentLayout title="Paystro">
<main class="" >
<h1 class="font-bold text-5xl">Paystro</h1>
<h1 class="font-bold text-5xl text-">Paystro</h1>
<p class="mt-3 text-lg">
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
@ -26,7 +26,7 @@ const posts = await getPosts();
posts.length > 0 ? (
posts.map((post) => (
<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="bg-secondary text-textInverted px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
<h3 class="font-bold text-lg">{post.title}</h3>
{post.publishedDate && (
<p>

11
astro/tailwind.config.cjs
View File

@ -7,11 +7,12 @@ module.exports = {
},
extend: {
colors: {
gray: {
DEFAULT: "#111111",
light: "#888888",
dark: "#222222",
},
primary: "rgba(var(--primary))",
secondary: "rgba(var(--secondary))",
tertiary: "rgba(var(--tertiary))",
text: "rgba(var(--text))",
textInverted: "rgba(var(--textInverted))",
background: "rgba(var(--background))",
},
},
},