@mark1russell7/site-pages 0.2.9 → 0.2.10

package/README.md

@@ -81,7 +81,7 @@ The rule for a box that scrolls examines only tables, for these reasons:
 
 - A code block, a hex view, a row of tabs and a carousel are meant to scroll, and a visitor sees that they scroll.
 - A table in a box that scrolls looks complete on a phone, with no scroll bar. The visitor does not see the last columns.
-- The class `scroll-cue` shows a shade at the edge of the box, so a table in such a box does not count. The shade shows only when the cells have no background color of their own.
+- The class `scroll-cue` shows a fade at the edge of the box, so a table in such a box does not count.
 - A false alarm costs more than a miss, because each false alarm needs an exception in the site.
 
 A table is `table`, `role="table"` or `role="grid"`. A desktop view has a scroll bar, so a table in a box that scrolls is not a problem there. `report.json` still shows the table in `measure.cut`.
@@ -371,7 +371,9 @@ The pages operate at a width of 390 px without horizontal scroll. The timeline s
 
 A wide code block or table on a narrow screen scrolls sideways. Without a cue, its text looks cut. The file `scroll-cue.css` of the package gives a cue:
 
-- A shade shows at each edge that has more content. At an end of the box, the shade of that end goes.
+- The content fades at each edge that has more content. At an end of the box, the fade of that end goes.
+- The fade shows along all of the edge of a tall box, and over cells with their own background color.
+- A browser with no scroll timelines gets a shade at the edge. This shade shows only where the content has no background color.
 - The cue uses only CSS. It needs no JavaScript.
 
 Import the file in the site, and give the class `scroll-cue` to the box:
@@ -384,7 +386,7 @@ import "@mark1russell7/site-pages/scroll-cue.css";
 <pre class="scroll-cue">pnpm add @mark1russell7/site-pages</pre>
 ```
 
-The class sets `overflow-x: auto` and the background color of the box. Set `--scroll-cue-bg` to the background color of the box, and `--scroll-cue-shade` to the color of the shade:
+The class sets `overflow-x: auto` and the background color of the box. Set `--scroll-cue-bg` to the background color of the box. In a browser with no scroll timelines, `--scroll-cue-shade` is the color of the shade:
 
 ```css
 .code {

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@mark1russell7/site-pages",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A release timeline page and a live status page for the site of a GitHub repository: JSON data and standalone HTML, made at deploy time.",
   "keywords": [
     "github-pages",

package/styles/scroll-cue.css

@@ -1,7 +1,9 @@
 /*
  * @mark1russell7/site-pages/scroll-cue.css: a cue on a box that scrolls sideways.
- * A shade shows at each edge that has more content. When the box is at an end, the shade of that end goes.
- * The cue uses only CSS: two covers scroll with the content, and two shades stay at the edges.
+ * The content fades at each edge that has more content. When the box is at an end, the fade of that end goes.
+ * The cue uses only CSS. The fade shows along all of the edge, also over cells with their own background color.
+ * A browser with no scroll timelines gets two covers that scroll with the content and two shades that stay at the edges.
+ * In such a browser, the shade shows only where the content has no background color.
  *
  * Use: give the class scroll-cue to the box, and set --scroll-cue-bg to the background color of the box.
  *   <pre class="scroll-cue">...</pre>
@@ -18,8 +20,8 @@
   background-image:
     linear-gradient(to right, var(--scroll-cue-bg) 40%, transparent),
     linear-gradient(to left, var(--scroll-cue-bg) 40%, transparent),
-    radial-gradient(farthest-side at 0 50%, var(--scroll-cue-shade), transparent),
-    radial-gradient(farthest-side at 100% 50%, var(--scroll-cue-shade), transparent);
+    linear-gradient(to right, var(--scroll-cue-shade), transparent),
+    linear-gradient(to left, var(--scroll-cue-shade), transparent);
   background-position: left center, right center, left center, right center;
   background-size:
     calc(var(--scroll-cue-size) * 2) 100%,
@@ -29,3 +31,43 @@
   background-repeat: no-repeat;
   background-attachment: local, local, scroll, scroll;
 }
+
+@property --scroll-cue-fade-left {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-cue-fade-right {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll-cue-fades {
+  0% {
+    --scroll-cue-fade-left: 0px;
+    --scroll-cue-fade-right: calc(var(--scroll-cue-size) * 2);
+  }
+  4% {
+    --scroll-cue-fade-left: calc(var(--scroll-cue-size) * 2);
+  }
+  96% {
+    --scroll-cue-fade-right: calc(var(--scroll-cue-size) * 2);
+  }
+  100% {
+    --scroll-cue-fade-left: calc(var(--scroll-cue-size) * 2);
+    --scroll-cue-fade-right: 0px;
+  }
+}
+
+/* A box with no overflow has no active timeline, so its fades stay at 0 and the mask hides nothing. */
+@supports (animation-timeline: scroll()) {
+  .scroll-cue {
+    background-image: none;
+    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--scroll-cue-fade-left), #000 calc(100% - var(--scroll-cue-fade-right)), transparent);
+    mask-image: linear-gradient(to right, transparent, #000 var(--scroll-cue-fade-left), #000 calc(100% - var(--scroll-cue-fade-right)), transparent);
+    animation: scroll-cue-fades linear both;
+    animation-timeline: scroll(self inline);
+  }
+}