feat: spruce up design
This commit is contained in:
Cory Dransfeldt
parent
2614dff452
commit
94e28067f9
51 changed files with 480 additions and 202 deletions
|
|
@ -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 `<p>${words.slice(0, wordCount).join(' ')}...</p>`
|
||||
return text
|
||||
},
|
||||
|
||||
// authors
|
||||
authorLookup: (url) => {
|
||||
if (!url) return null
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ pageTitle }}</title>
|
||||
<link rel="preload" href="/assets/fonts/Poppins-Bold.min.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/fonts/Poppins-Regular.min.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/fonts/MonoLisa.min.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
|
||||
<script async data-id="101449513" src="/23af0256fe76a.js"></script>
|
||||
<link rel="canonical" href="{{ fullUrl }}" />
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ layout: default
|
|||
{% endcapture %}
|
||||
<script>{{ js }}</script>
|
||||
{{ content }}
|
||||
<div class="now-header-wrapper">
|
||||
<h2 id="artists" class="now-header flex-centered">
|
||||
<div class="section-header-wrapper">
|
||||
<h2 id="artists" class="section-header flex-centered">
|
||||
{% tablericon "microphone-2" "Artists" %}
|
||||
Artists
|
||||
</h2>
|
||||
<div class="now-header-buttons client-side">
|
||||
<div class="section-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>
|
||||
|
|
@ -30,12 +30,12 @@ layout: default
|
|||
<div class="hidden" id="artists-year">
|
||||
{% render "partials/now/media-grid.liquid", data:musicCharts.year.artists, shape: "square", count: 8 %}
|
||||
</div>
|
||||
<div class="now-header-wrapper">
|
||||
<h2 id="albums" class="now-header flex-centered">
|
||||
<div class="section-header-wrapper">
|
||||
<h2 id="albums" class="section-header flex-centered">
|
||||
{% tablericon "vinyl" "Albums" %}
|
||||
Albums
|
||||
</h2>
|
||||
<div class="now-header-buttons client-side">
|
||||
<div class="section-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>
|
||||
|
|
@ -54,12 +54,12 @@ layout: default
|
|||
<div class="hidden" id="albums-year">
|
||||
{% render "partials/now/media-grid.liquid", data:musicCharts.year.albums, shape: "square", count: 8 %}
|
||||
</div>
|
||||
<div class="now-header-wrapper">
|
||||
<h2 id="tracks" class="now-header flex-centered">
|
||||
<div class="section-header-wrapper">
|
||||
<h2 id="tracks" class="section-header flex-centered">
|
||||
{% tablericon "playlist" "Tracks" %}
|
||||
Tracks
|
||||
</h2>
|
||||
<div class="now-header-buttons client-side">
|
||||
<div class="section-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>
|
||||
|
|
@ -83,19 +83,19 @@ layout: default
|
|||
{% render "partials/now/track-chart.liquid", data:musicCharts.year.topTracks.data, mostPlayed:musicCharts.year.topTracks.mostPlayed %}
|
||||
</div>
|
||||
{% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
|
||||
<h2 id="books" class="now-header flex-centered">
|
||||
<h2 id="books" class="section-header flex-centered">
|
||||
{% tablericon "books" "Books" %}
|
||||
Books
|
||||
</h2>
|
||||
{% 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 %}
|
||||
<h2 id="movies" class="now-header flex-centered">
|
||||
<h2 id="movies" class="section-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-header flex-centered">
|
||||
<h2 id="tv" class="section-header flex-centered">
|
||||
{% tablericon "device-tv" "TV" %}
|
||||
TV
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="banner github">
|
||||
<p>{% tablericon "brand-github" "GitHub repository" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
|
||||
<p>{% tablericon "brand-github" "GitHub repository" %}Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="banner npm">
|
||||
<p>{% tablericon "brand-npm" "NPM package" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
|
||||
<p>{% tablericon "brand-npm" "NPM package" %}<a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{% assign isOldPost = date | oldPost %}
|
||||
{% if isOldPost %}
|
||||
<div class="banner old-post">
|
||||
<p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
|
||||
<p>{% tablericon "clock-x" "Old post" %}This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="banner rss">
|
||||
<p>{% tablericon "rss" "RSS feed" %} <a href="{{ url }}">{{ text }}</a>.</p>
|
||||
<p>{% tablericon "rss" "RSS feed" %}<a href="{{ url }}">{{ text }}</a>.</p>
|
||||
</div>
|
||||
|
|
@ -9,11 +9,12 @@
|
|||
</span>
|
||||
{% else %}
|
||||
{% if icon %}
|
||||
<a class="{{ icon | downcase }} {{ class }}" href="/{{ link | downcase }}">
|
||||
<a class="{{ icon | downcase }} icon {{ class }}" href="/{{ link | downcase }}">
|
||||
{% tablericon icon link %}
|
||||
<span>{{ link }}</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/{{ link | downcase }}">
|
||||
<a class="icon" href="/{{ link | downcase }}">
|
||||
{{ link }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<nav
|
||||
class="menu-primary flex-centered flex-wrap justify-center"
|
||||
aria-label="Primary site navigation">
|
||||
<div class="flex-centered">
|
||||
<input id="menu-toggle" type="checkbox" />
|
||||
<label class="menu-button-container" for="menu-toggle">
|
||||
<div class="menu-closed">{% tablericon "menu" "Menu closed" %}</div>
|
||||
<div class="menu-open">{% tablericon "x" "Menu open" %}</div>
|
||||
</label>
|
||||
<ul class="menu-primary" aria-label="Primary site navigation">
|
||||
{% for link in nav.menu %}
|
||||
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
|
||||
<li>{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% render "partials/nav/theme-toggle.liquid" %}
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{% if albumReleases.size > 0 %}
|
||||
<h2 id="album-releases" class="now-header flex-centered">
|
||||
<h2 id="album-releases" class="section-header flex-centered">
|
||||
{% tablericon "calendar-time" "Anticipated albums" %}
|
||||
Anticipated albums
|
||||
</h2>
|
||||
|
|
|
|||
28
src/_includes/partials/posts.liquid
Normal file
28
src/_includes/partials/posts.liquid
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{%- assign posts = postData | filterByPostType: postType %}
|
||||
<div class="article-widget-wrapper">
|
||||
<div class="section-header-wrapper">
|
||||
<h2 id="artists" class="section-header posts flex-centered">
|
||||
{% tablericon icon title %}
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
{% for post in posts %}
|
||||
<article class="h-entry">
|
||||
<div class="flex-centered gap-xs icon-small icon-light">
|
||||
{% tablericon "calendar-month" "Date" %}
|
||||
<time class="dt-published" datetime="{{ post.date }}">
|
||||
{{ post.date | date: "%B %e, %Y" }}
|
||||
</time>
|
||||
</div>
|
||||
<a href="{{ post.url }}">
|
||||
<h3 class="flex-centered">{{ post.data.title }}</h3>
|
||||
</a>
|
||||
<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 | truncateByWordCount: 25 }}
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% if postType != 'featured' %}
|
||||
<a class="view-all flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -6,12 +6,12 @@ schema: blog
|
|||
{%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
|
||||
<div class="default-wrapper">
|
||||
<article class="h-entry">
|
||||
<div class="flex-centered">
|
||||
<div class="flex-centered gap-xs icon-small icon-light">
|
||||
{% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
|
||||
{% tablericon "calendar-month" "Date" %}
|
||||
<time class="dt-published" datetime="{{ date }}">
|
||||
{{ date | date: "%B %e, %Y" }}
|
||||
<span class="client-side"> • </span>
|
||||
</time>
|
||||
{% 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>
|
||||
|
|
|
|||
BIN
src/assets/fonts/MonoLisa.min.woff2
Normal file
BIN
src/assets/fonts/MonoLisa.min.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1 MiB After Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 433 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
|
|
@ -25,6 +25,6 @@ window.onload = () => {
|
|||
})
|
||||
}
|
||||
|
||||
const buttonSets = document.querySelectorAll('.now-header-buttons')
|
||||
const buttonSets = document.querySelectorAll('.section-header-buttons')
|
||||
buttonSets.forEach(initializeButtonSet)
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
124
src/assets/styles/components/menu.css
Normal file
124
src/assets/styles/components/menu.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@
|
|||
|
||||
& img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
& img,
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
21
src/assets/styles/pages/links.css
Normal file
21
src/assets/styles/pages/links.css
Normal file
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
padding-left: var(--sizing-base);
|
||||
|
||||
& p {
|
||||
margin: var(--sizing-xs) 0;
|
||||
margin: var(--sizing-sm) 0;
|
||||
|
||||
& > svg {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<article class="h-entry">
|
||||
<time class="dt-published" datetime="{{ post.date }}">
|
||||
{{ post.date | date: "%B %e, %Y" }}
|
||||
</time>
|
||||
<a href="{{ post.url }}">
|
||||
<h2 class="flex-centered">{{ post.data.title }}</h2>
|
||||
</a>
|
||||
<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 }}
|
||||
<p><a href="{{ post.url }}">Read more →</a></p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% render "partials/paginator.liquid", pagination:pagination %}
|
||||
{% 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 %}
|
||||
|
|
@ -11,15 +11,17 @@ pagination:
|
|||
<p>These are links I've liked or otherwise found interesting.</p>
|
||||
<hr class="large-spacing" />
|
||||
{% endif %}
|
||||
<ul class="link-list reduced-spacing">
|
||||
<div class="link-grid">
|
||||
{% for link in pagination.items %}
|
||||
{% assign author = link.data.link | stripUtm | authorLookup %}
|
||||
<li>
|
||||
<div class="link">
|
||||
{% render "partials/share-button.liquid", url:link.data.link, title:link.data.title, tagMap:collections.tagMap %}
|
||||
<a href="{{ link.data.link }}" title="{{ link.data.title | escape }}">
|
||||
<strong>{{ link.data.title }}</strong>
|
||||
</a>
|
||||
{% if author %} via {{ author }}{% endif %}
|
||||
</li>
|
||||
<div class="text-small">{% render "partials/tags.liquid", tags:link.data.tags %}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% render "partials/paginator.liquid", pagination:pagination %}
|
||||
|
|
@ -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."
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ layout: now
|
|||
permalink: /now.html
|
||||
description: "See what I'm doing now."
|
||||
---
|
||||
<h2 class="now-header flex-centered">
|
||||
<h2 class="section-header flex-centered">
|
||||
{% tablericon "clock-heart" "Currently" %}
|
||||
Currently
|
||||
</h2>
|
||||
|
|
@ -27,7 +27,7 @@ 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-header flex-centered">
|
||||
<h2 class="section-header flex-centered">
|
||||
{% tablericon "terminal-2" "Making" %}
|
||||
Making
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,14 @@ eleventyComputed:
|
|||
{% assign posts = collections[tag] | reverse %}
|
||||
{% for post in posts %}
|
||||
<article class="h-entry">
|
||||
<div class="flex-centered gap-xs icon-small icon-light">
|
||||
{% tablericon "calendar-month" "Date" %}
|
||||
<time class="dt-published" datetime="{{ post.date }}">
|
||||
{{ post.date | date: "%B %e, %Y" }}
|
||||
</time>
|
||||
</div>
|
||||
<a href="{{ post.url }}">
|
||||
<h2 class="flex-centered">{{ post.data.title }}</h2>
|
||||
<h3 class="flex-centered">{{ post.data.title }}</h3>
|
||||
</a>
|
||||
<p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
|
||||
<p><a href="{{ post.url }}">Read more →</a></p>
|
||||
|
|
|
|||
|
|
@ -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' %}
|
||||
|
||||
<h3>Computer setup</h3>
|
||||
|
||||
- Midnight MacBook Air (2022 - M2)
|
||||
|
|
|
|||
27
src/posts.html
Normal file
27
src/posts.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
layout: default
|
||||
pagination:
|
||||
data: collections.posts
|
||||
size: 8
|
||||
reverse: true
|
||||
alias: posts
|
||||
---
|
||||
<div class="posts-wrapper">
|
||||
{% for post in pagination.items %}
|
||||
<article class="h-entry">
|
||||
<div class="flex-centered gap-xs icon-small icon-light">
|
||||
{% tablericon "calendar-month" "Date" %}
|
||||
<time class="dt-published" datetime="{{ post.date }}">
|
||||
{{ post.date | date: "%B %e, %Y" }}
|
||||
</time>
|
||||
</div>
|
||||
<a href="{{ post.url }}">
|
||||
<h3 class="flex-centered">{{ post.data.title }}</h3>
|
||||
</a>
|
||||
<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 }}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/paginator.liquid", pagination:pagination %}
|
||||
|
|
@ -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-header flex-centered">
|
||||
<h2 class="section-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-header flex-centered">
|
||||
<h2 class="section-header flex-centered">
|
||||
{% tablericon "vinyl" "Favorite albums" %}
|
||||
Favorite books
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -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.<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
|
|
@ -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.<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
|
|
@ -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.<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@ permalink: '/assets/img/social-preview/{{ preview.data.title | slugify }}-previe
|
|||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="1200" height="628" viewBox="0 0 1200 628" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<svg width="1200" height="630" viewBox="0 0 1200 630" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
{% assign titleInLines = preview.data.title | splitLines: 40 %}
|
||||
{% assign numberOfLines = titleInLines.length %}
|
||||
{% if numberOfLines == 1 %}
|
||||
|
|
@ -23,15 +22,14 @@ eleventyExcludeFromCollections: true
|
|||
{% assign verticalStartingPoint = 170 %}
|
||||
{% endif %}
|
||||
|
||||
<!-- background -->
|
||||
<svg height="628" viewBox="0 0 1200 628" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h1200v628h-1200z"/><path d="m0 482 33.3-3.2c33.4-3.1 100-9.5 166.7-9.6 66.7-.2 133.3 5.8 200 14.3s133.3 19.5 200 30.5 133.3 22 200 20 133.3-17 200-30.2c66.7-13.1 133.3-24.5 166.7-30.1l33.3-5.7v161h-33.3c-33.4 0-100 0-166.7 0s-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-166.7 0h-33.3z" fill="#3b82f6" stroke-linecap="round"/></svg>
|
||||
<svg id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1200" height="630" fill="#191919"></rect></svg>
|
||||
|
||||
<!-- date -->
|
||||
<text
|
||||
font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
|
||||
font-family="MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace"
|
||||
font-size="24"
|
||||
font-weight="bold"
|
||||
fill="#fff"
|
||||
font-weight="800"
|
||||
fill="#fafafa"
|
||||
>
|
||||
<tspan x="80" y="{{ verticalStartingPoint | minus: 120 }}">
|
||||
{{ preview.date | date: "%B %e, %Y" }}
|
||||
|
|
@ -41,14 +39,14 @@ eleventyExcludeFromCollections: true
|
|||
<!-- title -->
|
||||
<text
|
||||
id="text"
|
||||
font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
|
||||
font-family="MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace"
|
||||
font-size="40"
|
||||
font-weight="900"
|
||||
fill="#fff"
|
||||
font-weight="800"
|
||||
fill="#fafafa"
|
||||
>
|
||||
{% for line in titleInLines %}
|
||||
{% capture spacing %}{{ forloop.index0 | times: 50 }}{% endcapture %}
|
||||
<tspan x="80" y="{{ verticalStartingPoint | minus: 20 | plus: spacing }}">
|
||||
<tspan x="80" y="{{ verticalStartingPoint | plus: spacing }}">
|
||||
{{ line }}
|
||||
</tspan>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Reference in a new issue