chore: clean up logic + data + feeds
This commit is contained in:
parent
74d3fe1b44
commit
fa2ac170b3
41 changed files with 400 additions and 481 deletions
|
|
@ -1,8 +1,6 @@
|
|||
# 404s
|
||||
/now.html /now 301
|
||||
/contact.html /contact 301
|
||||
/watching/favorite-movies /watching 301
|
||||
/watching/favorite-shows /watching 301
|
||||
|
||||
# feeds
|
||||
/feed.xml /feeds/posts 301
|
||||
|
|
|
|||
34
package-lock.json
generated
34
package-lock.json
generated
|
|
@ -1,19 +1,18 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.4.13",
|
||||
"version": "2.6.7",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "2.4.13",
|
||||
"version": "2.6.7",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "4.0.1",
|
||||
"@cdransf/api-text": "^1.8.1",
|
||||
"@cdransf/select-pagination": "^1.3.1",
|
||||
"@daviddarnes/mastodon-post": "^1.3.0",
|
||||
"http-proxy-middleware": "3.0.3",
|
||||
"minisearch": "^7.1.0",
|
||||
"youtube-video-element": "^1.1.6"
|
||||
},
|
||||
|
|
@ -29,6 +28,7 @@
|
|||
"fast-xml-parser": "^4.5.0",
|
||||
"html-minifier-terser": "^7.2.0",
|
||||
"html-to-text": "^9.0.5",
|
||||
"http-proxy-middleware": "3.0.3",
|
||||
"ics": "^3.8.1",
|
||||
"linkedom": "0.18.5",
|
||||
"luxon": "^3.5.0",
|
||||
|
|
@ -688,6 +688,7 @@
|
|||
"version": "1.17.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
|
||||
"integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
|
|
@ -722,9 +723,10 @@
|
|||
"peer": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.7.tgz",
|
||||
"integrity": "sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==",
|
||||
"version": "22.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
|
||||
"integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.19.8"
|
||||
|
|
@ -1060,6 +1062,7 @@
|
|||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fill-range": "^7.1.1"
|
||||
|
|
@ -1788,9 +1791,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.51",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.51.tgz",
|
||||
"integrity": "sha512-kKeWV57KSS8jH4alKt/jKnvHPmJgBxXzGUSbMd4eQF+iOsVPl7bz2KUmu6eo80eMP8wVioTfTyTzdMgM15WXNg==",
|
||||
"version": "1.5.52",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
|
||||
"integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
|
|
@ -2145,6 +2148,7 @@
|
|||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
|
|
@ -2250,6 +2254,7 @@
|
|||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
|
|
@ -2666,6 +2671,7 @@
|
|||
"version": "1.18.1",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
|
||||
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"eventemitter3": "^4.0.0",
|
||||
|
|
@ -2680,6 +2686,7 @@
|
|||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.3.tgz",
|
||||
"integrity": "sha512-usY0HG5nyDUwtqpiZdETNbmKtw3QQ1jwYFZ9wi5iHzX2BcILwQKtYDJPo7XHTsu5Z0B2Hj3W9NNnbd+AjFWjqg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/http-proxy": "^1.17.15",
|
||||
|
|
@ -2825,6 +2832,7 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -2844,6 +2852,7 @@
|
|||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-extglob": "^2.1.1"
|
||||
|
|
@ -2863,6 +2872,7 @@
|
|||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
|
|
@ -2872,6 +2882,7 @@
|
|||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
|
||||
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -3256,6 +3267,7 @@
|
|||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"braces": "^3.0.3",
|
||||
|
|
@ -3791,6 +3803,7 @@
|
|||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
|
|
@ -4640,6 +4653,7 @@
|
|||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
|
|
@ -5318,6 +5332,7 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
|
|
@ -5411,6 +5426,7 @@
|
|||
"version": "6.19.8",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
|
||||
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.4.13",
|
||||
"version": "2.6.7",
|
||||
"description": "The source for my personal site. Built using 11ty (and other tools).",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
"@cdransf/api-text": "^1.8.1",
|
||||
"@cdransf/select-pagination": "^1.3.1",
|
||||
"@daviddarnes/mastodon-post": "^1.3.0",
|
||||
"http-proxy-middleware": "3.0.3",
|
||||
"minisearch": "^7.1.0",
|
||||
"youtube-video-element": "^1.1.6"
|
||||
},
|
||||
|
|
@ -46,6 +45,7 @@
|
|||
"fast-xml-parser": "^4.5.0",
|
||||
"html-minifier-terser": "^7.2.0",
|
||||
"html-to-text": "^9.0.5",
|
||||
"http-proxy-middleware": "3.0.3",
|
||||
"ics": "^3.8.1",
|
||||
"linkedom": "0.18.5",
|
||||
"luxon": "^3.5.0",
|
||||
|
|
|
|||
|
|
@ -153,23 +153,19 @@ window.addEventListener("load", () => {
|
|||
: plainText;
|
||||
};
|
||||
|
||||
const formatArtistTitle = (title, totalPlays) =>
|
||||
totalPlays > 0
|
||||
? `${title} <strong class="highlight-text">${totalPlays} plays</strong>`
|
||||
: title;
|
||||
|
||||
const renderSearchResults = (results) => {
|
||||
const resultHTML = results
|
||||
.map(
|
||||
({ title, url, description, type, total_plays }) => `
|
||||
<li class="search__results--result">
|
||||
<a href="${url}">
|
||||
<h3>${
|
||||
type === "artist" && total_plays
|
||||
? formatArtistTitle(title, total_plays)
|
||||
: title
|
||||
}</h3>
|
||||
</a>
|
||||
<h3>
|
||||
<a href="${url}">${title}</a>
|
||||
${
|
||||
type === "artist" && total_plays
|
||||
? ` <strong class="highlight-text">${total_plays} plays</strong>`
|
||||
: ""
|
||||
}
|
||||
</h3>
|
||||
<p>${truncateDescription(description)}</p>
|
||||
</li>
|
||||
`
|
||||
|
|
@ -225,13 +221,14 @@ window.addEventListener("load", () => {
|
|||
.map(
|
||||
({ title, url, description, type, total_plays }) => `
|
||||
<li class="search__results--result">
|
||||
<a href="${url}">
|
||||
<h3>${
|
||||
<h3>
|
||||
<a href="${url}">${title}</a>
|
||||
${
|
||||
type === "artist" && total_plays
|
||||
? formatArtistTitle(title, total_plays)
|
||||
: title
|
||||
}</h3>
|
||||
</a>
|
||||
? ` <strong class="highlight-text">${total_plays} plays</strong>`
|
||||
: ""
|
||||
}
|
||||
</h3>
|
||||
<p>${truncateDescription(description)}</p>
|
||||
</li>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
html body {
|
||||
html,
|
||||
body {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-color) var(--gray-light);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
letter-spacing: -0.035rem;
|
||||
word-spacing: -0.15rem;
|
||||
}
|
||||
|
|
@ -42,13 +40,7 @@ p {
|
|||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
:is(p, ul, ol) a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.highlight-text,
|
||||
details > summary {
|
||||
.highlight-text {
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--spacing-xs);
|
||||
|
|
@ -56,7 +48,6 @@ details > summary {
|
|||
}
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -68,27 +59,10 @@ blockquote {
|
|||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
p:not(.banner p) > svg {
|
||||
margin-bottom: var(--inline-margin-bottom);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) svg {
|
||||
:is(h1, h2, h3) svg {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6):has(svg) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
strong,
|
||||
blockquote {
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
@ -105,7 +79,29 @@ svg {
|
|||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
/* brand colors */
|
||||
/* images */
|
||||
img {
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
&.image-banner {
|
||||
border: var(--border-default);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ul,
|
||||
ol {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
padding-left: var(--spacing-base);
|
||||
|
||||
& li:not(:last-child) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* brand + section colors */
|
||||
.article,
|
||||
.books,
|
||||
.brand-github,
|
||||
|
|
@ -211,51 +207,44 @@ svg {
|
|||
/* links */
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:is(a:hover, a:active, a:focus) svg[data-tablericon-name^="arrow-"] {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
:is(.main-title, footer nav.sub-pages) a:hover,
|
||||
:is(.main-title, footer nav.sub-pages) a:focus,
|
||||
:is(.main-title, footer nav.sub-pages) a:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
:is(a:has(svg):hover, a:has(svg):active, a:has(svg):focus) svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
:is(a):has(svg) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
& > img {
|
||||
border: var(--border-default);
|
||||
}
|
||||
|
||||
& svg {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&:active svg,
|
||||
&:focus svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
|
||||
& > img {
|
||||
border-color: var(--accent-color-hover);
|
||||
transition: border var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, a, p:not(.banner p), span, th, td, .post-meta):has(svg) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* headers */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h3 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-md);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
|
@ -264,48 +253,32 @@ h6 {
|
|||
h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* dividers */
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--gray-light);
|
||||
border: 0;
|
||||
color: var(--gray-light);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
|
|
@ -322,19 +295,11 @@ article {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.standalone .associated-media:last-of-type > hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& .post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& svg {
|
||||
stroke: var(--gray-dark);
|
||||
width: var(--sizing-svg-sm);
|
||||
|
|
@ -362,10 +327,6 @@ img + .associated-media,
|
|||
& li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .footnote-item > p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(~ *) {
|
||||
|
|
@ -375,11 +336,7 @@ img + .associated-media,
|
|||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
sup.footnote-ref a,
|
||||
.footnote-backref {
|
||||
text-decoration: none;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* tables */
|
||||
|
|
@ -476,8 +433,8 @@ td:first-of-type,
|
|||
.active,
|
||||
.active svg {
|
||||
cursor: not-allowed;
|
||||
color: var(--accent-color);
|
||||
stroke: var(--accent-color-hover);
|
||||
color: var(--accent-color-active);
|
||||
stroke: var(--accent-color-active);
|
||||
}
|
||||
|
||||
/* layout */
|
||||
|
|
@ -506,8 +463,7 @@ main {
|
|||
main,
|
||||
footer {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 768px;
|
||||
|
|
@ -556,27 +512,3 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(.main-title, footer nav.sub-pages) a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ul,
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
padding-left: var(--spacing-base);
|
||||
|
||||
& li:not(:last-child) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* images */
|
||||
.image-banner {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.addon-links {
|
||||
margin-top: var(--spacing-base);
|
||||
display: grid;
|
||||
gap: var(--sizing-base);
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
|
|
@ -15,9 +16,8 @@
|
|||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& ol,
|
||||
ul {
|
||||
padding: 0;
|
||||
& ul,
|
||||
& ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,5 +14,7 @@
|
|||
|
||||
& img {
|
||||
image-rendering: pixelated;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@ button,
|
|||
border: 2px solid var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
white-space: nowrap;
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
|
||||
|
|
@ -23,10 +21,7 @@ button,
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:not(.active):hover,
|
||||
&:not(.active):active,
|
||||
&:not(.active):focus,
|
||||
&:not(.active):focus-within {
|
||||
&:not(.active):is(:hover, :active, :focus, :focus-within) {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,61 +3,29 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||||
textarea {
|
||||
font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||||
textarea,
|
||||
select {
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--spacing-sm);
|
||||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
form:has(+ *),
|
||||
label:has(input):has(+ *) input,
|
||||
input[type="text"]:has(+ *),
|
||||
input[type="email"]:has(+ *),
|
||||
input[type="search"]:has(+ *),
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):has(+ *),
|
||||
textarea:has(+ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
select {
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-lg) 0 0 0;
|
||||
border: none;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
& label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sizing-xs);
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search__form {
|
||||
margin-top: 0;
|
||||
|
||||
|
|
@ -79,9 +47,5 @@ fieldset {
|
|||
margin-bottom: var(--sizing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.mastodon-post-wrapper {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
& dl,
|
||||
dt {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.icon-link + .media-grid {
|
||||
a + .media-grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ menu {
|
|||
margin: 0;
|
||||
padding: var(--spacing-sm) 0;
|
||||
width: 100%;
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
|
||||
& a {
|
||||
|
|
|
|||
|
|
@ -39,13 +39,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& a:has(img) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
|
||||
|
|
@ -92,18 +86,17 @@
|
|||
|
||||
& .title,
|
||||
& .subtext,
|
||||
& .subtext p,
|
||||
& .timestamp {
|
||||
& time {
|
||||
line-height: var(--line-height-md);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
& .subtext,
|
||||
& .timestamp {
|
||||
& time {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
& .timestamp {
|
||||
& time {
|
||||
margin-top: var(--spacing-sm);
|
||||
margin-left: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,24 +2,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
& button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
display: flex;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
|
||||
.pagination p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
&.disabled svg[data-tablericon-name^="arrow-"] {
|
||||
cursor: not-allowed;
|
||||
stroke: var(--gray-medium);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination a.disabled svg[data-tablericon-name^="arrow-"] {
|
||||
cursor: not-allowed;
|
||||
stroke: var(--gray-medium);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
& p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#tracks-recent,
|
||||
#tracks-chart,
|
||||
#tracks-recent ~ .tracks-recent,
|
||||
#tracks-chart ~ .tracks-chart {
|
||||
.tracks-recent,
|
||||
.tracks-chart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
|
|||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
|
||||
[for="tracks-recent"] {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@ youtube-video {
|
|||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color-hover);
|
||||
transition: border var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
&:has(+ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
);
|
||||
--accent-color: light-dark(var(--blue-400), var(--blue-200));
|
||||
--accent-color-hover: light-dark(var(--blue-600), var(--blue-100));
|
||||
--accent-color-active: light-dark(var(--blue-600), var(--blue-100));
|
||||
|
||||
--brand-buy-me-a-coffee: #ff5f5f;
|
||||
--brand-buy-me-a-coffee: light-dark(#0d0c22, #ffdd00);
|
||||
--brand-github: light-dark(#333, #f5f5f5);
|
||||
--brand-fastmail: light-dark(#0067b9, #ffc107);
|
||||
--brand-listenbrainz: #e97941;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-npm: #cc3534;
|
||||
--brand-mastodon: light-dark(#563acc, #858afa);
|
||||
--brand-npm: #cb3837;
|
||||
--brand-rss: #f26522;
|
||||
|
||||
--article: light-dark(#007272, #00ffff);
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
--inline-margin-bottom: -5px;
|
||||
|
||||
/* shadows */
|
||||
--box-shadow-media: inset 0 -85px 60px -40px var(--gray-900);
|
||||
--box-shadow-media: inset 0 -85px 60px -40px var(--color-darkest);
|
||||
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
|
||||
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
</h3>
|
||||
<xsl:value-of select="description" disable-output-escaping="yes" />
|
||||
<xsl:if test="enclosure">
|
||||
<img src="{enclosure/@url}" alt="{title}" />
|
||||
<img class="image-banner" src="{enclosure/@url}" alt="{title}" />
|
||||
</xsl:if>
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@
|
|||
/* page styles */
|
||||
@import url("./pages/about.css") layer(page);
|
||||
@import url("./pages/books.css") layer(page);
|
||||
@import url("./pages/blogroll.css") layer(page);
|
||||
@import url("./pages/contact.css") layer(page);
|
||||
@import url("./pages/feeds.css") layer(page);
|
||||
@import url("./pages/links.css") layer(page);
|
||||
@import url("./pages/media.css") layer(page);
|
||||
@import url("./pages/music.css") layer(page);
|
||||
@import url("./pages/watching.css") layer(page);
|
||||
@import url("./pages/webrings.css") layer(page);
|
||||
|
|
|
|||
|
|
@ -13,14 +13,10 @@
|
|||
margin-bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
|
||||
& .interior {
|
||||
display: flex;
|
||||
|
||||
& img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
& img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.blog-roll-icons {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& .book-meta .description {
|
||||
& .media-meta .description {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,28 +27,17 @@
|
|||
max-width: calc(var(--sizing-3xl) * 4);
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-vertical);
|
||||
transition: border-color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
& a:focus img,
|
||||
& a:focus-within img,
|
||||
& a:hover img,
|
||||
& a:active img {
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
& .media-meta {
|
||||
margin-top: var(--sizing-base);
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .description {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
|
@ -65,38 +54,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.book-entry,
|
||||
.book-focus {
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& p.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
& p.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book-focus {
|
||||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
|
@ -113,7 +70,7 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
& .media-meta {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -122,10 +79,6 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
max-width: 50%;
|
||||
|
||||
|
|
|
|||
|
|
@ -22,11 +22,6 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-top: var(--sizing-base);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
.link-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: var(--grid-columns-two);
|
||||
}
|
||||
|
||||
& .link-box {
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
19
src/assets/styles/pages/media.css
Normal file
19
src/assets/styles/pages/media.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.media-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& .title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
& .sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
|
|
@ -33,33 +32,12 @@
|
|||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
& .artist-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
& .media-meta {
|
||||
margin-top: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
|
||||
&.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
&.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,13 +50,4 @@
|
|||
|
||||
.concert-list {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
& li .modal-toggle {
|
||||
height: calc(var(--sizing-lg) * 1.6);
|
||||
}
|
||||
}
|
||||
|
||||
p.concerts + ul + hr {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ a:active > .watching.hero::after {
|
|||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
border-radius: var(--border-radius-slight);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -62,33 +61,8 @@ a:active > .watching.hero::after {
|
|||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
}
|
||||
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
& .media-meta {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
|
||||
&.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
&.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .footnotes {
|
||||
|
|
@ -97,6 +71,6 @@ a:active > .watching.hero::after {
|
|||
}
|
||||
}
|
||||
|
||||
.icon-link + .poster.grid {
|
||||
a + .poster.grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
code {
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
color: var(--blue-100);
|
||||
background: none;
|
||||
border-radius: var(--border-radius-slight);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: var(--font-mono);
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
|
|
@ -32,8 +38,8 @@ pre {
|
|||
|
||||
pre,
|
||||
:not(pre) > code {
|
||||
background: var(--gray-900);
|
||||
border: 1px solid var(--gray-300);
|
||||
background: var(--color-darkest);
|
||||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
.namespace {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,135 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: var(--line-height-md);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
:where([hidden]:not([hidden='until-found'])) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
:where(html) {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
:where(html:has(dialog:modal[open])) {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:where(html:focus-within) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
:where(body) {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
:where(input, button, textarea, select) {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
resize: block;
|
||||
}
|
||||
|
||||
:where(button, label, select, summary, [role='button'], [role='option']) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:where(:disabled) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:where(label:has(> input:disabled), label:has(+ input:disabled)) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:where(a) {
|
||||
color: inherit;
|
||||
text-underline-offset: var(--spacing-xs);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: number;
|
||||
}
|
||||
|
||||
:where(ul, ol) {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:where(p, h1, h2, h3) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:where(hr) {
|
||||
border: none;
|
||||
border-block-start: 1px solid;
|
||||
border-block-start-color: currentColor;
|
||||
color: inherit;
|
||||
block-size: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:where(dialog, [popover]) {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
inset: unset;
|
||||
max-width: unset;
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:where(:focus-visible) {
|
||||
outline: var(--border-default);
|
||||
outline-offset: 1px;
|
||||
border-radius: var(--border-radius-slight);
|
||||
box-shadow: 0 0 0 1px var(--accent-color);
|
||||
}
|
||||
|
||||
:where(:focus-visible, :target) {
|
||||
scroll-margin-block: 8vh;
|
||||
}
|
||||
|
||||
:where(.visually-hidden:not(:focus-within, :active)) {
|
||||
clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden !important;
|
||||
position: absolute !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
|
@ -13,11 +13,14 @@
|
|||
"items": [
|
||||
{%- assign entries = data -%}
|
||||
{%- for entry in entries limit: 20 -%}
|
||||
{%- assign text = entry.feed.description | markdown | strip_html | escape| normalize_whitespace | rstrip | htmlTruncate %}
|
||||
{
|
||||
"id": "{{ entry.feed.url | encodeAmp }}",
|
||||
"url": "{{ entry.feed.url | encodeAmp }}",
|
||||
"title": "{{ entry.feed.title | escape }}",
|
||||
"content_text": "{{ entry.feed.description | markdown | strip_html | escape| normalize_whitespace | rstrip | htmlTruncate }}",
|
||||
"content_html": "{{ text }}",
|
||||
"content_text": "{{ text }}",
|
||||
"summary": "{{ text }}",
|
||||
"date_published": "{{ entry.feed.date | stringToRFC3339 }}"
|
||||
}{%- if forloop.last == false -%},{%- endif -%}
|
||||
{%- endfor -%}
|
||||
|
|
|
|||
|
|
@ -16,4 +16,4 @@
|
|||
{{ post.description | normalize_whitespace | markdown | htmlTruncate }}
|
||||
</article>
|
||||
{%- endfor -%}
|
||||
<a class="icon-link" href="/posts">View all posts {% tablericon "arrow-right" %}</a>
|
||||
<a href="/posts">View all posts {% tablericon "arrow-right" %}</a>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
{%- assign loadingStrategy = loading | default: 'lazy' -%}
|
||||
{%- for item in data limit: count -%}
|
||||
{%- assign alt = item.grid.alt | replaceQuotes -%}
|
||||
{%- assign imageUrl = item.grid.image | default: item.grid.backdrop -%}
|
||||
{%- assign imageUrl = item.grid.image -%}
|
||||
<a href="{{ item.grid.url }}" title="{{ alt }}">
|
||||
<div class="item">
|
||||
<div class="meta-text">
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
{%- assign height = 0 -%}
|
||||
{%- case shape -%}
|
||||
{%- when 'poster' -%}
|
||||
{%- assign imageUrl = item.grid.backdrop -%}
|
||||
{%- assign imageClass = 'banner' -%}
|
||||
{%- assign width = 256 -%}
|
||||
{%- assign height = 170 -%}
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
<span class="subtext">{{ item.chart.subtext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
<time datetime="item.chart.played_at">
|
||||
{{ item.chart.played_at | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}
|
||||
</div>
|
||||
</time>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
href="{{ prevHref }}"
|
||||
aria-label="Previous page"
|
||||
class="{% unless prevHref %}disabled{% endunless %}"
|
||||
{% unless prevHref %}disabled{% endunless %}
|
||||
>
|
||||
{% tablericon "arrow-left" %}
|
||||
</a>
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
href="{{ nextHref }}"
|
||||
aria-label="Next page"
|
||||
class="{% unless nextHref %}disabled{% endunless %}"
|
||||
{% unless nextHref %}disabled{% endunless %}
|
||||
>
|
||||
{% tablericon "arrow-right" %}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@ schema: books
|
|||
height="307"
|
||||
/>
|
||||
</a>
|
||||
<div class="book-meta">
|
||||
<div class="media-meta">
|
||||
<a href="{{ book.url }}">
|
||||
<p class="title"><strong>{{ book.title }}</strong></p>
|
||||
<span class="title"><strong>{{ book.title }}</strong></span>
|
||||
</a>
|
||||
{% if book.author %}
|
||||
<p class="sub-meta">By {{ book.author }}</p>
|
||||
<span class="sub-meta">By {{ book.author }}</span>
|
||||
{% endif %}
|
||||
{% if book.progress %}
|
||||
{%- assign percentage = book.progress | append: '%' -%}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ schema: books-year
|
|||
{%- assign currentYear = 'now' | date: "%Y" -%}
|
||||
{%- assign yearString = year.value | append: '' -%}
|
||||
{%- assign currentYearString = currentYear | append: '' -%}
|
||||
<a class="icon-link" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" %} Back to books</a>
|
||||
<a href="/books" title="Go back to the books index page">{% tablericon "arrow-left" %} Back to books</a>
|
||||
<h2>{{ year.value }} / Books</h2>
|
||||
{% if yearString == currentYearString %}
|
||||
<p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year.{%- if favoriteBooks %} Among my favorites are {{ favoriteBooks }}.{%- endif -%}</p>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ schema: music-index
|
|||
{% tablericon "playlist" %}
|
||||
Tracks
|
||||
</h3>
|
||||
<div class="track-display">
|
||||
<div>
|
||||
<input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
|
||||
<input id="tracks-chart" name="track-options" type="radio" aria-hidden="true" />
|
||||
<label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ description: These are my favorite movies. There are many like them, but these a
|
|||
pagination:
|
||||
data: movies.favorites
|
||||
size: 24
|
||||
permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}.html"
|
||||
permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
|
||||
schema: favorite-movies
|
||||
---
|
||||
<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
<h2 class="watching">{{ title }}</h2>
|
||||
<p>These are my favorite movies. There are many like them, but these are mine.</p>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ description: These are my favorite shows. There are many like them, but these ar
|
|||
pagination:
|
||||
data: tv.favorites
|
||||
size: 24
|
||||
permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}.html"
|
||||
permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
|
||||
schema: favorite-shows
|
||||
---
|
||||
<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
<h2 class="watching">{{ title }}</h2>
|
||||
<p>These are my favorite shows. There are many like them, but these are mine.</p>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ schema: watching
|
|||
</h3>
|
||||
{% render "media/grid.liquid", globals:globals, data:tv.recentlyWatched, shape:"vertical", count: 6 %}
|
||||
<h3 id="favorite-movies">
|
||||
<a class="icon-link" href="/watching/favorite-movies">
|
||||
<a href="/watching/favorite-movies">
|
||||
{% tablericon "star" %}
|
||||
Favorite movies
|
||||
</a>
|
||||
|
|
@ -30,7 +30,7 @@ schema: watching
|
|||
{% assign favoriteMovies = movies.favorites | shuffleArray %}
|
||||
{% render "media/grid.liquid", globals:globals, data:favoriteMovies, shape:"vertical", count: 6 %}
|
||||
<h3 id="favorite-shows">
|
||||
<a class="icon-link" href="/watching/favorite-shows">
|
||||
<a href="/watching/favorite-shows">
|
||||
{% tablericon "star" %}
|
||||
Favorite shows
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const generateAssociatedMediaHTML = (data, isGenre = false) => {
|
|||
|
||||
return `
|
||||
<div class="associated-media">
|
||||
<p class="${category}">${ICON_MAP[icon]} ${title}</p>
|
||||
<span class="${category}">${ICON_MAP[icon]} ${title}</span>
|
||||
<ul>
|
||||
${items
|
||||
.map((item) => {
|
||||
|
|
@ -206,10 +206,10 @@ export const generateArtistHTML = (artist, globals) => {
|
|||
const playLabel = artist?.["total_plays"] === 1 ? "play" : "plays";
|
||||
const concertsList = artist["concerts"]?.length
|
||||
? `<hr />
|
||||
<p id="concerts" class="concerts">
|
||||
<span id="concerts" class="concerts">
|
||||
${ICON_MAP["deviceSpeaker"]}
|
||||
I've seen this artist live!
|
||||
</p>
|
||||
</span>
|
||||
<ul>${artist["concerts"].map(generateConcertModal).join("")}</ul>`
|
||||
: "";
|
||||
const albumsTable = artist["albums"]?.length
|
||||
|
|
@ -231,7 +231,7 @@ export const generateArtistHTML = (artist, globals) => {
|
|||
: "";
|
||||
|
||||
return `
|
||||
<a class="icon-link" href="/music">${ICON_MAP.arrowLeft} Back to music</a>
|
||||
<a href="/music">${ICON_MAP.arrowLeft} Back to music</a>
|
||||
<article class="artist-focus">
|
||||
<div class="artist-display">
|
||||
<img
|
||||
|
|
@ -250,31 +250,31 @@ export const generateArtistHTML = (artist, globals) => {
|
|||
width="200"
|
||||
height="200"
|
||||
/>
|
||||
<div class="artist-meta">
|
||||
<p class="title"><strong>${artist["name"]}</strong></p>
|
||||
<p class="sub-meta country">${ICON_MAP["mapPin"]} ${parseCountryField(
|
||||
artist["country"]
|
||||
)}</p>
|
||||
<div class="media-meta">
|
||||
<span class="title"><strong>${artist["name"]}</strong></span>
|
||||
<span class="sub-meta country">${ICON_MAP["mapPin"]} ${parseCountryField(
|
||||
artist["country"]
|
||||
)}</span>
|
||||
${
|
||||
artist["favorite"]
|
||||
? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite artists!</p>`
|
||||
? `<span class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite artists!</span>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
artist["tattoo"]
|
||||
? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this artist!</p>`
|
||||
? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this artist!</span>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
artist["total_plays"]
|
||||
? `<p class="sub-meta"><strong class="highlight-text">${artist["total_plays"]} ${playLabel}</strong></p>`
|
||||
? `<span class="sub-meta"><strong class="highlight-text">${artist["total_plays"]} ${playLabel}</strong></span>`
|
||||
: ""
|
||||
}
|
||||
<p class="sub-meta">${
|
||||
<span class="sub-meta">${
|
||||
artist["genre"]
|
||||
? `<a href="${artist["genre"]["url"]}">${artist["genre"]["name"]}</a>`
|
||||
: ""
|
||||
}</p>
|
||||
}</span>
|
||||
</div>
|
||||
</div>
|
||||
${generateAssociatedMediaHTML(artist)}
|
||||
|
|
@ -311,7 +311,7 @@ export const generateBookHTML = (book, globals) => {
|
|||
: "";
|
||||
|
||||
return `
|
||||
<a class="icon-link" href="/books">${
|
||||
<a href="/books">${
|
||||
ICON_MAP["arrowLeft"]
|
||||
} Back to books</a>
|
||||
<article class="book-focus">
|
||||
|
|
@ -319,14 +319,14 @@ export const generateBookHTML = (book, globals) => {
|
|||
<img
|
||||
srcset="
|
||||
${globals["cdn_url"]}${
|
||||
book["image"]
|
||||
}?class=verticalsm&type=webp 200w,
|
||||
${globals["cdn_url"]}${
|
||||
book["image"]
|
||||
}?class=verticalmd&type=webp 400w,
|
||||
${globals["cdn_url"]}${
|
||||
book["image"]
|
||||
}?class=verticalbase&type=webp 800w
|
||||
book["image"]
|
||||
}?class=verticalsm&type=webp 200w,
|
||||
${globals["cdn_url"]}${
|
||||
book["image"]
|
||||
}?class=verticalmd&type=webp 400w,
|
||||
${globals["cdn_url"]}${
|
||||
book["image"]
|
||||
}?class=verticalbase&type=webp 800w
|
||||
"
|
||||
sizes="(max-width: 450px) 203px, (max-width: 850px) 406px, 812px"
|
||||
src="${globals["cdn_url"]}${book["image"]}?class=verticalsm&type=webp"
|
||||
|
|
@ -336,23 +336,23 @@ export const generateBookHTML = (book, globals) => {
|
|||
width="200"
|
||||
height="307"
|
||||
/>
|
||||
<div class="book-meta">
|
||||
<p class="title"><strong>${book["title"]}</strong></p>
|
||||
${book["rating"] ? `<p>${book["rating"]}</p>` : ""}
|
||||
<div class="media-meta">
|
||||
<span class="title"><strong>${book["title"]}</strong></span>
|
||||
${book["rating"] ? `<span>${book["rating"]}</span>` : ""}
|
||||
${
|
||||
book["author"] ? `<p class="sub-meta">By ${book["author"]}</p>` : ""
|
||||
book["author"] ? `<span class="sub-meta">By ${book["author"]}</span>` : ""
|
||||
}
|
||||
${
|
||||
book["favorite"]
|
||||
? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite books!</p>`
|
||||
? `<span class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite books!</span>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
book["tattoo"]
|
||||
? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</p>`
|
||||
? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</span>`
|
||||
: ""
|
||||
}
|
||||
${status ? `<p class="sub-meta">${status}</p>` : ""}
|
||||
${status ? `<span class="sub-meta">${status}</span>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
${
|
||||
|
|
@ -373,7 +373,7 @@ export const generateGenreHTML = (genre) => {
|
|||
const mediaLinks = generateMediaLinks(genre["artists"], "artist", 5);
|
||||
|
||||
return `
|
||||
<a class="icon-link" href="/music">${
|
||||
<a href="/music">${
|
||||
ICON_MAP["arrowLeft"]
|
||||
} Back to music</a>
|
||||
<h2>${genre["name"]}</h2>
|
||||
|
|
@ -411,21 +411,21 @@ export const generateWatchingHTML = (media, globals, type) => {
|
|||
media["last_watched"] || (isShow && media["episode"]?.["last_watched_at"]);
|
||||
|
||||
return `
|
||||
<a class="icon-link" href="/watching">${
|
||||
<a href="/watching">${
|
||||
ICON_MAP.arrowLeft
|
||||
} Back to watching</a>
|
||||
<article class="watching focus">
|
||||
<img
|
||||
srcset="
|
||||
${globals["cdn_url"]}${
|
||||
media["backdrop"]
|
||||
}?class=bannersm&type=webp 256w,
|
||||
${globals["cdn_url"]}${
|
||||
media["backdrop"]
|
||||
}?class=bannermd&type=webp 512w,
|
||||
${globals["cdn_url"]}${
|
||||
media["backdrop"]
|
||||
}?class=bannerbase&type=webp 1024w
|
||||
media["backdrop"]
|
||||
}?class=bannersm&type=webp 256w,
|
||||
${globals["cdn_url"]}${
|
||||
media["backdrop"]
|
||||
}?class=bannermd&type=webp 512w,
|
||||
${globals["cdn_url"]}${
|
||||
media["backdrop"]
|
||||
}?class=bannerbase&type=webp 1024w
|
||||
"
|
||||
sizes="(max-width: 450px) 256px,
|
||||
(max-width: 850px) 512px,
|
||||
|
|
@ -438,31 +438,31 @@ export const generateWatchingHTML = (media, globals, type) => {
|
|||
width="256"
|
||||
height="180"
|
||||
/>
|
||||
<div class="meta">
|
||||
<p class="title"><strong>${media["title"]}</strong> (${
|
||||
<div class="media-meta">
|
||||
<span class="title"><strong>${media["title"]}</strong> (${
|
||||
media["year"]
|
||||
})</p>
|
||||
${media["rating"] ? `<p>${media["rating"]}</p>` : ""}
|
||||
})</span>
|
||||
${media["rating"] ? `<span>${media["rating"]}</span>` : ""}
|
||||
${
|
||||
media["favorite"]
|
||||
? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite ${label}s!</p>`
|
||||
? `<span class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite ${label}s!</span>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
media["tattoo"]
|
||||
? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!</p>`
|
||||
? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!</span>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
media["collected"]
|
||||
? `<p class="sub-meta collected">${ICON_MAP["circleCheck"]} This ${label} is in my collection!</p>`
|
||||
? `<span class="sub-meta collected">${ICON_MAP["circleCheck"]} This ${label} is in my collection!</span>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
lastWatched
|
||||
? `<p class="sub-meta">Last watched on <strong class="highlight-text">${formatDate(
|
||||
? `<span class="sub-meta">Last watched on <strong class="highlight-text">${formatDate(
|
||||
lastWatched
|
||||
)}</strong>.</p>`
|
||||
)}</strong>.</span>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue