clampography 0.9.6 → 0.9.8

package/README.md

@@ -1,22 +1,38 @@
 # 🙌 Clampography
 
-**Clampography** is a CSS-only alternative to the official
-[Tailwind CSS Typography plugin](https://github.com/tailwindlabs/tailwindcss-typography).
-Instead of fixed sizes, it uses the CSS
+**Clampography** is a pure CSS typography system that uses the
 [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp)
-function to create fluid typography that adapts to any screen. With
+function for fluid, responsive text scaling. It's designed as an alternative to
+[@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography),
+but works with or without [Tailwind CSS](https://tailwindcss.com/). With
 [94% global browser support](https://caniuse.com/css-math-functions), it works
-on nearly all devices.
-
-Built for [Tailwind v4's](https://tailwindcss.com/blog/tailwindcss-v4) CSS-first
-architecture. Zero JavaScript configuration required. Best suited for blogs,
-documentation, and content-heavy websites.
+on nearly all modern devices.
 
 - **No default styling:** No colors, borders, transforms, or decorations.
 - **Structure only:** Manages size, spacing, weight, and font-family.
 - **Smart scaling:** Contextual elements use `em` (relative), blocks use
   `clamp()` (fluid).
 
+## The purpose
+
+CSS resets like [Tailwind's Preflight](https://tailwindcss.com/docs/preflight)
+remove all browser typography defaults, leaving you with unstyled text.
+**Clampography** delivers production-ready text scaling that responds to
+viewport changes automatically, while leaving all aesthetic choices to you.
+Visit the temporary [demo page](https://next.dav.one/clampography/) to see how
+it looks.
+
+## Requirements
+
+Use [Vite](https://vitejs.dev/), [Webpack](https://webpack.js.org/), or similar
+build tool for CSS bundling. Popular frameworks like
+[Astro](https://astro.build/), [Next.js](https://nextjs.org/),
+[Remix](https://remix.run/), and
+[SvelteKit](https://svelte.dev/docs/kit/introduction) include CSS bundling by
+default and work seamlessly with **Clampography**. Without a build tool, native
+CSS `@import` combined with `@layer` has about 91% browser coverage and only
+works in browsers released since early 2022.
+
 ## Installation
 
 ```bash
@@ -42,7 +58,7 @@ deno install npm:clampography
 /* Then import Clampography */
 @import "clampography";
 
-/* Override default heading styles */
+/* Then you can override Clampography's base styles */
 @layer base {
   h1 {
     font-size: clamp(2.35rem, 1.95rem + 1.5vw, 4rem);

package/clampography.css

@@ -97,10 +97,9 @@
    -------------------------------------------------------------------------- */
 
   a {
-    /* Structural underline - indicates clickability */
     text-decoration-line: underline;
-    text-decoration-thickness: 0.0625em; /* 1px at 16px base */
-    text-underline-offset: 0.15em; /* Space from baseline */
+    text-decoration-thickness: 0.0625em;
+    text-underline-offset: 0.15em;
     cursor: pointer;
   }
 
@@ -116,7 +115,7 @@
   menu {
     list-style: none;
     margin-bottom: var(--spacing-md);
-    padding-left: 0; /* No indentation - unlike ul/ol */
+    padding-left: 0;
   }
 
   /* Remove custom markers from menu items */
@@ -141,8 +140,8 @@
   hgroup :where(p) {
     margin-top: 0;
     margin-bottom: 0;
-    font-size: 0.875em; /* Relative to parent context */
-    font-weight: 400; /* Lighter than heading */
+    font-size: 0.875em;
+    font-weight: 400;
     line-height: 1.5;
   }
 
@@ -173,7 +172,7 @@
 
   /* Contextual sizing - uses 'em' to scale with parent */
   small {
-    font-size: 0.875em; /* 87.5% of parent */
+    font-size: 0.875em;
     line-height: 1.5;
   }
 
@@ -210,7 +209,6 @@
     cursor: help;
   }
 
-  /* Editorial marks - semantic text changes */
   del {
     text-decoration: line-through;
   }
@@ -219,12 +217,12 @@
     text-decoration: underline;
   }
 
-  /* Strikethrough - presentational (not semantic like del) */
+  /* Strikethrough */
   s {
     text-decoration: line-through;
   }
 
-  /* Underline - presentational (not semantic like ins) */
+  /* Underline */
   u {
     text-decoration: underline;
   }
@@ -379,16 +377,13 @@
     margin-top: var(--spacing-md);
     margin-bottom: var(--spacing-md);
     font-family: var(--font-family-mono);
-    font-size: 0.875em;
     line-height: 1.6;
     overflow-x: auto;
-    /* Padding & background moved to global.css */
   }
 
   /* Code inside pre blocks */
   pre code {
     font-size: inherit;
-    /* Reset inline code styles if any user CSS exists */
     padding: 0;
     background: none;
     border-radius: 0;
@@ -402,7 +397,7 @@
     margin-top: var(--spacing-md);
     margin-bottom: var(--spacing-md);
     padding: var(--spacing-md);
-    border: 0; /* Remove default border - user adds styling */
+    border: 0;
   }
 
   legend {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "description": "Fluid typography system based on CSS clamp() for Tailwind CSS v4. Alternative to Tailwind CSS Typography plugin.",
   "main": "clampography.css",
   "style": "clampography.css",
@@ -36,7 +36,7 @@
     "type": "git",
     "url": "https://github.com/Avaray/clampography.git"
   },
-  "homepage": "https://dav.one/clampography",
+  "homepage": "https://next.dav.one/clampography/",
   "author": "Dawid Wąsowski",
   "license": "MIT"
 }

package/presets/daisyUI.css

@@ -1 +1,19 @@
+/* You need daisyUI for this preset. Make sure its colors are accessible. */
+
 @import '../clampography.css';
+
+@layer base {
+  a {
+    @apply text-primary font-bold tracking-wider underline decoration-2 underline-offset-4 transition-colors duration-150;
+
+    text-decoration-color: color-mix(
+      in srgb,
+      var(--color-primary) 30%,
+      transparent
+    );
+  }
+
+  a:hover {
+    text-decoration-color: var(--color-primary);
+  }
+}