diff --git a/astro/src/global.css b/astro/src/global.css new file mode 100644 index 0000000..80663d1 --- /dev/null +++ b/astro/src/global.css @@ -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); +} \ No newline at end of file diff --git a/astro/src/layouts/BaseLayout.astro b/astro/src/layouts/BaseLayout.astro index 69a0470..506cca3 100644 --- a/astro/src/layouts/BaseLayout.astro +++ b/astro/src/layouts/BaseLayout.astro @@ -4,6 +4,7 @@ export interface Props { title: string; } const { title } = Astro.props; +import "@/global.css" --- @@ -30,7 +31,7 @@ const { title } = Astro.props; } - + diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro index 1ee4ee3..30a1731 100644 --- a/astro/src/pages/index.astro +++ b/astro/src/pages/index.astro @@ -7,7 +7,7 @@ const posts = await getPosts();
-

Paystro

+

Paystro

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) => ( -

+

{post.title}

{post.publishedDate && (

diff --git a/astro/tailwind.config.cjs b/astro/tailwind.config.cjs index 5da1796..cf175ca 100644 --- a/astro/tailwind.config.cjs +++ b/astro/tailwind.config.cjs @@ -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))", }, }, },