@anydigital/bricks 1.0.0-alpha.12 → 1.0.0-alpha.14

package/README.md

@@ -80,26 +80,32 @@ 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
 
 **Headings:**
 
 - `h1` with `small`, `sup`, or `sub` elements get reduced font size (`0.5em`) and lighter weight (`300`)
-- `h2` headings (without classes) get a full-width decorative bar above them (`0.4em` height, positioned `1em` above, with `2em` top margin)
-- `h3` headings (without classes) get a decorative gradient bar to the left (`10em` width, `0.3em` height, fading from 10% to 5% to transparent opacity)
-- `h4` headings (without classes) get a similar decorative gradient bar but thinner (`0.2em` height)
+- `h2` headings (without classes) get a full-width decorative bar above them (`0.4em` height, positioned `1em` above with `2em` top margin, centered using transform)
+- `h3` and `h4` headings (without classes) get a decorative gradient bar to the left (`10em` width, positioned with `0.5em` right margin, vertically centered using transform, gradient from 10% to 5% to transparent opacity)
+- `h4` headings have a thinner bar (`0.2em` height instead of `0.3em`)
 
 **Tables:**
 
 - Tables are displayed as blocks with horizontal scrolling
 - On mobile (max-width: 767px), tables get `1.5em` horizontal padding
-- Table cells have `1em` vertical padding (top and bottom)
-- Workaround for widening columns using hidden `hr` elements (minimum width: `25ch`)
-- Support for headings in Markdown tables using `big` elements (styled as bold italic)
+- 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:**
 
 - Lighter font weight (`300`)
-- Adjacent `figcaption` elements are styled with italic text, right alignment, lighter weight (`300`), negative top margin (`-1em`), and an em dash prefix
+- Adjacent `figcaption` elements (using `+ figcaption` selector) are styled with italic text, right alignment, lighter weight (`300`), negative top margin (`-1em`), and an em dash prefix (`—`) with `0.25em` right margin
+
+**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)
 
 **Usage:**
 
@@ -155,14 +161,14 @@ Base HTML templates that provide the essential document structure with built-in
 
 - HTML5 DOCTYPE with language attribute (defaults to `en`, configurable via `site.lang`)
 - UTF-8 charset and comprehensive viewport meta tag with `viewport-fit=cover` for notched devices
-- Dynamic title generation with site title suffix
-- Favicon link
+- Dynamic title generation with site title suffix (title is stripped of HTML tags and separated with `|`)
+- Favicon link (to `/favicon.ico`)
 - Automatic stylesheet linking from `site.styles` array
-- Inline styles from `site.inline_styles` array
+- Inline styles from `site.inline_styles` array (joined with newlines in a `<style>` tag)
 - Automatic script loading from `site.scripts` array (with `defer` attribute)
-- Inline module scripts from `site.inline_scripts` array
+- Inline module scripts from `site.inline_scripts` array (joined with newlines in a `<script type="module">` tag)
 - Custom header content via `content_for_header`
-- Google Tag Manager integration (conditional on production environment)
+- Google Tag Manager integration (automatically rendered via `_gtm.liquid` template for both `<head>` and `<body>`)
 
 **Usage:**
 
@@ -174,6 +180,8 @@ Base HTML templates that provide the essential document structure with built-in
 {% render 'bricks/__html-end' %}
 ```
 
+Note: Google Tag Manager is automatically included in both `<head>` and `<body>` (via the `_gtm.liquid` template) when `site.prod` and `site.gtm_id` are set.
+
 **Variables:**
 
 - `title` - Page title (optional, will be stripped of HTML tags)
@@ -231,7 +239,9 @@ A template for embedding Google Tag Manager scripts in your pages.
 - `site.prod` - Boolean flag to enable GTM only in production
 - `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
 
-**Usage:**
+**Note:** This template is automatically included when using `__html-begin.liquid` and `__html-end.liquid`. You only need to manually render it if you're not using those base templates.
+
+**Manual Usage:**
 
 In your base template's `<head>`:
 
@@ -245,7 +255,7 @@ In your base template's `<body>` (right after the opening tag):
 {% render 'bricks/_gtm', site: site, for_body: true %}
 ```
 
-**Example:**
+**Example (Manual Integration):**
 
 ```liquid
 <!DOCTYPE html>
@@ -260,7 +270,7 @@ In your base template's `<body>` (right after the opening tag):
 </html>
 ```
 
-**Note:** The GTM script is only rendered when both `site.prod` is `true` and `site.gtm_id` is set.
+**Rendering Logic:** The GTM script is only rendered when both `site.prod` is `true` and `site.gtm_id` is set. The template uses a capture block to strip whitespace from the output.
 
 ## License
 

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;
@@ -101,7 +110,11 @@
     /* Workaround for headings in Markdown tables */
     big {
       font-weight: bold;
-      font-style: italic;
+    }
+
+    img {
+      margin-top: 0;
+      margin-bottom: 0.75em;
     }
   }
 
@@ -120,4 +133,14 @@
       }
     }
   }
+
+  code[data-file] {
+    &::before {
+      content: attr(data-file);
+      display: block;
+      margin-bottom: 1.5em;
+      opacity: 0.5;
+      font-style: italic;
+    }
+  }
 }

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 */
   }
 
@@ -157,7 +166,11 @@ body  > main {
 
 .prose th big,.prose td big {
       font-weight: bold;
-      font-style: italic;
+    }
+
+.prose th img,.prose td img {
+      margin-top: 0;
+      margin-bottom: 0.75em;
     }
 
 .prose blockquote {
@@ -176,6 +189,14 @@ body  > main {
         margin-right: 0.25em;
       }
 
+.prose code[data-file]::before {
+      content: attr(data-file);
+      display: block;
+      margin-bottom: 1.5em;
+      opacity: 0.5;
+      font-style: italic;
+    }
+
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
 .breakout {

package/package.json

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