diff --git a/config/filters/index.js b/config/filters/index.js index c003ff2f..a814e5b9 100644 --- a/config/filters/index.js +++ b/config/filters/index.js @@ -68,6 +68,17 @@ export default { return tagMap[url] || '' }, + // posts + filterByPostType: (posts, postType) => { + if (postType === 'featured') return posts.reverse().filter(post => post.data.featured === true).splice(0, 3) + return posts.splice(0, 5) + }, + truncateByWordCount: (text, wordCount) => { + const words = sanitizeHtml(text, { allowedTags: ['']}).split(/\s+/); + if (words.length > wordCount) return `

${words.slice(0, wordCount).join(' ')}...

` + return text + }, + // authors authorLookup: (url) => { if (!url) return null diff --git a/package.json b/package.json index 9badee2b..0ce6383a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "12.9.11", + "version": "13.0.0", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid index afa81880..e1aff073 100644 --- a/src/_includes/base.liquid +++ b/src/_includes/base.liquid @@ -14,8 +14,7 @@ {{ pageTitle }} - - + diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid index 7e76cda1..e4233178 100644 --- a/src/_includes/now.liquid +++ b/src/_includes/now.liquid @@ -6,12 +6,12 @@ layout: default {% endcapture %} {{ content }} -
-

+
+

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

-
+
@@ -30,12 +30,12 @@ layout: default -
-

+
+

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

-
+
@@ -54,12 +54,12 @@ layout: default -
-

+
+

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

-
+
@@ -83,19 +83,19 @@ layout: default {% render "partials/now/track-chart.liquid", data:musicCharts.year.topTracks.data, mostPlayed:musicCharts.year.topTracks.mostPlayed %}
{% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %} -

+

{% tablericon "books" "Books" %} Books

{% assign bookData = books | bookStatus: 'started' | reverse %} {% render "partials/now/media-grid.liquid", data:bookData, shape: "vertical", count: 6 %} {% render "partials/recent-links.liquid", links:collections.links %} -

+

{% tablericon "movie" "Movies" %} Movies

{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %} -

+

{% tablericon "device-tv" "TV" %} TV

diff --git a/src/_includes/partials/banners/github.liquid b/src/_includes/partials/banners/github.liquid index b730e66d..9a693e8f 100644 --- a/src/_includes/partials/banners/github.liquid +++ b/src/_includes/partials/banners/github.liquid @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/src/_includes/partials/banners/npm.liquid b/src/_includes/partials/banners/npm.liquid index f84a1aea..e4e1908b 100644 --- a/src/_includes/partials/banners/npm.liquid +++ b/src/_includes/partials/banners/npm.liquid @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/src/_includes/partials/banners/old-post.liquid b/src/_includes/partials/banners/old-post.liquid index d3d272ff..bcb9ece2 100644 --- a/src/_includes/partials/banners/old-post.liquid +++ b/src/_includes/partials/banners/old-post.liquid @@ -1,6 +1,6 @@ {% assign isOldPost = date | oldPost %} {% if isOldPost %} {% endif %} \ No newline at end of file diff --git a/src/_includes/partials/banners/rss.liquid b/src/_includes/partials/banners/rss.liquid index 5b219668..d245427d 100644 --- a/src/_includes/partials/banners/rss.liquid +++ b/src/_includes/partials/banners/rss.liquid @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/src/_includes/partials/nav/link.liquid b/src/_includes/partials/nav/link.liquid index 148274e1..d452e9bd 100644 --- a/src/_includes/partials/nav/link.liquid +++ b/src/_includes/partials/nav/link.liquid @@ -9,11 +9,12 @@ {% else %} {% if icon %} - + {% tablericon icon link %} + {{ link }} {% else %} - + {{ link }} {% endif %} diff --git a/src/_includes/partials/nav/menu.liquid b/src/_includes/partials/nav/menu.liquid index 35d1e9db..7f625cf8 100644 --- a/src/_includes/partials/nav/menu.liquid +++ b/src/_includes/partials/nav/menu.liquid @@ -1,8 +1,13 @@ - +
\ No newline at end of file diff --git a/src/_includes/partials/now/albumReleases.liquid b/src/_includes/partials/now/albumReleases.liquid index f33a2421..0324ba00 100644 --- a/src/_includes/partials/now/albumReleases.liquid +++ b/src/_includes/partials/now/albumReleases.liquid @@ -1,5 +1,5 @@ {% if albumReleases.size > 0 %} -

+

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

diff --git a/src/_includes/partials/posts.liquid b/src/_includes/partials/posts.liquid new file mode 100644 index 00000000..07f5c9fa --- /dev/null +++ b/src/_includes/partials/posts.liquid @@ -0,0 +1,28 @@ +{%- assign posts = postData | filterByPostType: postType %} +
+
+

+ {% tablericon icon title %} + {{ title }} +

+
+ {% for post in posts %} +
+
+ {% tablericon "calendar-month" "Date" %} + +
+ +

{{ post.data.title }}

+ + + + {{ post.data.post_excerpt | markdown | truncateByWordCount: 25 }} +
+ {% endfor %} + {% if postType != 'featured' %} + View all posts {% tablericon "arrow-right" "View all posts" %} + {% endif %} +
\ No newline at end of file diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid index d77f275d..1d81193c 100644 --- a/src/_includes/post.liquid +++ b/src/_includes/post.liquid @@ -6,12 +6,12 @@ schema: blog {%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
-
+
+ {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %} + {% tablericon "calendar-month" "Date" %} - {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}

{{ title }}

{% render "partials/tags.liquid", tags:tags %}
diff --git a/src/assets/fonts/MonoLisa.min.woff2 b/src/assets/fonts/MonoLisa.min.woff2 new file mode 100644 index 00000000..c31ee5fd Binary files /dev/null and b/src/assets/fonts/MonoLisa.min.woff2 differ diff --git a/src/assets/fonts/Poppins-Bold.min.woff2 b/src/assets/fonts/Poppins-Bold.min.woff2 deleted file mode 100644 index 6b43d3c6..00000000 Binary files a/src/assets/fonts/Poppins-Bold.min.woff2 and /dev/null differ diff --git a/src/assets/fonts/Poppins-Bold.woff2 b/src/assets/fonts/Poppins-Bold.woff2 deleted file mode 100644 index fd7e21b3..00000000 Binary files a/src/assets/fonts/Poppins-Bold.woff2 and /dev/null differ diff --git a/src/assets/fonts/Poppins-Regular.min.woff2 b/src/assets/fonts/Poppins-Regular.min.woff2 deleted file mode 100644 index a82284e9..00000000 Binary files a/src/assets/fonts/Poppins-Regular.min.woff2 and /dev/null differ diff --git a/src/assets/fonts/Poppins-Regular.woff2 b/src/assets/fonts/Poppins-Regular.woff2 deleted file mode 100644 index bd4e3bd7..00000000 Binary files a/src/assets/fonts/Poppins-Regular.woff2 and /dev/null differ diff --git a/src/assets/img/avatar.png b/src/assets/img/avatar.png index 516061a7..36b9dbcb 100644 Binary files a/src/assets/img/avatar.png and b/src/assets/img/avatar.png differ diff --git a/src/assets/img/avatar.webp b/src/assets/img/avatar.webp index 0b566ca7..97f25ff8 100644 Binary files a/src/assets/img/avatar.webp and b/src/assets/img/avatar.webp differ diff --git a/src/assets/img/pages/uses.jpg b/src/assets/img/pages/uses.jpg deleted file mode 100644 index cb6f0fa4..00000000 Binary files a/src/assets/img/pages/uses.jpg and /dev/null differ diff --git a/src/assets/scripts/media-toggles.js b/src/assets/scripts/media-toggles.js index a720daa2..0349bb10 100644 --- a/src/assets/scripts/media-toggles.js +++ b/src/assets/scripts/media-toggles.js @@ -25,6 +25,6 @@ window.onload = () => { }) } - const buttonSets = document.querySelectorAll('.now-header-buttons') + const buttonSets = document.querySelectorAll('.section-header-buttons') buttonSets.forEach(initializeButtonSet) } \ No newline at end of file diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 12403d54..24a2615b 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -1,8 +1,9 @@ body, html { color: var(--text-color); - font-family: var(--font-sans); + font-family: var(--font-mono); font-size: var(--font-size-base); + letter-spacing: -.05rem; line-height: var(--line-height-base); background: var(--background-color); accent-color: var(--accent-color) @@ -37,7 +38,6 @@ body::-webkit-scrollbar { ::-webkit-scrollbar-thumb { background: var(--accent-color); - border-radius: var(--rounded-full); } ::-webkit-scrollbar-track { @@ -46,15 +46,24 @@ body::-webkit-scrollbar { ::-webkit-scrollbar-button { background-color: var(--accent-color); - border-radius: var(--rounded); } -p, blockquote { line-height: var(--line-height-lg); margin: var(--sizing-base) 0; } +p { + margin: var(--sizing-base) 0; + + & a { + text-decoration: underline; + text-decoration-line: underline; + text-decoration-style: dashed; + text-underline-offset: var(--sizing-xs); + } +} + blockquote { font-size: var(--font-size-lg); padding-left: var(--sizing-lg); @@ -82,6 +91,14 @@ a.linked-header { sup.footnote-ref { line-height: var(--line-height-xs); + + & a { + text-decoration: none; + } +} + +.footnote-item a { + text-decoration: none; } strong, @@ -139,6 +156,37 @@ h4 { font-size: var(--font-size-lg) } h5 { font-size: var(--font-size-base) } h6 { font-size: var(--font-size-sm) } +.section-header-wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.section-header { + margin: var(--sizing-3xl) 0 var(--sizing-lg); + + &.posts { + margin: 0 0 var(--sizing-lg); + } +} + +.default-wrapper > .section-header:first-of-type { + margin-top: 0; +} + +.section-header-buttons { + margin: 0 0 var(--sizing-lg); + + & > button { + margin-bottom: var(--sizing-sm); + + &:last-of-type { + margin-right: 0; + } + } +} + +/* dividers */ hr { height: 1px; background-color: var(--gray-light); @@ -157,7 +205,6 @@ table { max-width: fit-content; margin: 0 auto; white-space: nowrap; - border-radius: var(--rounded); border: 1px solid var(--gray-light); } @@ -194,25 +241,31 @@ th { width: 100%; padding-top: var(--sizing-3xl); display: flex; - flex-direction: column; + flex-direction: row; + align-items: center; + justify-content: space-between; & h1 { line-height: 1.25; margin: 0; - padding-bottom: var(--sizing-md); + padding-bottom: 0; font-size: var(--font-size-3xl); + font-weight: var(--font-weight-extrabold); line-height: var(--line-height-3xl); + + & a { + text-decoration: none; + } } } /* nav */ -nav.menu-primary { - gap: var(--sizing-md); - - & a, - & span { - height: var(--sizing-xl); - } +a svg, +button svg { + transform: rotate(0deg); + transition-property: transform; + transition-timing-function: var(--transition-ease-in-out); + transition-duration: var(--transition-duration-default); } :is(a:hover, a:active, a:focus) svg, @@ -220,7 +273,27 @@ a svg:hover, a svg:active, a svg:focus, button:hover svg, -button svg:hover, +button svg:hover { + transform: rotate(8deg); +} + +a svg:hover, +a svg:active, +a svg:focus { + stroke: var(--accent-color-hover); +} + +a.view-all svg { + stroke: var(--accent-color); +} + +a.view-all:hover svg, +a.view-all:active svg, +a.view-all:focus svg { + transform: rotate(0deg); + stroke: var(--accent-color-hover); +} + .icon--bold > svg { stroke-width: var(--stroke-width-bold); } @@ -236,13 +309,6 @@ nav ul li .active svg { stroke: var(--accent-color); } -.active:hover svg, -.active svg:hover, -nav ul li .active:hover svg, -nav ul li .active svg:hover { - stroke-width: var(--stroke-width-default); -} - /* social icons */ .at svg { stroke: var(--brand-hey) !important; } .brand-github svg { stroke: var(--brand-github) !important; } @@ -256,9 +322,32 @@ nav ul li .active svg:hover { .heart-handshake svg { stroke: var(--webrings) !important; } .rss svg { stroke: var(--brand-rss) !important; } +.coffee:hover, +.coffee:active, +.coffee:focus { + color: var(--brand-buy-me-a-coffee) !important; +} + +.brand-mastodon:hover, +.brand-mastodon:active, +.brand-mastodon:focus { + color: var(--brand-mastodon) !important; +} + +.rss:hover, +.rss:active, +.rss:focus { + color: var(--brand-rss) !important; +} + /* layout */ .default-wrapper { padding-top: var(--sizing-2xl); + + & .posts-wrapper article:last-of-type, + & .article-widget-wrapper:last-of-type { + border-bottom: none; + } } .main-wrapper { @@ -285,6 +374,15 @@ article { margin-top: 0; } +.article-widget-wrapper { + border-bottom: 1px solid var(--gray-light); + margin-bottom: var(--sizing-base); + + & article { + border-bottom: none; + } +} + footer nav:first-child { gap: var(--sizing-sm); margin-top: var(--sizing-3xl); @@ -331,7 +429,6 @@ code { /* articles */ article { & h2 { - color: var(--text-color); line-height: var(--line-height-2xl); margin: 0 0 var(--sizing-lg); transition-property: color; @@ -398,6 +495,10 @@ svg { vertical-align: middle; } +.icon-light > svg { + stroke: var(--gray-dark) !important; +} + /* lists */ ul, ol { list-style-position: inside; @@ -485,22 +586,32 @@ li { flex-wrap: wrap; } +.gap-xs { gap: var(--sizing-xs) } +.gap-sm { gap: var(--sizing-sm) } +.gap-md { gap: var(--sizing-md) } +.gap-base { gap: var(--sizing-base) } +.gap-xl { gap: var(--sizing-xl) } +.gap-2xl { gap: var(--sizing-2xl) } +.gap-3xl { gap: var(--sizing-3xl) } + /* screens: md */ @media screen and (min-width: 768px) { - .main-title { - flex-direction: row; - align-items: center; - justify-content: space-between; - } - - .main-title h1 { - padding-bottom: 0; - } - main { max-width: 768px; } + .section-header-wrapper { + flex-direction: row; + } + + .section-header-buttons { + margin: var(--sizing-3xl) 0 var(--sizing-lg); + + & > button { + margin-bottom: 0; + } + } + article { & h2 { margin: 0 0 var(--sizing-xs); diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css index 6bd32952..0fe5147d 100644 --- a/src/assets/styles/components/badge-grid.css +++ b/src/assets/styles/components/badge-grid.css @@ -2,6 +2,7 @@ display: grid; gap: var(--sizing-md); grid-template-columns: repeat(3,minmax(0,1fr)); + margin-top: var(--sizing-2xl); & > * { display: flex; diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css index 7bc63e1e..4839b03b 100644 --- a/src/assets/styles/components/banners.css +++ b/src/assets/styles/components/banners.css @@ -19,7 +19,7 @@ vertical-align: middle; height: var(--sizing-lg); width: var(--sizing-lg); - margin-right: var(--sizing-xs); + margin-right: var(--sizing-sm); } } diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index 13d5d145..6ac349ea 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -7,14 +7,13 @@ input[type="text"], input[type="email"], input[type="search"], textarea { - font-family: var(--font-sans); + font-family: var(--font-mono); color: var(--text-color); background-color: var(--background-color); border: 1px solid var(--accent-color); padding: var(--sizing-sm); font-size: var(--font-size-base); width: 100%; - border-radius: var(--rounded); outline: none; margin-bottom: var(--sizing-base); font-weight: var(--font-weight-base); diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 3e8953b0..c12360d8 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -3,32 +3,6 @@ --grid-vertical: repeat(3,minmax(0,1fr)); } -.now-header { - margin: var(--sizing-3xl) 0 var(--sizing-lg); -} - -.default-wrapper > .now-header:first-of-type { - margin-top: 0; -} - -.now-header-buttons { - margin: 0 0 var(--sizing-lg); - - & > button { - margin-bottom: var(--sizing-sm); - - &:last-of-type { - margin-right: 0; - } - } -} - -.now-header-wrapper { - display: flex; - flex-direction: column; - justify-content: space-between; -} - .media-grid { display: grid; gap: var(--sizing-sm); @@ -60,7 +34,6 @@ content: ''; top: 0; left: 1px; - border-radius: calc(var(--sizing-xs) * .85); box-shadow: inset 0 -70px 50px -40px #000; width: calc(100% - 2px); height: calc(100% - 1px); @@ -103,7 +76,6 @@ & 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; @@ -115,16 +87,4 @@ --grid-square: repeat(4,minmax(0,1fr)); --grid-vertical: repeat(6,minmax(0,1fr)); } - - .now-header-wrapper { - flex-direction: row; - } - - .now-header-buttons { - margin: var(--sizing-3xl) 0 var(--sizing-lg); - - & > button { - margin-bottom: 0; - } - } } \ No newline at end of file diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css new file mode 100644 index 00000000..f7a72f94 --- /dev/null +++ b/src/assets/styles/components/menu.css @@ -0,0 +1,124 @@ +.menu-primary { + display: flex; + flex-direction: row; + list-style-type: none; + margin: 0; + padding: 0; + gap: var(--sizing-md); + + & > li { + overflow: hidden; + margin: 0; + + & .icon > svg { + display: block; + } + + & .icon > span { + display: none; + } + } +} + +theme-toggle { + margin-left: var(--sizing-md) +} + +.menu-button-container { + display: none; +} + +#menu-toggle { + display: none; +} + +.menu-button-container .menu-open, +.menu-button-container .menu-closed { + cursor: pointer; +} + +.menu-button-container svg { + transform: rotate(0deg); + transition-property: transform; + transition-timing-function: var(--transition-ease-in-out); + transition-duration: var(--transition-duration-default); +} + +.menu-button-container svg:hover, +.menu-button-container svg:active, +.menu-button-container svg:focus { + stroke: var(--accent-color-hover); + transform: rotate(8deg); +} + +#menu-toggle:checked + .menu-button-container .menu-closed { + display: none; +} + +#menu-toggle:checked + .menu-button-container .menu-open { + display: block; +} + +#menu-toggle:not(:checked) + .menu-button-container .menu-closed { + display: block; +} + +#menu-toggle:not(:checked) + .menu-button-container .menu-open { + display: none; +} + +@media (max-width: 768px) { + .menu-primary { + position: absolute; + top: 0; + left: 0; + margin-top: calc(var(--sizing-3xl) * 2.25); + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + gap: 0; + + & > li { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + padding: var(--sizing-sm) 0; + width: 100%; + color: var(--text-color); + background: var(--background-color); + + & .icon > svg { + display: none; + } + + & .icon > span { + display: inline; + } + } + } + + #menu-toggle ~ .menu-primary li { + height: 0; + margin: 0; + padding: 0; + border: 0; + } + + #menu-toggle:checked ~ .menu-primary li { + border-bottom: 1px solid var(--gray-light); + height: var(--sizing-3xl); + padding: var(--sizing-sm); + + &:first-child { + border-top: 1px solid var(--gray-light); + } + } + + .menu-button-container { + display: unset; + width: var(--sizing-svg-base); + height: var(--sizing-svg-base); + } +} \ No newline at end of file diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css index 53584659..17011a29 100644 --- a/src/assets/styles/components/music-chart.css +++ b/src/assets/styles/components/music-chart.css @@ -13,7 +13,6 @@ & img { border: 1px solid var(--accent-color); - border-radius: var(--rounded); } & img, diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css index 699163ca..597d0889 100644 --- a/src/assets/styles/components/paginator.css +++ b/src/assets/styles/components/paginator.css @@ -16,6 +16,14 @@ } } + & :is(a:hover, a:active, a:focus) svg, + & a svg:hover, + & a svg:active, + & a svg:focus { + transform: rotate(0deg); + stroke: var(--accent-color-hover); + } + & span.disabled svg { cursor: not-allowed; stroke: color-mix(in srgb, var(--text-color), transparent 50%); diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css index 15a54d51..fc916fa6 100644 --- a/src/assets/styles/components/theme-toggle.css +++ b/src/assets/styles/components/theme-toggle.css @@ -1,3 +1,9 @@ +theme-toggle { + width: var(--sizing-svg-base); + height: var(--sizing-svg-base); + display: flex; +} + .theme-toggle { background: transparent; padding: 0; @@ -6,11 +12,6 @@ cursor: pointer; } - &:hover, - & svg:hover { - stroke-width: var(--stroke-width-bold); - } - & > .light svg { stroke: var(--sun) !important; } & > .dark svg { stroke: var(--moon) !important; } diff --git a/src/assets/styles/defaults/fonts.css b/src/assets/styles/defaults/fonts.css index 3d6b18e2..79189a44 100644 --- a/src/assets/styles/defaults/fonts.css +++ b/src/assets/styles/defaults/fonts.css @@ -1,13 +1,5 @@ @font-face { - font-family: Poppins; - src: url('/assets/fonts/Poppins-Bold.min.woff2') format("woff2"); - font-weight: 700; - font-display: optional -} - -@font-face { - font-family: Poppins; - src: url('/assets/fonts/Poppins-Regular.min.woff2') format("woff2"); - font-weight: 400; + font-family: MonoLisa; + src: url('/assets/fonts/MonoLisa.min.woff2') format("woff2"); font-display: optional } \ No newline at end of file diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css index 742ef218..4e698d5a 100644 --- a/src/assets/styles/defaults/vars.css +++ b/src/assets/styles/defaults/vars.css @@ -12,6 +12,7 @@ --blue-900: #1e478a; --blue-950: #172e54; + --gray-lightest: #fafafa; --gray-50: #f6f7f8; --gray-100: #eaecef; --gray-200: #d9dee4; @@ -23,6 +24,7 @@ --gray-800: #5a6173; --gray-900: #4b515d; --gray-950: #30333b; + --gray-darkest: #191919; --white: #fff; --black: #000; @@ -32,8 +34,8 @@ --gray-dark: var(--gray-700); /* base theme */ - --color-lightest: var(--white); - --color-darkest: var(--black); + --color-lightest: var(--gray-lightest); + --color-darkest: var(--gray-darkest); --text-color: var(--color-darkest); --background-color: var(--color-lightest); --text-color-inverted: var(--color-lightest); @@ -57,21 +59,20 @@ --sun: #ffa700; /* fonts */ - --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace; + --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace; /* text */ - --font-size-xs: .75rem; - --line-height-xs: 1rem; + --font-size-xs: .725rem; + --line-height-xs: 1.225rem; - --font-size-sm: .875rem; - --line-height-sm: 1.25rem; + --font-size-sm: .825rem; + --line-height-sm: 1.325rem; - --font-size-base: 1rem; - --line-height-base: 1.5rem; + --font-size-base: .95rem; + --line-height-base: 1.45rem; --font-size-lg: 1.125rem; - --line-height-lg: 1.75rem; + --line-height-lg: 1.5rem; --font-size-xl: 1.25rem; --line-height-xl: 1.75rem; @@ -79,21 +80,24 @@ --font-size-2xl: 1.5rem; --line-height-2xl: 2rem; - --font-size-3xl: 1.875rem; + --font-size-3xl: 1.7rem; --line-height-3xl: 2.25rem; --font-weight-base: 400; - --font-weight-bold: 700; + --font-weight-bold: 600; + --font-weight-extrabold: 800; /* spacing */ --sizing-xs: .25rem; --sizing-sm: .5rem; --sizing-md: .75rem; --sizing-lg: 1rem; - --sizing-base: 1.25rem; - --sizing-xl: 1.5rem; - --sizing-2xl: 1.75rem; - --sizing-3xl: 2rem; + --sizing-base: 1.5rem; + --sizing-xl: 1.75rem; + --sizing-2xl: 2rem; + --sizing-3xl: 2.25rem; + + --sizing-svg-base: 24px; /* radii */ --rounded-none: 0; diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 4f12e7eb..22ce5f0b 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -20,6 +20,7 @@ @import url('./pages/books.css') layer(page); @import url('./pages/blogroll.css') layer(page); @import url('./pages/contact.css') layer(page); +@import url('./pages/links.css') layer(page); @import url('./pages/now.css') layer(page); @import url('./pages/post.css') layer(page); @import url('./pages/webrings.css') layer(page); @@ -33,6 +34,7 @@ @import url('./components/link-peek.css') layer(components); @import url('./components/mastodon-post.css') layer(components); @import url('./components/media-grid.css') layer(components); +@import url('./components/menu.css') layer(components); @import url('./components/paginator.css') layer(components); @import url('./components/post-graph.css') layer(components); @import url('./components/progress-bar.css') layer(components); diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css index 6a81ae72..cc1e815d 100644 --- a/src/assets/styles/pages/contact.css +++ b/src/assets/styles/pages/contact.css @@ -6,10 +6,6 @@ height: calc(var(--sizing-3xl) * 5); resize: none; } - - & .column.description p:first-child { - margin-top: 0; - } } .contact-success-header { @@ -28,4 +24,8 @@ padding-right: var(--sizing-xl); } } + + form { + margin-top: var(--sizing-base); + } } \ No newline at end of file diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css new file mode 100644 index 00000000..fa7d4d0b --- /dev/null +++ b/src/assets/styles/pages/links.css @@ -0,0 +1,21 @@ +.link-grid { + display: grid; + gap: var(--sizing-sm); + grid-template-columns: repeat(1,minmax(0,1fr)); + margin-bottom: var(--sizing-base); + + & .link { + border: 1px solid var(--gray-light); + padding: var(--sizing-xs) var(--sizing-sm) 0; + + & button { + margin-right: var(--sizing-xs); + } + } +} + +@media screen and (min-width: 768px) { + .link-grid { + grid-template-columns: repeat(2,minmax(0,1fr)); + } +} \ No newline at end of file diff --git a/src/assets/styles/pages/now.css b/src/assets/styles/pages/now.css index 5c823ed9..8520a781 100644 --- a/src/assets/styles/pages/now.css +++ b/src/assets/styles/pages/now.css @@ -3,7 +3,7 @@ padding-left: var(--sizing-base); & p { - margin: var(--sizing-xs) 0; + margin: var(--sizing-sm) 0; & > svg { display: inline; diff --git a/src/index.html b/src/index.html index 65d87345..789f34bd 100644 --- a/src/index.html +++ b/src/index.html @@ -1,27 +1,6 @@ --- layout: default -pagination: - data: collections.posts - size: 8 - reverse: true - alias: posts --- -{% if pagination.pageNumber == 0 %} - {% render "partials/now/topper.liquid" status:status, artists:music.artists, books:books, tv:tv %} -{% endif %} -{% for post in pagination.items %} -
- - -

{{ post.data.title }}

- -
{% render "partials/tags.liquid", tags:post.data.tags %}
- - - {{ post.data.post_excerpt | markdown }} -

Read more →

-
-{% endfor %} -{% render "partials/paginator.liquid", pagination:pagination %} \ No newline at end of file +{% render "partials/now/topper.liquid" status:status, artists:music.artists, books:books, tv:tv %} +{% render "partials/posts.liquid" icon: "star", title: "Featured", postData:collections.posts, postType: "featured" %} +{% render "partials/posts.liquid" icon: "clock-2", title: "Recent posts", postData:collections.posts %} \ No newline at end of file diff --git a/src/links.html b/src/links.html index b2e33d78..fea86712 100644 --- a/src/links.html +++ b/src/links.html @@ -11,15 +11,17 @@ pagination:

These are links I've liked or otherwise found interesting.

{% endif %} -
    +
    {% for link in pagination.items %} - {% assign author = link.data.link | stripUtm | authorLookup %} -
  • - - {{ link.data.title }} - - {% if author %} via {{ author }}{% endif %} -
    • + {% assign author = link.data.link | stripUtm | authorLookup %} +
    + {% render "partials/share-button.liquid", url:link.data.link, title:link.data.title, tagMap:collections.tagMap %} + + {{ link.data.title }} + + {% if author %} via {{ author }}{% endif %} +
    {% render "partials/tags.liquid", tags:link.data.tags %}
    +
    {% endfor %} -
+
{% render "partials/paginator.liquid", pagination:pagination %} \ No newline at end of file diff --git a/src/links/2024/2024-04-13-big-tech-s-corruption-was-25-years-in-the-making-by-mark-hurst---april-11--2024.md b/src/links/2024/2024-04-13-big-tech-s-corruption-was-25-years-in-the-making-by-mark-hurst---april-11--2024.md index 23b0bc0d..1b4a090e 100644 --- a/src/links/2024/2024-04-13-big-tech-s-corruption-was-25-years-in-the-making-by-mark-hurst---april-11--2024.md +++ b/src/links/2024/2024-04-13-big-tech-s-corruption-was-25-years-in-the-making-by-mark-hurst---april-11--2024.md @@ -1,5 +1,5 @@ --- -title: "Big Tech’s corruption was 25 years in the making By Mark Hurst • April 11, 2024" +title: "Big Tech’s corruption was 25 years in the making" date: "2024-04-13T14:04-08:00" tags: ["tech"] description: "I had some fun on the April 1st Techtonic last week, broadcasting an hour of tech news from 1999. The episode page is here; click “Pop-up player” to listen." diff --git a/src/pages/now.html b/src/pages/now.html index f8c51930..93e44fbd 100644 --- a/src/pages/now.html +++ b/src/pages/now.html @@ -4,7 +4,7 @@ layout: now permalink: /now.html description: "See what I'm doing now." --- -

+

{% tablericon "clock-heart" "Currently" %} Currently

@@ -27,7 +27,7 @@ description: "See what I'm doing now." Getting tattooed.

-

+

{% tablericon "terminal-2" "Making" %} Making

diff --git a/src/pages/tag-list.html b/src/pages/tag-list.html index 54da628a..68640d40 100644 --- a/src/pages/tag-list.html +++ b/src/pages/tag-list.html @@ -11,11 +11,14 @@ eleventyComputed: {% assign posts = collections[tag] | reverse %} {% for post in posts %}
- +
+ {% tablericon "calendar-month" "Date" %} + +
-

{{ post.data.title }}

+

{{ post.data.title }}

{{ post.data.post_excerpt | markdown }}

Read more →

diff --git a/src/pages/uses.md b/src/pages/uses.md index 15697597..e105dd2f 100644 --- a/src/pages/uses.md +++ b/src/pages/uses.md @@ -9,8 +9,6 @@ image: /assets/img/pages/uses.jpg 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' %} -

Computer setup

- Midnight MacBook Air (2022 - M2) diff --git a/src/posts.html b/src/posts.html new file mode 100644 index 00000000..3083d6fc --- /dev/null +++ b/src/posts.html @@ -0,0 +1,27 @@ +--- +layout: default +pagination: + data: collections.posts + size: 8 + reverse: true + alias: posts +--- +
+ {% for post in pagination.items %} +
+
+ {% tablericon "calendar-month" "Date" %} + +
+ +

{{ post.data.title }}

+ + + + {{ post.data.post_excerpt | markdown }} +
+ {% endfor %} +
+{% render "partials/paginator.liquid", pagination:pagination %} \ No newline at end of file diff --git a/src/posts/2023/2023-in-review.html b/src/posts/2023/2023-in-review.html index 201217f5..135111dc 100644 --- a/src/posts/2023/2023-in-review.html +++ b/src/posts/2023/2023-in-review.html @@ -14,12 +14,12 @@ tags: ['books', 'music', 'development', 'Eleventy']
  • I listened to a bunch of music
  • I watched a bunch of movies and TV, 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.
    • -

    +

    {% tablericon "books" "Favorite books" %} Favorite books

    {% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %} -

    +

    {% tablericon "vinyl" "Favorite albums" %} Favorite books

    diff --git a/src/posts/2023/i-block-ads.md b/src/posts/2023/i-block-ads.md index d42990d3..a0ac7369 100644 --- a/src/posts/2023/i-block-ads.md +++ b/src/posts/2023/i-block-ads.md @@ -4,6 +4,7 @@ title: 'I block ads' description: "I block ads in the browser. I block ads at the DNS level." tags: ['advertising', 'privacy', 'tech'] image: /assets/img/og/adblocks.webp +featured: true --- I block ads in the browser. diff --git a/src/posts/2023/i-dont-want-streaming-music.md b/src/posts/2023/i-dont-want-streaming-music.md index 5e94c7da..d9b4084c 100644 --- a/src/posts/2023/i-dont-want-streaming-music.md +++ b/src/posts/2023/i-dont-want-streaming-music.md @@ -3,6 +3,7 @@ date: '2023-04-05' title: "I don't want streaming music, I just want to stream my music" description: "I don't want your streaming music service, I just want the music I've collected and care about available to stream." tags: ['music', 'streaming'] +featured: true --- I don't want your streaming music service, I just want the music I've collected and care about available to stream. diff --git a/src/posts/2024/go-ahead-and-block-ai-web-crawlers.md b/src/posts/2024/go-ahead-and-block-ai-web-crawlers.md index 74287d61..28eb3acd 100644 --- a/src/posts/2024/go-ahead-and-block-ai-web-crawlers.md +++ b/src/posts/2024/go-ahead-and-block-ai-web-crawlers.md @@ -3,6 +3,7 @@ date: '2024-03-02' title: 'Go ahead and block AI web crawlers' description: 'AI companies are crawling the open web to, ostensibly, improve the quality of their models and products. This process is extractive and accrues the benefit to said companies, not the owners of sites both small and large.' tags: ['AI', 'tech', 'development'] +featured: true --- AI companies are crawling the open web to, ostensibly, improve the quality of their models and products. This process is extractive and accrues the benefit to said companies, not the owners of sites both small and large. diff --git a/src/posts/2024/towards-a-quieter-friendlier-web.md b/src/posts/2024/towards-a-quieter-friendlier-web.md index 8b9d5ccd..81ad1248 100644 --- a/src/posts/2024/towards-a-quieter-friendlier-web.md +++ b/src/posts/2024/towards-a-quieter-friendlier-web.md @@ -3,6 +3,7 @@ date: '2024-02-27' title: 'Towards a quieter, friendlier web' description: "I love the internet, I grew up on it and (probably) spend too much time on it. I found the music I love on it, I've made friends on it, I went to school for business but built a career on the web instead. I often have a hard time reconciling where the web is now with what it was like when I first dove into it." tags: ['tech', 'social media', 'privacy', 'AI'] +featured: true --- I *love* the internet, I grew up on it and (probably) spend too much time on it. [I found the music I love on it](https://coryd.dev/posts/2024/i-found-the-music-i-love-on-the-internet/), I've made friends on it, I went to school for business but built a career on the web instead. I often have a hard time reconciling where the web is now with what it was like when I first dove into it. diff --git a/src/posts/2024/we-have-a-content-quality-problem-not-a-content-quantity-problem.md b/src/posts/2024/we-have-a-content-quality-problem-not-a-content-quantity-problem.md index c782bd0d..9a4bb5c1 100644 --- a/src/posts/2024/we-have-a-content-quality-problem-not-a-content-quantity-problem.md +++ b/src/posts/2024/we-have-a-content-quality-problem-not-a-content-quantity-problem.md @@ -3,6 +3,7 @@ date: '2024-03-26T09:15-08:00' title: 'We have a content quality problem, not a content quantity problem' description: 'Are you short on things to read? Things to watch? Things to listen to? Things to scroll through? Me neither.' tags: ['tech', 'AI', 'music'] +featured: true --- Are you short on things to read? Things to watch? Things to listen to? Things to scroll through? Me neither. diff --git a/src/social-preview.liquid b/src/social-preview.liquid index 1e8873f5..7e9a88f3 100644 --- a/src/social-preview.liquid +++ b/src/social-preview.liquid @@ -7,8 +7,7 @@ permalink: '/assets/img/social-preview/{{ preview.data.title | slugify }}-previe eleventyExcludeFromCollections: true --- - + {% assign titleInLines = preview.data.title | splitLines: 40 %} {% assign numberOfLines = titleInLines.length %} {% if numberOfLines == 1 %} @@ -23,15 +22,14 @@ eleventyExcludeFromCollections: true {% assign verticalStartingPoint = 170 %} {% endif %} - - + {{ preview.date | date: "%B %e, %Y" }} @@ -41,14 +39,14 @@ eleventyExcludeFromCollections: true {% for line in titleInLines %} {% capture spacing %}{{ forloop.index0 | times: 50 }}{% endcapture %} - + {{ line }} {% endfor %}