@mark1russell7/site-pages 0.1.7 → 0.1.8

package/README.md

@@ -269,6 +269,31 @@ The variables are `--sp-bg`, `--sp-surface`, `--sp-sunken`, `--sp-fg`, `--sp-fg-
 
 The pages operate at a width of 390 px without horizontal scroll. The timeline scrolls in its own box. The keyboard operates all controls: the arrow keys, Home and End move between the versions, and Enter or Space selects one. Without JavaScript, the releases page shows all versions.
 
+## A cue on a box that scrolls
+
+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 cue uses only CSS. It needs no JavaScript.
+
+Import the file in the site, and give the class `scroll-cue` to the box:
+
+```ts
+import "@mark1russell7/site-pages/scroll-cue.css";
+```
+
+```html
+<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:
+
+```css
+.code {
+  --scroll-cue-bg: var(--code-bg);
+}
+```
+
 ## A GitHub Pages workflow
 
 This workflow builds the site, adds the two pages, and deploys. It also starts every 3 hours, so the status page stays current without a push. A scheduled run builds the newest commit of `main` that passed CI.

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@mark1russell7/site-pages",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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",
@@ -30,7 +30,8 @@
     "site-pages": "./build/cli.js"
   },
   "files": [
-    "build"
+    "build",
+    "styles"
   ],
   "publishConfig": {
     "access": "public"
@@ -57,6 +58,7 @@
       "types": "./build/index.d.ts",
       "import": "./build/index.js"
     },
+    "./scroll-cue.css": "./styles/scroll-cue.css",
     "./package.json": "./package.json"
   }
 }

package/styles/scroll-cue.css

@@ -0,0 +1,31 @@
+/*
+ * @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.
+ *
+ * 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>
+ *   .my-code { --scroll-cue-bg: #f6f6f8; }
+ * The box gets overflow-x: auto. Its background color is --scroll-cue-bg.
+ */
+.scroll-cue {
+  --scroll-cue-bg: Canvas;
+  --scroll-cue-shade: color-mix(in srgb, CanvasText 28%, transparent);
+  --scroll-cue-size: 1.25rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  background-color: var(--scroll-cue-bg);
+  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);
+  background-position: left center, right center, left center, right center;
+  background-size:
+    calc(var(--scroll-cue-size) * 2) 100%,
+    calc(var(--scroll-cue-size) * 2) 100%,
+    var(--scroll-cue-size) 100%,
+    var(--scroll-cue-size) 100%;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+}