From 36b5ab7cd211c9bde49324ed4b71d1c0e41287d9 Mon Sep 17 00:00:00 2001 From: tobias Date: Sun, 19 May 2024 12:22:42 +0200 Subject: [PATCH] Create autonomic color theme --- astro/src/global.css | 19 +++++++++++++++++++ astro/src/layouts/BaseLayout.astro | 3 ++- astro/src/pages/index.astro | 4 ++-- astro/tailwind.config.cjs | 11 ++++++----- 4 files changed, 29 insertions(+), 8 deletions(-) create mode 100644 astro/src/global.css 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))", }, }, },