cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: split out styles + only load where needed

Browse source
This commit is contained in:
Cory Dransfeldt 2024-01-02 12:50:20 -08:00
parent 37db7d35d6
commit 0e65983a19
No known key found for this signature in database
28 changed files with 250 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/assets/scripts/script.js → src/assets/scripts/index.js
View file

86
src/assets/scripts/yt-lite.js
View file

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

0
src/assets/styles/silka.css → src/assets/styles/fonts/silka.css
View file

173
src/assets/styles/index.css
View file

@ -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
View file

@ -0,0 +1,8 @@
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

81
src/assets/styles/partials/vars.css Normal file
View 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;
}

0
src/assets/styles/prism.css → src/assets/styles/plugins/prism.css
View file

0
src/assets/styles/pagefind.css → src/assets/styles/widgets/pagefind.css
View file

26
src/assets/styles/widgets/post-graph.css Normal file
View 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
src/assets/styles/yt-lite.css
View file

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