clean up css

README.md

···
 
 This has images / libre font / `.css` files to be used stylistically throughout the site.
 
+##### Styles (AKA, abomination)
+
+This is the most messed up design system but I sure tried my best with it. The base style uses [daisyui](https://daisyui.com/docs/) and [UnoCSS](https://unocss.dev/guide/), which means the configurations are Strange(tm). Beware of `uno.config.ts`, please don't poke it too hard unless you know what you're doing.
+
+This uses CSS layers to make things work. Any styles used in `base.css` will overwrite everything else across the entire site. This should only be modified sparingly.
+
+All styling should be *within* components or pages via HTML classes or within scoped `<style>` blocks. There are various colors and sizes to keep track of - at some point, I'll document them.
+
+To make contribute new themes, check out the examples inside the `src/assets/styles/themes` folder. You can use the [daisyui Theme Generator](https://daisyui.com/theme-generator/) to quickly build a theme!
+
 #### Components: `src/components` 
 
 These hold components that are reused throughout `src/pages`. Like PHP includes but in HTML and JavaScript (well, technically it's JSX).

src/assets/styles/base.css

···
-@import "reset.css";
+/* import themes here */
 @import "./themes/evergarden.css";
 @import "./themes/rosepine.css";
 
 :root {
   /* size tokens */
   /* @link https://utopia.fyi/type/calculator?c=360,18,1.067,1240,20,1.125,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */
-  --text-xs: clamp(0.9877rem, 0.9884rem + -0.0009vw, 0.9882rem);
-  --text-sm: clamp(1.0544rem, 1.0311rem + 0.1032vw, 1.1111rem);
-  --text-base: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
-  --text-lg: clamp(1.2004rem, 1.1162rem + 0.3743vw, 1.4063rem);
-  --text-xl: clamp(1.2808rem, 1.1576rem + 0.5477vw, 1.582rem);
-  --text-2xl: clamp(1.3666rem, 1.1976rem + 0.7512vw, 1.7798rem);
-  --text-3xl: clamp(1.4582rem, 1.2356rem + 0.9892vw, 2.0023rem);
-  --text-4xl: clamp(1.5559rem, 1.2709rem + 1.2667vw, 2.2525rem);
-  --text-5xl: clamp(1.6601rem, 1.3026rem + 1.5891vw, 2.5341rem);
-  --text-6xl: clamp(1.7713rem, 1.3297rem + 1.9628vw, 2.8509rem);
-  --text-7xl: clamp(1.89rem, 1.3512rem + 2.3949vw, 3.2072rem);
-  --text-8xl: clamp(2.0167rem, 1.3656rem + 2.8936vw, 3.6081rem);
-  --text-9xl: clamp(2.1518rem, 1.3715rem + 3.468vw, 4.0592rem);
+  --step--2: clamp(0.9877rem, 0.9884rem + -0.0009vw, 0.9882rem);
+  --step--1: clamp(1.0544rem, 1.0311rem + 0.1032vw, 1.1111rem);
+  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --step-1: clamp(1.2004rem, 1.1162rem + 0.3743vw, 1.4063rem);
+  --step-2: clamp(1.2808rem, 1.1576rem + 0.5477vw, 1.582rem);
+  --step-3: clamp(1.3666rem, 1.1976rem + 0.7512vw, 1.7798rem);
+  --step-4: clamp(1.4582rem, 1.2356rem + 0.9892vw, 2.0023rem);
+  --step-5: clamp(1.5559rem, 1.2709rem + 1.2667vw, 2.2525rem);
+  --step-6: clamp(1.6601rem, 1.3026rem + 1.5891vw, 2.5341rem);
+  --step-7: clamp(1.7713rem, 1.3297rem + 1.9628vw, 2.8509rem);
+  --step-8: clamp(1.89rem, 1.3512rem + 2.3949vw, 3.2072rem);
+  --step-9: clamp(2.0167rem, 1.3656rem + 2.8936vw, 3.6081rem);
+  --step-10: clamp(2.1518rem, 1.3715rem + 3.468vw, 4.0592rem);
+
+  /* space tokens */
+  /* @link https://utopia.fyi/space/calculator?c=360,18,1.067,1240,20,1.125,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */
+  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
+  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
+  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
+  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
+  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
+  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
   
   /* font tokens */
   --font-serif: var(--plex-serif);
···
   @supports (min-height: 100svh) {
     min-height: 100svh;
   }
-}
+}
+
+h1, h2, h3 {
+  font-family: var(--font-display);
+  font-weight: normal;
+}
+h4, h5, h6 { font-family: var(--font-sans); }
+h1 { font-size: var(--step-6); }
+h2 { font-size: var(--step-5); }
+h3 { font-size: var(--step-4); }
+h4 { font-size: var(--step-3); }
+h5 { font-size: var(--step-2); }
+h6 { font-size: var(--step-1); }

src/components/Navbar.astro

···
 ---
 <nav id="main-nav" class="navbar bg-base-100">
   <div class="flex-1">
-    <a href="/" class="btn btn-ghost font-display text-xl">Home</a>
+    <a href="/" class="font-display text-xl ml-3">Home</a>
   </div>
-  <div class="flex items-center gap2">
+  <div class="flex items-center gap-2">
     <search>
       <form action="" method="get">
         <input type="search" class="input" />
···
         : <li><a href="/login">Login</a></li>
       }
       <li>
-        <button id="trigger-settings" class="btn btn-neutral btn-square">
+        <button id="trigger-settings" class="btn btn-neutral btn-square ml-3">
           <Cog aria-label="Open settings" />
         </button>
       </li>

src/components/Popover.astro

···
 <div
   {id} 
   class:list={[
-    "popover-content",
+    "popover-content card w-72 border-2 border-accent shadow shadow-inherit",
     className,
   ]} 
-  role="tooltip"  
+  role="tooltip" 
   popover="auto" 
   {...rest} 
 >
···
   }
 
   .popover-content {
-    @apply dropdown card mx-0 inset-auto bg-base-100 w-72 shadow;
+    @apply dropdown bg-base-100;
 
     @supports (position-anchor: var(--anchor)) and (left: anchor(center)) {
       position-anchor: var(--anchor);
···
   
   triggers.forEach(trigger => {
     const btn = trigger as HTMLButtonElement;
-    // triggering button will always end with "-trigger"
-    // so slice that from the id
+    // triggering button will always end with "-trigger", so slice that from the id
     const id = btn.id.slice(0, -8);
     const popover = document.getElementById(`${id}`) as HTMLElement;
     

src/components/Settings.astro

···
     </fieldset>
 
     <fieldset class="fieldset">
-      <label for="font-family">Font family</label>
-      <select class="select" name="fontFamily" id="font-family">
+      <label for="font-family" class="label">Font family</label>
+      <select name="fontFamily" id="font-family" class="select">
         <option value="default">Choose...</option>
         <option value="--font-serif">serif</option>
         <option value="--font-mono">monospaced</option>
···
     </fieldset>
 
     <fieldset class="fieldset">
-      <label for="font-size">text size</label>
-      <input class="range" type="range" name="fontSize" id="font-size" min="-1" max="2" step="1" />
+      <label for="font-size" class="label">Text size</label>
+      <input class="range" type="range" name="fontSize" id="font-size" min="-1" max="2" step="1" value="0" />
     </fieldset>
 
     <fieldset class="fieldset">
-      <label for="line-height">line height</label>
-      <input class="range" type="range" name="lineHeight" id="line-height" min="1" max="2" step="0.05" />
+      <label for="line-height" class="label">Line height</label>
+      <input class="range" type="range" name="lineHeight" id="line-height" min="1" max="2" step="0.05" value="1" />
     </fieldset>
     
     <fieldset class="fieldset">
-      <label for="letter-spacing">letter spacing</label>
-      <input class="range" type="range" name="letterSpacing" id="letter-spacing" min="0" max="0.1" step="0.01" />
+      <label for="letter-spacing" class="label">Letter spacing</label>
+      <input class="range" type="range" name="letterSpacing" id="letter-spacing" min="0" max="0.1" step="0.01" value="0" />
     </fieldset>
 
     <fieldset class="fieldset">
-      <label for="word-spacing">word spacing</label>
-      <input class="range" type="range" name="wordSpacing" id="word-spacing" min="0" max="0.5" step="0.01" />
+      <label for="word-spacing" class="label">Word spacing</label>
+      <input class="range" type="range" name="wordSpacing" id="word-spacing" min="0" max="0.5" step="0.01" value="0" />
     </fieldset>
 
     <div id="test-area" class="mt-4 text-(length:--size) leading-(--line-height) tracking-(--letter-spacing) line-clamp-4">
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores quae dolorum debitis vero nostrum nobis aspernatur ipsam sunt dolorem, eum ut corrupti unde commodi soluta natus repellendus totam animi adipisci.</p>
     </div>
 
+    <!-- reset here? -->
+     
     <div class="modal-action">
       <button formmethod="dialog" value="default" class="btn btn-neutral">Cancel</button>
       <button id="confirm-settings" class="btn btn-primary">Save</button>
···
   const submitter = document.getElementById("confirm-settings");
   const test = document.getElementById("test-area");
 
+  // on load, grab the preferences from private data
+
   form?.addEventListener("submit", (e) => {
     const target = e.target as HTMLFormElement;
-    if (target.nodeValue === null) {
-      return;
-    } else {
-      e.preventDefault();
-    }
+    if (target.nodeValue === null) return; e.preventDefault();
   });
 
   inputs.forEach((input) => {

src/layouts/Layout.astro

···
 		<meta name="viewport" content="width=device-width" />
 		<title>{title}</title>
 		<Font cssVariable="--quattro" preload />
-		<Font cssVariable="--dyslexic" preload />
-		<Font cssVariable="--intel-mono" preload />
-		<Font cssVariable="--plex-serif" preload />
+		<Font cssVariable="--dyslexic" />
+		<Font cssVariable="--intel-mono" />
+		<Font cssVariable="--plex-serif" />
 		<Font cssVariable="--jacquard-12" preload />
 		<slot name="head" />
 	</head>
···
 			<Navbar />
 		</header>
 
-		<div class:list={["sm:w-10/12 sm:mx-auto max-w-full mx-6 text-base", className]} {...rest}>
+		<div class:list={["sm:w-10/12 sm:mx-auto max-w-full mx-6 mb-5", className]} {...rest}>
 			<slot />
 		</div>
 
···
 </html>
 
 <style>
-	@reference "../assets/styles/global.css";
-
 	.skip-link {
 		@apply absolute top-3 -left-full transition-all ease-in-out btn btn-ghost;
 		

src/pages/errors/not-found.astro

···
 import Layout from "@/layouts/Layout.astro";
 ---
 <Layout>
-  <h1 class="title">Not found!</h1>
+  <h1>Not found!</h1>
   <p>There's a chance that the resource you're looking for doesn't exist or there was a typo in the URL.</p>
   <p>You can go back to the <a href="/">home page</a> or report the issue through the contact form.</p>
 </Layout>

src/pages/errors/unauthorized.astro

···
 import Layout from "@/layouts/Layout.astro";
 ---
 <Layout>
-  <h1 class="title">Unauthorized</h1>
+  <h1>Unauthorized</h1>
   <p>You don't have the proper permissions to make that operation.</p>
 </Layout>

src/pages/index.astro

···
 ---
 <Layout skipLink="content">
 	<main id="content">
-		<h1 class="font-display text-xl">hi</h1>
+		<h1>hi</h1>
 		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium eum est quisquam distinctio magni recusandae quia vero tempore consectetur! Dolore repellat, voluptatem dignissimos sit eaque iste atque facilis in saepe?</p>
 		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, maxime libero eveniet repellat corporis, architecto voluptate maiores ullam accusamus quasi nostrum nihil placeat cum earum ex voluptatum, harum sunt quam!</p>
 	</main>

src/pages/login.astro

···
 ---
 <Layout>
   <main id="content">
-    <h1 class="font-display text-xl">Log in</h1>
+    <h1>Log in</h1>
     {
       currentUser ? (
         // If there's a current user, show the log out button

src/pages/user/[userDid].astro

···
 }
 ---
 <Layout>
-  <h1 class="title">
+  <h1>
     {user.Users.nickname
       ? user.Users.nickname
       : await didToHandle(user.Users.userDid)}

src/pages/works/index.astro

···
 ---
 
 <Layout>
-  <h1 class="title">Works</h1>
+  <h1>Works</h1>
 
   <main id="content" class="flex flex-col gap-5 max-w-full">
     {loggedInUser && 
···
               {Works.createdAt.toLocaleDateString()}
             </time>
           </div>
-          {JSON.stringify(Works.tags)}
-          {/* <ul class="flex flex-wrap gap-1.5">
-            {(Works.tags as Tag[]).map((tag: Tag) => (
-              <li><a class="tag" href={tag.url}>{tag.label}</a></li>
-            ))}
-          </ul> */}
+          {Array.isArray(Works.tags)
+            ? (<ul class="flex flex-wrap gap-1.5">
+                {(Works.tags as Tag[]).map((tag: Tag) => (
+                  <li><a class="tag" href={tag.url}>{tag.label}</a></li>
+                ))}
+              </ul>)
+            : <pre>{JSON.stringify(Works.tags)}</pre>}
         </header>
 
         <div class="card-body prose lg:prose-xl">
···
 </Layout>
 
 <style>
-  @reference "../../assets/styles/global.css";
-
   .tag {
     @apply btn btn-accent;  
   }

uno.config.ts

···
-import { defineConfig, presetWind4, transformerDirectives } from "unocss";
+import { defineConfig, presetTypography, presetWind4, transformerDirectives, type PresetWind4Theme } from "unocss";
 import { presetDaisy } from "@ameinhardt/unocss-preset-daisy";
 // @ts-expect-error
 import theme from 'daisyui/functions/variables.js';
 
-export default defineConfig({
+export default defineConfig<PresetWind4Theme>({
+  outputToCssLayers: true,
+  layers: {
+    'properties': -6,
+    'theme': -5,
+    'base': -4,
+    'daisy-base': -3,
+    'daisy-components': -2,
+    'shortcuts': -1,
+    'default': 0,
+    'typography': 1,
+  },
   presets: [
     presetDaisy(),
     presetWind4(),
+    presetTypography({
+      colorScheme: {
+        "body": ["color-mix(in oklab,var(--color-base-content)80%,#0000)", "color-mix(in oklab,var(--color-base-content)80%,#0000)"],
+        "headings": ["var(--color-base-content)", "var(--color-base-content)"],
+        "lead": ["var(--color-base-content)", "var(--color-base-content)"],
+        "links": ["var(--color-content)", "var(--color-content)"],
+        "bold": ["var(--color-base-content)", "var(--color-base-content)"],
+        "counters": ["var(--color-base-content)", "var(--color-base-content)"],
+        "bullets": ["color-mix(in oklab,var(--color-base-content)50%,#0000)", "color-mix(in oklab,var(--color-base-content)50%,#0000)"],
+        "hr": ["color-mix(in oklab,var(--color-base-content)20%,#0000)", "color-mix(in oklab,var(--color-base-content)20%,#0000)"],
+        "quotes": ["var(--color-base-content)", "var(--color-base-content)"],
+        "quote-borders": ["color-mix(in oklab,var(--color-base-content)20%,#0000)", "color-mix(in oklab,var(--color-base-content)20%,#0000)"],
+        "captions": ["color-mix(in oklab,var(--color-base-content)50%,#0000)", "color-mix(in oklab,var(--color-base-content)50%,#0000)"],
+        "kbd": ["color-mix(in oklab,var(--color-base-content)80%,#0000)", "color-mix(in oklab,var(--color-base-content)80%,#0000)"],
+        "kbd-shadows": ["oklab(21% -.00316127 -.0338527/.1)", "oklab(21% -.00316127 -.0338527/.1)"],
+        "code": ["var(--color-base-content)", "var(--color-base-content)"],
+        "pre-code": ["var(--color-neutral-content)", "var(--color-neutral-content)"],
+        "pre-bg": ["var(--color-neutral)", "var(--color-neutral)"],
+        "th-borders": ["color-mix(in oklab,var(--color-base-content)50%,#0000)", "color-mix(in oklab,var(--color-base-content)50%,#0000)"],
+        "td-borders": ["color-mix(in oklab,var(--color-base-content)20%,#0000)", "color-mix(in oklab,var(--color-base-content)20%,#0000)"]
+      },
+    }),
   ],
+  shortcuts: {
+    "heading-1": "font-display text-5xl",
+    "heading-2": "font-display text-4xl",
+    "heading-3": "font-display text-3xl",
+    "heading-4": "font-sans text-2xl",
+    "heading-5": "font-sans text-xl",
+    "heading-6": "font-sans text-lg",
+  },
   transformers: [
     transformerDirectives(),
   ],
···
       mono: "var(--intel-mono)",
       display: "var(--jacquard-12)",
     },
+    leading: 1.5,
+    text: {
+      xs: {
+        fontSize: "var(--step--2)",
+      },
+      sm: {
+        fontSize: "var(--step--1)",
+      },
+      base: {
+        fontSize: "var(--step-0)",
+      },
+      lg: {
+        fontSize: "var(--step-1)",
+      },
+      xl: {
+        fontSize: "var(--step-2)",
+      },
+      "2xl": {
+        fontSize: "var(--step-3)",
+      },
+      "3xl": {
+        fontSize: "var(--step-4)",
+      },
+      "4xl": {
+        fontSize: "var(--step-5)",
+      },
+      "5xl": {
+        fontSize: "var(--step-6)",
+      },
+      "6xl": {
+        fontSize: "var(--step-7)",
+      },
+      "7xl": {
+        fontSize: "var(--step-8)",
+      },
+      "8xl": {
+        fontSize: "var(--step-9)",
+      },
+      "9xl": {
+        fontSize: "var(--step-10)",
+      },
+    }
   },
 });