clampography 0.9.7 → 0.9.9

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

@@ -361,10 +361,19 @@
 
   dd {
     margin-left: var(--spacing-md);
-    margin-bottom: var(--spacing-xs);
   }
 
-  /* Last dd shouldn't have bottom margin */
+  /* Spacing between term and definition (consistent with lists) */
+  dt + dd {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Spacing between multiple definitions (consistent with list items) */
+  dd + dd {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Remove bottom margin from last dd */
   dd:last-child {
     margin-bottom: 0;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clampography",
-  "version": "0.9.7",
-  "description": "Fluid typography system based on CSS clamp() for Tailwind CSS v4. Alternative to Tailwind CSS Typography plugin.",
+  "version": "0.9.9",
+  "description": "Fluid typography system based on CSS clamp(). Alternative to Tailwind CSS Typography plugin.",
   "main": "clampography.css",
   "style": "clampography.css",
   "files": [
@@ -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"
 }