Simplify HTML, update colors

jacobwgillespie · May 8, 2024 · ddb6406 · ddb6406
1 parent c781eb7
commit ddb6406
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-
 # environment variables
 .dev.vars
 .env
@@ -23,3 +22,6 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# wrangler
+.wrangler/
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@astrojs/cloudflare": "^10.2.5",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@radix-ui/colors": "^3.0.0",
     "astro": "^4.7.1",
     "dataloader": "^2.2.2",
     "date-fns": "^3.6.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Item.astro b/src/components/Item.astro
@@ -10,8 +10,8 @@ const {item} = Astro.props
 const timeAgo = `${formatDistanceToNow(item.date)} ago`
 ---
 
-<div class="flex flex-col items-baseline gap-1 leading-none md:flex-row">
-  <a href={item.link} class="overflow-hidden overflow-ellipsis text-lg visited:text-stone-500 md:whitespace-nowrap">
+<div class="flex flex-col items-baseline gap-1 md:flex-row">
+  <a href={item.link} class="overflow-hidden overflow-ellipsis text-lg visited:text-sand10 md:whitespace-nowrap">
     {item.title}
   </a>
   {
@@ -33,7 +33,7 @@ const timeAgo = `${formatDistanceToNow(item.date)} ago`
       </a>
     )
   }
-  <time datetime={item.date} title={item.date} class="whitespace-nowrap text-sm text-stone-500">
+  <time datetime={item.date} title={item.date} class="whitespace-nowrap text-sm text-sand10">
     {timeAgo}
   </time>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -22,33 +22,29 @@ const items = await fetchFeedItems(Astro.locals.runtime.env, false)
     <link rel="alternate" type="application/atom+xml" title="Saved for Later RSS feed" href="/atom" />
     <link rel="alternate" type="application/json" title="Saved for Later RSS feed" href="/json" />
   </head>
-  <body class="bg-stone-800 text-stone-100">
-    <div class="flex min-h-screen flex-col p-4 md:p-16 md:pb-8">
-      <div class="flex-1 space-y-4 font-light">
-        <h1 class="text-2xl leading-none md:text-4xl">Saved for Later</h1>
+  <body class="flex min-h-screen flex-col gap-4 bg-sand3 p-4 font-light text-sand12 md:p-16 md:pb-8">
+    <h1 class="text-2xl md:text-4xl">Saved for Later</h1>
 
-        {items.map((item) => <Item item={item} />)}
-      </div>
+    {items.map((item) => <Item item={item} />)}
 
-      <footer class="mt-4 space-x-4 border-t border-stone-700 pt-4 text-sm text-stone-400 md:mt-8 md:pt-8">
-        <span>
-          Copyright &copy; {new Date().getFullYear()}{' '}
-          <a class="hover:text-slate-50" href="https://jacobwgillespie.com" target="_blank" rel="noreferrer">
-            Jacob Gillespie
-          </a>
-        </span>
-        <a class="hover:text-slate-50" href="/rss">RSS</a>
-        <a class="hover:text-slate-50" href="/atom">Atom</a>
-        <a class="hover:text-slate-50" href="/json">JSON</a>
-        <a
-          class="hover:text-slate-50"
-          href="https://github.com/jacobwgillespie/saved-for-later"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Source
+    <footer class="flex items-center gap-4 border-t border-sand6 pt-4 text-sm text-sand11">
+      <span>
+        Copyright &copy; {new Date().getFullYear()}{' '}
+        <a class="hover:text-sand12" href="https://jacobwgillespie.com" target="_blank" rel="noreferrer">
+          Jacob Gillespie
         </a>
-      </footer>
-    </div>
+      </span>
+      <a class="hover:text-sand12" href="/rss">RSS</a>
+      <a class="hover:text-sand12" href="/atom">Atom</a>
+      <a class="hover:text-sand12" href="/json">JSON</a>
+      <a
+        class="hover:text-sand12"
+        href="https://github.com/jacobwgillespie/saved-for-later"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Source
+      </a>
+    </footer>
   </body>
 </html>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -1,8 +1,16 @@
+import * as colors from '@radix-ui/colors'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        ...colors.sandDark,
+        ...colors.sageDark,
+        ...colors.oliveDark,
+      },
+    },
   },
   plugins: [],
 }