homepage done maybe

.eleventy.js

@@ -12,15 +12,11 @@ const markdownClassMapping = {
   h5: ['text-lg', 'mt-2', 'text-text'],
   h6: ['font-bold', 'mt-2', 'text-text'],
   blockquote: ['border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-base'],
-  a: [
+  a: ['link'],
-    'text-blue', 'underline',
-    'visited:text-lavender',
-    'hover:no-underline', 'hover:text-sky', 'hover:outline', 'hover:outline-width-1', 'hover:outline-sky',
-    'active:no-underline', 'active:text-sky', 'active:outline', 'active:outline-width-1', 'active:outline-sky',
-    'focus:no-underline', 'focus:text-sky', 'focus:outline', 'focus:outline-width-1', 'focus:outline-sky'
-  ],
   s: ['text-red'],
   p: ['mb-4', 'text-text', 'leading-7'],
+  strong: ['font-normal', 'text-yellow'],
+  em: ['italic', 'text-green'],
   img: ['max-w-full', 'rounded-lg', 'max-h-600px'],
   ul: ['list-disc', 'ml-4'],
 };
@@ -46,5 +42,11 @@ module.exports = function(eleventyConfig) {
     collection => collection.getAllSorted().filter(item => item.data.pinned),
   );
 
+  eleventyConfig.addFilter('markdown', (value) => {
+    const md = markdownIt({ linkify: true, html: true });
+    md.use(markdownItClass, markdownClassMapping);
+    return md.render(value);
+  });
+
   eleventyConfig.setLibrary('njk', nunjucksEnvironment);
 };

_includes/base-footer.html

@@ -1,27 +1,27 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="mt-12 rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
+      <div class="mt-12 rounded shadow overflow-hidden shadow divide-y divide-crust sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
         {%- for navItem in links -%}
-          <div class="relative group bg-white p-6">
+          <div class="relative group bg-base/75 p-6">
-            <h3 class="text-lg font-medium">
+            <h3 class="text-lg">
-              <a href="{{navItem.url}}" class="focus:outline-link">
+              <a href="{{navItem.url}}" class="link">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>
                 {{navItem.title}}
               </a>
             </h3>
-            <p class="mt-2 text-sm text-gray-500">
+            <p class="mt-2 text-sm text-text">
               {{navItem.description}}
             </p>
           </div>
         {%- endfor -%}
       </div>
+    </div>
 
-      <footer class="mt-12 mb-4">
+    <footer class="mt-12 bg-base/75 py-4 px-4">
-        <div class="text-gray-500">
+      <div class="text-subtext1">
-          Built in <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://www.11ty.dev/">Eleventy</a> with <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://tailwindui.com/">Tailwind UI</a>, <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://gitlab.com/gaiety/portfolio/">Fork it Here</a>
+        Built in <a class="link" href="https://www.11ty.dev/">Eleventy</a> with <a class="link" href="https://tailwindcss.com/">TailwindCSS</a> and a 🐈 <a class="link" href="https://github.com/catppuccin">Catppuccin color palette</a>, 🍴 <a class="link" href="https://git.gay/gaiety/portfolio">Fork it Here</a>
       </div>
     </footer>
-    </div>
   </body>
 </html>
 

_includes/base-header.html

@@ -34,7 +34,7 @@
       {%- for navItem in navigation -%}
         <a
           href="{{navItem.url}}"
-          class="transition-colors {% if page.url == navItem.url %} border-rosewater text-rosewater {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium focus:outline-link"
+          class="transition-colors {% if page.url == navItem.url %} border-rosewater text-rosewater {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium outline-link"
           {% if page.url == navItem.url %}aria-current="page"{% endif %}
         >
           {{navItem.title}}

_includes/pinned.njk

@@ -1,7 +1,7 @@
 {% include "base-header.html" %}
 
-<main class="max-w-7xl mx-auto p-2">
+<main class="max-w-7xl mx-auto px-2 py-16">
-  <div class="relative max-w-lg mx-auto divide-y-2 divide-overlay2 lg:max-w-7xl">
+  <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div class="p-2 bg-base/75 shadow rounded border-2 border-base border-l-yellow">
       <h1 class="text-yellow mt-2 mb-8 text-3xl tracking-tight sm:text-4xl">
         {{ title }}
@@ -11,28 +11,28 @@
       </div>
     </div>
 
-    <div class="mt-12 grid gap-8 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
+    <div class="mt-16 grid gap-16 pt-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
       {%- for content in collections.pinned | reverse -%}
         <div>
           <div>
-            <a href="/{{ content.data.tags[0] }}/" class="inline-block focus:outline-link">
+            <a href="/{{ content.data.tags[0] }}/" class="inline-block outline-link">
-              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-pink-100 text-pink-700 hover:underline">
+              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:underline">
                 {{ content.data.tags[0] | capitalize }}
               </span>
             </a>
           </div>
-          <a href="{{ content.url }}" class="block mt-4 focus:outline-link">
+          <a href="{{ content.url }}" class="block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue active:border-blue rounded">
-            <h3 class="relative bg-pink-100 h-20 overflow-hidden rounded-tl-lg rounded-tr-lg text-xl font-semibold text-pink-700">
+            <h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
               <span class="absolute z-10 inset-3">{{ content.data.title }}</span>
               <img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
             </h3>
-            <div class="relative overflow-hidden h-24 rounded-bl-lg rounded-br-lg pt-3 text-base text-slate-500">
+            <div class="relative overflow-hidden h-24 rounded-bl rounded-br pt-3 text-text">
-              <div class="absolute contrast-50 scale-110 bottom-1/2 left-0 -right-0 translate-y-1/2">
+              <div class="absolute scale-110 bottom-1/2 left-0 right-0 translate-y-1/2 bg-crust">
-                <img class="mb-40 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
+                <img class="mb-40 contrast-50 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
+              </div>
+              <div class="px-3 relative z-10">
+              {{ content.data.description | markdown | safe }}
               </div>
-              <p class="px-3 relative z-10">
-                {{ content.data.description }}
-              </p>
             </div>
           </a>
         </div>

community/a11yautomationtesting.md

@@ -1,7 +1,7 @@
 ---
 tags: community
 title: "Talk: Achieving A11y Automation Testing"
-description: "A success story and a look at how anyone can automate A11y regardless of framework."
+description: "A success story and a look at how anyone can automate **A11y** regardless of framework."
 date: 2021-02-29
 image: /img/content/testjssummit2021.jpg
 pinned: true

repos/ember-select-light.md

@@ -2,7 +2,7 @@
 tags: repos
 templateEngineOverride: md
 title: ember-select-light
-description: The simplest Ember <select> there is.
+description: The simplest Ember `<select>` there is.
 date: 2020-11-05
 image: /img/content/ember-select-light-tailwind.png
 pinned: true

styles.css

@@ -1,3 +1,20 @@
 @tailwind base; 
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .link {
+    @apply text-blue underline;
+  }
+  .link:visited {
+    @apply text-lavender;
+  }
+  .link:hover,
+  .link:active,
+  .link:focus {
+    @apply no-underline text-sky outline-2 outline-sky;
+  }
+  .outline-link {
+    @apply outline-offset-4 outline-2 outline-sky;
+  }
+}

work/oncue.md

@@ -1,7 +1,7 @@
 ---
 tags: work
 title: UI Engineer at Oncue
-description: (Apr 2021 - Apr 2022) React, component systems, accessibility and more!
+description: _(Apr 2021 - Apr 2022)_ React, component systems, accessibility and more!
 date: 2021-04-19
 image: /img/content/oncue-thumb.png
 pinned: true