feat: add footer with nav

src/Blog/Components/Layout/Footer.razor

@@ -1,3 +1,7 @@
 @namespace Blog.Components.Layout
 
-<footer></footer>
+<footer>
+  <a href="https://github.com/StevanFreeborn/blog.stevanfreeborn.com">Code</a>
+  <NavLink href="/terms">Terms</NavLink>
+  <NavLink href="/privacy">Privacy</NavLink>
+</footer>

src/Blog/Components/Layout/Footer.razor.css

@@ -1 +1,6 @@
-
+footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  gap: 1rem;
+}

src/Blog/Components/Layout/MainLayout.razor

@@ -5,6 +5,7 @@
   <main>
     @Body
   </main>
+  <Footer />
 </div>
 
 <div id="blazor-error-ui">

src/Blog/Components/Layout/MainLayout.razor.css

@@ -6,12 +6,14 @@
   padding: 1.25rem;
   width: 100%;
   gap: 4rem;
+  flex: 1;
 }
 
 main {
   display: flex;
   flex-direction: column;
   width: 100%;
+  flex: 1;
 }
 
 #blazor-error-ui {

src/Blog/Components/Posts/Feed.razor

@@ -18,13 +18,13 @@
     <section role="feed" class="container">
       @foreach (var post in Posts)
       {
-        <NavLink href="@GetLink(post)">
+        <article>
-          <article>
+          <NavLink href="@GetLink(post)">
             <h3 title="@post.Title" >@post.Title</h3>
             <p class="date">@post.PublishedAt.ToString("MMMM d, yyyy")</p>
             <p class="lead">@post.Lead</p>
-          </article>
+          </NavLink>
-        </NavLink>
+        </article>
       }
     </section>
   }

src/Blog/Components/Posts/Feed.razor.css

@@ -4,43 +4,45 @@
   width: 100%;
   gap: 2rem;
 
-  & a {
-    padding: 1rem;
-    border-radius: 1rem;
-    background-color: var(--color-background-soft);
-    transition-property: transform;
-    transition-duration: 100ms;
-    transition-timing-function: ease-in-out
-  }
-
-  & a:active {
-    transform: scale(0.95)
-  }
-
   & article {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
 
-    & h3 {
+    & a {
-      background: linear-gradient(to right top, #db3e3e, #df3741, #e32e44, #e72347, #eb124b);
+      display: flex;
-      background-clip: text;
+      flex-direction: column;
-      -webkit-background-clip: text;
+      gap: 0.25rem;
-      -webkit-text-fill-color: transparent;
+      padding: 1rem;
-      font-size: 2rem;
+      border-radius: 1rem;
-      font-weight: 900;
+      background-color: var(--color-background-soft);
+      transition-property: transform;
+      transition-duration: 100ms;
+      transition-timing-function: ease-in-out;
+
+      & h3 {
+        background: linear-gradient(to right top, #db3e3e, #df3741, #e32e44, #e72347, #eb124b);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 2rem;
+        font-weight: 900;
+      }
+
+      & .date {
+        font-size: 0.85rem;
+      }
+
+      & h3,
+      & .date,
+      & .lead {
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
-    & .date {
+    & a:active {
-      font-size: 0.85rem;
+      transform: scale(0.95)
-    }
-
-    & h3,
-    & .date,
-    & .lead {
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
   }
 }