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

package/README.md

@@ -1,6 +1,6 @@
-# `bricks[.css]` <sup><sub>by *Any*digital</sub></sup>
+# `bricks`<sub><sup>`[.css|.njk|.liquid]`</sup></sub>
 
-Framework-agnostic, Tailwind-compatible CSS utilities and single-file `bricks` for modern web development.
+A graceful, semantic CSS extension for Pico or Tailwind, with Nunjucks/Liquid batteries included 🥷
 
 <!--section:css-h2-->
 

package/_includes/bricks/nav.liquid

@@ -6,4 +6,9 @@
     </a>
   {%- endfor %}
 </nav>
-{% # Compatible with https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually %}
+
+{%- comment %}
+  Compatible with:
+  - https://picocss.com/docs/nav
+  - https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually
+{%- endcomment %}

package/assets/breakout.css

@@ -12,8 +12,7 @@
       table,
       pre,
       figure, video, iframe, canvas,
-      /* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
-      p > img, p > picture,
+      img, picture,
       /* Custom utility classes for other tags that need to be broken out */
       .breakout-item,
       .breakout-item-max
@@ -26,7 +25,7 @@
     }
 
     /* Respect img/picture min-width */
-    &:is(p > img, p > picture) {
+    &:is(img, picture) {
       min-width: auto;
     }
 
@@ -86,6 +85,7 @@
       background: linear-gradient(to left, gray, transparent);
     }
 
+    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
     &:where(hr + *) {
       &::before {
         display: none !important;

package/assets/bricks.css

@@ -45,8 +45,6 @@ pre {
   }
 }
 
-/* @import "./_prose"; */
-
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
 .breakout,
@@ -61,8 +59,7 @@ pre {
       table,
       pre,
       figure, video, iframe, canvas,
-      /* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
-      p > img, p > picture,
+      img, picture,
       /* Custom utility classes for other tags that need to be broken out */
       .breakout-item,
       .breakout-item-max
@@ -75,7 +72,7 @@ pre {
     }
 
     /* Respect img/picture min-width */
-    &:is(p > img, p > picture) {
+    &:is(img, picture) {
       min-width: auto;
     }
 
@@ -135,6 +132,7 @@ pre {
       background: linear-gradient(to left, gray, transparent);
     }
 
+    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
     &:where(hr + *) {
       &::before {
         display: none !important;
@@ -171,8 +169,6 @@ pre {
   }
 }
 
-/* @import "./_util"; */
-
 table.borderless {
   th,
   td {
@@ -206,6 +202,14 @@ h6 {
   }
 }
 
+/* Helper to handle icons in links */
+
+a > i {
+  display: inline-block;
+  margin-inline-end: 0.375ch; /* =3/8 */
+  font-style: normal;
+}
+
 /* Favicons in links @TODO: add to tricks-wiki */
 
 a[data-has-favicon] {
@@ -214,7 +218,7 @@ a[data-has-favicon] {
   > img {
     max-height: 1.25em;
     margin-top: calc(-0.25em / 2);
-    margin-inline-end: 0.25em;
+    margin-inline-end: 0.375ch; /* =3/8 */
 
     /* for tw-typography (.prose) */
     display: inline-block;
@@ -230,3 +234,29 @@ a[data-has-favicon] {
     filter: invert(1) !important;
   }
 }
+
+/* Jump to top trick */
+
+[data-jump-to="top"] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-top: 50vh;
+  opacity: 25%;
+
+  &:hover {
+    opacity: 75%;
+  }
+}
+
+/* Table of contents */
+
+[data-is-toc] {
+  a {
+    text-decoration: none;
+  }
+  > ul {
+    columns: 2;
+    font-size: 90%;
+  }
+}

package/assets/bricks.theme.css

@@ -1,3 +1,12 @@
+a {
+  &:not([href^="#"]) {
+    text-decoration-thickness: 1px;
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}
+
 h1 {
   font-size: 2.5em; /* for pico.css & tw-typography */
   margin-bottom: 1rem; /* for tw-typography */
@@ -7,6 +16,12 @@ hr {
   margin-block: 2em; /* for pico.css & tw-typography */
 }
 
+ul {
+  ul {
+    font-size: 90%;
+  }
+}
+
 pre {
   small {
     opacity: 50%;
@@ -22,3 +37,28 @@ table {
     margin-bottom: 0.25rem;
   }
 }
+
+[data-jump-to="top"] {
+  > i {
+    display: inline-block;
+    padding: 0.25rem;
+    margin: 0.5rem;
+    font-size: 0.75rem;
+    color: black;
+    border-color: black;
+  }
+}
+
+[data-is-toc] {
+  > ul > * > a {
+    font-weight: 500;
+  }
+}
+
+.breakout,
+.breakout-all {
+  > img,
+  > figure {
+    margin-bottom: 1rem;
+  }
+}

package/bricks.gemspec

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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.27.0-alpha.6",
+  "version": "0.27.0-alpha.7",
   "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",
+    "./unreduce-motion": "./src/_unreduce-motion.css",
     "./dist": "./dist/bricks.css"
   },
   "scripts": {

package/src/{_refactor/_prose.css → _TODO.css}

@@ -1,40 +1,4 @@
 .prose {
-  /* Helper for multi-line subtitles */
-  sub {
-    vertical-align: top;
-    bottom: -0.05em;
-    line-height: 1.1;
-    font-weight: 300;
-    /* Workaround to prevent underline inside links */
-    display: inline-block;
-    width: 100%;
-  }
-
-  a {
-    text-underline-offset: 0.1em;
-    text-decoration-thickness: 1px;
-    /* Don't underline links that point to anchors */
-    &[href^="#"] {
-      text-decoration: none;
-    }
-    &:hover {
-      text-decoration-thickness: 2px;
-    }
-  }
-
-  img {
-    &:not(:where(.prose > img, .prose > p > img)) {
-      margin-top: 0;
-      margin-bottom: 1em;
-    }
-  }
-
-  h1 {
-    sub {
-      font-size: 50%;
-    }
-  }
-
   th,
   td {
     /* Keep extra space on the right for better horizontal scroll on mobile */

package/src/_tricks.css

@@ -30,6 +30,13 @@ h6 {
   }
 }
 
+/* Helper to handle icons in links */
+a > i {
+  display: inline-block;
+  margin-inline-end: 0.375ch; /* =3/8 */
+  font-style: normal;
+}
+
 /* Favicons in links @TODO: add to tricks-wiki */
 a[data-has-favicon] {
   display: inline-block;
@@ -37,7 +44,7 @@ a[data-has-favicon] {
   > img {
     max-height: 1.25em;
     margin-top: calc(-0.25em / 2);
-    margin-inline-end: 0.25em;
+    margin-inline-end: 0.375ch; /* =3/8 */
 
     /* for tw-typography (.prose) */
     display: inline-block;
@@ -52,3 +59,27 @@ a[data-has-favicon] {
     filter: invert(1) !important;
   }
 }
+
+/* Jump to top trick */
+[data-jump-to="top"] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-top: 50vh;
+  opacity: 25%;
+
+  &:hover {
+    opacity: 75%;
+  }
+}
+
+/* Table of contents */
+[data-is-toc] {
+  a {
+    text-decoration: none;
+  }
+  > ul {
+    columns: 2;
+    font-size: 90%;
+  }
+}

package/src/_unreduce-motion.css

@@ -0,0 +1,12 @@
+/* @TODO: tricks-wiki */
+@utility unreduce-animation-* {
+  @media (prefers-reduced-motion: reduce) {
+    &:not([aria-busy="true"]) {
+      animation-duration: --value([ *]) !important;
+      animation-delay: 0 !important;
+      animation-iteration-count: infinite !important;
+    }
+  }
+}
+
+/* Overrides https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss */

package/src/breakout.css

@@ -12,8 +12,7 @@
       table,
       pre,
       figure, video, iframe, canvas,
-      /* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
-      p > img, p > picture,
+      img, picture,
       /* Custom utility classes for other tags that need to be broken out */
       .breakout-item,
       .breakout-item-max
@@ -26,7 +25,7 @@
     }
 
     /* Respect img/picture min-width */
-    &:is(p > img, p > picture) {
+    &:is(img, picture) {
       min-width: auto;
     }
 
@@ -86,6 +85,7 @@
       background: linear-gradient(to left, gray, transparent);
     }
 
+    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
     &:where(hr + *) {
       &::before {
         display: none !important;

package/src/bricks.css

@@ -4,8 +4,6 @@
  */
 
 @import "./_classless";
-/* @import "./_prose"; */
 @import "./breakout";
 @import "./_prism";
-/* @import "./_util"; */
 @import "./_tricks";

package/src/bricks.theme.css

@@ -1,3 +1,12 @@
+a {
+  &:not([href^="#"]) {
+    text-decoration-thickness: 1px;
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}
+
 h1 {
   font-size: 2.5em; /* for pico.css & tw-typography */
   margin-bottom: 1rem; /* for tw-typography */
@@ -7,6 +16,12 @@ hr {
   margin-block: 2em; /* for pico.css & tw-typography */
 }
 
+ul {
+  ul {
+    font-size: 90%;
+  }
+}
+
 pre {
   small {
     opacity: 50%;
@@ -22,3 +37,28 @@ table {
     margin-bottom: 0.25rem;
   }
 }
+
+[data-jump-to="top"] {
+  > i {
+    display: inline-block;
+    padding: 0.25rem;
+    margin: 0.5rem;
+    font-size: 0.75rem;
+    color: black;
+    border-color: black;
+  }
+}
+
+[data-is-toc] {
+  > ul > * > a {
+    font-weight: 500;
+  }
+}
+
+.breakout,
+.breakout-all {
+  > img,
+  > figure {
+    margin-bottom: 1rem;
+  }
+}