generated from autonomic-cooperative/astro-payload-template
Create autonomic color theme
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
03c14f0ca7
commit
36b5ab7cd2
19
astro/src/global.css
Normal file
19
astro/src/global.css
Normal 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);
|
||||||
|
}
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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))",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user