From 2d3a0f1b1bb7b65cf47c62bee4bf4ed764128fe5 Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Fri, 26 Jan 2024 22:48:22 +0100
Subject: [PATCH] feat: further optimized page layout

---
 FediNews/Components/Layout/Footer.razor       |  7 ++--
 FediNews/Components/Layout/Footer.razor.css   | 36 +++++++++++++++++++
 FediNews/Components/Layout/MainLayout.razor   |  6 ++--
 .../Components/Layout/MainLayout.razor.css    | 22 +++++++-----
 FediNews/Components/Layout/NavBar.razor       | 16 ++++-----
 FediNews/Components/Layout/NavBar.razor.css   | 14 +++++++-
 6 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/FediNews/Components/Layout/Footer.razor b/FediNews/Components/Layout/Footer.razor
index 0858f05..5f0d41f 100644
--- a/FediNews/Components/Layout/Footer.razor
+++ b/FediNews/Components/Layout/Footer.razor
@@ -1,5 +1,8 @@
-<footer>
-    <p></p>
+<footer class="footer">
+    <div class="footerline"></div>
+    <div class="content">
+        <p class="footertxt"><a href="/guidelines">Guidelines</a> | <a href="/rules">Rules</a> | <a href="https://git.moonleay.net/Websites/FediNews">Code</a> | <a href="/modlog">Modlog</a> | <a href="/legal">Legal</a> | <a href="/imprint">Imprint</a> | <a href="/privacy-policy">Privacy Policy</a></p>
+    </div>
 </footer>
 
 @code {
diff --git a/FediNews/Components/Layout/Footer.razor.css b/FediNews/Components/Layout/Footer.razor.css
index e69de29..353b883 100644
--- a/FediNews/Components/Layout/Footer.razor.css
+++ b/FediNews/Components/Layout/Footer.razor.css
@@ -0,0 +1,36 @@
+.footer {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem auto auto;
+}
+
+.footerline {
+    display: flex;
+    width: 100%;
+    height: 2px;
+    background-color: #8422e8;
+}
+
+.footertxt a {
+    color: grey;
+    text-decoration: none;
+    font-size: 0.7rem;
+}
+
+.footertxt a:hover {
+    text-decoration: underline;
+}
+
+.footertxt {
+    color: grey;
+    font-size: 0.8rem;
+}
diff --git a/FediNews/Components/Layout/MainLayout.razor b/FediNews/Components/Layout/MainLayout.razor
index bc0fd31..7436310 100644
--- a/FediNews/Components/Layout/MainLayout.razor
+++ b/FediNews/Components/Layout/MainLayout.razor
@@ -4,10 +4,12 @@
     <NavBar/>
 
     <main>
-        <article class="content px-4">
+        <div class="content px-4">
             @Body
-        </article>
+        </div>
     </main>
+
+    <Footer/>
 </div>
 
 <div id="blazor-error-ui">
diff --git a/FediNews/Components/Layout/MainLayout.razor.css b/FediNews/Components/Layout/MainLayout.razor.css
index c97e23c..6f79d5b 100644
--- a/FediNews/Components/Layout/MainLayout.razor.css
+++ b/FediNews/Components/Layout/MainLayout.razor.css
@@ -3,13 +3,17 @@
     flex-direction: column;
     align-content: center;
 
-    max-width: 1000px;
+    /*min-width: 600px;*/
+    width: 85%;
     margin: 8px auto auto;
     background-color: #f6f6ef;
 }
 
-@media (max-width: 1000px) {
-    margin: 0 auto auto;
+@media (max-width: 600px) {
+    .page {
+        margin: 0 auto auto;
+        width: 100%;
+    }
 }
 
 #blazor-error-ui {
@@ -24,9 +28,9 @@
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
diff --git a/FediNews/Components/Layout/NavBar.razor b/FediNews/Components/Layout/NavBar.razor
index 0b40dd9..bfa11cb 100644
--- a/FediNews/Components/Layout/NavBar.razor
+++ b/FediNews/Components/Layout/NavBar.razor
@@ -1,8 +1,8 @@
-<nav>
-    <div class="navigation">
-        <a class="logo" href="/">
-            <img src="logo.png" alt="F"/>
-        </a>
+<nav class="navigation">
+    <a class="logo" href="/">
+        <img src="logo.png" alt="F"/>
+    </a>
+    <div class="pagenav">
         <a class="name" href="/"><span>Fedi News</span></a>
         <div class="navlinks">
             <a class="new" href="/new">new</a>
@@ -11,9 +11,9 @@
             <span>|</span>
             <a class="submit" href="/submit">submit</a>
         </div>
-        <div class="account">
-            <a href="/login">login</a>
-        </div>
+    </div>
+    <div class="account">
+        <a href="/login">login</a>
     </div>
 </nav>
 
diff --git a/FediNews/Components/Layout/NavBar.razor.css b/FediNews/Components/Layout/NavBar.razor.css
index fa771ef..64ebc5b 100644
--- a/FediNews/Components/Layout/NavBar.razor.css
+++ b/FediNews/Components/Layout/NavBar.razor.css
@@ -1,6 +1,5 @@
 nav {
     display: flex;
-    flex-direction: column;
     background-color: #8422e8;
     position: sticky;
     color: white !important;
@@ -29,6 +28,14 @@ nav {
     align-items: center;
 }
 
+@media(min-width: 601px) {
+    .pagenav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
 .name {
     font-weight: bolder;
     margin-right: 0.6rem;
@@ -43,6 +50,11 @@ nav {
 
 .navlinks a {
     color: white;
+    text-decoration: none;
+}
+
+.navlinks a:hover {
+    text-decoration: underline !important;
 }
 
 .account {