From 7fb9c2806492c55c5772dae973536e65de64e7ae Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Sat, 13 Apr 2024 19:25:38 -0500
Subject: [PATCH] feat: add footer with nav

---
 src/Blog/Components/Layout/Footer.razor       |  6 +-
 src/Blog/Components/Layout/Footer.razor.css   |  7 +-
 src/Blog/Components/Layout/MainLayout.razor   |  1 +
 .../Components/Layout/MainLayout.razor.css    |  2 +
 src/Blog/Components/Posts/Feed.razor          |  8 +--
 src/Blog/Components/Posts/Feed.razor.css      | 64 ++++++++++---------
 6 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/src/Blog/Components/Layout/Footer.razor b/src/Blog/Components/Layout/Footer.razor
index 398f51f..87239ba 100644
--- a/src/Blog/Components/Layout/Footer.razor
+++ b/src/Blog/Components/Layout/Footer.razor
@@ -1,3 +1,7 @@
 @namespace Blog.Components.Layout
 
-<footer></footer>
\ No newline at end of file
+<footer>
+  <a href="https://github.com/StevanFreeborn/blog.stevanfreeborn.com">Code</a>
+  <NavLink href="/terms">Terms</NavLink>
+  <NavLink href="/privacy">Privacy</NavLink>
+</footer>
\ No newline at end of file
diff --git a/src/Blog/Components/Layout/Footer.razor.css b/src/Blog/Components/Layout/Footer.razor.css
index 8b13789..8fdbfc5 100644
--- a/src/Blog/Components/Layout/Footer.razor.css
+++ b/src/Blog/Components/Layout/Footer.razor.css
@@ -1 +1,6 @@
-
+footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  gap: 1rem;
+}
\ No newline at end of file
diff --git a/src/Blog/Components/Layout/MainLayout.razor b/src/Blog/Components/Layout/MainLayout.razor
index a5b445a..ac58ee7 100644
--- a/src/Blog/Components/Layout/MainLayout.razor
+++ b/src/Blog/Components/Layout/MainLayout.razor
@@ -5,6 +5,7 @@
   <main>
     @Body
   </main>
+  <Footer />
 </div>
 
 <div id="blazor-error-ui">
diff --git a/src/Blog/Components/Layout/MainLayout.razor.css b/src/Blog/Components/Layout/MainLayout.razor.css
index 1d53736..ce9a855 100644
--- a/src/Blog/Components/Layout/MainLayout.razor.css
+++ b/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 {
diff --git a/src/Blog/Components/Posts/Feed.razor b/src/Blog/Components/Posts/Feed.razor
index acfbfa3..d00bb47 100644
--- a/src/Blog/Components/Posts/Feed.razor
+++ b/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>
   }
diff --git a/src/Blog/Components/Posts/Feed.razor.css b/src/Blog/Components/Posts/Feed.razor.css
index f3beb49..cea38a5 100644
--- a/src/Blog/Components/Posts/Feed.razor.css
+++ b/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 {
-      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;
+    & a {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      padding: 1rem;
+      border-radius: 1rem;
+      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;
+      }
     }
 
-    & h3,
-    & .date,
-    & .lead {
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    & a:active {
+      transform: scale(0.95)
     }
   }
 }
\ No newline at end of file