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

feat: color + accessibility updates

Browse source
This commit is contained in:
Cory Dransfeldt 2023-08-13 13:54:32 -07:00
parent ff7dbdced4
commit 2520d5c009
No known key found for this signature in database
16 changed files with 42 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,8 +10,8 @@
{% render "icons/goodreads.liquid" %} {% render "icons/goodreads.liquid" %}
{% render "icons/coffee.liquid" %} {% render "icons/coffee.liquid" %}
</div> </div>
<p class="text-sm text-gray-500 dark:text-gray-100 pb-8 text-center"> <div class="text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a> • <a class="text-gray-700 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a> •
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a> <a class="text-gray-700 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
</p> </div>
</footer> </footer>

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

@ -1,6 +1,6 @@
<div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10"> <div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10">
<h1 class="text-2xl md:text-3xl font-black leading-tight pb-5 md:pb-0"> <h1 class="text-2xl md:text-3xl font-black leading-tight pb-5 md:pb-0">
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500" href="/">{{ site.title }}</a> <a class="text-gray-700 dark:text-gray-200" href="/">{{ site.title }}</a>
</h1> </h1>
{% render "partials/nav.liquid", page: page %} {% render "partials/nav.liquid", page: page %}
</div> </div>

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

@ -1,10 +1,10 @@
<nav> <nav>
<ul class="flex"> <ul class="flex">
<li class="mr-6"> <li class="mr-6">
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a> <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
</li> </li>
<li class="mr-6"> <li class="mr-6">
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a> <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
</li> </li>
<li class="mr-6"> <li class="mr-6">
{% render "icons/tags.liquid", page: page %} {% render "icons/tags.liquid", page: page %}

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

@ -7,7 +7,7 @@
{% for album in music %} {% for album in music %}
<a href="{{ album.url }}" title="{{album.name | escape}} by {{ album.artist | escape }}"> <a href="{{ album.url }}" title="{{album.name | escape}} by {{ album.artist | escape }}">
<div class="relative block h-full"> <div class="relative block h-full">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div> <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md"> <div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white line-clamp-2">{{ album.name }}</div> <div class="px-1 text-xs font-bold text-white line-clamp-2">{{ album.name }}</div>
<div class="px-1 text-xs text-white line-clamp-2"> <div class="px-1 text-xs text-white line-clamp-2">

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

@ -7,7 +7,7 @@
{% for artist in music %} {% for artist in music %}
<a href="{{ artist.url }}" title="{{artist.name | escape}}"> <a href="{{ artist.url }}" title="{{artist.name | escape}}">
<div class="relative block"> <div class="relative block">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div> <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md"> <div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white line-clamp-2">{{ artist.name }}</div> <div class="px-1 text-xs font-bold text-white line-clamp-2">{{ artist.name }}</div>
<div class="px-1 text-xs text-white"> <div class="px-1 text-xs text-white">

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

@ -7,7 +7,7 @@
{% for book in books %} {% for book in books %}
<a href="{{book.link}}" title="{{book.title | escape}}"> <a href="{{book.link}}" title="{{book.title | escape}}">
<div class="relative block" style="max-width:226px"> <div class="relative block" style="max-width:226px">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 dark:border-purple-400 dark:hover:border-purple-500"></div> <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
{%- capture bookImg %}{{book.image}}{% endcapture -%} {%- capture bookImg %}{{book.image}}{% endcapture -%}
{%- capture bookName %}{{book.title | escape}}{% endcapture -%} {%- capture bookName %}{{book.title | escape}}{% endcapture -%}
{% image bookImg, bookName, 'rounded-lg w-full h-full', '180px' %} {% image bookImg, bookName, 'rounded-lg w-full h-full', '180px' %}

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

@ -7,7 +7,7 @@
{% for movie in movies %} {% for movie in movies %}
<a href="{{movie.link}}" title="{{movie.title | escape}}"> <a href="{{movie.link}}" title="{{movie.title | escape}}">
<div class="relative block" style="max-width:226px"> <div class="relative block" style="max-width:226px">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div> <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md"> <div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div> <div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
</div> </div>

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

@ -7,7 +7,7 @@
{% for episode in tv %} {% for episode in tv %}
<a href="https://trakt.tv/shows/{{episode.show.ids.slug}}/seasons/{{ episode.episode.season }}/episodes/{{ episode.episode.number }}" title="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}"> <a href="https://trakt.tv/shows/{{episode.show.ids.slug}}/seasons/{{ episode.episode.season }}/episodes/{{ episode.episode.number }}" title="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}">
<div class="relative block" style="max-width:226px"> <div class="relative block" style="max-width:226px">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div> <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md"> <div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ episode.episode.title }}</div> <div class="px-1 text-xs font-bold text-white">{{ episode.episode.title }}</div>
<div class="px-1 text-xs text-white"> <div class="px-1 text-xs text-white">

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

@ -1,7 +1,7 @@
<nav class="flex justify-between mt-8 items-center"> <nav class="flex justify-between mt-8 items-center">
{% if pagination.href.previous %} {% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}"> <a href="{{ pagination.href.previous }}">
<button class="py-2 pr-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page icon--20"> <button class="py-2 pr-4 dark:text-purple-400 text-purple-600" aria-label="Previous page icon--20">
{% tablericon "arrow-left" "Previous" %} {% tablericon "arrow-left" "Previous" %}
</button> </button>
</a> </a>
@ -18,7 +18,7 @@
</div> </div>
{% if pagination.href.next %} {% if pagination.href.next %}
<a href="{{ pagination.href.next }}"> <a href="{{ pagination.href.next }}">
<button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500 icon--20" aria-label="Next page"> <button class="py-2 pl-4 dark:text-purple-400 text-purple-600 icon--20" aria-label="Next page">
{% tablericon "arrow-right" "Next" %} {% tablericon "arrow-right" "Next" %}
</button> </button>
</a> </a>

10
src/_includes/partials/webmentions.liquid
View file

@ -8,7 +8,7 @@
{% for mention in mentions['repost-of'] %} {% for mention in mentions['repost-of'] %}
<li class="-ml-3 inline"> <li class="-ml-3 inline">
<a href={{mention.url}}> <a href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400', '56px' %} {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
@ -22,7 +22,7 @@
{% for mention in mentions['like-of'] %} {% for mention in mentions['like-of'] %}
<li class="-ml-3 inline"> <li class="-ml-3 inline">
<a href={{mention.url}}> <a href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400', '56px' %} {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
@ -35,10 +35,10 @@
{% for mention in mentions['in-reply-to'] %} {% for mention in mentions['in-reply-to'] %}
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full"> <div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
<a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}> <a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400', '56px' %} {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
<div class="ml-3"> <div class="ml-3">
<p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.content.text }}</p> <p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
<p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.published | isoDateOnly }}</p> <p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>
</div> </div>
</a> </a>
</div> </div>

2
src/index.html
View file

@ -29,7 +29,7 @@ meta:
> >
<a class="no-underline" href="{{ post.url }}"> <a class="no-underline" href="{{ post.url }}">
<h2 <h2
class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 md:text-2xl" class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 md:text-2xl ease-in-out duration-300"
> >
{{ post.data.title }} {{ post.data.title }}
</h2> </h2>

2
src/now.html
View file

@ -52,6 +52,6 @@ meta:
</p> </p>
<p class="my-2 flex flex-row items-start md:items-center"> <p class="my-2 flex flex-row items-start md:items-center">
<span class="pt-1 md:pt-0 mr-1 icon--20">{% tablericon "hand-stop" "Ad and tracker-blocking" %}</span> <span class="pt-1 md:pt-0 mr-1 icon--20">{% tablericon "hand-stop" "Ad and tracker-blocking" %}</span>
<a href="https://github.com/cdransf/awesome-adblock">Assembling lists of ad and tracker-blocking tools.</a> Assembling lists of <a href="https://github.com/cdransf/awesome-adblock">ad and tracker-blocking tools</a>.
</p> </p>
</div> </div>

4
src/tagList.md
View file

@ -12,7 +12,7 @@ templateEngineOverride: liquid,md
{% assign posts = collections[tag] | reverse %} {% assign posts = collections[tag] | reverse %}
{% for post in posts %} {% for post in posts %}
<div class="mb-8 border-b border-gray-200 pb-4 dark:border-gray-700"> <div class="mb-8 border-b border-gray-200 pb-4 dark:border-gray-700">
<a class="no-underline" href="{{ post.url }}"> <a class="!no-underline" href="{{ post.url }}">
<h2 <h2
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl" class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
> >
@ -28,7 +28,7 @@ templateEngineOverride: liquid,md
<p class="p-summary mt-0">{{ post.data.post_excerpt | markdown }}</p> <p class="p-summary mt-0">{{ post.data.post_excerpt | markdown }}</p>
{% endif %} {% endif %}
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<a class="flex-none font-normal no-underline" href="{{ post.url }}">Read more &rarr;</a> <a class="flex-none font-normal !no-underline" href="{{ post.url }}">Read more &rarr;</a>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}

2
src/tags.md
View file

@ -21,7 +21,7 @@ meta:
{% for tag in collections.tagList %} {% for tag in collections.tagList %}
<span> <span>
<a href="/tags/{{ tag }}" class="no-underline"> <a href="/tags/{{ tag }}" class="!no-underline">
<button class="tag--button"> <button class="tag--button">
{{ tag }} {{ tag }}
</button> </button>

4
tailwind.config.js
View file

@ -27,9 +27,7 @@ module.exports = {
plugins: [ plugins: [
require('@tailwindcss/typography'), require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'), require('@tailwindcss/line-clamp'),
require('@catppuccin/tailwindcss', { require('@catppuccin/tailwindcss'),
defaultFlavour: 'mocha',
}),
require('@tailwindcss/aspect-ratio'), require('@tailwindcss/aspect-ratio'),
], ],
content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'], content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],

22
tailwind.css
View file

@ -42,6 +42,8 @@ h2 > a.header-anchor {
a, a,
.prose a { .prose a {
color: theme(colors.purple.600); color: theme(colors.purple.600);
@apply ease-in-out;
@apply duration-300;
} }
a:hover, a:hover,
@ -50,7 +52,13 @@ a:active,
.prose a:hover, .prose a:hover,
.prose a:focus, .prose a:focus,
.prose a:active { .prose a:active {
color: theme(colors.purple.500); color: theme(colors.pink.500);
}
p > a,
span > a,
blockquote > a {
text-decoration: underline !important;
} }
code { code {
@ -76,6 +84,8 @@ pre {
@apply mb-4; @apply mb-4;
@apply rounded-full; @apply rounded-full;
@apply text-white; @apply text-white;
@apply ease-in-out;
@apply duration-300;
background: theme(colors.purple.600); background: theme(colors.purple.600);
} }
@ -96,7 +106,7 @@ pre {
.tag--button:hover, .tag--button:hover,
.tag--button:active, .tag--button:active,
.tag--button:focus { .tag--button:focus {
background: theme(colors.purple.500); background: theme(colors.pink.500);
} }
code[class*=language-], pre[class*=language-] { code[class*=language-], pre[class*=language-] {
@ -133,11 +143,13 @@ code[class*=language-], pre[class*=language-] {
} }
.link--icon > svg { .link--icon > svg {
color: theme(colors.gray.700) color: theme(colors.gray.700);
@apply ease-in-out;
@apply duration-300;
} }
.link--icon:hover > svg { .link--icon:hover > svg {
color: theme(colors.purple.500) color: theme(colors.pink.500)
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -156,6 +168,6 @@ code[class*=language-], pre[class*=language-] {
} }
.link--icon:hover svg { .link--icon:hover svg {
color: theme(colors.purple.500) color: theme(colors.pink.500)
} }
} }