better theme

app/components/article-card.gjs

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

app/components/article-header.gjs

@@ -2,9 +2,9 @@ import { LinkTo } from '@ember/routing';
 
 <template>
   <div class="blog-item">
-    <h2>
+    <h1>
       {{@article.title}}
-    </h2>
+    </h1>
     <p class="meta"><i>{{@article.date}}</i></p>
   </div>
 </template>

app/components/icon-button.hbs

@@ -1,3 +1,3 @@
 <a ...attributes class="icon-button" href={{@href}} title={{@title}}>
-  {{svg-jar (concat 'icon-' @icon) width='22px'}}
+  <IconSvg @name={{@icon}} />
 </a>

app/components/icon-svg.hbs

@@ -0,0 +1 @@
+{{svg-jar (concat 'icon-' @name) width='22px' style="position: relative; top: 4px;"}}

app/styles/app.css

@@ -16,11 +16,19 @@
   /* override the width of the main content */
   grid-template-columns: 1fr min(55rem,90%) 1fr;
 
-  --bg: #000000;
+  /* --bg: #000000;
   --accent-bg: #151149;
   --text: #4FA5E4;
   --text-light: #4FA5E4;
-  --accent: #E14BC9;
+  --accent: #E14BC9; */
+
+  --bg: #000000;
+  --accent-bg: #151149;
+  /* --text: #4FA5E4; */
+  /* --text-light: #4FA5E4; */
+  --accent: #52b7dc;
+  --accent-sub2: #9caae4;
+  --accent-sub3: #be9cde;
 
   header {
     color: #FFFFFF;
@@ -36,10 +44,29 @@
   }
 }
 
+.site-title {
+  font-size: 2em;
+  font-weight: bold;
+  color: #E84CCF;
+  margin-bottom: 0.2em;
+}
+
 h1, h2, h3 {
   line-height: 1;
 }
 
+h1 {
+  color: var(--accent)
+}
+
+h2 {
+  color: var(--accent-sub2)
+}
+
+h3 {
+  color: var(--accent-sub3)
+}
+
 a, a:visited {
   color:var(--accent);
 }
@@ -106,12 +133,12 @@ footer p a[href^="https://"]:after,
   TODO: move the title to not an h1, then move these styles to h1
 */
 
-.blog-item h2 a {
+.blog-item h1 a {
   font-size: 1.6rem;
 }
 
-.blog-item h2 {
-  color: var(--accent);
+.blog-item h1 {
+  /* color: var(--accent); */
   margin-bottom: 0.4rem;
   font-size: 2.6rem;
 }
@@ -125,7 +152,7 @@ footer p a[href^="https://"]:after,
   text-decoration: none;
 
   svg {
-    color: var(--text);
+    color: var(--accent);
   }
 }
 

app/templates/application.gjs

@@ -10,7 +10,7 @@ class MyRouteComponent extends Component {
 
   <template>
     <header>
-      <h1>Sean Massa's Labs</h1>
+      <div class="site-title">Sean Massa's Labs</div>
       <nav>
         <LinkTo @route="index">Home</LinkTo>
         <LinkTo @route="blog">Blog</LinkTo>

app/templates/blog/article/theme-pact.md

@@ -28,7 +28,7 @@ I like this model because you control the direction and personal outputs. Succes
 
 By leveraging the power of direction, defaults, and habits, this framework makes success happen as a matter of course. Well, that's the theory.
 
-## What is a Theme?
+### What is a Theme?
 
 *This concept comes from the [Theme System](https://www.thethemesystem.com/), developed by [Myke Hurley](https://twitter.com/imyke) and [CGP Grey](https://twitter.com/cgpgrey/) through [Cortex](https://www.relay.fm/cortex).*
 
@@ -48,7 +48,7 @@ For my purposes, I decided a theme has to be:
 
 ## What is a PACT Goal?
 
-*This concept comes from [SMART goals are not so smart: make a PACT instead](https://nesslabs.com/smart-goals-pact)* by [Anne-Laure Le Cunff](https://twitter.com/neuranne) through [Ness Labs](https://twitter.com/ness_labs).
+*This concept comes from [SMART goals are not so smart: make a PACT instead](https://nesslabs.com/smart-goals-pact) by [Anne-Laure Le Cunff](https://twitter.com/neuranne) through [Ness Labs](https://twitter.com/ness_labs).*
 
 Anne-Laure defines a PACT Goal as: