From ca8d4a31cdcfa059f661856a747f8ae4d9c188d9 Mon Sep 17 00:00:00 2001 From: Lee Cattarin Date: Wed, 18 Feb 2026 16:29:21 -0800 Subject: [PATCH] truckin along, we got a postlist now --- _includes/head-content.njk | 28 ++++ _includes/layouts/base-no-anchors.njk | 13 ++ _includes/layouts/base.njk | 26 +--- _includes/postlist.njk | 8 +- css/highlighting.css | 126 ++++++++++++++++ css/main.css | 35 +---- css/nav.css | 1 + css/postlist.css | 168 +++++++++++++++++++++ css/print.css | 85 +++++++++++ eleventy.config.js | 4 + package-lock.json | 71 ++++++++- package.json | 3 +- src/index.njk | 3 +- src/pages/colophon.md | 16 ++ src/posts/2026/2026-01-05-moving-images.md | 3 + src/posts/2026/2026-02-17-sample.md | 2 + src/src.11tydata.js | 3 - 17 files changed, 526 insertions(+), 69 deletions(-) create mode 100644 _includes/head-content.njk create mode 100644 _includes/layouts/base-no-anchors.njk create mode 100644 css/highlighting.css create mode 100644 css/postlist.css create mode 100644 css/print.css delete mode 100644 src/src.11tydata.js diff --git a/_includes/head-content.njk b/_includes/head-content.njk new file mode 100644 index 0000000..e8d6b1a --- /dev/null +++ b/_includes/head-content.njk @@ -0,0 +1,28 @@ + + + +{{ title or metadata.title }} + +{# #} + + + + + + + + +{# Fonts #} + + + + +{# Icons #} + + +{# Styles #} + + + + + diff --git a/_includes/layouts/base-no-anchors.njk b/_includes/layouts/base-no-anchors.njk new file mode 100644 index 0000000..dd5d9d2 --- /dev/null +++ b/_includes/layouts/base-no-anchors.njk @@ -0,0 +1,13 @@ + + + {% include "head-content.njk" %} + + + {% include "header.njk" %} + +
+ {{ content | safe }} +
+ + {% include "footer.njk" %} + diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 33d59e9..dd5d9d2 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -1,30 +1,6 @@ - - - - {{ title or metadata.title }} - - {# #} - - - - - - - - - {# Styles #} - - - - {# Fonts #} - - - - - {# Icons #} - + {% include "head-content.njk" %} {% include "header.njk" %} diff --git a/_includes/postlist.njk b/_includes/postlist.njk index cb892d6..df358b8 100644 --- a/_includes/postlist.njk +++ b/_includes/postlist.njk @@ -1,12 +1,12 @@ -
    +
      {% for post in postlist %} -
    1. - +
    2. + {% if post.data.image %} {{ post.data.image.alt }} {% endif %}

      {{ post.data.title }}

      -
        +
          {% for tag in post.data.tags | removeBasicTags %}
        • {{ tag }}
          • {% endfor %} diff --git a/css/highlighting.css b/css/highlighting.css new file mode 100644 index 0000000..87144f6 --- /dev/null +++ b/css/highlighting.css @@ -0,0 +1,126 @@ +/* Adapted from PrismJS 1.30.0 Tomorrow Night theme + https://prismjs.com/download +*/ +code, +pre, +code[class*=language-], +pre[class*=language-] { + font-family: var(--font-family-code); + background-color: var(--color-bg-alt); + font-size: .9rem; + text-shadow: 0 1px var(--color-shadow); + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre, +pre[class*=language-] { + margin: 1rem 0; + padding: 1rem; + line-height: 1.5; + white-space: pre-wrap; + word-break: break-word; + overflow-wrap: break-word; + border-radius: .5rem; + overflow: auto; +} + +:not(pre)>code, +:not(pre)>code[class*=language-] { + padding: .2rem; + border-radius: .25rem; + white-space: normal; +} + +/* Selected text */ +code ::-moz-selection, +code::-moz-selection, +pre ::-moz-selection, +pre::-moz-selection, +code[class*=language-] ::-moz-selection, +code[class*=language-]::-moz-selection, +pre[class*=language-] ::-moz-selection, +pre[class*=language-]::-moz-selection, +code ::selection, +code::selection, +pre ::selection, +pre::selection, +code[class*=language-] ::selection, +code[class*=language-]::selection, +pre[class*=language-] ::selection, +pre[class*=language-]::selection { + text-shadow: none; + background-color: var(--color-bg); +} + +/* Syntax highlighting */ +.token.namespace { + opacity: .7; +} + +.token.bold, +.token.important { + font-weight:700 +} + +.token.italic { + font-style:italic +} + +.token.block-comment, +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog, +.token.punctuation { + color: var(--color-grey); +} + +.token.attr-name, +.token.deleted, +.token.namespace, +.token.tag { + color: var(--color-red); +} + +.token.boolean, +.token.function, +.token.number { + color: var(--color-orange); +} + +.token.class-name, +.token.constant, +.token.property, +.token.symbol { + color: var(--color-yellow); +} + +.token.attr-value, +.token.char, +.token.regex, +.token.string, +.token.variable, +.token.inserted { + color: var(--color-green); +} + +.token.entity, +.token.operator, +.token.url, +.token.function-name { + color:var(--color-blue); +} + +.token.atrule, +.token.builtin, +.token.important, +.token.keyword, +.token.selector { + color: var(--color-purple); +} diff --git a/css/main.css b/css/main.css index c616143..db709da 100644 --- a/css/main.css +++ b/css/main.css @@ -69,6 +69,7 @@ body { main { width: 60vw; + max-width: 1200px; margin: 0 auto; scroll-margin-top: var(--header-offset); } @@ -125,14 +126,12 @@ b { /* Links */ a { color: var(--color-font); - border-radius: 1rem; + border-radius: .25rem; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: .2em; text-decoration-color: var(--color-teal); transition: text-decoration-thickness .5s; - padding: 0 .1rem; /* These stop the focus outline from covering text */ - margin: 0 .1rem; } a:focus-visible { @@ -212,36 +211,6 @@ th:first-child { border-top-left-radius: .25rem; } th:last-child { border-top-right-radius: .25rem; } td:not(:first-child) { border-left: thin solid var(--color-pink); } -/* Code */ -/* Syntax highlighting in highlighting.css */ -code, -pre { - font-family: var(--font-family-code); - background-color: var(--color-bg-alt); - font-size: .9rem; -} - -code { - padding: .2rem; - border-radius: .25rem; -} - -pre { - display: block; - margin: 1rem 0; - padding: 1rem; - line-height: 1.5; - white-space: pre-wrap; - word-break: break-word; - overflow-wrap: break-word; - tab-size: 4; - border-radius: .5rem; -} - -pre code { - padding: 0; -} - /* Times */ time { color: var(--color-grey); diff --git a/css/nav.css b/css/nav.css index a1b3d03..5dd6227 100644 --- a/css/nav.css +++ b/css/nav.css @@ -5,6 +5,7 @@ header { background-color: var(--color-bg); box-shadow: 0 .25rem .15rem var(--color-shadow); padding: .75rem 0; + z-index: 10; } /* Header links */ diff --git a/css/postlist.css b/css/postlist.css new file mode 100644 index 0000000..6b030b8 --- /dev/null +++ b/css/postlist.css @@ -0,0 +1,168 @@ +#postlist { + list-style: none; + margin: 0; +} + +.post { + margin: 0; +} + +/* Odd-numbered post layout/coloration */ +.post:nth-child(odd) .postlink { + grid-template-areas: + 'img h2' + 'img tags' + 'img .'; + grid-template-columns: 45% auto; + --color-primary: var(--color-teal); + --color-accent: var(--color-pink); +} + +/* Even-numbered post layout/coloration */ +.post:nth-child(even) .postlink { + grid-template-areas: + 'h2 img' + 'tags img' + '. img'; + grid-template-columns: auto 45%; + --color-primary: var(--color-pink); + --color-accent: var(--color-teal); +} + +/* Layout for all posts on mobile */ +@media (max-width: 650px) { + .post:nth-child(n) .postlink { + grid-template-areas: + 'img' + 'h2' + 'tags'; + grid-template-columns: auto; + } +} + +/* Link */ +.postlink { + display: grid; + border: .25rem solid; + border-radius: 1.25rem; + box-shadow: .35rem .35rem var(--color-shadow); + margin: 2rem 0; + text-decoration: none; + border-color: var(--color-primary); + /* click animation handline */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +.postlink:focus-visible { + background-color: var(--color-primary); + outline: none; +} + +@media (any-hover: hover) { + .postlink:hover { + background-color: var(--color-primary); + } +} + +/* Forced colors */ +@media (forced-colors: active) { + .postlink:focus-visible { + outline-offset: .25rem; + outline: .25rem solid; + } + + @media (any-hover: hover) { + .postlink:hover { + outline-offset: .25rem; + outline: .25rem solid; + } + } +} + +/* Click animation */ +.postlink:active { + box-shadow: none; + top: .2rem; + left: .2rem; + box-shadow: .15rem .15rem var(--color-shadow); +} + +/* Post elements */ +.post h2, +.post img, +.post ul, +.post li { + margin: 0; +} + +/* h2 */ +.post h2 { + grid-area: h2; + padding: .25rem .5rem; + text-transform: uppercase; + font-size: 1.5rem; + color: var(--color-primary); + border-radius: 1rem 1rem 0 0; + border-bottom: .25rem solid var(--color-accent); +} + +.post:nth-child(even) h2 { + text-align: right; +} + +.postlink:focus-visible h2 { + color: var(--color-bg); + border-color: var(--color-bg); +} + +@media (any-hover: hover) { + .postlink:hover h2 { + color: var(--color-bg); + border-color: var(--color-bg); + } +} + +/* Image */ +.post img { + grid-area: img; +} + +/* Tags */ +.posttags { + grid-area: tags; + list-style: none; + display: flex; + flex-flow: row wrap; + gap: .5rem; + padding: .5rem; +} + +.post:nth-child(odd) .posttags { + justify-content: flex-end; +} + +.post:nth-child(odd) .posttags { + justify-content: flex-start; +} + +.posttags li { + background-color: var(--color-primary); + color: var(--color-bg); + padding: 0 .5rem; + border-radius: 1rem; +} + +.postlink:focus-visible .posttags li { + background-color: var(--color-bg); + color: var(--color-primary); +} + +@media (any-hover: hover) { + .postlink:hover .posttags li { + background-color: var(--color-bg); + color: var(--color-primary); + } +} diff --git a/css/print.css b/css/print.css new file mode 100644 index 0000000..d38c66b --- /dev/null +++ b/css/print.css @@ -0,0 +1,85 @@ +@media print { + /* Nav elements */ + header, + footer, + nav { + display: none !important; + } + + /* Base */ + body { + background-color: #fff; + color: #000; + } + + main { + width: 95vw; + } + + h1,h2,h3,h4,h5,h6 { + color: #000; + } + + /* Links */ + /* Hover is not really necessary, but it's annoying when testing otherwise */ + a, + a:hover { + text-decoration-style: dotted; + text-decoration-thickness: .1rem; + text-decoration-color: #000; + } + + a::after{ + content: " (" attr(href) ")"; + } + + + /* Code */ + code, + pre, + code[class*=language-], + pre[class*=language-] { + text-shadow: none; + background-color: var(--color-light); + color: #000 !important; + } + + .token.namespace { + opacity: 1; + } + + .token.block-comment, + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog, + .token.punctuation, + .token.attr-name, + .token.deleted, + .token.namespace, + .token.tag, + .token.boolean, + .token.function, + .token.number, + .token.class-name, + .token.constant, + .token.property, + .token.symbol, + .token.attr-value, + .token.char, + .token.regex, + .token.string, + .token.variable, + .token.inserted, + .token.entity, + .token.operator, + .token.url, + .token.function-name, + .token.atrule, + .token.builtin, + .token.important, + .token.keyword, + .token.selector { + color: #000; + } +} diff --git a/eleventy.config.js b/eleventy.config.js index f54c3d7..a078fe4 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -2,8 +2,12 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import eleventyNavigationPlugin from "@11ty/eleventy-navigation"; import { feedPlugin } from "@11ty/eleventy-plugin-rss"; import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; +import { attrs } from "@mdit/plugin-attrs"; export default async function(eleventyConfig) { + /* Markdown HTML attribute parsing */ + eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(attrs)); + /* Filters */ eleventyConfig.addFilter("removeBasicTags", (tags) => { return tags.filter(tag => ["all", "posts", "gallery", "reference"].indexOf(tag) === -1); diff --git a/package-lock.json b/package-lock.json index 933318b..cf0deee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "@11ty/eleventy-img": "^6.0.4", "@11ty/eleventy-navigation": "^1.0.5", "@11ty/eleventy-plugin-rss": "^2.0.4", - "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2" + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", + "@mdit/plugin-attrs": "^0.24.2" } }, "node_modules/@11ty/dependency-tree": { @@ -682,6 +683,49 @@ "url": "https://opencollective.com/libvips" } }, + "node_modules/@mdit/helper": { + "version": "0.22.2", + "resolved": "https://registry.npmjs.org/@mdit/helper/-/helper-0.22.2.tgz", + "integrity": "sha512-i0mmN0S/BwR7zAKs9TnT9knmMVq3WGDJ3wO9PiETs0vUAwtcXIq5J0k8GAtGgKKTb7WTQuc19yt8uVQGVYfr2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/markdown-it": "^14.1.2" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "markdown-it": "^14.1.0" + }, + "peerDependenciesMeta": { + "markdown-it": { + "optional": true + } + } + }, + "node_modules/@mdit/plugin-attrs": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@mdit/plugin-attrs/-/plugin-attrs-0.24.2.tgz", + "integrity": "sha512-2JJDMr8jILBa5c+GRbsyVzRsL7yxuYb60KpUHhR/BjbuM5s9ahPyXPO1Z/C4YXaXLeyHkEddqekXHBCr52rLMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@mdit/helper": "0.22.2", + "@types/markdown-it": "^14.1.2" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "markdown-it": "^14.1.0" + }, + "peerDependenciesMeta": { + "markdown-it": { + "optional": true + } + } + }, "node_modules/@rgrove/parse-xml": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@rgrove/parse-xml/-/parse-xml-4.2.0.tgz", @@ -725,6 +769,31 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "dev": true, + "license": "MIT" + }, "node_modules/a-sync-waterfall": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", diff --git a/package.json b/package.json index 6286483..d3f70df 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@11ty/eleventy-img": "^6.0.4", "@11ty/eleventy-navigation": "^1.0.5", "@11ty/eleventy-plugin-rss": "^2.0.4", - "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2" + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", + "@mdit/plugin-attrs": "^0.24.2" } } diff --git a/src/index.njk b/src/index.njk index 00ad05f..1f45845 100644 --- a/src/index.njk +++ b/src/index.njk @@ -9,7 +9,6 @@ eleventyNavigation: order: 3 icon: fa fa-solid fa-crow title: home +layout: page.njk --- -

          Home

          - {% include "postlist.njk" %} diff --git a/src/pages/colophon.md b/src/pages/colophon.md index c8fc1c4..3ac7634 100644 --- a/src/pages/colophon.md +++ b/src/pages/colophon.md @@ -1,3 +1,19 @@ --- title: colophon --- + + +This site is based on, though long diverged from, [Millennial](https://lenpaul.github.io/Millennial/){target="_blank" rel="external"}, a minimalist Jekyll theme for running a blog or publication by Paul Le. It is built using [Jekyll](https://jekyllrb.com/){target="_blank" rel="external"}, a static site generator. It runs on GitHub Pages. + +The fonts are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont){target="_blank" rel="external"} for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :) + +Thank you to some lovely friends for their feedback and help with the site! You should hire them. Yes, you. + +- [Lenny](http://www.wondra.codes/){target="_blank" rel="external"}, especially for their HTML/CSS and accessibility expertise +- [Shir](https://shirgoldberg.com/){target="_blank" rel="external"} + +This site is created [without the use of generative AI](https://declare-ai.org/1.0.0/none.html){target="_blank" rel="external"}. + +You can [find the accessibility statement for leecat.art here](/accessibility). + +If you'd like, you can view the [site palette](/palette) or the [style overview](/style). diff --git a/src/posts/2026/2026-01-05-moving-images.md b/src/posts/2026/2026-01-05-moving-images.md index 1130028..430bc59 100644 --- a/src/posts/2026/2026-01-05-moving-images.md +++ b/src/posts/2026/2026-01-05-moving-images.md @@ -6,6 +6,9 @@ image: tags: - reference - software + - some + - more + - tags --- ## problem statement diff --git a/src/posts/2026/2026-02-17-sample.md b/src/posts/2026/2026-02-17-sample.md index 6cd1ff2..704eb35 100644 --- a/src/posts/2026/2026-02-17-sample.md +++ b/src/posts/2026/2026-02-17-sample.md @@ -2,6 +2,8 @@ title: Sample date: 2026-02-17 tags: + - some + - tags - gallery image: src: 2026/sample-0.jpg diff --git a/src/src.11tydata.js b/src/src.11tydata.js deleted file mode 100644 index 3ebf645..0000000 --- a/src/src.11tydata.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - layout: "base.njk" -};