feat: further optimized page layout

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 {

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;
+}

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">

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) {
+@media (max-width: 600px) {
+    .page {
         margin: 0 auto auto;
+        width: 100%;
+    }
 }
 
 #blazor-error-ui {

FediNews/Components/Layout/NavBar.razor

@@ -1,8 +1,8 @@
-<nav>
-    <div class="navigation">
+<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,10 +11,10 @@
             <span>|</span>
             <a class="submit" href="/submit">submit</a>
         </div>
+    </div>
     <div class="account">
         <a href="/login">login</a>
     </div>
-    </div>
 </nav>
 
 @code {

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 {