Schuil

assets/css/app.css

@@ -529,6 +529,108 @@ main {
   hyphens: manual;
 }
 
+/* The index's frame, set in the Schuil tiles' own units, a pica to 100. A
+   unit is the specimen's size where the reading column is at its narrowest
+   on a laptop, and smaller below that, so the band of heads under the title
+   always fits with a little brass either side. */
+.home { container-type: inline-size; }
+
+.schuil {
+  --u: min(.22px, 100cqw / 2700);
+  position: relative;
+  min-height: calc(var(--u) * 2600);
+  padding: calc(var(--u) * 1600) calc(var(--u) * 300) calc(var(--u) * 450);
+}
+
+.schuil-ornaments {
+  position: absolute;
+  inset: 0;
+  color: #000;
+  pointer-events: none;
+}
+
+.schuil-half {
+  position: absolute;
+  inset: 0 50% 0 0;
+}
+
+.schuil-right {
+  inset: 0 0 0 50%;
+  transform: scaleX(-1);
+}
+
+/* A tile goes where the specimen put it: the point (--x, --y) from the
+   corner it hangs from, then turned by --m about its own corner, as an SVG
+   transform would. */
+.schuil-tile {
+  position: absolute;
+  left: calc(var(--ax, 0) * 100%);
+  top: calc(var(--ay, 0) * 100%);
+  width: calc(var(--w) * var(--u));
+  height: calc(var(--h) * var(--u));
+  transform-origin: 0 0;
+  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)))
+             matrix(var(--m, 1, 0, 0, 1, 0, 0));
+  background: currentColor;
+  mask-position: center;
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+}
+
+.schuil-01 { --w: 50; --h: 50; mask-image: url("../ornaments/schuil-01.svg"); }
+.schuil-06 { --w: 100; --h: 100; mask-image: url("../ornaments/schuil-06.svg"); }
+.schuil-10 { --w: 150; --h: 150; mask-image: url("../ornaments/schuil-10.svg"); }
+.schuil-11 { --w: 150; --h: 125; mask-image: url("../ornaments/schuil-11.svg"); }
+.schuil-12 { --w: 150; --h: 125; mask-image: url("../ornaments/schuil-12.svg"); }
+.schuil-13 { --w: 250; --h: 300; mask-image: url("../ornaments/schuil-13.svg"); }
+.schuil-14 { --w: 300; --h: 600; mask-image: url("../ornaments/schuil-14.svg"); }
+.schuil-15 { --w: 350; --h: 350; mask-image: url("../ornaments/schuil-15.svg"); }
+.schuil-16 { --w: 350; --h: 700; mask-image: url("../ornaments/schuil-16.svg"); }
+.schuil-brass-v { --w: 50; --h: 100; mask-image: url("../ornaments/schuil-brass-v.svg"); }
+
+/* Brass rule that stretches: two 8 unit strokes in a six point body, drawn
+   as gradients so they run any length without a seam. A horizontal run
+   stands in from either side by --x, or by --r on the right; a vertical one
+   from the head by --y and the foot by --b. */
+.schuil-rule {
+  position: absolute;
+  left: calc(var(--x) * var(--u));
+  right: calc(var(--r, var(--x)) * var(--u));
+  top: calc(var(--ay, 0) * 100% + var(--y) * var(--u));
+  height: calc(var(--u) * 50);
+  background:
+    linear-gradient(currentColor 0 0) 0 calc(var(--u) * 8) / 100% calc(var(--u) * 8) no-repeat,
+    linear-gradient(currentColor 0 0) 0 calc(var(--u) * 34) / 100% calc(var(--u) * 8) no-repeat;
+}
+
+.schuil-rule-v {
+  position: absolute;
+  left: calc(var(--x) * var(--u));
+  top: calc(var(--y) * var(--u));
+  bottom: calc(var(--b) * var(--u));
+  width: calc(var(--u) * 50);
+  background:
+    linear-gradient(currentColor 0 0) calc(var(--u) * 8) 0 / calc(var(--u) * 8) 100% no-repeat,
+    linear-gradient(currentColor 0 0) calc(var(--u) * 34) 0 / calc(var(--u) * 8) 100% no-repeat;
+}
+
+/* Set in the panel at the head, the panel's inside 2100 units by 400 at
+   the specimen's size. */
+.schuil-title {
+  position: absolute;
+  inset: calc(var(--u) * 475) calc(var(--u) * 475) auto;
+  height: calc(var(--u) * 400);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-size: calc(var(--u) * 220);
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
 .app-version {
   margin: 3rem 0 .5rem;
   text-align: center;