chore: split out styles + only load where needed
This commit is contained in:
parent
37db7d35d6
commit
0e65983a19
28 changed files with 250 additions and 287 deletions
10
.eleventy.js
10
.eleventy.js
|
|
@ -2,8 +2,8 @@ import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
|
|||
import tablerIcons from 'eleventy-plugin-tabler-icons'
|
||||
import pluginUnfurl from 'eleventy-plugin-unfurl'
|
||||
import pluginRss from '@11ty/eleventy-plugin-rss'
|
||||
import embedYouTube from 'eleventy-plugin-youtube-embed'
|
||||
import postGraph from '@rknightuk/eleventy-plugin-post-graph'
|
||||
import embedEverything from 'eleventy-plugin-embed-everything'
|
||||
|
||||
import markdownIt from 'markdown-it'
|
||||
import markdownItAnchor from 'markdown-it-anchor'
|
||||
|
|
@ -30,13 +30,6 @@ export default async function (eleventyConfig) {
|
|||
eleventyConfig.addPlugin(syntaxHighlight)
|
||||
eleventyConfig.addPlugin(tablerIcons)
|
||||
eleventyConfig.addPlugin(pluginUnfurl)
|
||||
eleventyConfig.addPlugin(embedYouTube, {
|
||||
modestBranding: true,
|
||||
lite: {
|
||||
'lite.css.path': 'src/assets/styles/yt-lite.css',
|
||||
'lite.js.path': 'src/assets/scripts/yt-lite.js',
|
||||
},
|
||||
})
|
||||
eleventyConfig.addPlugin(postGraph, {
|
||||
boxColorLight: '#e5e7eb',
|
||||
highlightColorLight: '#2563eb',
|
||||
|
|
@ -46,6 +39,7 @@ export default async function (eleventyConfig) {
|
|||
highlightColorDark: '#60a5fa',
|
||||
textColorDark: '#fff',
|
||||
})
|
||||
eleventyConfig.addPlugin(embedEverything);
|
||||
|
||||
// quiet build output
|
||||
eleventyConfig.setQuietMode(true)
|
||||
|
|
|
|||
87
package-lock.json
generated
87
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "4.0.15",
|
||||
"version": "4.2.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "4.0.15",
|
||||
"version": "4.2.0",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "3.0.0-alpha.3",
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
"child_process": "^1.0.2",
|
||||
"clean-css": "^5.3.3",
|
||||
"dotenv-flow": "^4.1.0",
|
||||
"eleventy-plugin-embed-everything": "^1.17.0",
|
||||
"eleventy-plugin-tabler-icons": "^2.2.0",
|
||||
"eleventy-plugin-unfurl": "^1.0.0",
|
||||
"eleventy-plugin-youtube-embed": "^1.9.1",
|
||||
"html-minifier-terser": "^7.2.0",
|
||||
"ics-to-json-extended": "^1.1.4",
|
||||
"jsdom": "^23.0.1",
|
||||
|
|
@ -2164,6 +2164,73 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-everything": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-everything/-/eleventy-plugin-embed-everything-1.17.0.tgz",
|
||||
"integrity": "sha512-so4TOGp1hbP4ITJkUwRRLvElheKStSE1lxbaqZbJAJmHFB53sD9UEsI2+EMcYu88hmw5UYr1tQSUky4nPICp1w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"deepmerge": "^4.3.1",
|
||||
"eleventy-plugin-embed-instagram": "^1.2.7",
|
||||
"eleventy-plugin-embed-soundcloud": "^1.2.7",
|
||||
"eleventy-plugin-embed-spotify": "^1.3.0",
|
||||
"eleventy-plugin-embed-ted": "^1.0.1",
|
||||
"eleventy-plugin-embed-tiktok": "^1.1.7",
|
||||
"eleventy-plugin-embed-twitch": "^1.2.7",
|
||||
"eleventy-plugin-embed-twitter": "^1.4.0",
|
||||
"eleventy-plugin-vimeo-embed": "^1.3.8",
|
||||
"eleventy-plugin-youtube-embed": "^1.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-instagram": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-instagram/-/eleventy-plugin-embed-instagram-1.2.7.tgz",
|
||||
"integrity": "sha512-v6uSqeZiZU5L40lr4NTGBr+2Wbc81SqbNIllESEBQDFhS68g253WqkLaNs7gGh0k5hxhNuMt7ZZEBfous7jksw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-soundcloud": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-soundcloud/-/eleventy-plugin-embed-soundcloud-1.2.7.tgz",
|
||||
"integrity": "sha512-0+VNeEcMiRySmyTmPmMhCwkbds44k9W4jWqUwjvk665TRagiXcCdj/BK2wl8vyiVrn/0arWeSCpol4NBb6BIvA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-spotify": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-spotify/-/eleventy-plugin-embed-spotify-1.3.0.tgz",
|
||||
"integrity": "sha512-waVUtW5PO9aKYQEjnvHG4P5bPyKj+SSUBuDtqfF2K+j7dGItmEDD4DP7CmBz6lkn/LlJGmJ7uT4Mr6L4jAP4bg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-ted": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-ted/-/eleventy-plugin-embed-ted-1.0.1.tgz",
|
||||
"integrity": "sha512-F1CayKC05sGDAcdEgaZUP3Cs/71mwLT717sIUUiZWu+Gjd1Lp7m2gqL1R/uKnHN/CFxKYTpAA6ZNN/LCjg0ufw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-tiktok": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-tiktok/-/eleventy-plugin-embed-tiktok-1.1.7.tgz",
|
||||
"integrity": "sha512-Yb/95hafIsKVsV11ebsX0PoYzpLQWWSbdznbvPfA0HIKjfTHGEt1q0XX5DRGPnn5tor7lM5sha9DMQPzJb/oGQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-twitch": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-twitch/-/eleventy-plugin-embed-twitch-1.2.7.tgz",
|
||||
"integrity": "sha512-E3oUtk5HhfgBaH9xpcnnByoddyyxuj0uhTzxD+UF5ftUU4pa0959HADBI1RuWUDssADzowpSes8m2gBgO4Peeg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-embed-twitter": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-embed-twitter/-/eleventy-plugin-embed-twitter-1.4.0.tgz",
|
||||
"integrity": "sha512-1e2oI0OJiVStywT48h6/IJDT4+XlH5EEVT1z87qV8wABAA022m2ozKuog21EEoI217aV2AM89R/FZ1oo1eD/mA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "^4.0.0",
|
||||
"deepmerge": "^4.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/eleventy-plugin-tabler-icons": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-tabler-icons/-/eleventy-plugin-tabler-icons-2.2.0.tgz",
|
||||
|
|
@ -2456,6 +2523,12 @@
|
|||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-vimeo-embed": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-vimeo-embed/-/eleventy-plugin-vimeo-embed-1.3.8.tgz",
|
||||
"integrity": "sha512-XU/XH/lrx9slUifFiRCsFh8XiDsZxCBh5MnFU8wAz8u8rCFX9PpmyveJ2oeDtDZjEINqaDC+YFSPsxoq59S3cQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-youtube-embed": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-youtube-embed/-/eleventy-plugin-youtube-embed-1.9.1.tgz",
|
||||
|
|
@ -3324,9 +3397,9 @@
|
|||
]
|
||||
},
|
||||
"node_modules/image-size": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.0.tgz",
|
||||
"integrity": "sha512-asnTHw2K8OlqT5kVnQwX+AGKQqpvLo95LbNzQ/C0ln3yzentZmAdd0ygoD004VC4Kkd4PV7J2iaPQkqwp9yuTw==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
|
||||
"integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"queue": "6.0.2"
|
||||
|
|
@ -3335,7 +3408,7 @@
|
|||
"image-size": "bin/image-size.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
"node": ">=16.x"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "4.2.0",
|
||||
"version": "4.3.0",
|
||||
"description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
"child_process": "^1.0.2",
|
||||
"clean-css": "^5.3.3",
|
||||
"dotenv-flow": "^4.1.0",
|
||||
"eleventy-plugin-embed-everything": "^1.17.0",
|
||||
"eleventy-plugin-tabler-icons": "^2.2.0",
|
||||
"eleventy-plugin-unfurl": "^1.0.0",
|
||||
"eleventy-plugin-youtube-embed": "^1.9.1",
|
||||
"html-minifier-terser": "^7.2.0",
|
||||
"ics-to-json-extended": "^1.1.4",
|
||||
"jsdom": "^23.0.1",
|
||||
|
|
|
|||
|
|
@ -31,10 +31,9 @@
|
|||
type="image/svg+xml">
|
||||
<link href="/assets/icons/apple-touch-icon.png?v={% assetHash %}" rel="apple-touch-icon">
|
||||
{% capture css %}
|
||||
{% render "../assets/styles/yt-lite.css" %}
|
||||
{% render "../assets/styles/silka.css" %}
|
||||
{% render "../assets/styles/prism.css" %}
|
||||
{% render "../assets/styles/pagefind.css" %}
|
||||
{% render "../assets/styles/fonts/silka.css" %}
|
||||
{% render "../assets/styles/partials/vars.css" %}
|
||||
{% render "../assets/styles/partials/animations.css" %}
|
||||
{% render "../assets/styles/index.css" %}
|
||||
{% endcapture %}
|
||||
<style>
|
||||
|
|
@ -115,7 +114,7 @@
|
|||
<body>
|
||||
{{ content }}
|
||||
{% capture js %}
|
||||
{% render "../assets/scripts/script.js" %}
|
||||
{% render "../assets/scripts/index.js" %}
|
||||
{% endcapture %}
|
||||
<script>
|
||||
{{ js }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
{% capture css %}
|
||||
{% render "../../assets/styles/widgets/post-graph.css" %}
|
||||
{% endcapture %}
|
||||
<style>
|
||||
{{ css | cssmin }}
|
||||
</style>
|
||||
<div class="post-graph">
|
||||
{% assign years = postYears | reverse %}
|
||||
{%- for year in years %}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ layout: main
|
|||
schema: blog
|
||||
---
|
||||
{% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
|
||||
{% capture css %}
|
||||
{% render "../assets/styles/plugins/prism.css" %}
|
||||
{% endcapture %}
|
||||
<style>
|
||||
{{ css | cssmin }}
|
||||
</style>
|
||||
<div class="default__wrapper">
|
||||
<article class="h-entry" data-pagefind-body>
|
||||
{% if link %}
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
class LiteYTEmbed extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.videoId = this.getAttribute('videoid')
|
||||
let e = this.querySelector('.lty-playbtn')
|
||||
if (
|
||||
((this.playLabel = (e && e.textContent.trim()) || this.getAttribute('playlabel') || 'Play'),
|
||||
this.style.backgroundImage ||
|
||||
(this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`),
|
||||
e ||
|
||||
((e = document.createElement('button')),
|
||||
(e.type = 'button'),
|
||||
e.classList.add('lty-playbtn'),
|
||||
this.append(e)),
|
||||
!e.textContent)
|
||||
) {
|
||||
const t = document.createElement('span')
|
||||
;(t.className = 'lyt-visually-hidden'), (t.textContent = this.playLabel), e.append(t)
|
||||
}
|
||||
e.removeAttribute('href'),
|
||||
this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { once: !0 }),
|
||||
this.addEventListener('click', this.addIframe),
|
||||
(this.needsYTApiForAutoplay =
|
||||
navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi'))
|
||||
}
|
||||
static addPrefetch(e, t, i) {
|
||||
const a = document.createElement('link')
|
||||
;(a.rel = e), (a.href = t), i && (a.as = i), document.head.append(a)
|
||||
}
|
||||
static warmConnections() {
|
||||
LiteYTEmbed.preconnected ||
|
||||
(LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com'),
|
||||
LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'),
|
||||
LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'),
|
||||
LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'),
|
||||
(LiteYTEmbed.preconnected = !0))
|
||||
}
|
||||
fetchYTPlayerApi() {
|
||||
window.YT ||
|
||||
(window.YT && window.YT.Player) ||
|
||||
(this.ytApiPromise = new Promise((e, t) => {
|
||||
var i = document.createElement('script')
|
||||
;(i.src = 'https://www.youtube.com/iframe_api'),
|
||||
(i.async = !0),
|
||||
(i.onload = (t) => {
|
||||
YT.ready(e)
|
||||
}),
|
||||
(i.onerror = t),
|
||||
this.append(i)
|
||||
}))
|
||||
}
|
||||
async addYTPlayerIframe(e) {
|
||||
this.fetchYTPlayerApi(), await this.ytApiPromise
|
||||
const t = document.createElement('div')
|
||||
this.append(t)
|
||||
const i = Object.fromEntries(e.entries())
|
||||
new YT.Player(t, {
|
||||
width: '100%',
|
||||
videoId: this.videoId,
|
||||
playerVars: i,
|
||||
events: {
|
||||
onReady: (e) => {
|
||||
e.target.playVideo()
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
async addIframe() {
|
||||
if (this.classList.contains('lyt-activated')) return
|
||||
this.classList.add('lyt-activated')
|
||||
const e = new URLSearchParams(this.getAttribute('params') || [])
|
||||
if ((e.append('autoplay', '1'), e.append('playsinline', '1'), this.needsYTApiForAutoplay))
|
||||
return this.addYTPlayerIframe(e)
|
||||
const t = document.createElement('iframe')
|
||||
;(t.width = 560),
|
||||
(t.height = 315),
|
||||
(t.title = this.playLabel),
|
||||
(t.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'),
|
||||
(t.allowFullscreen = !0),
|
||||
(t.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(
|
||||
this.videoId
|
||||
)}?${e.toString()}`),
|
||||
this.append(t),
|
||||
t.focus()
|
||||
}
|
||||
}
|
||||
customElements.define('lite-youtube', LiteYTEmbed)
|
||||
|
|
@ -1,94 +1,3 @@
|
|||
:root {
|
||||
/* colors */
|
||||
--blue-50: #eff5ff;
|
||||
--blue-100: #dbe8fe;
|
||||
--blue-200: #bfd7fe;
|
||||
--blue-300: #93bbfd;
|
||||
--blue-400: #609afa;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-600: #2570eb;
|
||||
--blue-700: #1d64d8;
|
||||
--blue-800: #1e55af;
|
||||
--blue-900: #1e478a;
|
||||
--blue-950: #172e54;
|
||||
|
||||
--gray-50: #f6f7f8;
|
||||
--gray-100: #eaecef;
|
||||
--gray-200: #d9dee4;
|
||||
--gray-300: #b8c2cc;
|
||||
--gray-400: #a0adba;
|
||||
--gray-500: #8996a8;
|
||||
--gray-600: #778399;
|
||||
--gray-700: #6b748a;
|
||||
--gray-800: #5a6173;
|
||||
--gray-900: #4b515d;
|
||||
--gray-950: #30333b;
|
||||
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
|
||||
--brand-github: #333;
|
||||
--brand-github-light: #f5f5f5;
|
||||
--brand-proton: #6d4aff;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-lastfm: #d51007;
|
||||
--brand-trakt: #ed1c24;
|
||||
--brand-storygraph: #14919b;
|
||||
--brand-buy-me-a-coffee: #ffdd00;
|
||||
--brand-rss: #f26522;
|
||||
--webrings: #ec8fd0;
|
||||
|
||||
/* fonts */
|
||||
--font-sans: silka, Inter, Roboto, 'Helvetica Neue', system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
/* text */
|
||||
--font-size-xs: .75rem;
|
||||
--line-height-xs: 1rem;
|
||||
|
||||
--font-size-sm: .875rem;
|
||||
--line-height-sm: 1.25rem;
|
||||
|
||||
--font-size-base: 1rem;
|
||||
--line-height-base: 1.5rem;
|
||||
|
||||
--font-size-lg: 1.125rem;
|
||||
--line-height-lg: 1.75rem;
|
||||
|
||||
--font-size-xl: 1.25rem;
|
||||
--line-height-xl: 1.75rem;
|
||||
|
||||
--font-size-2xl: 1.5rem;
|
||||
--line-height-2xl: 2rem;
|
||||
|
||||
--font-size-3xl: 1.875rem;
|
||||
--line-height-3xl: 2.25rem;
|
||||
|
||||
/* radii */
|
||||
--rounded-none: 0;
|
||||
--rounded-sm: .125rem;
|
||||
--rounded: .25rem;
|
||||
--rounded-md: .375rem;
|
||||
--rounded-lg: .5rem;
|
||||
--rounded-full: 9999px;
|
||||
|
||||
/* transitions */
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* svgs */
|
||||
--stroke-width-default: 1.4;
|
||||
--stroke-width-bold: 2;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
|
|
@ -240,45 +149,21 @@ nav ul li:last-child {
|
|||
stroke: var(--blue-600);
|
||||
}
|
||||
|
||||
.active:hover svg,
|
||||
.active svg:hover {
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
.at svg {
|
||||
stroke: var(--brand-proton) !important;
|
||||
}
|
||||
|
||||
.brand-github svg {
|
||||
stroke: var(--brand-github) !important;
|
||||
}
|
||||
|
||||
.brand-mastodon svg {
|
||||
stroke: var(--brand-mastodon) !important;
|
||||
}
|
||||
|
||||
.brand-lastfm svg {
|
||||
stroke: var(--brand-lastfm) !important;
|
||||
}
|
||||
|
||||
.device-tv svg {
|
||||
stroke: var(--brand-trakt) !important;
|
||||
}
|
||||
|
||||
.books svg {
|
||||
stroke: var(--brand-storygraph) !important;
|
||||
}
|
||||
|
||||
.cup svg {
|
||||
stroke: var(--brand-buy-me-a-coffee) !important;
|
||||
}
|
||||
|
||||
.heart-handshake svg {
|
||||
stroke: var(--webrings) !important;
|
||||
}
|
||||
|
||||
.rss svg {
|
||||
stroke: var(--brand-rss) !important;
|
||||
}
|
||||
/* social icons */
|
||||
.at svg { stroke: var(--brand-proton) !important; }
|
||||
.brand-github svg { stroke: var(--brand-github) !important; }
|
||||
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
||||
.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
|
||||
.device-tv svg { stroke: var(--brand-trakt) !important; }
|
||||
.books svg { stroke: var(--brand-storygraph) !important; }
|
||||
.cup svg { stroke: var(--brand-buy-me-a-coffee) !important; }
|
||||
.heart-handshake svg { stroke: var(--webrings) !important; }
|
||||
.rss svg { stroke: var(--brand-rss) !important; }
|
||||
|
||||
/* layout */
|
||||
.default__wrapper {
|
||||
|
|
@ -415,32 +300,8 @@ article time {
|
|||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
/* statistics */
|
||||
.post-graph {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.post-graph__wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
|
||||
.post-graph__progress {
|
||||
background-color: var(--blue-600);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-graph__year {
|
||||
font-family: var(--font-mono)
|
||||
}
|
||||
|
||||
.post-graph__progress,
|
||||
.post-graph__data {
|
||||
margin-left: .625rem;
|
||||
.eleventy-plugin-youtube-embed {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
|
|
@ -1071,8 +932,14 @@ footer nav {
|
|||
|
||||
/* shared styles */
|
||||
.media__grid .item__wrapper:hover,
|
||||
.media__grid .item__wrapper:focus,
|
||||
.media__grid .item__wrapper:active,
|
||||
.webmentions .interaction .avatar__wrapper:hover,
|
||||
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
|
||||
.webmentions .interaction .avatar__wrapper:focus,
|
||||
.webmentions .interaction .avatar__wrapper:active,
|
||||
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
|
||||
.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
|
||||
.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
|
||||
border-color: var(--blue-200);
|
||||
}
|
||||
|
||||
|
|
|
|||
8
src/assets/styles/partials/animations.css
Normal file
8
src/assets/styles/partials/animations.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
81
src/assets/styles/partials/vars.css
Normal file
81
src/assets/styles/partials/vars.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
:root {
|
||||
/* colors */
|
||||
--blue-50: #eff5ff;
|
||||
--blue-100: #dbe8fe;
|
||||
--blue-200: #bfd7fe;
|
||||
--blue-300: #93bbfd;
|
||||
--blue-400: #609afa;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-600: #2570eb;
|
||||
--blue-700: #1d64d8;
|
||||
--blue-800: #1e55af;
|
||||
--blue-900: #1e478a;
|
||||
--blue-950: #172e54;
|
||||
|
||||
--gray-50: #f6f7f8;
|
||||
--gray-100: #eaecef;
|
||||
--gray-200: #d9dee4;
|
||||
--gray-300: #b8c2cc;
|
||||
--gray-400: #a0adba;
|
||||
--gray-500: #8996a8;
|
||||
--gray-600: #778399;
|
||||
--gray-700: #6b748a;
|
||||
--gray-800: #5a6173;
|
||||
--gray-900: #4b515d;
|
||||
--gray-950: #30333b;
|
||||
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
|
||||
--brand-github: #333;
|
||||
--brand-github-light: #f5f5f5;
|
||||
--brand-proton: #6d4aff;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-lastfm: #d51007;
|
||||
--brand-trakt: #ed1c24;
|
||||
--brand-storygraph: #14919b;
|
||||
--brand-buy-me-a-coffee: #ffdd00;
|
||||
--brand-rss: #f26522;
|
||||
--webrings: #ec8fd0;
|
||||
|
||||
/* fonts */
|
||||
--font-sans: silka, Inter, Roboto, 'Helvetica Neue', system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
/* text */
|
||||
--font-size-xs: .75rem;
|
||||
--line-height-xs: 1rem;
|
||||
|
||||
--font-size-sm: .875rem;
|
||||
--line-height-sm: 1.25rem;
|
||||
|
||||
--font-size-base: 1rem;
|
||||
--line-height-base: 1.5rem;
|
||||
|
||||
--font-size-lg: 1.125rem;
|
||||
--line-height-lg: 1.75rem;
|
||||
|
||||
--font-size-xl: 1.25rem;
|
||||
--line-height-xl: 1.75rem;
|
||||
|
||||
--font-size-2xl: 1.5rem;
|
||||
--line-height-2xl: 2rem;
|
||||
|
||||
--font-size-3xl: 1.875rem;
|
||||
--line-height-3xl: 2.25rem;
|
||||
|
||||
/* radii */
|
||||
--rounded-none: 0;
|
||||
--rounded-sm: .125rem;
|
||||
--rounded: .25rem;
|
||||
--rounded-md: .375rem;
|
||||
--rounded-lg: .5rem;
|
||||
--rounded-full: 9999px;
|
||||
|
||||
/* transitions */
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* svgs */
|
||||
--stroke-width-default: 1.4;
|
||||
--stroke-width-bold: 2;
|
||||
}
|
||||
26
src/assets/styles/widgets/post-graph.css
Normal file
26
src/assets/styles/widgets/post-graph.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.post-graph {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.post-graph__wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
|
||||
.post-graph__progress {
|
||||
background-color: var(--blue-600);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-graph__year {
|
||||
font-family: var(--font-mono)
|
||||
}
|
||||
|
||||
.post-graph__progress,
|
||||
.post-graph__data {
|
||||
margin-left: .625rem;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px}lite-youtube::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0, 0, .2, 1)}lite-youtube::after{content:"";display:block;padding-bottom:calc(100% / (16 / 9))}lite-youtube>iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}lite-youtube>.lty-playbtn{display:block;width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');filter:grayscale(100%);transition:filter .1s cubic-bezier(0, 0, .2, 1);border:none}lite-youtube .lty-playbtn:focus,lite-youtube:hover>.lty-playbtn{filter:none}lite-youtube.lyt-activated{cursor:unset}lite-youtube.lyt-activated::before,lite-youtube.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
|
||||
|
|
@ -6,21 +6,11 @@ permalink: /search.html
|
|||
---
|
||||
|
||||
<link href="https://coryd.dev/pagefind/pagefind-ui.css" rel="stylesheet" />
|
||||
{% capture css %}
|
||||
{% render "../assets/styles/widgets/pagefind.css" %}
|
||||
{% endcapture %}
|
||||
<style>
|
||||
:root {
|
||||
--pagefind-ui-font: 'silka', 'Inter', 'Roboto', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', 'Arial', 'system-ui', 'sans-serif';
|
||||
--pagefind-ui-primary: #374151;
|
||||
--pagefind-ui-text: #374151;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--pagefind-ui-primary: #e5e7eb;
|
||||
--pagefind-ui-text: #e5e7eb;
|
||||
--pagefind-ui-background: #152028;
|
||||
--pagefind-ui-border: #152028;
|
||||
--pagefind-ui-tag: #152028;
|
||||
}
|
||||
}
|
||||
{{ css | cssmin }}
|
||||
</style>
|
||||
<div id="search" class="search"></div>
|
||||
<script
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ tags: ['music']
|
|||
|
||||
This sample sounds promising. I can't wait to hear more from _Reflektor_ on the 9th.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=4i2wp3GkNrg>
|
||||
https://www.youtube.com/watch?v=4i2wp3GkNrg
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ tags: ['music']
|
|||
|
||||
Damien Jurado has been one of my favorite musicians for years. He's a talented, albeit nervous, performer and a gifted songwriter.<!-- excerpt --> The announcement that he'll have a new record out in 2014 is exciting and something that I am very much looking forward to. If the new material he played live when I saw him at the Bootleg Theater in April is any indication it should be even more experimental and unique than _Maraqopa_. I cannot wait to hear it.
|
||||
|
||||
<https://www.youtube.com/watch?v=NNpAj1U1_5Q>
|
||||
https://www.youtube.com/watch?v=NNpAj1U1_5Q
|
||||
|
|
|
|||
|
|
@ -10,4 +10,4 @@ A wonderful new video for one of the highlights of Dawes' most recent album _Sto
|
|||
|
||||
Damien Jurado gave "Museum of Flight" off of _Maraqopa_ a similar treatment that's also very [much worth checking out](https://www.youtube.com/watch?v=CCcAKNSJ3Ac).
|
||||
|
||||
<https://www.youtube.com/watch?v=zUWu8Ny36dc>
|
||||
https://www.youtube.com/watch?v=zUWu8Ny36dc
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ tags: ['music', 'video']
|
|||
|
||||
One of punk's greatest bands live via Marinet TVM. I still need to see them live and sincerely hope I get the chance to before they hang things up. Superb performance.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=euTMEIqTTfk>
|
||||
https://www.youtube.com/watch?v=euTMEIqTTfk
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ tags: ['video', 'music']
|
|||
|
||||
Not out of place at all at an open mic night. Excellent.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=_GnemKx1tlk>
|
||||
https://www.youtube.com/watch?v=_GnemKx1tlk
|
||||
|
|
|
|||
|
|
@ -10,4 +10,4 @@ Beautiful, stripped down song from a musician with a strong voice and truly hear
|
|||
|
||||
[Grab his album here »](http://skinandbonesmusic.bandcamp.com)
|
||||
|
||||
<https://www.youtube.com/watch?v=wB52fQkjZkE>
|
||||
https://www.youtube.com/watch?v=wB52fQkjZkE
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ tags: ['music', 'video']
|
|||
|
||||
A well-produced documentary and a great look at a band who, ten years later (and after only one album), still means so much to so many people.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=MoSP7lNJTqk>
|
||||
https://www.youtube.com/watch?v=MoSP7lNJTqk
|
||||
|
|
@ -7,4 +7,4 @@ tags: ['music']
|
|||
---
|
||||
Absolutely classic.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=gzC0RNkBXM0>
|
||||
https://www.youtube.com/watch?v=gzC0RNkBXM0
|
||||
|
|
@ -7,6 +7,6 @@ tags: ['music']
|
|||
---
|
||||
I could not be more excited for this release.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=V8ia-nyd_K8>
|
||||
https://www.youtube.com/watch?v=V8ia-nyd_K8
|
||||
|
||||
Kudos to Roadburn Festival [for commissioning the piece](https://roadburn.com/premiere-waste-of-space-orchestra-seekers-reflection/).
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@ tags:
|
|||
|
||||
[I've been streaming music again](https://coryd.dev/posts/2023/i-dont-want-streaming-music/) in part (and I know this is ridiculous) because Spotify is ubiquitous, well-integrated and has a — well — [API that's usable for my purposes](https://coryd.dev/posts/2023/road-to-madness-apple-music-charts/). I still buy music I stream from Bandcamp and archive it and I still buy too many shirts to support bands (I also import missing music into playlists and playlist folders as an analog to albums). I've also been able to scrobble listens more reliably and found some really great bands like [PUP](https://open.spotify.com/artist/6A7uqgC2N1nUhrCLAytHxN). We'll see if it lasts, but it feels like a good balance for now.<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=iVuB1ZASrGw&pp=ygUHcHVwIGR2cA%3D%3D>
|
||||
https://www.youtube.com/watch?v=iVuB1ZASrGw
|
||||
|
|
@ -8,4 +8,4 @@ tags: ['Eleventy', 'JavaScript', 'automation']
|
|||
|
||||
My talk from the Eleventy meetup about building [my now page](https://coryd.dev/now) (you even get to see how much I resemble my avatar).<!-- excerpt -->
|
||||
|
||||
<https://www.youtube.com/watch?v=AzcFZJYEpnQ>
|
||||
https://www.youtube.com/watch?v=AzcFZJYEpnQ
|
||||
Reference in a new issue