@anydigital/bricks 1.0.0-alpha.17 → 1.0.0-alpha.19

package/README.md

@@ -81,20 +81,19 @@ 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, with `1em` height, `-10%` vertical alignment, and `0.25em` right margin. Nested `img` elements are styled with `100%` height and no margin
+- 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 `1em` bottom margin
 
 **Headings:**
 
-- `h1` with `small`, `sup`, or `sub` elements get reduced font size (`0.5em`) and lighter weight (`300`)
+- `h1` with `small`, `sup`, or `sub` elements get reduced font size (`0.5em`) and lighter weight (`300`). The `h1` itself has a `0.5em` bottom margin.
 
 **Tables:**
 
-- Tables are displayed as blocks with horizontal scrolling
-- On mobile (max-width: 767px), tables get `1.5em` horizontal padding
+- Tables within `.breakout` containers are automatically styled for full-bleed display and horizontal scrolling
 - 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)
+- Workaround for widening columns using hidden `hr` elements (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
+- Images in table cells have no top margin and `1em` bottom margin
 
 **Blockquotes:**
 
@@ -110,7 +109,9 @@ The `.prose` class provides enhanced typography for article content and long-for
 Includes specialized styling for Prism.js, specifically focusing on treeview components:
 
 - Custom styling for `.token.treeview-part`
-- Reduced opacity for entry lines and names to create a hierarchical visual effect
+- Reduced opacity for entry lines (25%) and names (50%) to create a hierarchical visual effect
+- Entry lines have a fixed width of `2.5em`
+- Last-child entry names have no `::before` pseudo-element
 - Supports complex file tree visualizations out of the box
 
 ### Utilities
@@ -167,7 +168,7 @@ Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities fo
 </div>
 ```
 
-The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. This is automatically included when you import the stylesheet.
+The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
 
 ## Bricks (Template Components)
 

package/bricks/_prose.css

@@ -34,11 +34,17 @@
 
       img {
         height: 100%;
-        margin: 0 !important;
       }
     }
   }
 
+  img {
+    &:not(:where(.prose > img, .prose > p > img)) {
+      margin-top: 0;
+      margin-bottom: 1em;
+    }
+  }
+
   h1 {
     margin-bottom: 0.5em !important;
 
@@ -50,13 +56,6 @@
     }
   }
 
-  table {
-    display: block;
-    overflow-x: auto;
-    @media (max-width: 767px) {
-      padding-inline: 1.5em;
-    }
-  }
   th,
   td {
     padding-top: 1em;
@@ -64,7 +63,8 @@
     vertical-align: top;
     /* Workaround to widen particular columns */
     hr {
-      min-width: 25ch;
+      width: 25ch;
+      height: 0;
       margin: 0;
       visibility: hidden;
     }
@@ -72,11 +72,6 @@
     big {
       font-weight: bold;
     }
-
-    img {
-      margin-top: 0;
-      margin-bottom: 0.75em;
-    }
   }
 
   blockquote {

package/dist/bricks.css

@@ -74,9 +74,13 @@ body a {
 
 .prose a i img {
         height: 100%;
-        margin: 0 !important;
       }
 
+.prose img:not(:where(.prose > img,.prose > p > img)) {
+      margin-top: 0;
+      margin-bottom: 1em;
+    }
+
 .prose h1 {
     margin-bottom: 0.5em !important;
   }
@@ -86,18 +90,6 @@ body a {
       font-weight: 300;
     }
 
-.prose table {
-    display: block;
-    overflow-x: auto;
-  }
-
-@media (max-width: 767px) {
-
-.prose table {
-      padding-inline: 1.5em;
-  }
-    }
-
 .prose th,.prose td {
     padding-top: 1em;
     padding-bottom: 1em;
@@ -106,7 +98,8 @@ body a {
   }
 
 .prose th hr,.prose td hr {
-      min-width: 25ch;
+      width: 25ch;
+      height: 0;
       margin: 0;
       visibility: hidden;
     }
@@ -117,11 +110,6 @@ body a {
       font-weight: bold;
     }
 
-.prose th img,.prose td img {
-      margin-top: 0;
-      margin-bottom: 0.75em;
-    }
-
 .prose blockquote {
     font-weight: 300;
   }
@@ -169,6 +157,24 @@ body a {
       min-width: auto;
     }
 
+/* Tables are so special :( */
+
+.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
+      /* .does-not-exist is here to avoid !important below @TODO */
+
+      /* Let them full-bleed */
+      width: -moz-max-content;
+      width: max-content;
+      min-width: auto;
+      max-width: 100vw;
+      padding-inline: 1.5rem;
+
+      /* Let them scroll */
+      display: block;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
+    }
+
 /* Max out the width of the element */
 
 .breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/bricks",
-  "version": "1.0.0-alpha.17",
+  "version": "1.0.0-alpha.19",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "main": "dist/bricks.css",
   "style": "dist/bricks.css",
@@ -24,7 +24,7 @@
   "author": "Anton Staroverov",
   "license": "MIT",
   "devDependencies": {
-    "@anydigital/breakout-css": "^1.0.0-alpha.8",
+    "@anydigital/breakout-css": "^1.0.0-alpha.9",
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.1",