clampography 0.9.0 → 0.9.2

package/README.md

@@ -5,17 +5,12 @@
 Instead of fixed sizes, it uses the CSS
 [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp)
 function to create fluid typography that adapts to any screen. With
-[94%+ global browser support](https://caniuse.com/css-math-functions), it works
+[94% global browser support](https://caniuse.com/css-math-functions), it works
 on nearly all devices.
 
-Designed for [Tailwind v4's](https://tailwindcss.com/blog/tailwindcss-v4)
-CSS-first system, no JavaScript configuration needed. Best suited for simple
-websites like blogs and articles.
-
-## Philosophy
-
-**Clampography** is built on three core principles to match
-`@tailwindcss/typography` quality standards while remaining pure CSS:
+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.
 
 - **No default styling:** No colors, borders, transforms, or decorations.
 - **Structure only:** Manages size, spacing, weight, and font-family.

package/clampography.css

@@ -1,17 +1,4 @@
 @layer base {
-  /* ==========================================================================
-
-   CLAMPOGRAPHY
-
-   A fluid typography system matching @tailwindcss/typography standards.
-   
-   PHILOSOPHY:
-   - No default styling (no colors, borders, transforms, decorations)
-   - Structure only: size, spacing, weight, font-family
-   - Contextual elements use 'em' (relative), blocks use 'clamp' (fluid)
-
-   ========================================================================== */
-
   /* --------------------------------------------------------------------------
    ROOT CONFIGURATION
    -------------------------------------------------------------------------- */
@@ -40,7 +27,6 @@
 
   body {
     font-family: var(--font-family-base);
-    /* Typography standard: 16px → 18px (not 14px) for optimal readability */
     font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
     line-height: 1.75;
 
@@ -58,21 +44,19 @@
    -------------------------------------------------------------------------- */
 
   :where(h1, h2, h3, h4, h5, h6) {
-    font-weight: 600; /* Default weight, individual headings override */
+    font-weight: 600;
     scroll-margin-top: var(--scroll-offset);
   }
 
   h1 {
-    /* Typography standard: 36px → 48px (matches prose-base → prose-lg) */
     font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
-    line-height: 1.1111; /* Tailwind Typography uses tighter line-height for h1 */
-    font-weight: 800; /* Typography uses heavier weight for h1 */
+    line-height: 1.1111;
+    font-weight: 800;
     margin-top: 0;
     margin-bottom: var(--spacing-xl);
   }
 
   h2 {
-    /* Typography standard: 24px → 30px */
     font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
     line-height: 1.3333;
     font-weight: 700;
@@ -81,7 +65,6 @@
   }
 
   h3 {
-    /* Typography standard: 20px → 24px */
     font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
     line-height: 1.6;
     margin-top: var(--spacing-lg);
@@ -89,7 +72,6 @@
   }
 
   h4 {
-    /* Typography standard: stays at body size (16px → 18px) */
     font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
     line-height: 1.5;
     margin-top: var(--spacing-lg);
@@ -97,15 +79,14 @@
   }
 
   h5 {
-    /* H5/H6 rarely used in prose, but keep them proportional */
-    font-size: 1rem; /* Fixed at body size, distinguished by weight */
+    font-size: 1rem;
     line-height: 1.5;
     margin-top: var(--spacing-md);
     margin-bottom: var(--spacing-xs);
   }
 
   h6 {
-    font-size: 0.875rem; /* Slightly smaller for hierarchy */
+    font-size: 0.875rem;
     line-height: 1.5;
     margin-top: var(--spacing-md);
     margin-bottom: var(--spacing-xs);
@@ -214,7 +195,6 @@
     margin-top: var(--spacing-lg);
     margin-bottom: var(--spacing-lg);
     padding-left: var(--spacing-md);
-    /* No font-style - let users decide visual treatment */
   }
 
   /* Nested blockquotes - reduced spacing for hierarchy */
@@ -243,32 +223,33 @@
 
   li {
     position: relative;
-    margin-bottom: var(--spacing-xs);
     padding-left: 0.375em; /* Space between marker and text */
   }
 
-  /* 
-   * CUSTOM BULLETS (UL)
-   * Perfectly centered dot relative to the first line of text.
-   */
+  /* Spacing between list items */
+  li + li {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Spacing before nested lists */
+  li > :where(ul, ol) {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Perfectly centered dot relative to the first line of text */
   ul > li::before {
     content: '';
     position: absolute;
-    /* Positioning relative to the li padding */
     left: -1.125em;
-    /* Vertically aligns with the first line (assuming line-height 1.75) */
     top: calc(0.875em - 0.1875em);
     width: 0.375em;
     height: 0.375em;
     background-color: currentColor;
     border-radius: 50%;
-    opacity: 0.4; /* Subtle visual weight */
+    opacity: 0.4;
   }
 
-  /* 
-   * CUSTOM NUMBERS (OL)
-   * Right-aligned numbers for professional look (e.g. "9." aligns with "10.")
-   */
+  /* Right-aligned numbers for professional look (e.g. "9." aligns with "10.") */
   ol {
     counter-reset: list-counter;
   }
@@ -280,18 +261,17 @@
   ol > li::before {
     content: counter(list-counter) '.';
     position: absolute;
-    left: -2.5em; /* More space for numbers */
-    width: 1.75em; /* Fixed width container for alignment */
+    left: -2.5em;
+    width: 1.75em;
     text-align: right;
-    font-weight: 600; /* Make numbers stand out structurally */
+    font-weight: 600;
     color: currentColor;
-    opacity: 0.6; /* Slightly lighter than text */
+    opacity: 0.6;
   }
 
-  /* Nested lists spacing */
+  /* Nested lists - indentation only, spacing handled by li rules above */
   :where(ul, ol) :where(ul, ol) {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0; /* Parent li spacing already handles this */
     padding-left: var(--spacing-md);
   }
 
@@ -390,7 +370,6 @@
   }
 
   figcaption {
-    margin-top: var(--spacing-xs);
     font-size: 0.875em;
     line-height: 1.5;
   }
@@ -453,7 +432,6 @@
     margin-top: var(--spacing-xl);
     margin-bottom: var(--spacing-xl);
     border: 0;
-    /* Border style moved to global.css */
   }
 
   /* --------------------------------------------------------------------------
@@ -472,10 +450,8 @@
   summary {
     cursor: pointer;
     font-weight: 600;
-    margin-bottom: var(--spacing-xs);
   }
 
-  /* Dialog element - semantic modal */
   dialog {
     font-size: inherit;
     line-height: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Fluid typography system based on CSS clamp() for Tailwind CSS v4",
   "main": "clampography.css",
   "style": "clampography.css",
@@ -21,6 +21,7 @@
     "style",
     "tailwind",
     "tailwind-css",
+    "tailwind-plugin",
     "tailwindcss",
     "text",
     "typography"