Configure reasonable-ish CSS defaults

2024-05-19 15:33:37 +02:00 · 2024-05-19 15:33:37 +02:00 · 456db37eb6
commit 456db37eb6
parent 36b5ab7cd2
7 changed files with 57 additions and 15 deletions
--- 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") {
@ -24,4 +22,3 @@ const contentArray = getContentArray(content);
      }
    })
  }
-</article>
--- 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>
            ))}
--- 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);
 }
+
+@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;
+    }
+}
--- 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>
--- 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.
--- 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>
--- 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))",
      },
    },