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

Create autonomic color theme
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
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; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
import "@/global.css"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -30,7 +31,7 @@ const { title } = Astro.props;
} }
</style> </style>
</head> </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 /> <slot />
</body> </body>
</html> </html>

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

@ -7,7 +7,7 @@ const posts = await getPosts();
<ContentLayout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <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"> <p class="mt-3 text-lg">
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
@ -26,7 +26,7 @@ const posts = await getPosts();
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="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> <h3 class="font-bold text-lg">{post.title}</h3>
{post.publishedDate && ( {post.publishedDate && (
<p> <p>

11
astro/tailwind.config.cjs
View File

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