feat: use dedicated cdn, and prep home page

src/app/characters/characters.html

@@ -1,12 +1,12 @@
 <h1>Characters</h1>
 <div class="character">
   <h2>Emi</h2>
-  <img src="https://cdn.nhcarrigan.com/yurigpt/avatars/emi.png" alt="Emi's avatar">
+  <img src="https://cdn.yurigpt.com/avatars/emi.png" alt="Emi's avatar">
   <p>Our main character, Emi has always struggled to make friends in person. But she thrives online, where she feels she can be her true self.</p>
 </div>
 <hr />
 <div class="character">
   <h2>Mira</h2>
-  <img src="https://cdn.nhcarrigan.com/yurigpt/avatars/mira.png" alt="Mira's avatar">
+  <img src="https://cdn.yurigpt.com/avatars/mira.png" alt="Mira's avatar">
   <p>Mira is Emi's online girlfriend. They are in a long-distance relationship, so they have not met. This works out great for Emi, but maybe not all is as it seems?</p>
 </div>

src/app/home/home.css

@@ -0,0 +1,12 @@
+img {
+  width: 500px;
+  border-radius: 50%;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+p {
+  font-size: 1.5rem;
+}

src/app/home/home.html

@@ -1 +1,3 @@
-<p>home works!</p>
+<h1>YuriGPT</h1>
+<img src="https://cdn.yurigpt.com/yurigpt.png" alt="YuriGPT Logo" />
+<p>A webcomic about two girls in love.</p>

src/app/nav/nav.css

@@ -21,6 +21,10 @@ li {
   margin: 0 10px;
 }
 
+img {
+  height: 50px;
+}
+
 #highlight {
   font-size: 1.2em;
   background: var(--foreground);

src/app/nav/nav.html

@@ -1,6 +1,6 @@
 <nav>
   <ul>
-    <li><a routerLink="/">YuriGPT</a></li>
+    <li><a routerLink="/"><img src="https://cdn.yurigpt.com/yurigpt.png" alt="YuriGPT Logo" /></a></li>
     <li><a routerLink="/about">About</a></li>
     <li id="highlight"><a routerLink="/comic">Start Reading</a></li>
     <li><a routerLink="/characters">Characters</a></li>