From 753fb2baeb1d46953fd10806c0ca0d64e9a72107 Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Sun, 24 Mar 2024 11:35:37 -0500
Subject: [PATCH] styled categories and content

---
 .eleventy.js           |  4 ++--
 _includes/category.njk | 29 ++++++++++++-----------------
 _includes/content.njk  | 20 ++++++++++----------
 community/index.md     |  3 ++-
 uses/index.md          | 14 +++-----------
 5 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index b392692..5181779 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -10,7 +10,7 @@ const markdownClassMapping = {
   h3: ['text-2xl', 'mt-4', 'text-text'],
   h4: ['text-xl', 'mt-2', 'text-text'],
   h5: ['text-lg', 'mt-2', 'text-text'],
-  h6: ['font-bold', 'mt-2', 'text-text'],
+  h6: ['mt-2', 'text-text'],
   blockquote: ['border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-base'],
   a: ['link'],
   s: ['text-red'],
@@ -18,7 +18,7 @@ const markdownClassMapping = {
   strong: ['font-normal', 'text-yellow'],
   em: ['italic', 'text-green'],
   img: ['max-w-full', 'rounded-lg', 'max-h-600px'],
-  ul: ['list-disc', 'ml-4'],
+  ul: ['list-disc', 'ml-4', 'text-subtext0'],
 };
 
 module.exports = function(eleventyConfig) {
diff --git a/_includes/category.njk b/_includes/category.njk
index 48825e5..325622f 100644
--- a/_includes/category.njk
+++ b/_includes/category.njk
@@ -1,35 +1,30 @@
 {% include "base-header.html" %}
 
 <main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-  <div class="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
+  <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div>
-      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
+      <h1 class="text-6xl tracking-tight text-pink">
         {{ page.fileSlug | capitalize }}
-      </h2>
-      <div class="mt-3 text-xl text-gray-500 sm:mt-4">
-        {{ description | safe }}
+      </h1>
+      <div class="mt-3 text-xl text-subtext1 sm:mt-4">
+        {{ description | markdown | safe }}
       </div>
     </div>
 
     <div class="mt-6 pt-10 grid gap-8 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
       {%- for content in collections[ page.fileSlug ] | reverse -%}
         <div>
-          <p class="text-sm text-gray-500">
-            <time datetime="{{ content.data.date | date('YYYY-MM-DD') }}">{{ content.data.date | date }}</time>
-          </p>
-          <a href="{{ content.url }}" class="mt-2 block focus:outline-link">
-            <h3 class="text-xl font-semibold text-gray-900 hover:underline">
+          <a href="{{ content.url }}" class="bg-base/75 px-5 pt-3 pb-px transition block outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
+            <h3 class="text-xl font-semibold text-subtext0 underline">
               {{ content.data.title }}
             </h3>
-            <p class="mt-3 text-base text-gray-500">
-              {{ content.data.description }}
+            <p class="text-sm text-mauve">
+              <time datetime="{{ content.data.date | date('YYYY-MM-DD') }}">{{ content.data.date | date }}</time>
+            </p>
+            <p class="mt-3 text-base text-text">
+              {{ content.data.description | markdown | safe }}
             </p>
           </a>
-          <div class="mt-3">
-            <a href="{{ content.url }}" class="text-base font-semibold text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link">
-              Read more <span class="sr-only">about {{ content.data.title }}</a>
-            </a>
-          </div>
         </div>
       {%- endfor -%}
     </div>
diff --git a/_includes/content.njk b/_includes/content.njk
index 2c68f54..c66ed35 100644
--- a/_includes/content.njk
+++ b/_includes/content.njk
@@ -1,21 +1,21 @@
 {% include "base-header.html" %}
 
-<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+<main class="max-w-4xl mx-auto px-2 sm:px-6 lg:px-8">
   <div class="max-w-3x1 mx-auto mb-4">
-    <div class="-ml-2 mt-4 flex flex-wrap items-baseline">
-      <h1 class="ml-8 mt-2 mb-2 sm:mb-0 text-lg font-medium text-gray-900">
+    <div class="mt-4 flex flex-wrap items-baseline">
+      <h1 class="mt-2 mb-2 sm:mb-0 text-6xl tracking-tight text-pink">
         {{ title }}
-        <span class="inline-block h-1 text-sm text-gray-500">
-          in <a href="/{{tags[0]}}" class="text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link">{{ tags[0] | capitalize }}</a>
-        </span>
+        <small class="inline-block h-1 text-xl text-text">
+          in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
+        </small>
       </h1>
     </div>
-    <div class="-ml-2">
-      <p class="ml-8 text-sm text-gray-500">{{description}}</p>
-    </div>
+    <p class="ml-8 text-sm text-gray-500">
+      {{description | markdown | safe}}
+    </p>
   </div>
 
-  <div class="bg-white overflow-hidden shadow rounded-lg">
+  <div class="bg-base/75 shadow border-l-2 border-yellow">
     <div class="p-4 sm:p-6">
       {{ content | safe }}
     </div>
diff --git a/community/index.md b/community/index.md
index 39ce21b..fcbb0ff 100644
--- a/community/index.md
+++ b/community/index.md
@@ -1,6 +1,7 @@
 ---
 layout: category.njk
-description: 🤝 Trying to do a little good in the world — <a class="text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://noti.st/gaiety">View my public speaking profile on notist</a>
+description:
+    🤝 Trying to do a little good in the world — [View my public speaking profile on notist](https://noti.st/gaiety)
 eleventyExcludeFromCollections: true
 ---
 
diff --git a/uses/index.md b/uses/index.md
index 68ea71d..2663ba5 100644
--- a/uses/index.md
+++ b/uses/index.md
@@ -2,7 +2,7 @@
 layout: content.njk
 tags: uses
 title: About
-description: 🐕 Canine pretending to be a web engineer addicted to design 💻 <a href="https://pronoun.monster/fae/faer/faer/femme/femmeself">Fae</a>/She
+description: 🐕 Someone taught a dog to code and now it's everyone's ~~problem~~ fortune 💻 ([Fae/Femme/Faer](https://pronoun.monster/fae/faer/faer/femme/femmeself) or [She/Her](https://pronoun.monster/she/her/her/hers/herself))
 date: 2020-01-14
 ---
 
@@ -49,16 +49,8 @@ _Also running a personal home server for side projects, offline data storage and
 
 * [Blackwing Pencils](https://blackwing602.com/) ✏️
 * Spray Paint
-* Acrylics
-
-#### YouTube
-
-[Channel: Faetale](https://faetale.com/)
-
-* Adobe Premiere
+* Acrylics 🖌️
 * [EOS M50 Mark II Content Creator Kit](https://shop.usa.canon.com/shop/en/catalog/eos-m50-mark-ii-content-creator-kit)
 
----
-
-Curious what other developers use? Check out [wesbos/awesome-uses](https://github.com/wesbos/awesome-uses)
+_Curious what other developers use? Check out [wesbos/awesome-uses](https://github.com/wesbos/awesome-uses)_