rename til to archive

assets/css/components/til.css → assets/css/components/archive.css

@@ -25,48 +25,52 @@
   display: none;
 }
 
-.sm-micro-grid {
+.sm-archive-grid {
   row-gap: 3rem;
   padding-block: 0 6rem;
 }
 
-.sm-micro-header,
-.sm-micro-grid {
+.sm-archive-header,
+.sm-archive-grid {
   margin-block-start: 0;
 }
 
-.sm-micro-grid > *,
-.sm-micro-header > * {
+.sm-archive-grid > *,
+.sm-archive-header > * {
   text-align: left;
 }
 
-.sm-micro-heading {
+.sm-archive-header {
+  row-gap: 0;
+}
+
+.sm-archive-heading {
   margin: 1rem 0;
   font-weight: 900;
   color: var(--element-light);
   text-transform: uppercase;
 }
 
-.sm-micro-article:where(:hover, :focus-visible) h3 {
+.sm-archive-article:where(:hover, :focus-visible) h3 {
   color: var(--primary);
 }
 
-.sm-micro-article a {
+.sm-archive-article a {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.sm-micro-article h3 {
+.sm-archive-article h3 {
   margin: 0;
   transition: color var(--transition);
 }
 
-.sm-micro-excerpt {
+.sm-archive-excerpt {
   max-width: 60ch;
 }
 
-.sm-micro-article span {
+.sm-archive-article span {
   padding: 0.25rem 0.5rem;
   font-size: var(--x-small);
   font-weight: 300;
@@ -79,7 +83,7 @@
   margin-inline-start: 0.5rem;
 }
 
-.sm-micro-date {
+.sm-archive-date {
   display: flex;
   gap: 0.15em;
   font-weight: 300;
@@ -88,7 +92,7 @@
 }
 
 @media (--laptop) {
-  .sm-micro-date {
+  .sm-archive-date {
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -100,7 +104,7 @@
     translate: -150% 5%;
   }
 
-  .sm-micro-month {
+  .sm-archive-month {
     font-size: 1.15rem;
     letter-spacing: 0.3px;
   }

assets/css/index.css

@@ -35,7 +35,7 @@
 @import 'components/form.css';
 @import 'components/gradient.css';
 @import 'components/toc.css';
-@import 'components/til.css';
+@import 'components/archive.css';
 
 /* Vendo"r */
 @import 'vendor/kg.css';

custom-archive.hbs

@@ -0,0 +1,23 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}
+
+{{#post}}
+    {{> "header"}}
+
+    <main class="sm-header-grid sm-post-content sm-archive-header {{post_class}} {{slug}}" id="sm-main">
+        {{content}}
+    </main>
+
+    {{#get "posts" limit="all" include="tags" filter="tags:hash-{{slug}}" as |archive|}}
+
+    {{#if archive}}
+    <section class="sm-header-grid sm-archive-grid">
+        {{#foreach archive}}
+            {{> "archive-card"}}
+        {{/foreach}}
+    </section>
+    {{/if}}
+
+    {{/get}}
+{{/post}}

partials/archive-card.hbs

@@ -0,0 +1,14 @@
+<div data-date='{{date format='YY'}}'>
+  <h2 class='sm-archive-heading'>{{date format='YYYY'}}</h2>
+  <article class='sm-archive-article'>
+    <a href='{{url}}'>
+      <h3>{{title}}{{#if primary_tag}}<span
+          >{{primary_tag.name}}</span>{{/if}}</h3>
+      <div class='sm-archive-date'>
+        <p class='sm-archive-month'>{{date format='MMM'}}</p>
+        <p class='sm-archive-day'>{{date format='DD'}}</p>
+      </div>
+      <p class='sm-archive-excerpt'>{{excerpt}}</p>
+    </a>
+  </article>
+</div>