clampography 0.9.1 → 0.9.3

package/README.md

@@ -45,7 +45,9 @@ bun install clampography
 /* Override default heading styles */
 @layer base {
   h1 {
-    letter-spacing: 0.05em;
+    font-size: clamp(2.35rem, 1.95rem + 1.5vw, 4rem);
+    font-weight: 400;
+    line-height: 1.15;
   }
 }
 ```

package/clampography.css

@@ -92,6 +92,60 @@
     margin-bottom: var(--spacing-xs);
   }
 
+  /* --------------------------------------------------------------------------
+   LINKS - Clickable Text (Structural Indicators)
+   -------------------------------------------------------------------------- */
+
+  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 */
+    cursor: pointer;
+  }
+
+  /* Remove underline from heading links */
+  :where(h1, h2, h3, h4, h5, h6) a {
+    text-decoration: none;
+  }
+
+  /* --------------------------------------------------------------------------
+   MENU - Interactive Lists (Toolbars, Navigation)
+   -------------------------------------------------------------------------- */
+
+  menu {
+    list-style: none;
+    margin-bottom: var(--spacing-md);
+    padding-left: 0; /* No indentation - unlike ul/ol */
+  }
+
+  /* Remove custom markers from menu items */
+  menu > li::before {
+    display: none;
+  }
+
+  /* --------------------------------------------------------------------------
+   HGROUP - Heading Groups (Title + Subtitle)
+   -------------------------------------------------------------------------- */
+
+  hgroup {
+    margin-bottom: var(--spacing-lg);
+  }
+
+  /* Reduce spacing between heading and subtitle */
+  hgroup :where(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  /* Subtitle/tagline styling (typically <p>) */
+  hgroup :where(p) {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 0.875em; /* Relative to parent context */
+    font-weight: 400; /* Lighter than heading */
+    line-height: 1.5;
+  }
+
   /* --------------------------------------------------------------------------
    TEXT CONTENT - Paragraphs & Inline Elements
    -------------------------------------------------------------------------- */
@@ -223,32 +277,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;
   }
@@ -260,18 +315,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);
   }
 
@@ -370,7 +424,6 @@
   }
 
   figcaption {
-    margin-top: var(--spacing-xs);
     font-size: 0.875em;
     line-height: 1.5;
   }
@@ -451,6 +504,9 @@
   summary {
     cursor: pointer;
     font-weight: 600;
+  }
+
+  details[open] > summary {
     margin-bottom: var(--spacing-xs);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "Fluid typography system based on CSS clamp() for Tailwind CSS v4",
   "main": "clampography.css",
   "style": "clampography.css",