@anydigital/bricks 0.27.0-alpha.4 → 0.27.0-alpha.6

package/assets/breakout.css

@@ -1,6 +1,7 @@
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
-.breakout {
+.breakout,
+.breakout-all {
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
   max-width: calc(10% + 65ch + 10%);
@@ -29,9 +30,10 @@
       min-width: auto;
     }
 
-    /* Tables are so special :( */
+    /* <!--section:responsive-table-without-wrapper-->
+    ### Responsive tables without wrapper
+    ```css */
     &:is(table):not(.does-not-exist) {
-      /* @TODO: add postcss's `:not(.does-not-exist)` to tricks-wiki */
       /* Let them full-bleed */
       width: max-content;
       min-width: auto;
@@ -48,6 +50,10 @@
         padding-inline-start: 0;
       }
     }
+    /*```
+    #### Soft-increase selector specificity
+    `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+    <!--section--> */
 
     /* Max out the width of the element */
     &.breakout-item-max {
@@ -73,14 +79,14 @@
     &::before {
       width: 10em;
       right: 100%;
-      margin-right: 1rem;
+      margin-right: 0.8ch;
       height: 0.25em;
       top: 50%;
       transform: translateY(-50%);
       background: linear-gradient(to left, gray, transparent);
     }
 
-    &:where(hr + &) {
+    &:where(hr + *) {
       &::before {
         display: none !important;
       }

package/assets/bricks.css

@@ -49,7 +49,8 @@ pre {
 
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
-.breakout {
+.breakout,
+.breakout-all {
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
   max-width: calc(10% + 65ch + 10%);
@@ -78,9 +79,10 @@ pre {
       min-width: auto;
     }
 
-    /* Tables are so special :( */
+    /* <!--section:responsive-table-without-wrapper-->
+    ### Responsive tables without wrapper
+    ```css */
     &:is(table):not(.does-not-exist) {
-      /* @TODO: add postcss's `:not(.does-not-exist)` to tricks-wiki */
       /* Let them full-bleed */
       width: max-content;
       min-width: auto;
@@ -97,6 +99,10 @@ pre {
         padding-inline-start: 0;
       }
     }
+    /*```
+    #### Soft-increase selector specificity
+    `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+    <!--section--> */
 
     /* Max out the width of the element */
     &.breakout-item-max {
@@ -122,14 +128,14 @@ pre {
     &::before {
       width: 10em;
       right: 100%;
-      margin-right: 1rem;
+      margin-right: 0.8ch;
       height: 0.25em;
       top: 50%;
       transform: translateY(-50%);
       background: linear-gradient(to left, gray, transparent);
     }
 
-    &:where(hr + &) {
+    &:where(hr + *) {
       &::before {
         display: none !important;
       }
@@ -174,10 +180,53 @@ table.borderless {
   }
 }
 
+/* Header anchors @TODO: add to tricks-wiki */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+
+  [data-is-anchor] {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    right: 100%;
+    padding-right: 0.2ch;
+    color: silver;
+    text-decoration: none;
+  }
+  &:hover {
+    [data-is-anchor] {
+      visibility: visible;
+    }
+  }
+}
+
 /* Favicons in links @TODO: add to tricks-wiki */
 
-a > i > img {
-  max-height: 1.25em;
-  margin-top: calc(-0.25em / 2);
-  margin-inline-end: 0.25em;
+a[data-has-favicon] {
+  display: inline-block;
+
+  > img {
+    max-height: 1.25em;
+    margin-top: calc(-0.25em / 2);
+    margin-inline-end: 0.25em;
+
+    /* for tw-typography (.prose) */
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+/* Tailwind tricks */
+
+.invert {
+  /* Fix the scrollbar color when inverted */
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
 }

package/assets/bricks.theme.css

@@ -1,9 +1,10 @@
 h1 {
-  font-size: 3rem;
+  font-size: 2.5em; /* for pico.css & tw-typography */
+  margin-bottom: 1rem; /* for tw-typography */
 }
 
 hr {
-  margin-block: 2rem;
+  margin-block: 2em; /* for pico.css & tw-typography */
 }
 
 pre {

package/bricks.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "bricks"
-  spec.version       = "0.27.0-alpha.4"
+  spec.version       = "0.27.0-alpha.5"
   spec.authors       = ["Anton Staroverov"]
 
   spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development."

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.27.0-alpha.4",
+  "version": "0.27.0-alpha.6",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "style": "./src/bricks.css",
   "exports": {
     ".": "./src/bricks.css",
+    "./theme": "./src/bricks.theme.css",
     "./dist": "./dist/bricks.css"
   },
   "scripts": {

package/src/_refactor/_prose.css

@@ -1,8 +1,4 @@
 .prose {
-  /* Container-like behavior with auto margins */
-  width: 100%;
-  margin-inline: auto;
-
   /* Helper for multi-line subtitles */
   sub {
     vertical-align: top;
@@ -24,22 +20,6 @@
     &:hover {
       text-decoration-thickness: 2px;
     }
-
-    /* Helper to insert icons in links */
-    i {
-      height: 1em;
-      margin-right: 0.25em;
-      font-style: normal;
-      /* Workaround to prevent underline */
-      display: inline-block;
-
-      img {
-        height: 100%;
-        margin: 0;
-        position: relative;
-        bottom: -0.15em;
-      }
-    }
   }
 
   img {
@@ -49,36 +29,7 @@
     }
   }
 
-  /* 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;
-
     sub {
       font-size: 50%;
     }

package/src/_tricks.css

@@ -5,9 +5,50 @@ table.borderless {
   }
 }
 
+/* Header anchors @TODO: add to tricks-wiki */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+
+  [data-is-anchor] {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    right: 100%;
+    padding-right: 0.2ch;
+    color: silver;
+    text-decoration: none;
+  }
+  &:hover {
+    [data-is-anchor] {
+      visibility: visible;
+    }
+  }
+}
+
 /* Favicons in links @TODO: add to tricks-wiki */
-a > i > img {
-  max-height: 1.25em;
-  margin-top: calc(-0.25em / 2);
-  margin-inline-end: 0.25em;
+a[data-has-favicon] {
+  display: inline-block;
+
+  > img {
+    max-height: 1.25em;
+    margin-top: calc(-0.25em / 2);
+    margin-inline-end: 0.25em;
+
+    /* for tw-typography (.prose) */
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+/* Tailwind tricks */
+.invert {
+  /* Fix the scrollbar color when inverted */
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
 }

package/src/breakout.css

@@ -1,6 +1,7 @@
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
-.breakout {
+.breakout,
+.breakout-all {
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
   max-width: calc(10% + 65ch + 10%);
@@ -29,9 +30,10 @@
       min-width: auto;
     }
 
-    /* Tables are so special :( */
+    /* <!--section:responsive-table-without-wrapper-->
+    ### Responsive tables without wrapper
+    ```css */
     &:is(table):not(.does-not-exist) {
-      /* @TODO: add postcss's `:not(.does-not-exist)` to tricks-wiki */
       /* Let them full-bleed */
       width: max-content;
       min-width: auto;
@@ -48,6 +50,10 @@
         padding-inline-start: 0;
       }
     }
+    /*```
+    #### Soft-increase selector specificity
+    `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+    <!--section--> */
 
     /* Max out the width of the element */
     &.breakout-item-max {
@@ -73,14 +79,14 @@
     &::before {
       width: 10em;
       right: 100%;
-      margin-right: 1rem;
+      margin-right: 0.8ch;
       height: 0.25em;
       top: 50%;
       transform: translateY(-50%);
       background: linear-gradient(to left, gray, transparent);
     }
 
-    &:where(hr + &) {
+    &:where(hr + *) {
       &::before {
         display: none !important;
       }

package/src/bricks.theme.css

@@ -1,9 +1,10 @@
 h1 {
-  font-size: 3rem;
+  font-size: 2.5em; /* for pico.css & tw-typography */
+  margin-bottom: 1rem; /* for tw-typography */
 }
 
 hr {
-  margin-block: 2rem;
+  margin-block: 2em; /* for pico.css & tw-typography */
 }
 
 pre {

package/src/_refactor/_util.css

@@ -1,19 +0,0 @@
-/* Utility classes and fixes */
-
-.invert {
-  /* Fix the scrollbar color when inverted */
-  ::-webkit-scrollbar {
-    filter: invert(1) !important;
-  }
-}
-
-/* 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;
-  }
-}