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

chore: never did like those class conventions

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-15 13:22:07 -07:00
parent 40a873a354
commit 9317a760b0
No known key found for this signature in database
63 changed files with 247 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "11.1.1",
"version": "11.2.1",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {

2
src/_includes/default.liquid
View file

@ -2,6 +2,6 @@
layout: main
---
{% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
<div class="default__wrapper">
<div class="default-wrapper">
{{ content }}
</div>

6
src/_includes/main.liquid
View file

@ -1,9 +1,7 @@
---
layout: base
---
<div class="main__wrapper">
<main>
{{ content }}
</main>
<div class="main-wrapper">
<main>{{ content }}</main>
{% render "partials/footer.liquid", page:page, nav:nav %}
</div>

26
src/_includes/now.liquid
View file

@ -6,12 +6,12 @@ layout: default
{% endcapture %}
<script>{{ js }}</script>
{{ content }}
<div class="now__section--header-wrapper">
<h2 id="artists" class="now__section--header flex--centered">
<div class="now-header-wrapper">
<h2 id="artists" class="now-header flex-centered">
{% tablericon "microphone-2" "Artists" %}
Artists
</h2>
<div class="now__section--header-buttons client-side">
<div class="now-header-buttons client-side">
<button class="small active" data-toggle="artists-window">This week</button>
<button class="small secondary" data-toggle="artists-month">This month</button>
<button class="small secondary" data-toggle="artists-three-months">3 months</button>
@ -26,12 +26,12 @@ layout: default
<div class="hidden" id="artists-three-months">
{% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.artists, shape: "square", count: 8 %}
</div>
<div class="now__section--header-wrapper">
<h2 id="albums" class="now__section--header flex--centered">
<div class="now-header-wrapper">
<h2 id="albums" class="now-header flex-centered">
{% tablericon "vinyl" "Albums" %}
Albums
</h2>
<div class="now__section--header-buttons client-side">
<div class="now-header-buttons client-side">
<button class="small active" data-toggle="albums-window">This week</button>
<button class="small secondary" data-toggle="albums-month">This month</button>
<button class="small secondary" data-toggle="albums-three-months">3 months</button>
@ -46,12 +46,12 @@ layout: default
<div class="hidden" id="albums-three-months">
{% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.albums, shape: "square", count: 8 %}
</div>
<div class="now__section--header-wrapper">
<h2 id="tracks" class="now__section--header flex--centered">
<div class="now-header-wrapper">
<h2 id="tracks" class="now-header flex-centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
<div class="now__section--header-buttons client-side">
<div class="now-header-buttons client-side">
<button class="small active" data-toggle="tracks-recent">Recent</button>
<button class="small secondary" data-toggle="tracks-window">This week</button>
<button class="small secondary" data-toggle="tracks-month">This month</button>
@ -71,22 +71,22 @@ layout: default
{% render "partials/now/track-chart.liquid", data:musicCharts.threeMonthChart.topTracks.data, mostPlayed:musicCharts.threeMonthChart.topTracks.mostPlayed %}
</div>
{% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
<h2 id="books" class="now__section--header flex--centered">
<h2 id="books" class="now-header flex-centered">
{% tablericon "books" "Books" %}
Books
</h2>
{% render "partials/now/media-grid.liquid", data:books, shape: "vertical", count: 6 %}
{% render "partials/recent-links.liquid", links:links %}
<h2 id="movies" class="now__section--header flex--centered">
<h2 id="movies" class="now-header flex-centered">
{% tablericon "movie" "Movies" %}
Movies
</h2>
{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
<h2 id="tv" class="now__section--header flex--centered">
<h2 id="tv" class="now-header flex-centered">
{% tablericon "device-tv" "TV" %}
TV
</h2>
{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
<p class="now__explainer text--centered">
<p class="now-explainer text-small text-centered">
This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.
</p>

2
src/_includes/partials/addon-links.liquid
View file

@ -1,4 +1,4 @@
<div class="addon-links__wrapper">
<div class="addon-links">
{%- if analytics.size > 0 -%}
<div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
{%- endif -%}

2
src/_includes/partials/badge-grid.liquid
View file

@ -1,4 +1,4 @@
<div class="badge__grid">
<div class="badge-grid">
<a href="https://11ty.dev">
{% image './src/assets/img/badges/eleventy.png', 'Made with 11ty', '', 'lazy' %}
</a>

4
src/_includes/partials/footer.liquid
View file

@ -1,10 +1,10 @@
<footer>
<nav aria-label="Social icons" class="flex--centered justify--centered text--centered">
<nav aria-label="Social icons" class="flex-centered justify-centered text-centered">
{% for link in nav.social %}
{% render "partials/nav/linked-icon.liquid", name:link.name, link:link.url, icon:link.icon %}
{% endfor %}
</nav>
<nav aria-label="Secondary site navigation" class="flex--centered justify--centered text--centered">
<nav aria-label="Secondary site navigation" class="flex-centered justify-centered text-centered">
{% for link in nav.footer %}
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
{% if not forloop.last %}<span>•</span>{% endif %}

2
src/_includes/partials/header.liquid
View file

@ -1,4 +1,4 @@
<section class="main__title">
<section class="main-title">
<h1>
{% if page.url != '/' %}
<a href="/">{{ meta.siteName }}</a>

2
src/_includes/partials/nav/menu.liquid
View file

@ -1,5 +1,5 @@
<nav
class="menu__primary flex--centered flex--wrap justify--center"
class="menu-primary flex-centered flex-wrap justify-center"
aria-label="Primary site navigation">
{% for link in nav.menu %}
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}

4
src/_includes/partials/now/albumReleases.liquid
View file

@ -1,9 +1,9 @@
{% if albumReleases.size > 0 %}
<h2 id="album-releases" class="now__section--header flex--centered">
<h2 id="album-releases" class="now-header flex-centered">
{% tablericon "calendar-time" "Anticipated albums" %}
Anticipated albums
</h2>
<ul class="link__list">
<ul class="link-list">
{% for album in albumReleases %}
<li>
<strong>{{ album.date | readableDate }}: </strong>

2
src/_includes/partials/now/media-grid.liquid
View file

@ -5,7 +5,7 @@
{% assign alt = item.alt | strip | escape %}
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
<div class="item__wrapper{% if item.subtext %} shadow{% endif %}">
<div class="item__meta-text">
<div class="meta-text">
{% if item.title %}
<div class="header">{{ item.title }}</div>
{% endif %}

4
src/_includes/partials/now/status.liquid
View file

@ -1,3 +1 @@
<p>
{{ status.emoji }} {{ status.content }}
</p>
<p>{{ status.emoji }} {{ status.content }}</p>

2
src/_includes/partials/now/topper.liquid
View file

@ -1,7 +1,7 @@
{%- assign artist = artists | first -%}
{%- assign book = books | first -%}
{%- assign show = tv | first -%}
<div class="now__topper">
<div class="now-topper">
<p><strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, <a href="https://coryd.dev/now#artists">music</a>, writing, <a href="https://coryd.dev/now#books">reading</a>, <a href="https://coryd.dev/now#tv">tv</a> and <a href="https://coryd.dev/now#movies">movies</a>. Lately I've been{% if artist %} listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>,{% endif %} reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.</p>
{% render "partials/now/status.liquid", status:status %}
{% render "partials/now-playing.liquid" %}

4
src/_includes/partials/paginator.liquid
View file

@ -1,5 +1,5 @@
<script type="module" src="/assets/scripts/components/select-pagination.js"></script>
<nav aria-label="Blog pagination" class="pagination flex--centered">
<nav aria-label="Blog pagination" class="pagination flex-centered">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}" aria-label="Previous page">
{% tablericon "arrow-left" "Previous" %}
@ -19,7 +19,7 @@
{% endfor %}
</select>
<noscript>
<div class="text--centered">
<div class="text-centered">
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
</div>
</noscript>

4
src/_includes/partials/popular-posts.liquid
View file

@ -1,10 +1,10 @@
{% assign posts = posts | getPopularPosts: analytics %}
{% if posts.size > 0 %}
<h2 class="link__list--header flex--centered">
<h2 class="link-list-header flex-centered">
{% tablericon "flame" "Popular" %}
Popular posts
</h2>
<ul class="link__list">
<ul class="link-list">
{% for post in posts limit: 5 %}
<li>
<a class="no-underline" href="{{post.url}}" title="{{ post.data.title | escape}}">

11
src/_includes/partials/post-graph.liquid
View file

@ -1,13 +1,10 @@
<div class="post-graph">
{% assign years = postYears | reverse %}
{%- for year in years %}
<div class="post-graph__wrapper">
<div class="post-graph__year">{{ year.year }}</div>
<div class="post-graph__progress" style="width: {{ year.yearProgress }}%">
</div>
<div class="post-graph__data">
{{ year.postCount }}
</div>
<div class="wrapper">
<div class="year">{{ year.year }}</div>
<div class="progress" style="width: {{ year.yearProgress }}%"></div>
<div class="data">{{ year.postCount }}</div>
</div>
{% endfor %}
</div>

4
src/_includes/partials/recent-links.liquid
View file

@ -1,9 +1,9 @@
{% if links.size > 0 %}
<h2 id="links" class="link__list--header flex--centered">
<h2 id="links" class="link-list-header flex-centered">
{% tablericon "link" "Links" %}
Recent links
</h2>
<ul class="link__list">
<ul class="link-list">
{% for link in links limit: 5 %}
<li>
<a href="{{link.url}}" title="{{link.title | escape}}">

2
src/_includes/partials/share-button.liquid
View file

@ -1,4 +1,4 @@
<script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
<webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
<button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
<button class="share icon-small icon-center-vertical" disabled>{% tablericon "share" "Share" %}</button>
</webcare-webshare>

6
src/_includes/post.liquid
View file

@ -4,9 +4,9 @@ schema: blog
---
{% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
{%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
<div class="default__wrapper">
<div class="default-wrapper">
<article class="h-entry">
<div class="flex--centered">
<div class="flex-centered">
<time class="dt-published" datetime="{{ date }}">
{{ date | date: "%B %e, %Y" }}
<span class="client-side"> • </span>
@ -14,7 +14,7 @@ schema: blog
{% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
</div>
<h2 class="p-name">{{ title }}</h2>
<div class="text--small">{% render "partials/tags.liquid", tags:tags %}</div>
<div class="text-small">{% render "partials/tags.liquid", tags:tags %}</div>
<span class="p-author h-card hidden">{{ meta.author }}</span>
<div class="p-summary hidden">{{ post_excerpt }}</div>
<div class="e-content">

4
src/_includes/webrings/css-joy.liquid
View file

@ -1,8 +1,8 @@
<div class="webring__wrapper">
<a href="https://cs.sjoy.lol">
<h3 class="text--centered">CSS JOY Webring</h3>
<h3 class="text-centered">CSS JOY Webring</h3>
</a>
<div class="webring__centered flex--centered">
<div class="webring__centered flex-centered">
<a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
{% tablericon "arrow-left" "Previous site" %}
</a>

6
src/_includes/webrings/the-claw.liquid
View file

@ -1,9 +1,9 @@
<div class="webring__wrapper">
<div class="webring__centered flex--centered">
<div class="webring__centered flex-centered">
{% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring' %}
</div>
<h3 class="text--centered">The Claw Webring</h3>
<div class="webring__centered flex--centered">
<h3 class="text-centered">The Claw Webring</h3>
<div class="webring__centered flex-centered">
<strong>
<a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
</strong>

2
src/assets/scripts/media-toggles.js
View file

@ -25,6 +25,6 @@ window.onload = () => {
})
}
const buttonSets = document.querySelectorAll('.now__section--header-buttons')
const buttonSets = document.querySelectorAll('.now-header-buttons')
buttonSets.forEach(initializeButtonSet)
}

52
src/assets/styles/base/index.css
View file

@ -99,9 +99,9 @@ a,
a:hover,
a:focus,
a:active,
:is(.main__title, footer nav:last-child) a:hover,
:is(.main__title, footer nav:last-child) a:focus,
:is(.main__title, footer nav:last-child) a:active {
:is(.main-title, footer nav:last-child) a:hover,
:is(.main-title, footer nav:last-child) a:focus,
:is(.main-title, footer nav:last-child) a:active {
color: var(--accent-color-hover);
transition-property: color;
transition-timing-function: var(--transition-ease-in-out);
@ -137,7 +137,7 @@ hr {
border: 0;
}
hr.large__spacing {
hr.large-spacing {
margin: var(--sizing-base) 0;
}
@ -182,7 +182,7 @@ th {
}
/* header */
.main__title {
.main-title {
width: 100%;
padding-top: var(--sizing-3xl);
display: flex;
@ -198,7 +198,7 @@ th {
}
/* nav */
nav.menu__primary {
nav.menu-primary {
gap: var(--sizing-md);
& a,
@ -248,11 +248,11 @@ nav ul li .active svg:hover {
.rss svg { stroke: var(--brand-rss) !important; }
/* layout */
.default__wrapper {
.default-wrapper {
padding-top: var(--sizing-3xl);
}
.main__wrapper {
.main-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
@ -266,13 +266,13 @@ main {
}
/* now */
.now__topper,
.now-topper,
article {
border-bottom: 1px solid var(--gray-light);
margin-bottom: var(--sizing-base);
}
.now__topper p:first-child {
.now-topper p:first-child {
margin-top: 0;
}
@ -303,7 +303,7 @@ footer nav:last-child {
}
}
:is(.main__title, footer nav:last-child) a {
:is(.main-title, footer nav:last-child) a {
color: var(--text-color);
}
@ -373,12 +373,12 @@ svg {
stroke-width: var(--stroke-width-default);
}
.icon--small > svg {
.icon-small > svg {
width: var(--sizing-lg);
height: var(--sizing-lg);
}
.icon--center__vertical > svg {
.icon-center-vertical > svg {
display: inline;
vertical-align: middle;
}
@ -395,7 +395,7 @@ li {
margin-bottom: var(--sizing-lg);
}
.link__list {
.link-list {
margin-bottom: 0;
& li {
@ -408,12 +408,12 @@ li {
}
}
.link__list--header {
.link-list-header {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
/* images */
.image__banner {
.image-banner {
border: 1px solid var(--accent-color);
border-radius: var(--rounded);
height: auto;
@ -428,7 +428,7 @@ li {
}
/* pages */
.page__header {
.page-header {
font-size: var(--font-size-2xl);
line-height: var(--line-height-2xl);
margin-top: 0;
@ -496,38 +496,38 @@ select-pagination::after {
display: none !important;
}
.text--centered {
.text-centered {
text-align: center !important;
}
.text--small {
.text-small {
font-size: var(--font-size-sm) !important;
line-height: var(--line-height-sm) !important;
}
.flex--centered {
.flex-centered {
display: flex;
flex-direction: row;
align-items: center;
}
.justify--centered {
.justify-centered {
justify-content: center;
}
.flex--wrap {
.flex-wrap {
flex-wrap: wrap
}
/* screens: md */
@media screen and (min-width: 768px) {
.main__title {
.main-title {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.main__title h1 {
.main-title h1 {
padding-bottom: 0;
}
@ -535,8 +535,8 @@ select-pagination::after {
max-width: 768px;
}
.main__title h1,
.page__header {
.main-title h1,
.page-header {
font-size: var(--font-size-3xl);
line-height: var(--line-height-3xl);
}

6
src/assets/styles/components/addon-links.css
View file

@ -1,4 +1,4 @@
.addon-links__wrapper {
.addon-links {
display: grid;
gap: var(--sizing-sm);
grid-template-columns: repeat(1,minmax(0,1fr));
@ -11,13 +11,13 @@
margin-top: var(--sizing-base);
}
&.link__list {
&.link-list {
margin-bottom: 0;
}
}
@media screen and (min-width: 768px) {
.addon-links__wrapper {
.addon-links {
grid-template-columns: repeat(2,minmax(0,1fr));
& div:first-of-type {

4
src/assets/styles/components/badge-grid.css
View file

@ -1,4 +1,4 @@
.badge__grid {
.badge-grid {
display: grid;
gap: var(--sizing-md);
grid-template-columns: repeat(3,minmax(0,1fr));
@ -14,7 +14,7 @@
}
@media screen and (min-width: 768px) {
.badge__grid {
.badge-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}

106
src/assets/styles/components/media-grid.css
View file

@ -3,46 +3,54 @@
--grid-vertical: repeat(3,minmax(0,1fr));
}
.now__section--header {
.now-header {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
.now__section--header-buttons {
.now-header-buttons {
margin: 0 0 var(--sizing-lg);
& > button {
margin-bottom: var(--sizing-sm) !important;
&:last-of-type {
margin-right: 0 !important;
}
}
}
.now__section--header-wrapper {
.now-header-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.now__section--header-buttons > button {
margin-bottom: var(--sizing-sm) !important;
}
.now__section--header-buttons > button:last-of-type {
margin-right: 0 !important;
}
.media__grid {
display: grid;
gap: var(--sizing-sm);
}
.media__grid.square {
&.square {
grid-template-columns: var(--grid-square);
}
.media__grid.vertical {
& img {
width: 100%;
height: 100%;
}
}
&.vertical {
grid-template-columns: var(--grid-vertical);
}
.media__grid .item__wrapper {
& img {
width: 100%;
height: auto;
}
}
& .item__wrapper {
position: relative;
}
.media__grid .item__wrapper.shadow picture::after {
&.shadow picture::after {
position: absolute;
z-index: 1;
content: '';
@ -52,58 +60,50 @@
box-shadow: inset 0 -70px 50px -40px #000;
width: 100%;
height: calc(100% - 1px);
}
}
.media__grid a:hover img,
.media__grid a:focus img,
.media__grid a:active img {
& picture {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
}
& a:hover img,
& a:focus img,
& a:active img {
border-color: var(--accent-color-hover)
}
}
.media__grid .item__meta-text {
& .meta-text {
position: absolute;
z-index: 2;
padding: 0 var(--sizing-sm);
bottom: var(--sizing-sm);
width: 100%;
box-sizing: border-box;
}
.media__grid .item__meta-text .header,
.media__grid .item__meta-text .subheader {
& .header,
& .subheader {
color: var(--color-lightest);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}
}
.media__grid .item__meta-text .header {
& .header {
font-weight: var(--font-weight-bold);
}
}
}
.media__grid img {
& img {
border: 1px solid var(--accent-color);
border-radius: var(--rounded);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms;
}
.media__grid.square img {
width: 100%;
height: 100%;
}
.media__grid.vertical img {
width: 100%;
height: auto;
}
.media__grid .item__wrapper picture {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
}
@media screen and (min-width: 768px) {
@ -112,15 +112,15 @@
--grid-vertical: repeat(6,minmax(0,1fr));
}
.now__section--header-wrapper {
.now-header-wrapper {
flex-direction: row;
}
.now__section--header-buttons {
.now-header-buttons {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
.now__section--header-buttons > button {
& > button {
margin-bottom: 0 !important;
}
}
}

22
src/assets/styles/components/post-graph.css
View file

@ -1,25 +1,25 @@
.post-graph {
margin-top: var(--sizing-base);
margin-bottom: var(--sizing-base);
}
.post-graph__wrapper {
& .wrapper {
display: flex;
align-items: center;
height: var(--sizing-3xl);
margin-bottom: var(--sizing-sm);
}
.post-graph__progress {
& .year {
font-family: var(--font-mono);
}
& .progress {
background-color: var(--accent-color);
height: 100%;
}
}
.post-graph__year {
font-family: var(--font-mono);
}
.post-graph__progress,
.post-graph__data {
& .progress,
& .data {
margin-left: var(--sizing-sm);
}
}
}

6
src/assets/styles/pages/404.css
View file

@ -1,9 +1,9 @@
.four-oh-four__wrapper {
& .image__banner {
.four-oh-four-wrapper {
& .image-banner {
margin-bottom: var(--sizing-base);
}
& .page__header {
& .page-header {
margin-bottom: var(--sizing-xs);
}
}

6
src/assets/styles/pages/about.css
View file

@ -2,15 +2,15 @@
--avatar-size: 16rem;
}
.avatar__wrapper {
.avatar-wrapper {
margin-bottom: var(--sizing-xl);
width: 100%;
justify-content: center;
overflow: hidden;
& .avatar__wrapper--interior {
& .interior {
width: var(--avatar-size);
height: var(--avatar-size);;
height: var(--avatar-size);
border: 1px solid var(--accent-color);
border-radius: var(--rounded-full);
display: flex;

2
src/assets/styles/pages/blogroll.css
View file

@ -1,4 +1,4 @@
.blog--roll__icons {
.blog-roll-icons {
display: flex;
flex-direction: row !important;
gap: var(--sizing-xs);

10
src/assets/styles/pages/contact.css
View file

@ -1,4 +1,4 @@
.contact__wrapper {
.contact-wrapper {
display: flex;
flex-direction: column;
@ -7,24 +7,24 @@
resize: none;
}
& .column.contact__description p:first-child {
& .column.description p:first-child {
margin-top: 0;
}
}
.contact__success--header {
.contact-success-header {
margin: 0 0 var(--sizing-lg);
}
@media screen and (min-width: 768px) {
.contact__wrapper {
.contact-wrapper {
flex-direction: row;
& .column {
width: 50%;
}
& .column.contact__description {
& .column.description {
padding-right: var(--sizing-xl);
}
}

2
src/assets/styles/pages/links.css
View file

@ -1,4 +1,4 @@
.default__wrapper > .link__list {
.default-wrapper > .link-list {
margin-top: 0;
margin-bottom: var(--sizing-3xl);
}

12
src/assets/styles/pages/now.css
View file

@ -1,5 +1,5 @@
/* now */
.now__section--text {
.now-text {
padding-left: var(--sizing-base);
& p {
@ -14,20 +14,18 @@
}
}
.now__section--header {
.now-header {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
.default__wrapper > .now__section--header:first-of-type {
.default-wrapper > .now-header:first-of-type {
margin-top: 0 !important;
}
.link__list {
.link-list {
margin-top: 0;
}
.now__explainer {
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
.now-explainer {
padding-top: var(--sizing-lg);
}

4
src/index.html
View file

@ -15,9 +15,9 @@ pagination:
{{ post.date | date: "%B %e, %Y" }}
</time>
<a href="{{ post.url }}">
<h2 class="flex--centered">{{ post.data.title }}</h2>
<h2 class="flex-centered">{{ post.data.title }}</h2>
</a>
<div class="text--small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
<div class="text-small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
<span class="p-author h-card hidden">{{ meta.siteName }}</span>
<div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
{{ post.data.post_excerpt | markdown }}

2
src/links.html
View file

@ -5,7 +5,7 @@ pagination:
data: links
size: 30
---
<ul class="link__list">
<ul class="link-list">
{% for link in pagination.items %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>

4
src/pages/400.html
View file

@ -3,7 +3,7 @@ title: 400
layout: default
permalink: /400.html
---
<div class="text--centered">
<h2 class="page__header">{{ title }}</h2>
<div class="text-centered">
<h2 class="page-header">{{ title }}</h2>
<p>Nah, that's a bad request.</p>
</div>

10
src/pages/404.html
View file

@ -4,13 +4,13 @@ layout: default
permalink: /404.html
image: /assets/img/404.jpg
---
<div class="four-oh-four__wrapper">
{% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image__banner', 'eager' %}
<div class="text--centered">
<h2 class="page__header">{{ title }}</h2>
<div class="four-oh-four-wrapper">
{% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image-banner', 'eager' %}
<div class="text-centered">
<h2 class="page-header">{{ title }}</h2>
What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>
</div>
<hr class="large__spacing" />
<hr class="large-spacing" />
{% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
{% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}
</div>

6
src/pages/about.md
View file

@ -6,13 +6,13 @@ permalink: /about.html
{%- assign artist = music.artists | first -%}
{%- assign book = books | first -%}
{%- assign show = tv | first -%}
<div class="avatar__wrapper flex--centered">
<div class="avatar__wrapper--interior">
<div class="avatar-wrapper flex-centered">
<div class="interior">
{%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
{% image 'https://coryd.dev/.netlify/images/?url=/assets/img/avatar.png&w=600', about_alt, '', 'eager' %}
</div>
</div>
<h2 class="page__header text--centered">Hi, I'm Cory</h2>
<h2 class="page-header text-centered">Hi, I'm Cory</h2>
<strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, [music](https://coryd.dev/now#artists), writing, [reading](https://coryd.dev/now#books), [tv](https://coryd.dev/now#tv) and [movies](https://coryd.dev/now#movies). Lately I've been{% if artist %} listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>,{% endif %} reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.

4
src/pages/blogroll.html
View file

@ -8,7 +8,7 @@ description: 'These are awesome blogs that I enjoy and you may enjoy too.'
{% render "../assets/styles/pages/blogroll.css" %}
{% endcapture %}
<style>{{ css }}</style>
<h2 class="page__header">{{ title }}</h2>
<h2 class="page-header">{{ title }}</h2>
<p>You can <a onclick="clicky?.log('/blogroll','OPML download', 'download');" href="/blogroll.opml">download an OPML file</a> containing all of these feeds and import them into your RSS reader.</p>
<table>
<tr>
@ -20,7 +20,7 @@ description: 'These are awesome blogs that I enjoy and you may enjoy too.'
<tr>
<td>{{ blog.name }}</td>
<td><a href="{{ blog.url }}">{{ blog.url | replace: "https://", "" }}</a></td>
<td class="blog--roll__icons">
<td class="blog-roll-icons">
{%- if blog.feed -%}
<a href="{{ blog.feed }}">{% tablericon "rss" "Subscribe via RSS" %}</a>
{%- else -%}

6
src/pages/contact-success.html
View file

@ -3,10 +3,10 @@ title: Success
layout: default
permalink: /contact/success.html
---
<div class="text--centered">
<h2 class="contact__success--header">{{ title }}</h2>
<div class="text-centered">
<h2 class="contact-success-header">{{ title }}</h2>
I'll be in touch soon! <a href="/">Head home</a>
</div>
<hr class="large__spacing" />
<hr class="large-spacing" />
{% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
{% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}

8
src/pages/contact.md
View file

@ -4,9 +4,9 @@ layout: default
permalink: /contact.html
description: 'How to contact me.'
---
<h2 class="page__header">{{ title }}</h2>
<div class="contact__wrapper">
<div class="column contact__description">
<h2 class="page-header">{{ title }}</h2>
<div class="contact-wrapper">
<div class="column description">
<p>Fill out the form to get in touch. Or I've got other options 👇🏻</p>
<ul>
<li>Ping me on <a href="https://social.lol/@cory">Mastodon</a></li>
@ -28,7 +28,7 @@ description: 'How to contact me.'
<input type="email" name="email" placeholder="Email" required />
</label>
<textarea name="message" placeholder="Message" required></textarea>
<div class="flex--centered justify--centered">
<div class="flex-centered justify-centered">
<button type="submit">Send message</button>
</div>
</form>

2
src/pages/feeds.md
View file

@ -5,7 +5,7 @@ permalink: /feeds.html
description: 'Content feeds exposed by and generated from my site.'
---
<h2 class="page__header">{{ title }}</h2>
<h2 class="page-header">{{ title }}</h2>
These are web feeds, also known as [RSS](https://en.wikipedia.org/wiki/RSS) or [Atom](https://en.wikipedia.org/wiki/Atom_(web_standard)) feeds. Subscribe by copying the URL from the address bar into your newsreader. Visit [About Feeds](https://aboutfeeds.com) to get started with newsreaders and subscribing. It's free.

8
src/pages/now.html
View file

@ -4,11 +4,11 @@ layout: now
permalink: /now.html
description: "See what I'm doing now."
---
<h2 class="now__section--header flex--centered">
<h2 class="now-header flex-centered">
{% tablericon "clock-heart" "Currently" %}
Currently
</h2>
<div class="now__section--text">
<div class="now-text">
{% render "partials/now/status.liquid", status:status %}
<p>
{% tablericon "map-2" "Map" %}
@ -27,11 +27,11 @@ description: "See what I'm doing now."
<a href="https://coryd.dev/posts/2024/on-getting-tattooed/">Getting tattooed</a>.
</p>
</div>
<h2 class="now__section--header flex--centered">
<h2 class="now-header flex-centered">
{% tablericon "terminal-2" "Making" %}
Making
</h2>
<div class="now__section--text">
<div class="now-text">
<p>
{% tablericon "code" "Hacking" %}
Hacking away on projects like this page, my <a href="/">blog</a>, and whatever else I can find time for.

4
src/pages/referrals.md
View file

@ -4,11 +4,11 @@ layout: default
permalink: /referrals.html
description: 'Referral links for services that I use.'
---
<h2 class="page__header">{{ title }}</h2>
<h2 class="page-header">{{ title }}</h2>
Referral links for services I use. I save some money, and you do as well if you choose to use them.
<ul>
<ul class="link-list">
<li><a onclick="clicky?.log('/referrals', 'Clicky referral', 'click')" href="https://clicky.com/101449513">Clicky</a></li>
<li><a onclick="clicky?.log('/referrals','NextDNS referral', 'click')" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a></li>
<li><a onclick="clicky?.log('/referrals','DNSimple referral', 'click')" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a></li>

2
src/pages/stats.html
View file

@ -9,7 +9,7 @@ permalink: /stats.html
<p><strong>Top tags</strong></p>
{% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
<p><strong>Popular posts</strong></p>
<ol class="link__list">
<ol class="link-list">
{% assign posts = collections.posts | getPopularPosts: analytics %}
{% for post in posts limit: 10 %}
<li>

2
src/pages/tag-list.html
View file

@ -15,7 +15,7 @@ eleventyComputed:
{{ post.date | date: "%B %e, %Y" }}
</time>
<a href="{{ post.url }}">
<h2 class="flex--centered">{{ post.data.title }}</h2>
<h2 class="flex-centered">{{ post.data.title }}</h2>
</a>
<p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
<p><a href="{{ post.url }}">Read more →</a></p>

4
src/pages/uses.md
View file

@ -5,11 +5,11 @@ permalink: /uses.html
description: 'Software, tools and services that I use regularly.'
image: /assets/img/pages/uses.jpg
---
<h2 class="page__header">{{ title }}</h2>
<h2 class="page-header">{{ title }}</h2>
Software and services that I use for work and my own enjoyment.
{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image__banner', 'eager' %}
{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image-banner', 'eager' %}
<h3>Computer setup</h3>

4
src/posts/2023/2023-in-review.html
View file

@ -14,12 +14,12 @@ tags: ['books', 'music', 'development', 'Eleventy']
<li><a href="https://www.last.fm/user/coryd_">I listened to a bunch of music</a></li>
<li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
</ul>
<h2 class="now__section--header flex--centered">
<h2 class="now-header flex-centered">
{% tablericon "books" "Favorite books" %}
Favorite books
</h2>
{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %}
<h2 class="now__section--header flex--centered">
<h2 class="now-header flex-centered">
{% tablericon "vinyl" "Favorite albums" %}
Favorite books
</h2>

2
src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
View file

@ -111,7 +111,7 @@ export default function Now(props) {
<Reading books={books} />
<Movies movies={movies} />
<TV tv={tv} />
<p className="pt-8 text--centered text-xs text-gray-900 dark:text-gray-100">
<p className="pt-8 text-centered text-xs text-gray-900 dark:text-gray-100">
(This is a{' '}
<Link
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"

2
src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
View file

@ -203,7 +203,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity.
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=1000', 'Albums and artists', 'image__banner', 'lazy' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=1000', 'Albums and artists', 'image-banner', 'lazy' %}
[^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here.
[^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file.

2
src/posts/2023/drying-up-now-page-templates-eleventy.md
View file

@ -141,7 +141,7 @@ layout: main
{% render "partials/now/links.liquid", links:links %}
{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, loading: 'lazy' %}
{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6, loading: 'lazy' %}
<p class="text-xs text--centered pt-6">This is a
<p class="text-xs text-centered pt-6">This is a
<a href="https://nownownow.com/about">now page</a>, and if you have your own site,
<a href="https://nownownow.com/about">you should make one too</a>.</p>
```

2
src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
View file

@ -9,7 +9,7 @@ I've been using Fastmail for years now and have explored a number of different a
For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis.
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&w=1000', 'A diagram of my Fastmail workflow', 'image__banner', 'eager' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&w=1000', 'A diagram of my Fastmail workflow', 'image-banner', 'eager' %}
## Alias-specific rules

4
src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
View file

@ -45,7 +45,7 @@ Rendering the output is as simple as:
```liquid
{% if albumReleases.size > 0 %}
<h2 class="flex--centered">
<h2 class="flex-centered">
{% tablericon "calendar-time" "Anticipated albums" %}
Anticipated albums
</h2>
@ -64,6 +64,6 @@ Rendering the output is as simple as:
{% endraw %}
Leaving us with:
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&w=1000', 'Albums I\'m looking forward to', 'image__banner', 'eager' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&w=1000', 'Albums I\'m looking forward to', 'image-banner', 'eager' %}
[^1]: At this point, a dev playground.

2
src/posts/2023/lazy-select-based-pagination-eleventy.md
View file

@ -15,7 +15,7 @@ Given that I was already iterating through all pages in my posts collection, my
<div class="flex flex-row items-center">
<select
id="pagination"
class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text--centered"
class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text-centered"
style="text-align-last:center">
{% for pageEntry in pagination.pages %}
<option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>

2
src/posts/2023/now-page-grouping-episodes-of-same-show.md
View file

@ -12,7 +12,7 @@ I made a minor update to how I'm normalizing TV data for display on my now page.
By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show.
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&w=1000', 'Grouped TV episodes', 'image__banner' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&w=1000', 'Grouped TV episodes', 'image-banner' %}
{% raw %}

2
src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
View file

@ -168,6 +168,6 @@ Finally, if the page this all lives on is loaded by a client without JavaScript
All of this, yields the single line at the bottom of this image — updated on each visit.
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&w=1000', 'Now playing', 'image__banner', 'lazy' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&w=1000', 'Now playing', 'image-banner', 'lazy' %}
[^1]: Plus explicit conditions matching David Bowie and Minor Threat.

2
src/posts/2023/optimizing-for-performance-with-eleventy.md
View file

@ -126,6 +126,6 @@ For this page in particular, the images that are rendered above the fold are set
All of these boilerplate steps leave us with a quick to load, accessible and resilient site:
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&w=1000', 'Pagespeed scores for coryd.dev/now', 'image__banner' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&w=1000', 'Pagespeed scores for coryd.dev/now', 'image-banner' %}
[^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines.

2
src/posts/2023/road-to-madness-apple-music-charts.md
View file

@ -132,7 +132,7 @@ _Cool_[^4]. GitHub triggers a rebuild of the site every hour, Netlify builds it,
There are some significant issues with this approach: it doesn't capture listens to an album in a loop (like me playing the new Outer Heaven record today — hails 🤘). It can get wonky when my diff function hits a track order that elicits a false positive return value.
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&w=1000', 'Charlie Day standing in front of charts', 'image__banner', 'lazy' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&w=1000', 'Charlie Day standing in front of charts', 'image-banner', 'lazy' %}
"But Cory there's last.fm." I hear this, I love last.fm, but I've got concerns about its age, ownership and maintenance. I don't want to be on the wrong end of a scream test when the wrong (right?) server rack gets decommissioned.

2
src/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage.md
View file

@ -9,7 +9,7 @@ I've written before about [embedding music into my site](https://coryd.dev/posts
I could have kept depending on Last.fm and — don't get me wrong — I love Last.fm. It's one of those valuable, legacy services that's hanging on with a rich user base and historical recommendations. I'm going to keep scrobbling data there and to ListenBrainz[^1].
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&w=1000', 'A diagram of the scrobbling architecture', 'image__banner', 'eager' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&w=1000', 'A diagram of the scrobbling architecture', 'image-banner', 'eager' %}
What I've long wanted is something that sits on infrastructure I control, stores my own data and lets me present roughly the same data. Given that Plex will issue outbound webhooks, I thought I'd set up an edge function over at Netlify and point a webhook at it to see what I could do with the inbound payload. What Plex sends is fairly lightweight and ended up needing to be read in from form data on the `POST`, but it was enough to work with.

2
src/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy.md
View file

@ -99,7 +99,7 @@ export const img = async (
const generatePlaceholder = async () => {
return htmlmin.minify(
`<div class="flex--centered image__placeholder ${shape}">${icon}</div>`,
`<div class="flex-centered image__placeholder ${shape}">${icon}</div>`,
{ collapseWhitespace: true }
);
};

6
src/posts/2024/link-blogging-using-readwise.md
View file

@ -47,11 +47,11 @@ This fetches links from my archive (so that it's much more likely that I've read
{% raw %}
```liquid
{% if links.size > 0 %}
<h2 class="flex--centered">
<h2 class="flex-centered">
{% tablericon "link" "Links" %}
Links
</h2>
<ul class="link__list">
<ul class="link-list">
{% for link in links limit: 5 %}
<li>
<a class="no-underline" href="{{link.url}}" title="{{link.title | escape}}">
@ -78,7 +78,7 @@ pagination:
{% for link in pagination.items %}
<article class="h-entry">
<a class="no-underline" href="{{ link.url }}">
<h2 class="flex--centered">{{ link.title }}</h2>
<h2 class="flex-centered">{{ link.title }}</h2>
</a>
<time class="dt-published" datetime="{{ link.date }}">
{{ link.date | date: "%m.%Y" }}

2
src/posts/2024/link-page-improvements.md
View file

@ -57,7 +57,7 @@ This is then implemented in the `links.html` page template:
{%- assign shareLink = link.url | findPost: linkPosts -%}
<!-- template stuff -->
{%- if shareLink %}
<a class="brand-mastodon icon--small" href="{{ shareLink }}">
<a class="brand-mastodon icon-small" href="{{ shareLink }}">
{% tablericon "brand-mastodon" "Mastodon post" %}
</a>
{% endif -%}

2
src/posts/2024/on-getting-tattooed.md
View file

@ -27,7 +27,7 @@ My parents started getting tattooed in their 50s, thinking it would be a cheaper
Each piece was important to me when I got it and remains important to me now. They're references to and reminders of important moments and I enjoy every session[^6]. But, for now, my shoulder is sore.
{% capture fallbackIcon %}{% tablericon "photo" "A photo of the Sturgill Simpson-inspired half sleeve referenced above." %}{% endcapture %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&w=1000', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image__banner', 'eager' %}
{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&w=1000', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image-banner', 'eager' %}
[^1]: My wife got the same piece done — there was one pointing to the driveway of the house we got married at. It burned down in the Butte fire.
[^2]: She got elected!