cleanup, a11y

craigerskine · Jul 19, 2024 · 5e0c303 · 5e0c303
1 parent 81f35b3
commit 5e0c303
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 47 deletions.
diff --git a/_site/_includes/_logo.njk b/_site/_includes/_logo.njk
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="text-current fill-current motion-safe:(transition) group-hover:(rotate-45)" role="img">
-  <title>{{ site.meta.title }}</title>
-  <path d="m49.9997864 52.8277864 33.9127303 33.914098c-8.9121413 8.2299265-20.8251307 13.2581156-33.9125167 13.2581156-13.0878756 0-25.0012668-5.0285653-33.9135169-13.2590393zm-36.7407471-36.7413033 33.9127471 33.9133033-33.9127471 33.9137305c-8.23047398-8.9122501-13.2590393-20.8256413-13.2590393-33.9135169s5.02856532-25.0012668 13.2590393-33.9135169zm73.4819214 0c8.230474 8.9122501 13.2590393 20.8256413 13.2590393 33.9135169 0 13.087386-5.0281891 25.0003754-13.2581156 33.9125167l-33.914098-33.9127303zm-36.7409607-16.0864831c13.0878756 0 25.0012668 5.02856532 33.9135169 13.2590393l-33.9137305 33.9127471-33.9133033-33.9127471c8.9122501-8.23047398 20.8256413-13.2590393 33.9135169-13.2590393z" fill-rule="evenodd" />
-</svg>
+<iconify-icon icon="mdi:tailwind" inline width="50px" height="50px" class="iconify"></iconify-icon>
diff --git a/_site/_includes/components/elements.njk b/_site/_includes/components/elements.njk
diff --git a/_site/_includes/layouts/default.njk b/_site/_includes/layouts/default.njk
@@ -1,4 +1,4 @@
-{%- import 'components/elements.njk' as el -%}
+{%- from 'macro.heading.njk' import heading -%}
 {%- set page_title -%}{{ title +' :: '+ site.meta.title if title else site.meta.title }}{%- endset -%}
 
 <!doctype html>
@@ -41,9 +41,9 @@
     <div class="min-h-screen flex-(& col) relative">
 
       <header class="w-full flex-none">
-        <nav class="mx-auto border-(b gray-500/20) py-8 px-4 max-w-7xl flex-(& col) items-center gap-4 md:(flex-row justify-between)">
+        <nav class="mx-auto py-8 px-4 max-w-7xl flex-(& col) items-center gap-4 md:(flex-row justify-between)">
           <a href="{{ '/' | url }}" class="group text-pri-600 flex-(& none) items-center gap-2 transform motion-safe:(transition) hover:(text-pri-500)">
-            <span class="w-12 h-12">{%- include '_logo.njk' %}</span>
+            {%- include '_logo.njk' %}
             <strong class="text-xl font-semibold hidden md:(text-2xl tracking-tight block)">{{ site.meta.title }}</strong>
           </a>
           <ul class="flex items-center gap-4 md:(gap-10)">
@@ -68,7 +68,7 @@
       <main class="pb-8 w-full flex-1 md:(pb-24)">
         <section class="mx-auto px-4 max-w-7xl">
           <div class="pt-12">
-            {%- call el.heading() %}{{ title }}{%- endcall %}
+            {{ heading({slot: title, divider: true}) }}
             {{ content | safe }}
           </div>
         </section>
@@ -86,7 +86,7 @@
         <div class="mx-auto px-4 max-w-7xl">
           <div class="pb-8 text-center space-y-5 md:(pb-12 text-start flex items-start justify-between gap-5 space-y-0)">
             <nav class="flex-none">
-              <a href="{{ '/' | url }}" class="group w-10 h-10 text-pri-700/50 inline-flex transform motion-safe:(transition) hover:(text-pri-500)">
+              <a href="{{ '/' | url }}" class="group text-pri-700/50 inline-flex transform motion-safe:(transition) hover:(text-pri-500)">
                 {%- include '_logo.njk' %}
               </a>
               <ul class="py-5 text-2xl flex justify-center gap-5 md:(justify-start)">

diff --git a/_site/_includes/macro.heading.njk b/_site/_includes/macro.heading.njk
@@ -0,0 +1,9 @@
+{%- macro heading(param) %}
+<{{ param.tag if param.tag else 'h1' }} class="pb-12 w-full text-2xl leading-tight font-black flex items-center space-x-4 lg:(text-[calc(3vw)])">
+  {%- if param.divider %}<i class="h-px bg-gray-500/20 flex-1" aria-hidden="true"></i>{%- endif %}
+  <span class="{% if param.divider %}flex-none{% else %}text-center flex-1{% endif %}">
+    {{ param.slot | safe }}
+  </span>
+  {%- if param.divider %}<i class="h-px bg-gray-500/20 flex-1" aria-hidden="true"></i>{%- endif %}
+</{{ param.tag if param.tag else 'h1' }}>
+{%- endmacro %}
diff --git a/_site/_includes/macro.list.njk b/_site/_includes/macro.list.njk
@@ -0,0 +1,11 @@
+{%- macro list(param) %}
+<ul class="mx-auto max-w-xl grid-(& cols-1) gap-16 lg:(max-w-none grid-cols-3)">
+  {{ param.slot | safe }}
+</ul>
+{%- endmacro %}
+
+{%- macro listItem(param) %}
+<li class="flex">
+  {{ param.slot | safe }}
+</li>
+{%- endmacro %}
diff --git a/_site/index.md b/_site/index.md
@@ -11,7 +11,7 @@ title: 11ty + Twind
 
 Twind is Tailwind but without the build step. It also comes with a ton of cool options for stuff like auto-dark, grouping, arbitrary one-offs, and much much more. And since it's live, you can do stuff like partial class assembly `:class="'bg-'+ color +'-500/'+ opacity"` { .lead }
 
-**Included in this kit is also an example of a [parameterized component](https://github.com/craigerskine/11ty-twind/blob/main/_site/_includes/macro.button.njk):**
+**Included in this kit are examples of [parameterized components/macros](https://github.com/craigerskine/11ty-twind/blob/main/_site/_includes/macro.button.njk):**
 
 ```twig{% raw %}
 {# _includes/macro.button.njk #}

diff --git a/_site/products.md b/_site/products.md
@@ -9,34 +9,38 @@ eleventyComputed:
     key: "{{ title }}"
 ---
 
-{%- import 'components/elements.njk' as el -%}
+{%- from 'macro.list.njk' import list, listItem -%}
 
-{%- call el.list() %}
-{%- for item in collections.product %}
-{%- call el.listItem() %}
-<a href="{{ item.url | url }}" class="group w-full h-full bg-pri-500/5 rounded-lg">
+{%- set products -%}
+{%- for item in collections.product -%}
+{%- set i -%}
+<div class="group w-full h-full bg-white relative rounded-lg shadow-lg dark:(bg-pri-500/5)">
   <figure>
     <img src="https://picsum.photos/id/{{ item.data.img }}/400/300" alt="{{ item.data.title }} photo" class="w-full h-48 object-(cover center) rounded-t-lg motion-safe:(transition-all) group-hover:(object-bottom)" />
     <figcaption class="p-6 space-y-1">
-      <strong class="text-(lg pri-600) leading-tight font-semibold relative">
+      <a href="{{ item.url | url }}" class="text-(lg pri-600) leading-tight font-semibold inline-block [&:after]:(w-full h-0.5 bg-current block opacity-50 scale-0 motion-safe:(transition) content-['']) [&:hover:after,&:focus:after]:(scale-100)">
         {{ item.data.title }}
-        <b class="h-[2px] bg-current absolute inset-x-0 -bottom-px opacity-30 scale-0 motion-safe:(transition) group-hover:(scale-100)"></b>
-      </strong>
+        <span class="absolute inset-0 rounded-lg motion-safe:(transition) group-hover:(ring-(& pri-600/50))" aria-hidden="true"></span>
+      </a>
       <div class="line-clamp-2 text-sm">{{ item.content | safe }}</div>
-      <div class="pt-3 flex justify-between">
-        <ul class="flex">
+      <div class="pt-3 flex items-end justify-between">
+        <strong class="text-xl">${{ item.data.price }}</strong>
+        <ul class="flex items-center justify-end">
           {%- for i in range(0, 5) %}
           {%- if item.data.rating >= loop.index %}
-          <li><iconify-icon icon="mdi:star" inline="false" class="iconify text-yellow-500"></iconify-icon></li>
+          <li><iconify-icon icon="mdi:star" inline width="20px" height="20px" class="iconify text-yellow-500"></iconify-icon></li>
           {%- else %}
-          <li class="opacity-30"><iconify-icon icon="mdi:star-outline" inline="false" class="iconify"></iconify-icon></li>
+          <li class="opacity-30"><iconify-icon icon="mdi:star-outline" inline width="20px" height="20px" class="iconify"></iconify-icon></li>
           {%- endif %}
           {%- endfor %}
         </ul>
       </div>
     </figcaption>
   </figure>
-</a>
-{%- endcall %}
-{%- endfor %}
-{%- endcall %}
+</div>
+{%- endset -%}
+{{ listItem({slot: i}) }}
+{%- endfor -%}
+{%- endset -%}
+
+{{- list({slot: products}) -}}
diff --git a/_site/products/gadget.md b/_site/products/gadget.md
@@ -2,6 +2,7 @@
 title: Gadget
 img: 0
 rating: 2
+price: 99
 date: 0001-01-01
 ---
 

diff --git a/_site/products/hunkerdoo.md b/_site/products/hunkerdoo.md
@@ -2,6 +2,7 @@
 title: Hunkerdoo
 img: 20
 rating: 3
+price: 75
 date: 0002-01-01
 ---
 

diff --git a/_site/products/widget.md b/_site/products/widget.md
@@ -2,6 +2,7 @@
 title: Widget
 img: 26
 rating: 4
+price: 25
 date: 0003-01-01
 ---