diff --git a/_redirects b/_redirects index cd203099..5e532fdb 100644 --- a/_redirects +++ b/_redirects @@ -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 diff --git a/package-lock.json b/package-lock.json index 6baa5369..a2e85a57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/package.json b/package.json index 0751a93c..c398762f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index cabc1c2b..04e8a7eb 100644 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -153,23 +153,19 @@ window.addEventListener("load", () => { : plainText; }; - const formatArtistTitle = (title, totalPlays) => - totalPlays > 0 - ? `${title} ${totalPlays} plays` - : title; - const renderSearchResults = (results) => { const resultHTML = results .map( ({ title, url, description, type, total_plays }) => `
  • - -

    ${ - type === "artist" && total_plays - ? formatArtistTitle(title, total_plays) - : title - }

    -     +

    + ${title} + ${ + type === "artist" && total_plays + ? ` ${total_plays} plays` + : "" + } +

    ${truncateDescription(description)}

    • ` @@ -225,13 +221,14 @@ window.addEventListener("load", () => { .map( ({ title, url, description, type, total_plays }) => `
  • - -

    ${ +

    + ${title} + ${ type === "artist" && total_plays - ? formatArtistTitle(title, total_plays) - : title - }

    - + ? ` ${total_plays} plays` + : "" + } +

    ${truncateDescription(description)}

    • ` diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 26f6f640..80b378b1 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -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; @@ -555,28 +511,4 @@ 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%; } \ No newline at end of file diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css index e00ba0d2..13f12285 100644 --- a/src/assets/styles/components/addon-links.css +++ b/src/assets/styles/components/addon-links.css @@ -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; } } diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css index 36dc81f5..1153a9f8 100644 --- a/src/assets/styles/components/badge-grid.css +++ b/src/assets/styles/components/badge-grid.css @@ -14,5 +14,7 @@ & img { image-rendering: pixelated; + border: none; + border-radius: 0; } } diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index ca56b13a..975abe6c 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -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); } diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index e4342c22..4fa9ecef 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -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; - } } } diff --git a/src/assets/styles/components/mastodon-post.css b/src/assets/styles/components/mastodon-post.css index 129fc916..59c09d03 100644 --- a/src/assets/styles/components/mastodon-post.css +++ b/src/assets/styles/components/mastodon-post.css @@ -1,6 +1,4 @@ .mastodon-post-wrapper { - margin-bottom: var(--spacing-base); - & dl, dt { display: flex; diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 831397e3..35e104ac 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -1,4 +1,4 @@ -.icon-link + .media-grid { +a + .media-grid { margin-top: var(--spacing-base); } diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css index dc34aefe..7495d238 100644 --- a/src/assets/styles/components/menu.css +++ b/src/assets/styles/components/menu.css @@ -23,7 +23,6 @@ menu { margin: 0; padding: var(--spacing-sm) 0; width: 100%; - color: var(--text-color); background: var(--background-color); & a { diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css index 5ce4d231..836225e0 100644 --- a/src/assets/styles/components/music-chart.css +++ b/src/assets/styles/components/music-chart.css @@ -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; diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css index c4418d2b..090546cf 100644 --- a/src/assets/styles/components/paginator.css +++ b/src/assets/styles/components/paginator.css @@ -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; + } } diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css index 5b50afd2..b758003d 100644 --- a/src/assets/styles/components/tab-buttons.css +++ b/src/assets/styles/components/tab-buttons.css @@ -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); } @@ -37,4 +37,4 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) { #tracks-chart:not(:checked) ~ [for="tracks-chart"]:hover, #tracks-chart:not(:checked) ~ [for="tracks-chart"]:active { color: var(--accent-color-hover); -} +} \ No newline at end of file diff --git a/src/assets/styles/components/youtube-player.css b/src/assets/styles/components/youtube-player.css index d2ccb228..4d2bde91 100644 --- a/src/assets/styles/components/youtube-player.css +++ b/src/assets/styles/components/youtube-player.css @@ -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); diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css index c932e477..c88a5632 100644 --- a/src/assets/styles/defaults/vars.css +++ b/src/assets/styles/defaults/vars.css @@ -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; diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl index 15d20e52..19789f37 100644 --- a/src/assets/styles/feed.xsl +++ b/src/assets/styles/feed.xsl @@ -54,7 +54,7 @@ - {title} + {title} diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 7fd653f0..eb65b02c 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -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); diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css index 5ad415d7..e0223f44 100644 --- a/src/assets/styles/pages/about.css +++ b/src/assets/styles/pages/about.css @@ -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; } } diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css deleted file mode 100644 index 37d43ba0..00000000 --- a/src/assets/styles/pages/blogroll.css +++ /dev/null @@ -1,3 +0,0 @@ -.blog-roll-icons { - display: flex; -} diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css index a15a87f4..aa0a5dcb 100644 --- a/src/assets/styles/pages/books.css +++ b/src/assets/styles/pages/books.css @@ -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%; diff --git a/src/assets/styles/pages/feeds.css b/src/assets/styles/pages/feeds.css index 15d04c55..2246b795 100644 --- a/src/assets/styles/pages/feeds.css +++ b/src/assets/styles/pages/feeds.css @@ -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); } } diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css index 67e56abb..12a0f798 100644 --- a/src/assets/styles/pages/links.css +++ b/src/assets/styles/pages/links.css @@ -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); } } diff --git a/src/assets/styles/pages/media.css b/src/assets/styles/pages/media.css new file mode 100644 index 00000000..4c486213 --- /dev/null +++ b/src/assets/styles/pages/media.css @@ -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); + } + } +} \ No newline at end of file diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css index 0329e8e6..bdfc8fd3 100644 --- a/src/assets/styles/pages/music.css +++ b/src/assets/styles/pages/music.css @@ -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; } diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css index 05fcd8d1..e665bc75 100644 --- a/src/assets/styles/pages/watching.css +++ b/src/assets/styles/pages/watching.css @@ -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); } diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css index 09da3995..656b62c4 100644 --- a/src/assets/styles/plugins/prism.css +++ b/src/assets/styles/plugins/prism.css @@ -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 { diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css index 27f25b6d..2dcf090a 100644 --- a/src/assets/styles/reset.css +++ b/src/assets/styles/reset.css @@ -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; +} \ No newline at end of file diff --git a/src/includes/feeds/json.liquid b/src/includes/feeds/json.liquid index c916b102..fa0c7aef 100644 --- a/src/includes/feeds/json.liquid +++ b/src/includes/feeds/json.liquid @@ -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 -%} diff --git a/src/includes/home/recent-posts.liquid b/src/includes/home/recent-posts.liquid index b33b7af4..e767bc2f 100644 --- a/src/includes/home/recent-posts.liquid +++ b/src/includes/home/recent-posts.liquid @@ -16,4 +16,4 @@ {{ post.description | normalize_whitespace | markdown | htmlTruncate }} {%- endfor -%} -View all posts {% tablericon "arrow-right" %} \ No newline at end of file +View all posts {% tablericon "arrow-right" %} \ No newline at end of file diff --git a/src/includes/media/grid.liquid b/src/includes/media/grid.liquid index 66bab808..56d7f227 100644 --- a/src/includes/media/grid.liquid +++ b/src/includes/media/grid.liquid @@ -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 -%}
    @@ -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 -%} diff --git a/src/includes/media/music/recent.liquid b/src/includes/media/music/recent.liquid index 4ff1a8eb..147f09d1 100644 --- a/src/includes/media/music/recent.liquid +++ b/src/includes/media/music/recent.liquid @@ -22,9 +22,9 @@ {{ item.chart.subtext }}
    -
    +
    + {%- endfor -%} \ No newline at end of file diff --git a/src/includes/nav/paginator.liquid b/src/includes/nav/paginator.liquid index a6f9d57c..31b50130 100644 --- a/src/includes/nav/paginator.liquid +++ b/src/includes/nav/paginator.liquid @@ -6,7 +6,6 @@ href="{{ prevHref }}" aria-label="Previous page" class="{% unless prevHref %}disabled{% endunless %}" - {% unless prevHref %}disabled{% endunless %} > {% tablericon "arrow-left" %}     @@ -29,7 +28,6 @@ href="{{ nextHref }}" aria-label="Next page" class="{% unless nextHref %}disabled{% endunless %}" - {% unless nextHref %}disabled{% endunless %} > {% tablericon "arrow-right" %} diff --git a/src/pages/books/index.html b/src/pages/books/index.html index 31312753..c23a888c 100644 --- a/src/pages/books/index.html +++ b/src/pages/books/index.html @@ -32,12 +32,12 @@ schema: books height="307" /> -
    +
    -

    {{ book.title }}

    + {{ book.title }}     {% if book.author %} -

    By {{ book.author }}

    + By {{ book.author }} {% endif %} {% if book.progress %} {%- assign percentage = book.progress | append: '%' -%} diff --git a/src/pages/books/year.html b/src/pages/books/year.html index 4cd929c3..5bf991d8 100644 --- a/src/pages/books/year.html +++ b/src/pages/books/year.html @@ -12,7 +12,7 @@ schema: books-year {%- assign currentYear = 'now' | date: "%Y" -%} {%- assign yearString = year.value | append: '' -%} {%- assign currentYearString = currentYear | append: '' -%} -{% tablericon "arrow-left" %} Back to books +{% tablericon "arrow-left" %} Back to books

    {{ year.value }} / Books

    {% if yearString == currentYearString %}

    I've finished {{ bookData.size }} books this year.{%- if favoriteBooks %} Among my favorites are {{ favoriteBooks }}.{%- endif -%}

    diff --git a/src/pages/music/index.html b/src/pages/music/index.html index e31dfdaf..303c45f1 100644 --- a/src/pages/music/index.html +++ b/src/pages/music/index.html @@ -24,7 +24,7 @@ schema: music-index {% tablericon "playlist" %} Tracks -
    +
    diff --git a/src/pages/watching/favorites/movies.html b/src/pages/watching/favorites/movies.html index 5528bc42..02342c7a 100644 --- a/src/pages/watching/favorites/movies.html +++ b/src/pages/watching/favorites/movies.html @@ -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 --- -{% tablericon "arrow-left" %} Back to watching +{% tablericon "arrow-left" %} Back to watching {% if pagination.pageNumber == 0 %}

    {{ title }}

    These are my favorite movies. There are many like them, but these are mine.

    diff --git a/src/pages/watching/favorites/shows.html b/src/pages/watching/favorites/shows.html index c022ac22..d178c375 100644 --- a/src/pages/watching/favorites/shows.html +++ b/src/pages/watching/favorites/shows.html @@ -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 --- -{% tablericon "arrow-left" %} Back to watching +{% tablericon "arrow-left" %} Back to watching {% if pagination.pageNumber == 0 %}

    {{ title }}

    These are my favorite shows. There are many like them, but these are mine.

    diff --git a/src/pages/watching/index.html b/src/pages/watching/index.html index 523eaa98..7cad9892 100644 --- a/src/pages/watching/index.html +++ b/src/pages/watching/index.html @@ -22,7 +22,7 @@ schema: watching {% render "media/grid.liquid", globals:globals, data:tv.recentlyWatched, shape:"vertical", count: 6 %}

    - + {% tablericon "star" %} Favorite movies @@ -30,7 +30,7 @@ schema: watching {% assign favoriteMovies = movies.favorites | shuffleArray %} {% render "media/grid.liquid", globals:globals, data:favoriteMovies, shape:"vertical", count: 6 %}

    - + {% tablericon "star" %} Favorite shows diff --git a/workers/dynamic-pages/utils/generators.js b/workers/dynamic-pages/utils/generators.js index 7c4a3ec6..3e4e0aa1 100644 --- a/workers/dynamic-pages/utils/generators.js +++ b/workers/dynamic-pages/utils/generators.js @@ -136,7 +136,7 @@ const generateAssociatedMediaHTML = (data, isGenre = false) => { return `
    -

    ${ICON_MAP[icon]} ${title}

    + ${ICON_MAP[icon]} ${title}
      ${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 ? `
      -

      + ${ICON_MAP["deviceSpeaker"]} I've seen this artist live! -

      +
        ${artist["concerts"].map(generateConcertModal).join("")}
      ` : ""; const albumsTable = artist["albums"]?.length @@ -231,7 +231,7 @@ export const generateArtistHTML = (artist, globals) => { : ""; return ` - ${ICON_MAP.arrowLeft} Back to music + ${ICON_MAP.arrowLeft} Back to music
      { width="200" height="200" /> -
      -

      ${artist["name"]}

      -

      ${ICON_MAP["mapPin"]} ${parseCountryField( - artist["country"] - )}

      +
      + ${artist["name"]} + ${ICON_MAP["mapPin"]} ${parseCountryField( + artist["country"] + )} ${ artist["favorite"] - ? `

      ${ICON_MAP["heart"]} This is one of my favorite artists!

      ` + ? `${ICON_MAP["heart"]} This is one of my favorite artists!` : "" } ${ artist["tattoo"] - ? `

      ${ICON_MAP["needle"]} I have a tattoo inspired by this artist!

      ` + ? `${ICON_MAP["needle"]} I have a tattoo inspired by this artist!` : "" } ${ artist["total_plays"] - ? `

      ${artist["total_plays"]} ${playLabel}

      ` + ? `${artist["total_plays"]} ${playLabel}` : "" } -

      ${ + ${ artist["genre"] ? `${artist["genre"]["name"]}` : "" - }

      + }
      ${generateAssociatedMediaHTML(artist)} @@ -311,7 +311,7 @@ export const generateBookHTML = (book, globals) => { : ""; return ` - ${ + ${ ICON_MAP["arrowLeft"] } Back to books
      @@ -319,14 +319,14 @@ export const generateBookHTML = (book, globals) => { { width="200" height="307" /> -
      -

      ${book["title"]}

      - ${book["rating"] ? `

      ${book["rating"]}

      ` : ""} +
      + ${book["title"]} + ${book["rating"] ? `${book["rating"]}` : ""} ${ - book["author"] ? `

      By ${book["author"]}

      ` : "" + book["author"] ? `By ${book["author"]}` : "" } ${ book["favorite"] - ? `

      ${ICON_MAP["heart"]} This is one of my favorite books!

      ` + ? `${ICON_MAP["heart"]} This is one of my favorite books!` : "" } ${ book["tattoo"] - ? `

      ${ICON_MAP["needle"]} I have a tattoo inspired by this book!

      ` + ? `${ICON_MAP["needle"]} I have a tattoo inspired by this book!` : "" } - ${status ? `

      ${status}

      ` : ""} + ${status ? `${status}` : ""}
      ${ @@ -373,7 +373,7 @@ export const generateGenreHTML = (genre) => { const mediaLinks = generateMediaLinks(genre["artists"], "artist", 5); return ` - ${ + ${ ICON_MAP["arrowLeft"] } Back to music

      ${genre["name"]}

      @@ -411,21 +411,21 @@ export const generateWatchingHTML = (media, globals, type) => { media["last_watched"] || (isShow && media["episode"]?.["last_watched_at"]); return ` - ${ + ${ ICON_MAP.arrowLeft } Back to watching
      -
      -

      ${media["title"]} (${ +

      + ${media["title"]} (${ media["year"] - })

      - ${media["rating"] ? `

      ${media["rating"]}

      ` : ""} + })       + ${media["rating"] ? `${media["rating"]}` : ""} ${ media["favorite"] - ? `

      ${ICON_MAP["heart"]} This is one of my favorite ${label}s!

      ` + ? `${ICON_MAP["heart"]} This is one of my favorite ${label}s!` : "" } ${ media["tattoo"] - ? `

      ${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!

      ` + ? `${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!` : "" } ${ media["collected"] - ? `

      ${ICON_MAP["circleCheck"]} This ${label} is in my collection!

      ` + ? `${ICON_MAP["circleCheck"]} This ${label} is in my collection!` : "" } ${ lastWatched - ? `

      Last watched on ${formatDate( + ? `Last watched on ${formatDate( lastWatched - )}.

      ` + )}.` : "" }