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

package/assets/bricks.css

@@ -45,6 +45,13 @@ pre {
   }
 }
 
+small {
+  [role="button"] {
+    padding: 0.75em 1em;
+    font-size: inherit;
+  }
+}
+
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
 .breakout,
@@ -169,6 +176,18 @@ pre {
   }
 }
 
+table {
+  /* Workaround to widen particular columns @TODO: add to tricks-wiki */
+  th {
+    hr {
+      width: 12ch; /* min ~65/12 = ~5 cols */
+      height: 0;
+      margin: 0;
+      visibility: hidden;
+    }
+  }
+}
+
 table.borderless {
   th,
   td {
@@ -226,6 +245,16 @@ a[data-has-favicon] {
   }
 }
 
+code[data-caption] {
+  &::before {
+    content: attr(data-caption);
+    display: block;
+    margin-bottom: 1rem;
+    opacity: 50%;
+    font-style: italic;
+  }
+}
+
 /* Tailwind tricks */
 
 .invert {
@@ -252,11 +281,33 @@ a[data-has-favicon] {
 /* Table of contents */
 
 [data-is-toc] {
+  font-size: 87.5%;
+
   a {
     text-decoration: none;
   }
   > ul {
-    columns: 2;
-    font-size: 90%;
+    columns: 30ch auto; /* 2 cols max for 65ch container */
+  }
+}
+
+/* @TODO: to TRICKS */
+
+.columns {
+  columns: 20ch auto; /* 3 cols max for 65ch container */
+}
+
+/* @TODO: to TRICKS */
+
+ul {
+  li[data-marker]::marker {
+    content: attr(data-marker) " ";
+  }
+}
+
+.faded {
+  opacity: 50%;
+  &:hover {
+    opacity: 87.5%;
   }
 }

package/assets/bricks.theme.css

@@ -18,21 +18,25 @@ hr {
 
 ul {
   ul {
-    font-size: 90%;
+    font-size: 87.5%;
   }
 }
 
 pre {
   small {
-    opacity: 50%;
+    opacity: 75%;
     font-weight: lighter;
   }
 }
 
 table {
   th {
+    vertical-align: bottom;
     font-weight: bold;
   }
+  td {
+    vertical-align: top;
+  }
   pre {
     margin-bottom: 0.25rem;
   }
@@ -62,3 +66,9 @@ table {
     margin-bottom: 1rem;
   }
 }
+
+.faded {
+  a {
+    text-decoration-style: dotted;
+  }
+}

package/bricks.gemspec

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.27.0-alpha.7",
+  "version": "0.27.0-alpha.9",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "style": "./src/bricks.css",
   "exports": {

package/src/_classless.css

@@ -39,3 +39,10 @@ pre {
     border-radius: 0;
   }
 }
+
+small {
+  [role="button"] {
+    padding: 0.75em 1em;
+    font-size: inherit;
+  }
+}

package/src/_tricks.css

@@ -1,3 +1,15 @@
+table {
+  /* Workaround to widen particular columns @TODO: add to tricks-wiki */
+  th {
+    hr {
+      width: 12ch; /* min ~65/12 = ~5 cols */
+      height: 0;
+      margin: 0;
+      visibility: hidden;
+    }
+  }
+}
+
 table.borderless {
   th,
   td {
@@ -52,6 +64,16 @@ a[data-has-favicon] {
   }
 }
 
+code[data-caption] {
+  &::before {
+    content: attr(data-caption);
+    display: block;
+    margin-bottom: 1rem;
+    opacity: 50%;
+    font-style: italic;
+  }
+}
+
 /* Tailwind tricks */
 .invert {
   /* Fix the scrollbar color when inverted */
@@ -75,11 +97,31 @@ a[data-has-favicon] {
 
 /* Table of contents */
 [data-is-toc] {
+  font-size: 87.5%;
+
   a {
     text-decoration: none;
   }
   > ul {
-    columns: 2;
-    font-size: 90%;
+    columns: 30ch auto; /* 2 cols max for 65ch container */
+  }
+}
+
+/* @TODO: to TRICKS */
+.columns {
+  columns: 20ch auto; /* 3 cols max for 65ch container */
+}
+
+/* @TODO: to TRICKS */
+ul {
+  li[data-marker]::marker {
+    content: attr(data-marker) " ";
+  }
+}
+
+.faded {
+  opacity: 50%;
+  &:hover {
+    opacity: 87.5%;
   }
 }

package/src/bricks.theme.css

@@ -18,21 +18,25 @@ hr {
 
 ul {
   ul {
-    font-size: 90%;
+    font-size: 87.5%;
   }
 }
 
 pre {
   small {
-    opacity: 50%;
+    opacity: 75%;
     font-weight: lighter;
   }
 }
 
 table {
   th {
+    vertical-align: bottom;
     font-weight: bold;
   }
+  td {
+    vertical-align: top;
+  }
   pre {
     margin-bottom: 0.25rem;
   }
@@ -62,3 +66,9 @@ table {
     margin-bottom: 1rem;
   }
 }
+
+.faded {
+  a {
+    text-decoration-style: dotted;
+  }
+}

package/src/_TODO.css

@@ -1,51 +0,0 @@
-.prose {
-  th,
-  td {
-    /* Keep extra space on the right for better horizontal scroll on mobile */
-    padding: 1rem 2rem 1rem 0;
-    vertical-align: top;
-    /* Workaround to widen particular columns */
-    hr {
-      width: 12ch;
-      height: 0;
-      margin: 0;
-      visibility: hidden;
-      /* &.ch16 {
-        width: 16ch;
-      } */
-    }
-    /* Workaround for headings in Markdown tables */
-    big {
-      font-weight: bold;
-    }
-  }
-  th {
-    vertical-align: bottom;
-  }
-
-  blockquote {
-    font-weight: 300;
-
-    + figcaption {
-      margin-top: -1em;
-      text-align: right;
-      font-style: italic;
-      font-weight: 300;
-
-      &::before {
-        content: "—";
-        margin-right: 0.25em;
-      }
-    }
-  }
-
-  code[data-caption] {
-    &::before {
-      content: attr(data-caption);
-      display: block;
-      margin-bottom: 1.5em;
-      opacity: 0.5;
-      font-style: italic;
-    }
-  }
-}