{% assign years = postYears | reverse %}
{%- for year in years %}
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index c47a5745..9adcce67 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -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 %}
+
{% if link %}
diff --git a/src/assets/scripts/script.js b/src/assets/scripts/index.js
similarity index 100%
rename from src/assets/scripts/script.js
rename to src/assets/scripts/index.js
diff --git a/src/assets/scripts/yt-lite.js b/src/assets/scripts/yt-lite.js
deleted file mode 100644
index c18f205f..00000000
--- a/src/assets/scripts/yt-lite.js
+++ /dev/null
@@ -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)
diff --git a/src/assets/styles/silka.css b/src/assets/styles/fonts/silka.css
similarity index 100%
rename from src/assets/styles/silka.css
rename to src/assets/styles/fonts/silka.css
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 2c16aad3..47601328 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -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);
}
diff --git a/src/assets/styles/partials/animations.css b/src/assets/styles/partials/animations.css
new file mode 100644
index 00000000..49125a32
--- /dev/null
+++ b/src/assets/styles/partials/animations.css
@@ -0,0 +1,8 @@
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
new file mode 100644
index 00000000..c8911b50
--- /dev/null
+++ b/src/assets/styles/partials/vars.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/assets/styles/prism.css b/src/assets/styles/plugins/prism.css
similarity index 100%
rename from src/assets/styles/prism.css
rename to src/assets/styles/plugins/prism.css
diff --git a/src/assets/styles/pagefind.css b/src/assets/styles/widgets/pagefind.css
similarity index 100%
rename from src/assets/styles/pagefind.css
rename to src/assets/styles/widgets/pagefind.css
diff --git a/src/assets/styles/widgets/post-graph.css b/src/assets/styles/widgets/post-graph.css
new file mode 100644
index 00000000..e7ff9697
--- /dev/null
+++ b/src/assets/styles/widgets/post-graph.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/assets/styles/yt-lite.css b/src/assets/styles/yt-lite.css
deleted file mode 100644
index a1599590..00000000
--- a/src/assets/styles/yt-lite.css
+++ /dev/null
@@ -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,');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}
\ No newline at end of file
diff --git a/src/pages/search.html b/src/pages/search.html
index d990bdcf..c4f5742d 100644
--- a/src/pages/search.html
+++ b/src/pages/search.html
@@ -6,21 +6,11 @@ permalink: /search.html
---
+{% capture css %}
+ {% render "../assets/styles/widgets/pagefind.css" %}
+{% endcapture %}