@anydigital/bricks 0.21.1 → 0.22.0

package/.prettierrc.json

@@ -1,3 +1,12 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-jinja-template"],
+  "overrides": [
+    {
+      "files": ["*.njk", "*.html"],
+      "options": {
+        "parser": "jinja-template"
+      }
+    }
+  ]
 }

package/README.md

@@ -78,7 +78,7 @@ The `.prose` class provides enhanced typography for article content and long-for
 
 **Typography Helpers:**
 
-- `small` elements: styled for multi-line subtitles with top vertical alignment, `0.1em` top margin, `1.1` line height, lighter weight (`300`), and displayed as `inline-block` with `100%` width to prevent underline decoration inside links
+- `sub` elements: styled for multi-line subtitles with top vertical alignment, `1.1` line height, lighter weight (`300`), and displayed as `inline-block` with `100%` width to prevent underline decoration inside links
 
 **Links:**
 
@@ -89,7 +89,8 @@ The `.prose` class provides enhanced typography for article content and long-for
 **Headings:**
 
 - `h1` elements have a `0.5em` bottom margin
-- `h1 small` elements get reduced font size (`50%`)
+- `h1 sub` elements get reduced font size (`50%`)
+- Support for heading anchors via `.header-anchor` class (displayed on hover to the left of the heading)
 
 **Tables:**
 

package/bricks/_prose.css

@@ -4,9 +4,9 @@
   margin-inline: auto;
 
   /* Helper for multi-line subtitles */
-  small {
+  sub {
     vertical-align: top;
-    margin-top: 0.1em;
+    bottom: -0.05em;
     line-height: 1.1;
     font-weight: 300;
     /* Workaround to prevent underline inside links */
@@ -49,10 +49,37 @@
     }
   }
 
+  /* Support for markdown anchors */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+
+    .header-anchor {
+      display: none;
+      position: absolute;
+      right: 100%;
+      top: 0;
+      padding-right: 0.2ch;
+      color: rgba(0, 0, 0, 0.25);
+    }
+    &:hover {
+      .header-anchor {
+        display: block;
+      }
+      /* Support for `breakout-css` headings */
+      &::before {
+        margin-right: 1.5ch !important;
+      }
+    }
+  }
   h1 {
     margin-bottom: 0.5em !important;
 
-    small {
+    sub {
       font-size: 50%;
     }
   }

package/bricks/_util.css

@@ -10,6 +10,9 @@
 /* Workaround for icon to stay with text in links */
 a.whitespace-nowrap {
   white-space: nowrap;
+  /* Fix for Safari :( why Safari, why? */
+  display: inline-block;
+
   span {
     white-space: normal;
   }

package/dist/bricks.css

@@ -43,9 +43,9 @@ body a,body table {
   /* Helper for multi-line subtitles */
 }
 
-.prose small {
+.prose sub {
     vertical-align: top;
-    margin-top: 0.1em;
+    bottom: -0.05em;
     line-height: 1.1;
     font-weight: 300;
     /* Workaround to prevent underline inside links */
@@ -89,11 +89,56 @@ body a,body table {
       margin-bottom: 1em;
     }
 
+/* Support for markdown anchors */
+
+.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
+    position: relative;
+  }
+
+.prose h1 .header-anchor,.prose h2 .header-anchor,.prose h3 .header-anchor,.prose h4 .header-anchor,.prose h5 .header-anchor,.prose h6 .header-anchor {
+      display: none;
+      position: absolute;
+      right: 100%;
+      top: 0;
+      padding-right: 0.2ch;
+      color: rgba(0, 0, 0, 0.25);
+    }
+
+.prose h1:hover .header-anchor,.prose h2:hover .header-anchor,.prose h3:hover .header-anchor,.prose h4:hover .header-anchor,.prose h5:hover .header-anchor,.prose h6:hover .header-anchor {
+        display: block;
+      }
+
+/* Support for `breakout-css` headings */
+
+.prose h1:hover::before {
+        margin-right: 1.5ch !important;
+      }
+
+.prose h2:hover::before {
+        margin-right: 1.5ch !important;
+      }
+
+.prose h3:hover::before {
+        margin-right: 1.5ch !important;
+      }
+
+.prose h4:hover::before {
+        margin-right: 1.5ch !important;
+      }
+
+.prose h5:hover::before {
+        margin-right: 1.5ch !important;
+      }
+
+.prose h6:hover::before {
+        margin-right: 1.5ch !important;
+      }
+
 .prose h1 {
     margin-bottom: 0.5em !important;
   }
 
-.prose h1 small {
+.prose h1 sub {
       font-size: 50%;
     }
 
@@ -328,6 +373,8 @@ body a,body table {
 
 a.whitespace-nowrap {
   white-space: nowrap;
+  /* Fix for Safari :( why Safari, why? */
+  display: inline-block;
 }
 
 a.whitespace-nowrap span {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "main": "dist/bricks.css",
   "style": "dist/bricks.css",
@@ -28,6 +28,7 @@
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^10.6.0"
+    "postcss-preset-env": "^10.6.0",
+    "prettier-plugin-jinja-template": "^2.1.0"
   }
 }