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

feat: rework color scheme

Browse source
This commit is contained in:
Cory Dransfeldt 2023-05-06 14:43:19 -07:00
parent 1e25e460fc
commit f44efd5171
No known key found for this signature in database
29 changed files with 163 additions and 406 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -17,6 +17,7 @@
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@catppuccin/tailwindcss": "^0.1.1",
"@fontsource/inter": "^4.5.15",
"eleventy-plugin-heroicons": "^1.1.0",
"eslint": "^8.39.0",
@ -51,7 +52,6 @@
"markdown-it-footnote": "^3.0.3",
"markdownlint-cli": "^0.34.0",
"marked": "^5.0.0",
"tailwind-dracula": "^1.1.0",
"tailwindcss": "^3.3.2"
},
"lint-staged": {

2
src/_includes/base.liquid
View file

@ -15,7 +15,7 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="https://coryd.dev{{ page.url }}" />
<meta property="og:image" content="{{ post | getFirstAttachment }}">
<meta name="theme-color" content="#bd93f9" />
<meta name="theme-color" content="#a855f7" />
<link
rel="icon"
type="image/x-icon"

4
src/_includes/footer.liquid
View file

@ -9,8 +9,8 @@
{% include "icons/oku.liquid" %}
</div>
<p class="text-sm text-gray-500 dark:text-gray-100 text-center pb-8">
<a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
<a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
•
<a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
<a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
• Cory Dransfeldt • © {{ "now" | date: "%Y" }}</p>
</footer>

4
src/_includes/nav.liquid
View file

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

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

@ -1,6 +1,6 @@
<div class="border-b border-gray-200 pb-8 dark:border-gray-700 mb-8 pb-8 dark:text-white text-gray-800">
<a class="no-underline" href="/now">
<h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-primary-500 hover:text-primary-400 mb-4">Now</h2>
<h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-purple-500 hover:text-purple-400 mb-4">Now</h2>
</a>
<p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
<p class="mb-0">{{ status.emoji }} {{ status.content }}</p>

6
src/_includes/now.liquid
View file

@ -48,7 +48,7 @@ layout: main
{% for artist in artists %}
<a href="{{artist.url}}" title="{{artist.name | escape}}">
<div class="relative block">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ artist.name }}</div>
<div class="px-1 text-xs text-white">
@ -78,7 +78,7 @@ layout: main
{% for album in albums %}
<a href="{{album.url}}" title="{{album.name | escape}}">
<div class="relative block">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ album.name }}</div>
<div class="px-1 text-xs text-white">
@ -140,7 +140,7 @@ layout: main
{% for movie in movies %}
<a href="{{movie.link}}" title="{{movie.title | escape}}">
<div class="relative block" style="max-width:226px">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
</div>

6
src/_includes/paginator.liquid
View file

@ -1,7 +1,7 @@
<nav class="flex justify-between mt-8 items-center">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
<button class="py-2 pr-4 text-primary-500 hover:text-primary-400" aria-label="Previous page">
<button class="py-2 pr-4 text-purple-500 hover:text-purple-400" aria-label="Previous page">
{% heroicon "solid" "arrow-left" "Prevous" "width=20 height=20" %}
</button>
</a>
@ -17,7 +17,7 @@
<div class="flex flex-row items-center">
<select
id="pagination"
class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-500 dark:hover:bg-primary-300 mr-1 focus-visible:outline-none focus-visible:bg-primary-400 appearance-none text-center"
class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-500 hover:bg-purple-500 dark:hover:bg-purple-300 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
style="text-align-last:center">
{% for pageEntry in pagination.pages %}
<option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
@ -30,7 +30,7 @@
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
<button class="py-2 pl-4 text-primary-500 hover:text-primary-400" aria-label="Next page">
<button class="py-2 pl-4 text-purple-500 hover:text-purple-400" aria-label="Next page">
{% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
</button>
</a>

10
src/_includes/webmentions.liquid
View file

@ -11,7 +11,7 @@
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
class="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-300"
loading="lazy" />
</a>
</li>
@ -29,7 +29,7 @@
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
class="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-300"
loading="lazy" />
</a>
</li>
@ -46,11 +46,11 @@
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
class="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-primary-500 dark:group-hover:border-primary-300"
class="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-300"
loading="lazy" />
<div class="ml-3">
<p class="text-sm group-hover:text-primary-500 dark:group-hover:text-primary-300">{{ mention.content.text }}</p>
<p class="mt-1 text-xs group-hover:text-primary-500 dark:group-hover:text-primary-300">{{ mention.published | isoDateOnly }}</p>
<p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-300">{{ mention.content.text }}</p>
<p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-300">{{ mention.published | isoDateOnly }}</p>
</div>
</a>
</div>

2
src/assets/atom-feed-links.xsl
View file

@ -69,7 +69,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
</xsl:template>
<xsl:template match="atom:feed/atom:entry">
<li>
<a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 cursor-pointer">
<a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>

2
src/assets/atom-feed.xsl
View file

@ -73,7 +73,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:template match="atom:feed/atom:entry">
<div class="pb-4 border-b border-gray-200 dark:border-gray-700 mb-8">
<h3 class="mb-0">
<a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 md:text-2xl text-xl tracking-normal font-black">
<a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>

BIN
src/assets/img/favicon/apple-touch-icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/img/favicon/favicon-16x16.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/img/favicon/favicon-192x192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/img/favicon/favicon-32x32.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/img/favicon/favicon-512x512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/img/favicon/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/img/logo.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/img/social-card.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 44 KiB

432
src/assets/styles/prism.css
View file

@ -1,375 +1,133 @@
:root {
--background: #282a36;
--comment: #6272a4;
--foreground: #f8f8f2;
--selection: #44475a;
--cyan: #8be9fd;
--green: #50fa7b;
--orange: #ffb86c;
--pink: #ff79c6;
--purple: #bd93f9;
--red: #ff5555;
--yellow: #f1fa8c;
--background-30: #282a3633;
--comment-30: #6272a433;
--foreground-30: #f8f8f233;
--selection-30: #44475a33;
--cyan-30: #8be9fd33;
--green-30: #50fa7b33;
--orange-30: #ffb86c33;
--pink-30: #ff79c633;
--purple-30: #bd93f933;
--red-30: #ff555533;
--yellow-30: #f1fa8c33;
--background-40: #282a3666;
--comment-40: #6272a466;
--foreground-40: #f8f8f266;
--selection-40: #44475a66;
--cyan-40: #8be9fd66;
--green-40: #50fa7b66;
--orange-40: #ffb86c66;
--pink-40: #ff79c666;
--purple-40: #bd93f966;
--red-40: #ff555566;
--yellow-40: #f1fa8c66;
}
pre::-webkit-scrollbar {
width: 14px;
}
pre::-webkit-scrollbar-track {
background-color: var(--comment);
border-radius: 0;
}
pre::-webkit-scrollbar-thumb {
background-color: var(--purple);
border-radius: 0;
}
code[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
pre[class*='language-']::-moz-selection {
text-shadow: none;
background-color: var(--selection);
}
code[class*='language-'] ::selection,
code[class*='language-']::selection,
pre[class*='language-'] ::selection,
pre[class*='language-']::selection {
text-shadow: none;
background-color: var(--selection);
}
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
padding-right: 20px;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: var(--foreground);
font-size: 0.8em;
padding: 0.5em;
background: var(--comment);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar span:focus,
div.code-toolbar > .toolbar span:hover {
color: inherit;
text-decoration: none;
background-color: var(--green);
}
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}
/*
* Laserwave Theme originally by Jared Jones for Visual Studio Code
* https://github.com/Jaredk3nt/laserwave
*
* Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
*/
code[class*='language-'],
pre[class*='language-'] {
color: var(--foreground);
background: var(--background);
text-shadow: none;
font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
background: #27212e;
color: #ffffff;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */
/* The following properties are standard, please leave them as they are */
font-size: 1em;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
/* The following properties are also standard */
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection,
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection {
background: #eb64b927;
color: inherit;
}
code[class*='language-']::selection,
code[class*='language-'] ::selection,
pre[class*='language-']::selection,
pre[class*='language-'] ::selection {
background: #eb64b927;
color: inherit;
}
/* Properties specific to code blocks */
pre[class*='language-'] {
background: var(--background);
padding: 1em; /* this is standard */
margin: 0.5em 0; /* this is the default */
overflow: auto; /* this is standard */
border-radius: 0.5em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
height: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: var(--background);
}
/* Properties specific to inline code */
:not(pre) > code[class*='language-'] {
padding: 4px 7px;
border-radius: 0.3em;
white-space: normal;
padding: 0.2em 0.3em;
border-radius: 0.5rem;
white-space: normal; /* this is standard */
}
.limit-300 {
height: 300px !important;
.token.comment,
.token.prolog,
.token.cdata {
color: #91889b;
}
.limit-300 {
height: 400px !important;
.token.punctuation {
color: #7b6995;
}
.limit-500 {
height: 500px !important;
.token.builtin,
.token.constant,
.token.boolean {
color: #ffe261;
}
.limit-600 {
height: 600px !important;
.token.number {
color: #b381c5;
}
.limit-700 {
height: 700px !important;
.token.important,
.token.atrule,
.token.property,
.token.keyword {
color: #40b4c4;
}
.limit-800 {
height: 800px !important;
.token.doctype,
.token.operator,
.token.inserted,
.token.tag,
.token.class-name,
.token.symbol {
color: #74dfc4;
}
.language-css {
color: var(--purple);
.token.attr-name,
.token.function,
.token.deleted,
.token.selector {
color: #eb64b9;
}
.token {
color: var(--pink);
.token.attr-value,
.token.regex,
.token.char,
.token.string {
color: #b4dce7;
}
.language-css .token {
color: var(--pink);
}
.token.script {
color: var(--foreground);
.token.entity,
.token.url,
.token.variable {
color: #ffffff;
}
/* The following rules are pretty similar across themes, but feel free to adjust them */
.token.bold {
font-weight: 700;
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.atrule,
.token.attr-name,
.token.attr-value {
color: var(--green);
}
.language-css .token.atrule {
color: var(--purple);
}
.language-html .token.attr-value,
.language-markup .token.attr-value {
color: var(--yellow);
}
.token.boolean {
color: var(--purple);
}
.token.builtin,
.token.class-name {
color: var(--cyan);
}
.token.comment {
color: var(--comment);
}
.token.constant {
color: var(--purple);
}
.language-javascript .token.constant {
color: var(--orange);
font-style: italic;
}
.token.entity {
color: var(--pink);
}
.language-css .token.entity {
color: var(--green);
}
.language-html .token.entity.named-entity {
color: var(--purple);
}
.language-html .token.entity:not(.named-entity) {
color: var(--pink);
}
.language-markup .token.entity.named-entity {
color: var(--purple);
}
.language-markup .token.entity:not(.named-entity) {
color: var(--pink);
}
.token.function {
color: var(--green);
}
.language-css .token.function {
color: var(--cyan);
}
.token.important,
.token.keyword {
color: var(--pink);
}
.token.prolog {
color: var(--foreground);
}
.token.property {
color: var(--orange);
}
.language-css .token.property {
color: var(--cyan);
}
.token.punctuation {
color: var(--pink);
}
.language-css .token.punctuation {
color: var(--orange);
}
.language-html .token.punctuation,
.language-markup .token.punctuation {
color: var(--foreground);
}
.token.selector {
color: var(--pink);
}
.language-css .token.selector {
color: var(--green);
}
.token.regex {
color: var(--red);
}
.language-css .token.rule:not(.atrule) {
color: var(--foreground);
}
.token.string {
color: var(--yellow);
}
.token.tag {
color: var(--pink);
}
.token.url {
color: var(--cyan);
}
.language-css .token.url {
color: var(--orange);
}
.token.variable {
color: var(--comment);
}
.token.number {
color: rgba(189, 147, 249, 1);
}
.token.operator {
color: rgba(139, 233, 253, 1);
}
.token.char {
color: rgba(255, 135, 157, 1);
}
.token.symbol {
color: rgba(255, 184, 108, 1);
}
.token.deleted {
color: #e2777a;
cursor: help;
}
.token.namespace {
color: #e2777a;
}
.highlight-line {
color: inherit;
display: inline-block;
text-decoration: none;
border-radius: 4px;
padding: 2px 10px;
}
.highlight-line:empty:before {
content: ' ';
}
.highlight-line:not(:last-child) {
min-width: 100%;
}
.highlight-line .highlight-line:not(:last-child) {
min-width: 0;
}
.highlight-line-isdir {
color: var(--foreground);
background-color: var(--selection-30);
}
.highlight-line-active {
background-color: var(--comment-30);
}
.highlight-line-add {
background-color: var(--green-30);
}
.highlight-line-remove {
background-color: var(--red-30);
opacity: 0.7;
}

2
src/index.html
View file

@ -14,7 +14,7 @@ pagination:
>
<a class="no-underline" href="{{ post.url }}">
<h2
class="p-name m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
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"
>
{{ post.data.title }}
</h2>

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

@ -69,7 +69,7 @@ export default function Now(props) {
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CodeBracketIcon className="mr-1 inline h-6 w-6" />
Working at <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
href="https://hashicorp.com"
target="_blank"
rel="noopener noreferrer"
@ -81,7 +81,7 @@ export default function Now(props) {
<MegaphoneIcon className="mr-1 inline h-6 w-6" />
Rooting for the{` `}
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
href="https://lakers.com"
target="_blank"
rel="noopener noreferrer"
@ -98,7 +98,7 @@ export default function Now(props) {
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CommandLineIcon className="mr-1 inline h-6 w-6" />
Hacking away on random projects like this page, my <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
href="/blog"
passHref
>
@ -114,7 +114,7 @@ export default function Now(props) {
<p className="pt-8 text-center text-xs text-gray-900 dark:text-gray-100">
(This is a{' '}
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
@ -122,7 +122,7 @@ export default function Now(props) {
now page
</Link>
, and if you have your own site, <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
@ -309,14 +309,14 @@ const Cover = (props: { media: Media; type: 'artist' | 'album' }) => {
return (
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
href={media.url}
target="_blank"
rel="noopener noreferrer"
title={media.name}
>
<div className="relative">
<div className="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div className="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
<div className="absolute left-1 bottom-2 drop-shadow-md">
<div className="px-1 text-xs font-bold text-white">{media.name}</div>
<div className="px-1 text-xs text-white">

4
src/posts/2023/building-my-now-page-using-eleventy.md
View file

@ -56,7 +56,7 @@ The **Listening: albums** call is quite similar, swapping the `user.gettopartist
{% for artist in artists %}
<a href="{{artist.url}}" title="{{artist.name | escape}}">
<div class="relative block">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{artist.name}}</div>
<div class="px-1 text-xs text-white">
@ -106,7 +106,7 @@ These images are all cropped to `350x350` and hosted over on <a href="https://bu
{% for album in albums %}
<a href="{{album.url}}" title="{{album.name | escape}}">
<div class="relative block">
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{album.name}}</div>
<div class="px-1 text-xs text-white">

4
src/posts/2023/client-side-webmentions-in-nextjs.md
View file

@ -76,7 +76,7 @@ const WebmentionsCore = () => {
<li key={mention['wm-id']} className="-ml-2">
<Link href={mention.url} target="_blank" rel="noopener noreferrer">
<Image
className="h-10 w-10 rounded-full border border-primary-500 dark:border-gray-500"
className="h-10 w-10 rounded-full border border-purple-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="40"
@ -105,7 +105,7 @@ const WebmentionsCore = () => {
rel="noopener noreferrer"
>
<Image
className="h-12 w-12 rounded-full border border-primary-500 dark:border-gray-500"
className="h-12 w-12 rounded-full border border-purple-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="48"

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

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

10
src/posts/2023/webmentions-in-eleventy.md
View file

@ -79,7 +79,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
loading="lazy"
/>
</a>
@ -98,7 +98,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
loading="lazy"
/>
</a>
@ -116,12 +116,12 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-primary-500 dark:group-hover:border-primary-300"
class="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-300"
loading="lazy"
/>
<div class="ml-3">
<p class="text-sm group-hover:text-primary-500 dark:group-hover:text-primary-300">{{mention.content.text}}</p>
<p class="mt-1 text-xs group-hover:text-primary-500 dark:group-hover:text-primary-300">{{mention.published | isoDateOnly}}</p>
<p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-300">{{mention.content.text}}</p>
<p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-300">{{mention.published | isoDateOnly}}</p>
</div>
</a>
</div>

2
src/tags.md
View file

@ -7,7 +7,7 @@ title: Tags
<span>
<a href="/tags/{{ tag }}" class="no-underline">
<button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-primary-400 hover:bg-primary-500 dark:hover:bg-primary-300">
<button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-purple-400 hover:bg-purple-500 dark:hover:bg-purple-300">
{{ tag }}
</button>
</a>

27
tailwind.config.js
View file

@ -1,5 +1,4 @@
const defaultTheme = require('tailwindcss/defaultTheme')
const dracula = require('tailwind-dracula/colors')
module.exports = {
darkMode: 'class',
@ -17,22 +16,6 @@ module.exports = {
fontFamily: {
sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
},
colors: {
...dracula,
primary: dracula.purple,
gray: dracula.darker,
blue: dracula.blue,
cyan: dracula.cyan,
green: dracula.green,
orange: dracula.orange,
pink: dracula.pink,
purple: dracula.purple,
red: dracula.red,
yellow: dracula.yellow,
dark: dracula.dark,
darker: dracula.darker,
light: dracula.light,
},
backgroundImage: {
'cover-gradient':
'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
@ -41,11 +24,11 @@ module.exports = {
DEFAULT: {
css: {
a: {
color: theme('colors.primary.500'),
color: theme('colors.purple.500'),
'&:hover': {
color: `${theme('colors.primary.400')} !important`,
color: `${theme('colors.purple.400')} !important`,
},
code: { color: theme('colors.primary.400') },
code: { color: theme('colors.purple.400') },
},
pre: {
backgroundColor: theme('colors.gray.900'),
@ -67,7 +50,9 @@ module.exports = {
},
plugins: [
require('@tailwindcss/typography'),
require('tailwind-dracula')('dracula'),
require('@catppuccin/tailwindcss', {
defaultFlavour: 'mocha',
}),
require('@tailwindcss/aspect-ratio'),
],
content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],

12
tailwind.css
View file

@ -3,12 +3,12 @@
@tailwind utilities;
::-moz-selection {
color: theme(colors.gray.800);
color: theme(colors.white);
background: theme(colors.purple.400);
}
::selection {
color: theme(colors.gray.800);
color: theme(colors.white);
background: theme(colors.purple.400);
}
@ -33,5 +33,11 @@
}
.active {
@apply text-primary-400 !important;
@apply text-purple-500 !important;
}
.active:hover,
.active:active,
.active:focus {
@apply text-purple-400 !important;
}

20
yarn.lock
View file

@ -230,6 +230,19 @@
"@babel/helper-validator-identifier" "^7.19.1"
to-fast-properties "^2.0.0"
"@catppuccin/palette@0.1.5":
version "0.1.5"
resolved "https://registry.yarnpkg.com/@catppuccin/palette/-/palette-0.1.5.tgz#79350555c86707913942bf4feaac9fe9bc0c1d7c"
integrity sha512-IQLsZwXDMpLc5CFGjIMa/gFnnFL/QLB280F11B51JweZHerZ/FgPXdIR4eQqn1CgrqI3wGfgnj1LVPx12DV/Uw==
"@catppuccin/tailwindcss@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@catppuccin/tailwindcss/-/tailwindcss-0.1.1.tgz#16cfeec67591fe2b0428d6aaca718c72cdb67e53"
integrity sha512-WWOzx8uOf3QPZ1HdVSkpgaqzMzrfYpOgAketQAQ7493eFhlYC4bJ1ViT5ukhwfhzuu3xnmke+Op2qjhHnyjt8g==
dependencies:
"@catppuccin/palette" "0.1.5"
tailwindcss "^3.0.24"
"@commitlint/cli@^17.6.3":
version "17.6.3"
resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-17.6.3.tgz#a02194a2bb6efe4e681eda2addd072a8d02c9497"
@ -5304,12 +5317,7 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
tailwind-dracula@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/tailwind-dracula/-/tailwind-dracula-1.1.0.tgz#3b53341841e065f75e9af253c3f94f4e01affe98"
integrity sha512-LjU1df6WGS5eUwozdPtZ7jARojHYTIe6y1Gj5v2QNaNnMnLm7ipPtlIEGlNXXraWjVnWeRbLZl4vvr48mMFGxw==
tailwindcss@^3.3.2:
tailwindcss@^3.0.24, tailwindcss@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==