@anydigital/bricks 1.0.0-alpha.13 → 1.0.0-alpha.15

package/README.md

@@ -80,7 +80,7 @@ The `.prose` class provides enhanced typography for article content and long-for
 - Custom underline offset (`0.1em`) and thickness (`1px` default, `2px` on hover)
 - Anchor links (starting with `#`) have no text decoration
 - Special handling for `small`, `sup`, or `sub` elements: lighter weight (`300`) and displayed as `inline-block` to prevent underline decoration
-- Icon helper: `i` elements inside links are displayed as `inline-block` with normal font style to prevent underline decoration
+- Icon helper: `i` elements inside links are displayed as `inline-block` with normal font style to prevent underline decoration, with `1em` height, `-10%` vertical alignment, and `0.25em` right margin. Nested `img` elements are styled with `100%` height and no margin
 
 **Headings:**
 
@@ -93,9 +93,10 @@ The `.prose` class provides enhanced typography for article content and long-for
 
 - Tables are displayed as blocks with horizontal scrolling
 - On mobile (max-width: 767px), tables get `1.5em` horizontal padding
-- Table cells (`th` and `td`) have `1em` vertical padding (top and bottom)
-- Workaround for widening columns using hidden `hr` elements (minimum width: `25ch`, with zero margin)
+- Table cells (`th` and `td`) have `1em` vertical padding (top and bottom) and `top` vertical alignment
+- Workaround for widening columns using hidden `hr` elements (minimum width: `25ch`, with zero margin and hidden visibility)
 - Support for headings in Markdown tables using `big` elements (styled as bold)
+- Images in table cells have no top margin and `0.75em` bottom margin
 
 **Blockquotes:**
 
@@ -104,7 +105,7 @@ The `.prose` class provides enhanced typography for article content and long-for
 
 **Code Blocks:**
 
-- Code blocks with `data-file` attribute display the filename above the code block (styled with 50% opacity, italic, and `1.5em` bottom margin)
+- Code blocks with `data-caption` attribute display the caption above the code block (styled with 50% opacity, italic, and `1.5em` bottom margin)
 
 **Usage:**
 

package/bricks/_prose.css

@@ -25,9 +25,17 @@
 
     /* Helper to insert icons in links */
     i {
+      height: 1em;
+      vertical-align: -10%;
+      margin-right: 0.25em;
       font-style: normal;
       /* Workaround to prevent underline */
       display: inline-block;
+
+      img {
+        height: 100%;
+        margin: 0 !important;
+      }
     }
   }
 
@@ -92,6 +100,7 @@
   td {
     padding-top: 1em;
     padding-bottom: 1em;
+    vertical-align: top;
     /* Workaround to widen particular columns */
     hr {
       min-width: 25ch;
@@ -102,6 +111,11 @@
     big {
       font-weight: bold;
     }
+
+    img {
+      margin-top: 0;
+      margin-bottom: 0.75em;
+    }
   }
 
   blockquote {
@@ -120,9 +134,9 @@
     }
   }
 
-  code[data-file] {
+  code[data-caption] {
     &::before {
-      content: attr(data-file);
+      content: attr(data-caption);
       display: block;
       margin-bottom: 1.5em;
       opacity: 0.5;

package/dist/bricks.css

@@ -58,11 +58,19 @@ body  > main {
 /* Helper to insert icons in links */
 
 .prose a i {
+      height: 1em;
+      vertical-align: -10%;
+      margin-right: 0.25em;
       font-style: normal;
       /* Workaround to prevent underline */
       display: inline-block;
     }
 
+.prose a i img {
+        height: 100%;
+        margin: 0 !important;
+      }
+
 .prose h1 small,.prose h1 sup,.prose h1 sub {
       font-size: 0.5em;
       font-weight: 300;
@@ -144,6 +152,7 @@ body  > main {
 .prose th,.prose td {
     padding-top: 1em;
     padding-bottom: 1em;
+    vertical-align: top;
     /* Workaround to widen particular columns */
   }
 
@@ -159,6 +168,11 @@ body  > main {
       font-weight: bold;
     }
 
+.prose th img,.prose td img {
+      margin-top: 0;
+      margin-bottom: 0.75em;
+    }
+
 .prose blockquote {
     font-weight: 300;
   }
@@ -175,8 +189,8 @@ body  > main {
         margin-right: 0.25em;
       }
 
-.prose code[data-file]::before {
-      content: attr(data-file);
+.prose code[data-caption]::before {
+      content: attr(data-caption);
       display: block;
       margin-bottom: 1.5em;
       opacity: 0.5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/bricks",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "main": "dist/bricks.css",
   "style": "dist/bricks.css",