tweak headings

app/components/article-card.gjs

@@ -1,15 +1,16 @@
 import { LinkTo } from '@ember/routing';
 import IconSvg from './icon-svg';
+import Heading from './x-heading';
 
 <template>
   <div class="blog-item">
-    <h2>
+    <Heading @level={{@level}}>
       <LinkTo class="post-link"
         @route="blog.article"
         @model={{@article}}>
           {{@article.title}}
       </LinkTo>
-    </h2>
+    </Heading>
     <p class="meta"><IconSvg @name="calendar" /> <i>{{@article.date}}</i></p>
     <p class="meta">{{{@article.description}}}</p>
   </div>

app/components/article-header.gjs

@@ -1,10 +1,11 @@
 import { LinkTo } from '@ember/routing';
+import IconSvg from './icon-svg';
 
 <template>
   <div class="blog-item">
     <h1>
       {{@article.title}}
     </h1>
-    <p class="meta"><i>{{@article.date}}</i></p>
+    <p class="meta"><IconSvg @name="calendar" /> <i>{{@article.date}}</i></p>
   </div>
 </template>

app/components/x-heading.gjs

@@ -0,0 +1,13 @@
+import { eq } from 'ember-truth-helpers';
+
+<template>
+  {{#if (eq @level 'h1')}}
+    <h1>{{yield}}</h1>
+  {{else if (eq @level 'h2')}}
+    <h2>{{yield}}</h2>
+  {{else if (eq @level 'h3')}}
+    <h3>{{yield}}</h3>
+  {{else}}
+    <h2>{{yield}}</h2>
+  {{/if}}
+</template>

app/components/youtube-link.gjs

@@ -1,4 +1,5 @@
 import { LinkTo } from '@ember/routing';
+import IconSvg from './icon-svg';
 
 function href(youtubeID) {
   return `https://www.youtube.com/watch?v=${youtubeID}`;
@@ -13,7 +14,7 @@ function thumbnail(youtubeID) {
     <a target="_blank" href={{href @id}}>
       <h2>
         <div class="talk-title">{{@title}}</div>
-        <div class="talk-date">[{{@date}}]</div>
+        <div class="talk-date"><IconSvg @name="calendar" /> {{@date}}</div>
       </h2>
 
       <img src={{thumbnail @id}}>

app/styles/app.css

@@ -53,17 +53,22 @@
 
 h1, h2, h3 {
   line-height: 1;
+  margin-bottom: 0;
 }
 
-h1 {
+h1:has(+ h2), h2:has(+ h3) {
+  margin-bottom: 0;
+}
+
+h1, h1 a, h1 a:visited {
   color: var(--accent);
 }
 
-h2 {
+h2, h2 a, h2 a:visited {
   color: var(--accent-sub2);
 }
 
-h3 {
+h3, h3 a, h3 a:visited {
   color: var(--accent-sub3);
 }
 
@@ -128,19 +133,13 @@ footer p a[href^="https://"]:after,
   padding-right: 1em; /* sizing */
 }
 
-/*
-  TODO: these h2 styles have to move up to h1 styles because of the markdown rendering
-  TODO: move the title to not an h1, then move these styles to h1
-*/
-
 .blog-item h2 a {
   font-size: 1.6rem;
-  color: var(--accent-sub2);
 }
 
-.blog-item h2 {
-  margin-bottom: 0.4rem;
-  font-size: 2.6rem;
+.blog-item h1, .blog-item h2, .blog-item h3 {
+  margin-bottom: 0;
+  margin-top: 0.7em;
 }
 
 .blog-item p {
@@ -195,6 +194,6 @@ footer p a[href^="https://"]:after,
   text-decoration: none;
 }
 
-.link-list .header .talk-date {
+.link-list h2 .talk-date {
   justify-self: end;
 }

app/templates/index.gjs

@@ -14,6 +14,7 @@ export default RouteTemplate(
   <h2>Recent Blog Post</h2>
 
   <ArticleCard
+    @level='h3'
     @article={{mostRecentPublishedArticle}}
   />