diff --git a/package-lock.json b/package-lock.json index 47407097..b99ff40b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "24.19.1", + "version": "24.19.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "24.19.1", + "version": "24.19.2", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.5.0", diff --git a/package.json b/package.json index 4301866a..8f27e984 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "24.19.1", + "version": "24.19.2", "description": "The source for my personal site. Built using 11ty (and other tools).", "type": "module", "scripts": { diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 0ecd8d25..4b3f8ff1 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -25,35 +25,6 @@ body { background: var(--accent-color); } -.books, -.collected, -.concerts, -.country, -.favorite, -.link, -.movies, -.tv, -.music, -.posts, -.tattoo { - &.books { --section-color: var(--books); } - &.collected { --section-color: var(--collected); } - &.concerts { --section-color: var(--concerts); } - &.country { --section-color: var(--country); } - &.favorite { --section-color: var(--favorite); } - &.link { --section-color: var(--link); } - &.movies, &.tv { --section-color: var(--tv); } - &.music { --section-color: var(--music); } - &.posts { --section-color: var(--posts); } - &.tattoo { --section-color: var(--tattoo); } - - color: var(--section-color); - - & svg { - stroke: var(--section-color); - } -} - p { margin: var(--margin-vertical-base-horizontal-zero); overflow: visible; @@ -116,38 +87,66 @@ svg { stroke-width: var(--stroke-width-default); } +/* brand colors */ +.article, +.books, +.brand-github, +.brand-mastodon, +.brand-npm, +.coffee, +.collected, +.concerts, +.country, +.device-tv-old, +.device-watch, +.favorite, +.headphones, +.heart-handshake, +.info-circle, +.link, +.mail, +.mail-plus, +.movies, +.music, +.rss, +.search, +.tattoo, +.tv { + &.article { --section-color: var(--article); } + &.books { --section-color: var(--books); } + &.brand-github { --section-color: var(--brand-github); } + &.brand-mastodon { --section-color: var(--brand-mastodon); } + &.brand-npm { --section-color: var(--brand-npm); } + &.coffee { --section-color: var(--brand-buy-me-a-coffee); } + &.collected { --section-color: var(--collected); } + &.concerts { --section-color: var(--concerts); } + &.country { --section-color: var(--country); } + &.device-tv-old { --section-color: var(--tv); } + &.device-watch { --section-color: var(--now); } + &.favorite { --section-color: var(--favorite); } + &.headphones { --section-color: var(--music); } + &.heart-handshake { --section-color: var(--webrings); } + &.info-circle { --section-color: var(--about); } + &.link { --section-color: var(--link); } + &.mail { --section-color: var(--brand-gmail); } + &.mail-plus { --section-color: var(--newsletter); } + &.movies, &.tv { --section-color: var(--tv); } + &.music { --section-color: var(--music); } + &.rss { --section-color: var(--brand-rss); } + &.search { --section-color: var(--search); } + &.tattoo { --section-color: var(--tattoo); } + + color: var(--section-color); + + & svg { + stroke: var(--section-color); + } +} + /* links */ a { color: var(--accent-color); text-decoration: none; - - &.mail > svg { stroke: var(--brand-gmail); } - &.brand-github > svg { stroke: var(--brand-github); } - &.brand-npm > svg { stroke: var(--brand-npm); } - &.brand-mastodon > svg { stroke: var(--brand-mastodon); } - &.article > svg { stroke: var(--posts); } - &.books > svg { stroke: var(--books); } - &.device-watch > svg { stroke: var(--now); } - &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); } - &.device-tv-old > svg { stroke: var(--tv); } - &.favorite > svg { stroke: var(--favorite); } - &.headphones > svg { stroke: var(--music); } - &.heart-handshake > svg { stroke: var(--webrings); } - &.info-circle > svg { stroke: var(--about); } - &.link > svg { stroke: var(--link); } - &.mail-plus > svg { stroke: var(--newsletter); } - &.rss > svg { stroke: var(--brand-rss); } - &.search > svg { stroke: var(--search); } - - & svg { - stroke: var(--accent-color); - - &[data-tablericon-name^="arrow-"]:hover, - &[data-tablericon-name^="arrow-"]:active, - &[data-tablericon-name^="arrow-"]:focus { - stroke: var(--accent-color-hover); - } - } } :is(a:hover, a:active, a:focus) svg[data-tablericon-name^="arrow-"] { @@ -197,69 +196,20 @@ h1, h2, h3, h4, h5, h6 { margin: var(--margin-vertical-base-horizontal-zero); } -h1 { - font-size: var(--font-size-2xl); +h1 { font-size: var(--font-size-2xl); } +h2 { font-size: var(--font-size-xl); } +h3 { font-size: var(--font-size-lg); } +h4 { font-size: var(--font-size-base); } +h5 { font-size: var(--font-size-md); } +h6 { font-size: var(--font-size-sm); } - @media screen and (min-width: 768px) { - font-size: var(--font-size-3xl); - } -} - -h2 { - font-size: var(--font-size-xl); - - @media screen and (min-width: 768px) { - font-size: var(--font-size-2xl); - } -} - -h3 { - font-size: var(--font-size-lg); - - @media screen and (min-width: 768px) { - font-size: var(--font-size-xl); - } -} -h4 { - font-size: var(--font-size-base); - - @media screen and (min-width: 768px) { - font-size: var(--font-size-lg); - } -} - -h5 { - font-size: var(--font-size-md); - - @media screen and (min-width: 768px) { - font-size: var(--font-size-base); - } -} - -h6 { - font-size: var(--font-size-sm); - - @media screen and (min-width: 768px) { - font-size: var(--font-size-md); - } -} - -.section-header-wrapper { - justify-content: space-between; - margin: var(--spacing-xl) 0 var(--spacing-lg); - - & .section-header { - margin: 0; - } -} - -.section-header { - margin: var(--spacing-xl) 0 var(--spacing-lg); - line-height: var(--line-height-sm); - - &.posts { - margin: 0 0 var(--spacing-lg); - } +@media screen and (min-width: 768px) { + h1 { font-size: var(--font-size-3xl); } + h2 { font-size: var(--font-size-2xl); } + h3 { font-size: var(--font-size-xl); } + h4 { font-size: var(--font-size-lg); } + h5 { font-size: var(--font-size-base); } + h6 { font-size: var(--font-size-md); } } /* dividers */ @@ -268,15 +218,10 @@ hr { background-color: var(--gray-light); border: 0; margin: var(--margin-vertical-base-horizontal-zero); - - & + .section-header { - margin-top: 0; - } } /* tables */ table { - display: block; overflow-x: auto; width: 100%; border: var(--border-gray); @@ -375,11 +320,6 @@ th { .default-wrapper { padding-top: var(--spacing-2xl); - & .posts-wrapper article:last-of-type, - & .article-widget-wrapper:last-of-type { - border-bottom: none; - } - & > h2 { margin-top: 0; } @@ -410,29 +350,6 @@ footer { } } -.status, -article { - margin-bottom: var(--spacing-base); -} - -.status, -.posts-wrapper article { - border-bottom: var(--border-gray); -} - -.status p:first-child { - margin-top: 0; -} - -.article-widget-wrapper { - border-bottom: var(--border-gray); - margin-bottom: var(--spacing-base); - - & article { - border-bottom: none; - } -} - footer { & .updated { text-align: center; @@ -482,21 +399,36 @@ footer { /* articles */ article { + margin-bottom: var(--spacing-base); + border-bottom: var(--border-gray); + + &:last-of-type { + border-bottom: none; + } + & h3 { margin: 0; } - & time { + &:not(:has(h3)) p { + margin-top: 0; + } + + & .post-meta { display: flex; align-items: center; gap: var(--spacing-sm); - color: var(--gray-dark); - font-size: var(--font-size-sm); & svg { + stroke: var(--gray-dark); width: var(--sizing-svg-sm); height: var(--sizing-svg-sm); } + + & time { + color: var(--gray-dark); + font-size: var(--font-size-sm); + } } } diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index 13ef5e54..5694f67a 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -34,16 +34,4 @@ button, transition-timing-function: var(--transition-ease-in-out); transition-duration: var(--transition-duration-default); } - - &.secondary { - color: var(--accent-color); - background: transparent; - } - - &.secondary:not(.theme-toggle):hover, - &.secondary:not(.theme-toggle):active, - &.secondary:not(.theme-toggle):focus { - color: var(--accent-color-hover); - background: transparent; - } } \ No newline at end of file diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 33a69364..6caa36d1 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -15,10 +15,9 @@ .media-grid { display: grid; gap: var(--spacing-sm); - margin-bottom: var(--spacing-base); - &.no-pagination { - margin-bottom: 0; + & ~ .pagination { + margin-top: var(--spacing-base); } &.square { diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css index 185a3867..805c25c2 100644 --- a/src/assets/styles/components/modal.css +++ b/src/assets/styles/components/modal.css @@ -2,7 +2,7 @@ width: 100%; height: 100%; inset: 0; - background: var(--gray-dark-transparent); + background: color-mix(in srgb, var(--gray-dark), transparent 10%); position: fixed; z-index: 3; diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css index 88638466..e8c4338f 100644 --- a/src/assets/styles/components/music-chart.css +++ b/src/assets/styles/components/music-chart.css @@ -35,7 +35,7 @@ max-width: 40%; @media screen and (min-width: 768px) { - margin-left: var(--spacing-lg); + margin-top: 0; } } @@ -55,18 +55,17 @@ } } - & .presentation .info { + & .info { display: flex; flex-direction: column; - gap: var(--spacing-sm); + gap: var(--spacing-xs); @media screen and (min-width: 768px) { max-width: calc(75% - var(--sizing-lg)); } } - & .meta, - & .presentation { + & .meta { justify-content: start; gap: var(--spacing-md); @@ -97,7 +96,10 @@ & .title { font-weight: var(--font-weight-bold); - line-height: var(--line-height-md); + + &.window { + margin-bottom: calc(var(--spacing-sm) * -1); + } } & .title, diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css index 759076d1..0940f8fb 100644 --- a/src/assets/styles/components/paginator.css +++ b/src/assets/styles/components/paginator.css @@ -21,7 +21,7 @@ & span.disabled svg[data-tablericon-name^="arrow-"] { cursor: not-allowed; - stroke: color-mix(in srgb, var(--text-color), transparent 50%); + stroke: var(--gray-medium); stroke-width: var(--stroke-width-default); } } \ No newline at end of file diff --git a/src/assets/styles/components/progress-bar.css b/src/assets/styles/components/progress-bar.css index 0cf5da69..bae94f5e 100644 --- a/src/assets/styles/components/progress-bar.css +++ b/src/assets/styles/components/progress-bar.css @@ -2,7 +2,7 @@ display: flex; height: var(--sizing-lg); width: 100%; - background-color: var(--gray-light-transparent); + background-color: var(--gray-light); border-radius: var(--border-radius-full); overflow: hidden; diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css index f7be347d..0421ce47 100644 --- a/src/assets/styles/components/tab-buttons.css +++ b/src/assets/styles/components/tab-buttons.css @@ -19,14 +19,6 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) { margin-right: var(--spacing-xs); } -#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover, -#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active, -#tracks-window:not(:checked) ~ [for="tracks-window"]:hover, -#tracks-window:not(:checked) ~ [for="tracks-window"]:active { - color: var(--accent-color-hover); - background: transparent; -} - #tracks-recent:checked ~ [for="tracks-recent"], #tracks-window:checked ~ [for="tracks-window"] { cursor: not-allowed; @@ -38,4 +30,11 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) { #tracks-window:not(:checked) ~ [for="tracks-window"] { color: var(--accent-color); background: transparent; +} + +#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover, +#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active, +#tracks-window:not(:checked) ~ [for="tracks-window"]:hover, +#tracks-window:not(:checked) ~ [for="tracks-window"]:active { + color: var(--accent-color-hover); } \ No newline at end of file diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css index 791ca57a..3cd5753e 100644 --- a/src/assets/styles/defaults/vars.css +++ b/src/assets/styles/defaults/vars.css @@ -28,12 +28,9 @@ --gray-light: var(--gray-200); --gray-lighter: var(--gray-100); + --gray-medium: var(--gray-500); --gray-dark: var(--gray-950); - /* semi-transparent overlay color */ - --gray-dark-transparent: #000000b3; - --gray-light-transparent: #d9dee499; - /* base theme */ --color-lightest: var(--gray-50); --color-darkest: var(--gray-1000); @@ -52,6 +49,7 @@ --brand-buy-me-a-coffee: #40dca5; --brand-rss: #f26522; + --article: #008080; --about: #ff6347; --books: #32cd32; --collected: #b5651d; @@ -64,7 +62,6 @@ --music: #1e90ff; --newsletter: #40e0d0; --now: #ff1493; - --posts: #008080; --search: #4682b4; --sun: #ffa500; --tattoo: #b22222; @@ -72,9 +69,6 @@ --warning: #ff8c00; --webrings: #da70d6; - /* outline */ - --outline-default: 2px dashed var(--accent-color); - /* borders */ --border-default: 1px solid var(--accent-color); --border-gray: 1px solid var(--gray-light); diff --git a/src/includes/partials/home/status.liquid b/src/includes/partials/home/intro.liquid similarity index 74% rename from src/includes/partials/home/status.liquid rename to src/includes/partials/home/intro.liquid index 1116b0d3..99ff6e39 100644 --- a/src/includes/partials/home/status.liquid +++ b/src/includes/partials/home/intro.liquid @@ -1,6 +1,4 @@ -
+

I'm a software developer based in Camarillo, California. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, music, writing, reading, tv and movies.

{% render "partials/blocks/now-playing.liquid", music:music %} -
- {% render "partials/home/recent-activity.liquid" music:music, books:books, tv:tv, movies:movies, links:links %}
\ No newline at end of file diff --git a/src/includes/partials/home/recent-activity.liquid b/src/includes/partials/home/recent-activity.liquid index 012216c7..30c36375 100644 --- a/src/includes/partials/home/recent-activity.liquid +++ b/src/includes/partials/home/recent-activity.liquid @@ -3,15 +3,17 @@ {%- assign movie = movies.recentlyWatched | first -%} {%- assign book = books | bookStatus: 'finished' | bookSortDescending | first -%} {%- assign link = links | first -%} -

- {% tablericon "activity" "Recent activity" %} - Recent activity -

- -{% render "partials/blocks/banners/rss.liquid", url: "/feeds", text: "Subscribe to my movies, books, links or activity feed(s)" %} \ No newline at end of file +
+

+ {% tablericon "activity" "Recent activity" %} + Recent activity +

+ + {% render "partials/blocks/banners/rss.liquid", url: "/feeds", text: "Subscribe to my movies, books, links or activity feed(s)" %} +
\ No newline at end of file diff --git a/src/includes/partials/home/recent-posts.liquid b/src/includes/partials/home/recent-posts.liquid index c76b12bf..d9314bc8 100644 --- a/src/includes/partials/home/recent-posts.liquid +++ b/src/includes/partials/home/recent-posts.liquid @@ -1,21 +1,19 @@ -
-
-

- {% tablericon "clock" "Recent posts" %} - Recent posts -

-
- {%- for post in posts limit: 5 -%} -
+

+ {% tablericon "clock" "Recent posts" %} + Recent posts +

+{%- for post in posts limit: 5 -%} +
+
+ {%- if post.featured -%}{% tablericon "star" "featured" %}{%- endif -%} -

- {{ post.title }} -

- {{ post.description | normalize_whitespace | markdown | truncatewords: 50 }} -
- {%- endfor -%} - View all posts {% tablericon "arrow-right" "View all posts" %} -
\ No newline at end of file + +

+ {{ post.title }} +

+ {{ post.description | normalize_whitespace | markdown | truncatewords: 50 }} +
+{%- endfor -%} +View all posts {% tablericon "arrow-right" "View all posts" %} \ No newline at end of file diff --git a/src/includes/partials/media/music/chart.liquid b/src/includes/partials/media/music/chart.liquid index d942781b..383df89b 100644 --- a/src/includes/partials/media/music/chart.liquid +++ b/src/includes/partials/media/music/chart.liquid @@ -6,21 +6,17 @@ {%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
  • -
    -
    -
    - {{ item.title }} -
    - {%- capture playsLabel -%} - {%- if item.plays > 1 -%} - plays - {%- else -%} - play - {%- endif -%} - {%- endcapture -%} -
    {{ item.artist }}
    -
    {{ item.plays }} {{ playsLabel }}
    -
    +
    + {{ item.title }} + {%- capture playsLabel -%} + {%- if item.plays > 1 -%} + plays + {%- else -%} + play + {%- endif -%} + {%- endcapture -%} + {{ item.artist }} + {{ item.plays }} {{ playsLabel }}
    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
    diff --git a/src/includes/partials/media/music/recent.liquid b/src/includes/partials/media/music/recent.liquid index 969e4a07..41d977f6 100644 --- a/src/includes/partials/media/music/recent.liquid +++ b/src/includes/partials/media/music/recent.liquid @@ -19,10 +19,8 @@ />
    -
    - {{ item.title }} -
    -
    {{ item.artist }}
    + {{ item.title }} + {{ item.artist }}
    diff --git a/src/includes/partials/media/watching/grid.liquid b/src/includes/partials/media/watching/grid.liquid index 75665b7f..162ad26a 100644 --- a/src/includes/partials/media/watching/grid.liquid +++ b/src/includes/partials/media/watching/grid.liquid @@ -1,5 +1,5 @@ {%- assign hidePagination = count or data.pages.size <= 1 -%} -
    +
    {%- assign items = data.items | default: mediaItems -%} {%- for item in items limit: count -%} {%- capture alt -%}{{ item.title | escape }} ({{ item.year }}){% endcapture %} diff --git a/src/pages/dynamic/index.html b/src/pages/dynamic/index.html index 4fdca191..659d51f2 100644 --- a/src/pages/dynamic/index.html +++ b/src/pages/dynamic/index.html @@ -2,5 +2,6 @@ layout: default permalink: / --- -{% render "partials/home/status.liquid" music:music, books:books.all, tv:tv, movies:movies, links:links %} +{% render "partials/home/intro.liquid" music:music %} +{% render "partials/home/recent-activity.liquid" music:music, books:books.all, tv:tv, movies:movies, links:links %} {% render "partials/home/recent-posts.liquid" posts:posts %} \ No newline at end of file diff --git a/src/pages/dynamic/music/index.html b/src/pages/dynamic/music/index.html index a764dd0c..e5e5abb3 100644 --- a/src/pages/dynamic/music/index.html +++ b/src/pages/dynamic/music/index.html @@ -12,28 +12,26 @@ schema: music-index

    You can also take a look at the concerts I've been to.

    {% render "partials/blocks/now-playing.liquid", music:music %}
    -

    +

    {% tablericon "microphone-2" "Artists" %} Artists

    {% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %} -

    +

    {% tablericon "vinyl" "Albums" %} Albums

    {% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %} -
    -

    - - {% tablericon "playlist" "Tracks" %} - Tracks - -

    -
    +

    + + {% tablericon "playlist" "Tracks" %} + Tracks + +

    @@ -47,7 +45,7 @@ schema: music-index
    {% if albumReleases.size > 0 %} -

    +

    {% tablericon "calendar-time" "Anticipated albums" %} Anticipated albums

    diff --git a/src/pages/dynamic/music/periods/3-months.html b/src/pages/dynamic/music/periods/3-months.html index 39069a06..62028f88 100644 --- a/src/pages/dynamic/music/periods/3-months.html +++ b/src/pages/dynamic/music/periods/3-months.html @@ -12,21 +12,21 @@ schema: music-period

    See more of the artists, albums or tracks I've listened to over the last 3 months. Or take a look at what I've listened to this week or this month.

    You can also take a look at the concerts I've been to.

    -

    +

    {% tablericon "microphone-2" "Artists" %} Artists

    {% render "partials/media/grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8, loading: "eager" %} -

    +

    {% tablericon "vinyl" "Albums" %} Albums

    {% render "partials/media/grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %} -

    +

    {% tablericon "playlist" "Tracks" %} Tracks diff --git a/src/pages/dynamic/music/periods/this-month.html b/src/pages/dynamic/music/periods/this-month.html index f08e492f..71cc1b4d 100644 --- a/src/pages/dynamic/music/periods/this-month.html +++ b/src/pages/dynamic/music/periods/this-month.html @@ -12,21 +12,21 @@ schema: music-period

    See more of the artists, albums or tracks I've listened to this month. Or take a look at what I've listened to this week or over the last 3 months.

    You can also take a look at the concerts I've been to.

    -

    +

    {% tablericon "microphone-2" "Artists" %} Artists

    {% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8, loading: "eager" %} -

    +

    {% tablericon "vinyl" "Albums" %} Albums

    {% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %} -

    +

    {% tablericon "playlist" "Tracks" %} Tracks diff --git a/src/pages/dynamic/posts/index.html b/src/pages/dynamic/posts/index.html index 13017129..0d7c10c9 100644 --- a/src/pages/dynamic/posts/index.html +++ b/src/pages/dynamic/posts/index.html @@ -7,18 +7,18 @@ pagination: alias: posts permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html" --- -
    - {% for post in pagination.items %} -
    +

    +

    + {{ post.title }} +

    +

    {{ post.description }}

    + +{% endfor %} {% render "partials/nav/paginator.liquid", pagination:pagination %} \ No newline at end of file diff --git a/src/pages/dynamic/posts/post.html b/src/pages/dynamic/posts/post.html index 145314d2..0bae249a 100644 --- a/src/pages/dynamic/posts/post.html +++ b/src/pages/dynamic/posts/post.html @@ -8,10 +8,12 @@ permalink: "{{ post.slug }}/index.html" schema: blog ---
    -