From 456db37eb61c92dffa75092f7662c05435c08962 Mon Sep 17 00:00:00 2001
From: tobias <tobias-ahlqvist@outlook.com>
Date: Sun, 19 May 2024 15:33:37 +0200
Subject: [PATCH] Configure reasonable-ish CSS defaults

---
 astro/src/components/Content.astro |  5 +---
 astro/src/components/Header.astro  |  8 +++---
 astro/src/global.css               | 46 +++++++++++++++++++++++++++++-
 astro/src/layouts/BaseLayout.astro |  2 +-
 astro/src/pages/index.astro        |  4 +--
 astro/src/pages/posts/[id].astro   |  6 ++--
 astro/tailwind.config.cjs          |  1 +
 7 files changed, 57 insertions(+), 15 deletions(-)
diff --git a/astro/src/components/Content.astro b/astro/src/components/Content.astro
index 03a3a87..b66d864 100644
--- a/astro/src/components/Content.astro
+++ b/astro/src/components/Content.astro
@@ -5,8 +5,6 @@ import { getImageSrc } from "@/utils/payload";
 const { content } = Astro.props;
 const contentArray = getContentArray(content);
 ---
-
-<article>
   {
     contentArray.map((value) => {
       if (typeof value === "string") {
@@ -23,5 +21,4 @@ const contentArray = getContentArray(content);
         );
       }
     })
-  }
-</article>
+  }
\ No newline at end of file
diff --git a/astro/src/components/Header.astro b/astro/src/components/Header.astro
index a107ef1..54dac69 100644
--- a/astro/src/components/Header.astro
+++ b/astro/src/components/Header.astro
@@ -18,16 +18,16 @@ const links = [
 
 <header class="flex justify-between py-6">
     <div>
-        <a href="/">
-            <span class="font-extrabold">
+        <a href="/" class="decoration-transparent">
+            <span class="text-2xl font-extrabold ">
                 Logo
             </span>
         </a>
     </div>
     <nav>
-        <ul class="flex gap-4 font-bold">
+        <ul class="flex gap-4 font-bold list-none">
             {links.map((item, index) => (
-                <li>
+                <li class="decoration-transparent">
                     <a href={item.link}>{item.label}</a>
                 </li>
             ))}
diff --git a/astro/src/global.css b/astro/src/global.css
index 80663d1..e025722 100644
--- a/astro/src/global.css
+++ b/astro/src/global.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .autonomic {
     /* Palette */
     /* RGBA instead of hex so that opacity will work */
@@ -15,5 +19,45 @@
     
     --text: var(--shocking-pink);
     --textInverted: var(--absolute-white);
+    --link: var(--shamrock-green);
     --background: var(--white);
-}
\ No newline at end of file
+}
+
+@layer components {
+
+    :root {
+        @apply ring-secondary;
+    }
+
+    h1 {
+        @apply text-5xl font-bold;
+    }
+    
+    h2 {
+        @apply text-4xl font-semibold;
+    }
+
+    h3 {
+        @apply text-2xl font-semibold;
+    }
+
+    h4, h5, h6 {
+        @apply text-xl font-semibold;
+    }
+
+    p, span, li, a {
+        @apply text-xl;
+    }
+
+    a {
+        @apply text-link underline;
+    }
+
+    ol {
+        @apply list-decimal;
+    }
+    
+    ul {
+        @apply list-disc;
+    }
+}
diff --git a/astro/src/layouts/BaseLayout.astro b/astro/src/layouts/BaseLayout.astro
index 506cca3..0dcc458 100644
--- a/astro/src/layouts/BaseLayout.astro
+++ b/astro/src/layouts/BaseLayout.astro
@@ -31,7 +31,7 @@ import "@/global.css"
       }
     </style>
   </head>
-  <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 font-plex text-primary bg-background">
+  <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 text-primary bg-background">
     <slot />
   </body>
 </html>
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index 30a1731..7e1a904 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -7,8 +7,8 @@ const posts = await getPosts();
 
 <ContentLayout title="Paystro">
   <main class="" >
-    <h1 class="font-bold text-5xl text-">Paystro</h1>
-    <p class="mt-3 text-lg">
+    <h1 class="">Paystro</h1>
+    <p class="mt-3">
       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
       a complete development environment that you can run locally using Docker.
diff --git a/astro/src/pages/posts/[id].astro b/astro/src/pages/posts/[id].astro
index 3f5ae6c..8e65a1d 100644
--- a/astro/src/pages/posts/[id].astro
+++ b/astro/src/pages/posts/[id].astro
@@ -19,10 +19,10 @@ const post = id && (await getPost(id));
 {
   post ? (
     <ContentLayout title={`Paystro | ${post.title!}`}>
-      <div class="space-y-3 my-3">
-        <h1 class="font-bold text-5xl">{post.title}</h1>
+      <article class="space-y-3 my-3 max-w-prose">
+        <h1 class="">{post.title}</h1>
         {post.content && <Content content={post.content} />}
-      </div>
+      </article>
     </ContentLayout>
   ) : (
     <div>404</div>
diff --git a/astro/tailwind.config.cjs b/astro/tailwind.config.cjs
index cf175ca..cb1bd5d 100644
--- a/astro/tailwind.config.cjs
+++ b/astro/tailwind.config.cjs
@@ -12,6 +12,7 @@ module.exports = {
         tertiary: "rgba(var(--tertiary))",
         text: "rgba(var(--text))",
         textInverted: "rgba(var(--textInverted))",
+        link: "rgba(var(--link))",
         background: "rgba(var(--background))",
       },
     },
