diff --git a/assets/css/app.css b/assets/css/app.css index 522267a..667d236 100644 --- a/assets/css/app.css +++ b/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; diff --git a/assets/js/render.js b/assets/js/render.js index a66da22..a1dacfa 100644 --- a/assets/js/render.js +++ b/assets/js/render.js @@ -11,6 +11,7 @@ 'page.njk', 'book.njk', 'index.njk', + 'home.njk', 'sidebar.njk', 'reference.njk', 'verses.njk', diff --git a/assets/ornaments/schuil-01.svg b/assets/ornaments/schuil-01.svg new file mode 100644 index 0000000..4c96dea --- /dev/null +++ b/assets/ornaments/schuil-01.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-02.svg b/assets/ornaments/schuil-02.svg new file mode 100644 index 0000000..2d99706 --- /dev/null +++ b/assets/ornaments/schuil-02.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-03.svg b/assets/ornaments/schuil-03.svg new file mode 100644 index 0000000..5e78311 --- /dev/null +++ b/assets/ornaments/schuil-03.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-04.svg b/assets/ornaments/schuil-04.svg new file mode 100644 index 0000000..1dab706 --- /dev/null +++ b/assets/ornaments/schuil-04.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-05.svg b/assets/ornaments/schuil-05.svg new file mode 100644 index 0000000..b697cbb --- /dev/null +++ b/assets/ornaments/schuil-05.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-06.svg b/assets/ornaments/schuil-06.svg new file mode 100644 index 0000000..99d7aaf --- /dev/null +++ b/assets/ornaments/schuil-06.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-07.svg b/assets/ornaments/schuil-07.svg new file mode 100644 index 0000000..3cdb273 --- /dev/null +++ b/assets/ornaments/schuil-07.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-08.svg b/assets/ornaments/schuil-08.svg new file mode 100644 index 0000000..40743cc --- /dev/null +++ b/assets/ornaments/schuil-08.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-09.svg b/assets/ornaments/schuil-09.svg new file mode 100644 index 0000000..d106f10 --- /dev/null +++ b/assets/ornaments/schuil-09.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-10.svg b/assets/ornaments/schuil-10.svg new file mode 100644 index 0000000..e1a2993 --- /dev/null +++ b/assets/ornaments/schuil-10.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-11.svg b/assets/ornaments/schuil-11.svg new file mode 100644 index 0000000..aa1deb6 --- /dev/null +++ b/assets/ornaments/schuil-11.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-12.svg b/assets/ornaments/schuil-12.svg new file mode 100644 index 0000000..68dd76f --- /dev/null +++ b/assets/ornaments/schuil-12.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-13.svg b/assets/ornaments/schuil-13.svg new file mode 100644 index 0000000..b53d00a --- /dev/null +++ b/assets/ornaments/schuil-13.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-14.svg b/assets/ornaments/schuil-14.svg new file mode 100644 index 0000000..6bc50e5 --- /dev/null +++ b/assets/ornaments/schuil-14.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-15.svg b/assets/ornaments/schuil-15.svg new file mode 100644 index 0000000..3e76510 --- /dev/null +++ b/assets/ornaments/schuil-15.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-16.svg b/assets/ornaments/schuil-16.svg new file mode 100644 index 0000000..5539a93 --- /dev/null +++ b/assets/ornaments/schuil-16.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-brass-v.svg b/assets/ornaments/schuil-brass-v.svg new file mode 100644 index 0000000..c508f1e --- /dev/null +++ b/assets/ornaments/schuil-brass-v.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-brass.svg b/assets/ornaments/schuil-brass.svg new file mode 100644 index 0000000..ebe6d14 --- /dev/null +++ b/assets/ornaments/schuil-brass.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-mitre.svg b/assets/ornaments/schuil-mitre.svg new file mode 100644 index 0000000..2bcf9f1 --- /dev/null +++ b/assets/ornaments/schuil-mitre.svg @@ -0,0 +1 @@ + diff --git a/assets/sw.js b/assets/sw.js index 5fee29a..2ab0db5 100644 --- a/assets/sw.js +++ b/assets/sw.js @@ -27,6 +27,16 @@ const PRECACHE = [ './fonts/EBGaramond-Italic.woff2', './ornaments/group-l-49.svg', './ornaments/mural-311a.svg', + './ornaments/schuil-01.svg', + './ornaments/schuil-06.svg', + './ornaments/schuil-10.svg', + './ornaments/schuil-11.svg', + './ornaments/schuil-12.svg', + './ornaments/schuil-13.svg', + './ornaments/schuil-14.svg', + './ornaments/schuil-15.svg', + './ornaments/schuil-16.svg', + './ornaments/schuil-brass-v.svg', './ornaments/uniform-rule-corner-tl.svg', './ornaments/uniform-rule-corner-tr.svg', './ornaments/uniform-rule-corner-bl.svg', @@ -213,7 +223,7 @@ async function fragmentFor(path, event) { async function servePage(path, code, call) { let fragment = await fragmentFor(path, call.event); if (!code) { - fragment += '\n' + await view.render('version.njk', { version: VERSIONS }); + fragment = await view.render('home.njk', { content: fragment, version: VERSIONS }); } const chrome = { sidebar: !!code, reference: await referenceOf(code, null) }; if (!call.navigate && !call.restore) { diff --git a/assets/templates/home.njk b/assets/templates/home.njk new file mode 100644 index 0000000..964a4a6 --- /dev/null +++ b/assets/templates/home.njk @@ -0,0 +1,87 @@ +{# The index inside a Schuil frame, after the specimen page in the American + Specimen Book of Type Styles. Each tile is placed as the specimen placed it, + in its units (a pica is 100), and the stylesheet scales the units to the + screen. Only brass rule stretches: the frame's fixed pieces sit at the + corners and in the middle, and the rule between them takes up the rest. + + The right half is the left half turned over. A tile with --ax: 1 is placed + from the middle of the frame rather than its left edge, and one with + --ay: 1 from its foot rather than its head; --m is the tile's turn. #} +