diff --git a/assets/fonts/ftaurebesh/FTAurebesh-Bold.woff2 b/assets/fonts/ftaurebesh/FTAurebesh-Bold.woff2 deleted file mode 100644 index 0a0dd3d..0000000 Binary files a/assets/fonts/ftaurebesh/FTAurebesh-Bold.woff2 and /dev/null differ diff --git a/assets/fonts/ftaurebesh/FTAurebesh-Medium.woff2 b/assets/fonts/ftaurebesh/FTAurebesh-Medium.woff2 deleted file mode 100644 index 183321b..0000000 Binary files a/assets/fonts/ftaurebesh/FTAurebesh-Medium.woff2 and /dev/null differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-black.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-black.woff2 new file mode 100644 index 0000000..bcf3558 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-black.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-bold.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-bold.woff2 new file mode 100644 index 0000000..694e644 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-bold.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-light.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-light.woff2 new file mode 100644 index 0000000..988abb1 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-light.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-medium.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-medium.woff2 new file mode 100644 index 0000000..ca4cb40 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-medium.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-regular.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-regular.woff2 new file mode 100644 index 0000000..087ba16 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-regular.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-semibold.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-semibold.woff2 new file mode 100644 index 0000000..f39c990 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-semibold.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-thin.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-thin.woff2 new file mode 100644 index 0000000..5978c60 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-thin.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-ultrabold.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-ultrabold.woff2 new file mode 100644 index 0000000..16bf90c Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-ultrabold.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh-ultralight.woff2 b/assets/fonts/ftaurebesh/ftaurebesh-ultralight.woff2 new file mode 100644 index 0000000..061e355 Binary files /dev/null and b/assets/fonts/ftaurebesh/ftaurebesh-ultralight.woff2 differ diff --git a/assets/fonts/ftaurebesh/ftaurebesh.css b/assets/fonts/ftaurebesh/ftaurebesh.css index fd8ce44..fbe97e0 100644 --- a/assets/fonts/ftaurebesh/ftaurebesh.css +++ b/assets/fonts/ftaurebesh/ftaurebesh.css @@ -3,14 +3,14 @@ font-style: normal; font-weight: 500; font-display: block; - src: url("FTAurebesh-Medium.woff2") format("woff2"); - size-adjust: 150%; + src: url("ftaurebesh-medium.woff2") format("woff2"); + size-adjust: 125%; } @font-face { font-family: FTAurebesh; font-style: normal; font-weight: 700; font-display: block; - src: url("FTAurebesh-Bold.woff2") format("woff2"); - size-adjust: 150%; + src: url("ftaurebesh-bold.woff2") format("woff2"); + size-adjust: 125%; } diff --git a/assets/site.css b/assets/site.css index 8804ddb..3e275a1 100644 --- a/assets/site.css +++ b/assets/site.css @@ -2,15 +2,18 @@ @import url(fonts/ftaurebesh/ftaurebesh.css); :root { - --ecru: hsla(46, 56%, 65%, 1); - --wenge: hsla(288, 6%, 33%, 1); - --cordovan: hsla(354, 30%, 44%, 1); - --isabelline: hsla(40, 26%, 93%, 1); + --c-highlight: hsla(0, 0%, 100%, 87.5%); + --c-dark: hsl(217, 17%, 21%); + --c-accent: hsl(14, 62%, 53%); + --c-light: hsl(217, 17%, 85%); + + --c-text-light: var(--c-highlight); + --c-text-dark: var(--c-dark); box-sizing: border-box; display: flex; flex-direction: column; - height: 100%; + min-height: 100%; flex-grow: 1; padding: 0; font-size: 16px; @@ -28,43 +31,154 @@ --s3: calc(var(--s2) * var(--ratio)); --s4: calc(var(--s3) * var(--ratio)); --s5: calc(var(--s4) * var(--ratio)); - --content-width: clamp(87.5vw, 30rem, 100vw - 1rem); + --content-width: clamp(75vw, 40rem, 100vw - 3rem); --inset: calc(50vw - var(--content-width) / 2); } -*, :after, :before { +@media (prefers-color-scheme: dark) { + :root { + --c-highlight: hsl(217, 9%, 32%); + --c-dark: hsl(217, 9%, 8%); + --c-accent: hsl(14, 62%, 53%); + --c-light: hsl(217, 9%, 16%); + + --c-text-light: hsla(0, 0%, 100%, 75%); + --c-text-dark: hsla(0, 0%, 100%, 75%); + } +} + +::selection { + background: var(--c-accent); + color: var(--c-text-light); +} + +*, +:after, +:before { box-sizing: inherit; font-family: inherit; + text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); + text-decoration-thickness: 0.1rem; + transition: color ease 0.1s; } body { + position: relative; + display: flex; + flex-direction: column; + z-index: 1; flex-grow: 1; padding: 0; margin: 0; font-family: Inter, sans-serif; - background-color: var(--isabelline); - color: var(--wenge); - border: 0.5rem solid var(--cordovan); + background-color: var(--c-light); + color: var(--c-text-dark); +} + +@media screen { + body { + border: 0.5rem solid var(--c-accent); + &::before { + content: ""; + z-index: -1; + position: absolute; + pointer-events: none; + inset: -0.5rem; + bottom: calc(1px - 0.5rem); + border-radius: 1.3rem 1.3rem 1rem 1rem; + border: 0.5rem solid var(--c-accent); + } + } + body > footer { + position: relative; + z-index: 1; + background-color: var(--c-accent); + color: var(--c-text-light); + padding: 0 1ch 0; + border-radius: 0.5rem 0.5rem 0 0; + } + body > footer::before { + content: ""; + z-index: -1; + position: absolute; + height: calc(1rem - 1px); + width: 1rem; + margin: 0 0 -0.5rem -0.5rem; + border-bottom-left-radius: 1rem; + bottom: 1px; + border: 0.5rem solid var(--c-accent); + left: 100%; + border-width: 0 0 0.5rem 0.5rem; + } + body > footer::after { + content: ""; + z-index: -1; + position: absolute; + height: calc(1rem - 1px); + width: 1rem; + margin: 0 -0.5rem -0.5rem 0; + border-bottom-right-radius: 1rem; + bottom: 1px; + border: 0.5rem solid var(--c-accent); + right: 100%; + border-width: 0 0.5rem 0.5rem 0; + } + } a { color: inherit; } -a:link { - text-decoration: underline; +a[href] { + text-decoration-line: underline; +} +a[href]:hover, +a[href]:focus-visible, +label:hover, +label:focus-visible { + text-decoration-color: var(--c-accent); +} + +section { + margin-top: 1rem; +} + +.footnote-item:target, .footnote-ref :target { + animation: ping 1s ease-out; + &, a { + text-decoration-color: var(--c-accent); + }; +} + +@keyframes ping { + 0% { + border-radius: 50%; + background-color: var(--c-accent); + box-shadow: var(--c-accent) 0 0 1rem 4rem; + } + 100% { + border-radius: 50%; + background-color: transparent; + box-shadow: transparent 0 0 0rem 0rem; + } + 100% { + border-radius: initial; + } } li::marker { - color: color-mix(in lch, currentcolor 50%, transparent) + color: color-mix(in srgb, currentcolor 50%, transparent); } -li > aside { +aside { display: inline-block; margin-left: 1ch; font-size: var(--s-1); } -ul, ol { +ul, +ol { padding-left: 0; - ul, ol { + ul, + ol { padding-left: 2em; } } @@ -75,13 +189,21 @@ p { } } +sup { + font-size: var(--s-1); + margin-top: -0.2em; +} + body > header { - background-color: var(--wenge); - color: var(--isabelline); - padding: 0 var(--inset); + background-color: var(--c-dark); + color: var(--c-text-light); + padding: 0 var(--inset) 0.5rem; + border-radius: 0.5rem 0.5rem 0 0; + margin-bottom: 0.5rem; nav { display: flex; flex-direction: row; + align-items: baseline; flex-wrap: wrap; padding-top: 0.5rem; gap: 1ch; @@ -91,35 +213,112 @@ body > header { } } } +@media print { + :root { + --c-highlight: white + --c-dark: white; + --c-accent: black; + --c-light: white; + + --c-text-light: black; + --c-text-dark: black; + font-size: 12pt; + } + body > header > nav { + display: none; + } + a[href^='http']::after { + content: ' (' attr(href) ')'; + } +} + +body > footer { + text-align: center; + font-size: var(--s-1); + margin: auto var(--inset) 0 auto; +} + +.header-meta { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-size: var(--s-1); + > * + *::before { + content: "-"; + padding: 0 0.5ch; + } +} + +.nav-categories { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1ch; +} label { cursor: pointer; - text-decoration: underline; - > input[type='radio'] { + text-decoration-line: underline; + > input[type="radio"] { visibility: hidden; position: fixed; bottom: 110%; } } -label:has(input[type='radio']:checked) { - color: var(--ecru); +.nav-language-button { + margin-left: 0.5ch; + position: relative; + z-index: 0; + &:has(input[type="radio"]:checked) { + padding-inline: 0.25rem; + color: var(--c-text-dark); + &::before { + content: ""; + z-index: -1; + position: absolute; + top: -0.25rem; + right: 0; + bottom: -0.25rem; + left: 0; + border-radius: 0.25rem; + background-color: var(--c-highlight); + } + } } -[data-font=aurebesh] { +[data-font="aurebesh"] { font-family: FTAurebesh; + line-height: 1.25; + ul > li { + list-style-type: square; + } } -[data-font=english] { +[data-font="english"] { font-family: Inter; } -h1,h2,h3,h4 { +h1, +h2, +h3, +h4 { font-weight: 700; margin: 1rem calc(-0.5rem - var(--inset)) 0; padding: 0 calc(0.5rem + var(--inset)); + &:hover .header-anchor { + opacity: 1; + } } main { - h1,h2,h3,h4 { - background-image: linear-gradient(50deg, var(--ecru) 0%, var(--ecru) calc(var(--inset) * 0.25), transparent calc(var(--inset) + 12rem)) + h1, + h2, + h3, + h4 { + background-image: linear-gradient( + 50deg, + var(--c-highlight) 0%, + var(--c-highlight) calc(var(--inset) * 0.25), + transparent calc(var(--inset) + 12rem) + ); } padding: 0 var(--inset); } @@ -130,5 +329,19 @@ h2 { font-size: var(--s2); } h3 { - font-size: var(--s3); + font-size: var(--s1); +} +.header-anchor { + position: absolute; + transform: translateX(-100%); + margin-left: -0.2ch; + opacity: 0; + transition: opacity ease-in 0.1s; + &::before { + content: "#"; + } +} + +.item-summary { + margin-bottom: 1rem; } diff --git a/eleventy.config.js b/eleventy.config.js index 2dd08b9..e232f25 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,9 +1,27 @@ const fs = require("fs"); const path = require("path"); +const md = require("markdown-it"); +const mdAnchor = require("markdown-it-anchor"); +const mdFootnote = require("markdown-it-footnote"); +const prettier = require("prettier"); module.exports = (config) => { const slugify = config.getFilter("slugify"); const url = config.getFilter("url"); + const mdLib = md({ + html: true, + breaks: true, + linkify: true, + typographer: true, + }) + .use(mdAnchor, { + permalink: mdAnchor.permalink.ariaHidden({ + placement: "before", + symbol: "", + }), + }) + .use(mdFootnote) + config.setLibrary("md", mdLib); config.addPassthroughCopy("assets"); // collection from music folder @@ -22,7 +40,7 @@ module.exports = (config) => { return { data: { title: base, - tags: ['music'], + tags: ["music"], }, url: url(absUrl), }; @@ -30,6 +48,23 @@ module.exports = (config) => { return musicFiles; }); + config.addTransform("prettier", (content, outputPath) => { + if (typeof outputPath !== 'string') { + return content + } + const extname = path.extname(outputPath); + switch (extname) { + case ".html": + case ".css": + case ".json": + // Strip leading period from extension and use as the Prettier parser. + const parser = extname.replace(/^./, ""); + return prettier.format(content, { parser }); + default: + return content; + } + }) + return { dir: { input: "site", diff --git a/package.json b/package.json index c535541..5219efe 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "author": "Joshua Seigler", "license": "ISC", "dependencies": { - "@11ty/eleventy": "^2.0.1" + "@11ty/eleventy": "^2.0.1", + "markdown-it-anchor": "^9.0.1", + "markdown-it-footnote": "^4.0.0", + "prettier": "^3.3.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e84b006..7f4a315 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,15 @@ importers: '@11ty/eleventy': specifier: ^2.0.1 version: 2.0.1 + markdown-it-anchor: + specifier: ^9.0.1 + version: 9.0.1(@types/markdown-it@14.1.1)(markdown-it@13.0.2) + markdown-it-footnote: + specifier: ^4.0.0 + version: 4.0.0 + prettier: + specifier: ^3.3.1 + version: 3.3.1 packages: @@ -75,6 +84,15 @@ packages: resolution: {integrity: sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==} engines: {node: '>=10'} + '@types/linkify-it@5.0.0': + resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==} + + '@types/markdown-it@14.1.1': + resolution: {integrity: sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==} + + '@types/mdurl@2.0.0': + resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==} + '@types/minimatch@3.0.5': resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} @@ -500,6 +518,15 @@ packages: resolution: {integrity: sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==} engines: {node: '>=12'} + markdown-it-anchor@9.0.1: + resolution: {integrity: sha512-cBt7aAzmkfX8X7FqAe8EBryiKmToXgMQEEMqkXzWCm0toDtfDYIGboKeTKd8cpNJArJtutrf+977wFJTsvNGmQ==} + peerDependencies: + '@types/markdown-it': '*' + markdown-it: '*' + + markdown-it-footnote@4.0.0: + resolution: {integrity: sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==} + markdown-it@13.0.2: resolution: {integrity: sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==} hasBin: true @@ -638,6 +665,11 @@ packages: resolution: {integrity: sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==} engines: {node: '>=12.0.0'} + prettier@3.3.1: + resolution: {integrity: sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==} + engines: {node: '>=14'} + hasBin: true + promise-each@2.2.0: resolution: {integrity: sha512-67roqt1k3QDA41DZ8xi0V+rF3GoaMiX7QilbXu0vXimut+9RcKBNZ/t60xCRgcsihmNUsEjh48xLfNqOrKblUg==} @@ -936,6 +968,15 @@ snapshots: escape-string-regexp: 2.0.0 lodash.deburr: 4.1.0 + '@types/linkify-it@5.0.0': {} + + '@types/markdown-it@14.1.1': + dependencies: + '@types/linkify-it': 5.0.0 + '@types/mdurl': 2.0.0 + + '@types/mdurl@2.0.0': {} + '@types/minimatch@3.0.5': {} a-sync-waterfall@1.0.1: {} @@ -1341,6 +1382,13 @@ snapshots: luxon@3.4.4: {} + markdown-it-anchor@9.0.1(@types/markdown-it@14.1.1)(markdown-it@13.0.2): + dependencies: + '@types/markdown-it': 14.1.1 + markdown-it: 13.0.2 + + markdown-it-footnote@4.0.0: {} + markdown-it@13.0.2: dependencies: argparse: 2.0.1 @@ -1465,6 +1513,8 @@ snapshots: posthtml-parser: 0.11.0 posthtml-render: 3.0.0 + prettier@3.3.1: {} + promise-each@2.2.0: dependencies: any-promise: 0.1.0 diff --git a/site/_includes/-footer.njk b/site/_includes/-footer.njk new file mode 100644 index 0000000..1919c5f --- /dev/null +++ b/site/_includes/-footer.njk @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/site/_includes/-header.njk b/site/_includes/-header.njk index b5b23ff..cd32e62 100644 --- a/site/_includes/-header.njk +++ b/site/_includes/-header.njk @@ -1,17 +1,15 @@