inherentlee/leecat.art
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

truckin along, we got a postlist now

Browse Source
This commit is contained in:
Lee Cattarin
2026-02-18 16:29:21 -08:00
parent 42ce6ceb6f
commit ca8d4a31cd
17 changed files with 526 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
_includes/head-content.njk Normal file
View File

@ -0,0 +1,28 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
{# <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> #}
<meta property="og:title" content="{{ title or metadata.title }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{ description or metadata.description }}" />
<meta property="og:site_name" content="{{ metadata.title }}" />
<meta name="generator" content="{{ eleventy.generator }}">
{# Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
{# Icons #}
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
{# Styles #}
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/nav.css">
<link rel="stylesheet" href="/assets/css/highlighting.css">
<link rel="stylesheet" href="/assets/css/print.css">
<link rel="stylesheet" href="/assets/css/postlist.css">

13
_includes/layouts/base-no-anchors.njk Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<head>
{% include "head-content.njk" %}
</head>
<body>
{% include "header.njk" %}
<main id="main">
{{ content | safe }}
</main>
{% include "footer.njk" %}
<body>

26
_includes/layouts/base.njk
View File

@ -1,30 +1,6 @@
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
{# <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> #}
<meta property="og:title" content="{{ title or metadata.title }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{ description or metadata.description }}" />
<meta property="og:site_name" content="{{ metadata.title }}" />
<meta name="generator" content="{{ eleventy.generator }}">
{# Styles #}
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/nav.css">
{# Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
{# Icons #}
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
{% include "head-content.njk" %}
</head>
<body>
{% include "header.njk" %}

8
_includes/postlist.njk
View File

@ -1,12 +1,12 @@
<ol>
<ol id="postlist">
{% for post in postlist %}
<li>
<a href="{{ post.url }}">
<li class="post">
<a class="postlink" href="{{ post.url }}">
{% if post.data.image %}
<img src="/img/{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
{% endif %}
<h2>{{ post.data.title }}</h2>
<ul>
<ul class="posttags">
{% for tag in post.data.tags | removeBasicTags %}
<li>{{ tag }}</li>
{% endfor %}

126
css/highlighting.css Normal file
View File

@ -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);
}

35
css/main.css
View File

@ -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);

1
css/nav.css
View File

@ -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 */

168
css/postlist.css Normal file
View File

@ -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);
}
}

85
css/print.css Normal file
View File

@ -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;
}
}

4
eleventy.config.js
View File

@ -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);

71
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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"
}
}

3
src/index.njk
View File

@ -9,7 +9,6 @@ eleventyNavigation:
order: 3
icon: fa fa-solid fa-crow
title: home
layout: page.njk
---
<h1>Home</h1>
{% include "postlist.njk" %}

16
src/pages/colophon.md
View File

@ -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).

3
src/posts/2026/2026-01-05-moving-images.md
View File

@ -6,6 +6,9 @@ image:
tags:
- reference
- software
- some
- more
- tags
---
## problem statement

2
src/posts/2026/2026-02-17-sample.md
View File

@ -2,6 +2,8 @@
title: Sample
date: 2026-02-17
tags:
- some
- tags
- gallery
image:
src: 2026/sample-0.jpg

3
src/src.11tydata.js
View File

@ -1,3 +0,0 @@
export default {
layout: "base.njk"
};