add footer

pkg/web_server/footer.templ

@@ -0,0 +1,9 @@
+package web_server
+
+templ footer() {
+	<footer>
+		<p>
+			Developed with ❤️ by GRFreire at <a href="https://github.com/GRFreire/nthmail" target="_blank">GRFreire/nthmail</a>
+		</p>
+	</footer>
+}

pkg/web_server/inbox.templ

@@ -32,6 +32,7 @@ templ inbox_body(rcpt_addr string, ms []mail_utils.Mail_obj) {
 					</div>
 				}
 			</div>
+			@footer()
 		</body>
 	</html>
 }

pkg/web_server/index.templ

@@ -18,6 +18,7 @@ templ index_page() {
 			<div class="random">
 				<a href="random">Get one now!</a>
 			</div>
+			@footer()
 		</body>
 	</html>
 }

pkg/web_server/mail.templ

@@ -35,6 +35,7 @@ templ mail_body_comp(rcpt_addr string, m mail_utils.Mail_obj, policy *bluemonday
 			<main>
 				@mime_type(m.Body[m.PreferedBodyIndex], policy)
 			</main>
+			@footer()
 		</body>
 	</html>
 }

pkg/web_server/styles.templ

@@ -14,6 +14,8 @@ templ styles() {
         body {
           background-color: #181818 !important;
           color: #FEFEFE;
+          position: relative;
+          min-height: 100vh;
         }
         
         body, h1, h2, h3, h4, h5, h6, p, ol, ul {
@@ -39,7 +41,6 @@ templ styles() {
             justify-content: center;
             align-items: center;
 
-            min-height: 100vh;
             margin-top: -100px;
         }
 
@@ -104,11 +105,34 @@ templ styles() {
             font-style: italic;
         }
 
+        /* FOOTER */
+        footer {
+            background-color: green;
+            padding-bottom: 64px;
+        }
+
+        footer p {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 64px;
+
+            padding: 8px 16px;
+
+            font-size: inherit;
+            font-family: monospace, 'sans-serif';
+            text-align: center;
+        }
+
+        footer p a {
+            color: inherit;
+        }
+
         /* INBOX */
         body.inbox {
             width: 100%;
             display: flex;
-            justify-content: center;
             align-items: center;
             flex-direction: column;
         }
@@ -192,7 +216,6 @@ templ styles() {
         body.mail {
             width: 100%;
             display: flex;
-            justify-content: center;
             align-items: center;
             flex-direction: column;
         }