Simple footer

src/lib/IO/Button.svelte

@@ -2,6 +2,7 @@
     import { ButtonType } from "$lib/IO/ButtonType.ts";
     import { onMount } from "svelte";
 
+    export let href : string = "#";
     export let type : ButtonType = ButtonType.Primary;
     let cssName : string;
 
@@ -16,17 +17,17 @@
     });
 </script>
 
-<button class="button" style="--button-color: var({cssName});">
+<a href={href} class="button" style="--button-color: var({cssName});">
     <div class="content">
         <slot name="content">
             Click Me!
         </slot>
     </div>
-</button>
+</a>
 
 <style>
     .button {
-        width: 100%;
+        white-space: nowrap;
         border-radius: 6px;
         border: none;
         background-color: var(--button-color);
@@ -39,6 +40,7 @@
         font-size: 1.5em;
 
         box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
+        padding: 0.8em 4em;
     }
 
     .button:hover {
@@ -47,14 +49,17 @@
 
         cursor: pointer;
 
-        box-shadow:
-            inset 0 0 0 100px rgba(255, 255, 255, 0.25);
+        filter: brightness(130%);
     }
 
     .content {
         width: 100%;
+        height: 100%;
+
         color: var(--text1);
 
-        padding: 0.8em 4em;
+        display: flex;
+        justify-content: center;
+        align-content: center;
     }
 </style>

src/routes/+layout.svelte

@@ -0,0 +1,88 @@
+<!-- Nav bar -->
+
+<!-- Page content -->
+<slot />
+
+<!-- About footer -->
+<footer>
+    <div class="about-container">
+        <div class="credits">
+            <span>© 2023-2024 Developed by:</span>
+            <br>
+            <span>Benjamin Dreyer</span>
+            <br>
+            <span>Oliver Schwenger</span>
+            <br>
+            <span>Sylvester Junge</span>
+            <br>
+            <span>Zhentao Wei</span>
+            <br>
+            <br>
+            <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
+        </div>
+        <div>
+            <h3>About Us</h3>
+            <a href="/about">About</a>
+        </div>
+        <div class="contact">
+            <h3>Contact</h3>
+            <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
+                <img src="/images/icons/discord.svg" alt="Discord"/>
+                <span>Discord</span>
+            </a>
+        </div>
+    </div>
+</footer>
+
+
+<style>
+    footer {
+        margin-top: 50px;
+        padding: 25px 0 25px;
+        height: 100%;
+        background-color: var(--background1);
+
+        display: flex;
+        justify-content: center;
+    }
+
+    .about-container {
+        width: 80%;
+
+        color: var(--text2);
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+    }
+
+    .credits {
+        line-height: 2;
+    }
+
+    .social {
+        display: flex;
+        align-content: center;
+        gap: 10px;
+    }
+
+    .social > img {
+        width: 24px;
+    }
+
+    h3 {
+        margin-top: 0px;
+        color: var(--text2);
+    }
+
+    a {
+        color: var(--text2);
+        text-decoration-line: underline;
+    }
+
+    a:hover {
+        filter: brightness(130%);
+    }
+
+
+</style>

src/routes/+page.svelte

@@ -39,10 +39,8 @@
     <footer id="news-footer">
         <div class="dummy"/>
         <div id="more-posts">
-            <Button type={ButtonType.Primary}>
-                <a slot="content" href="/post">
-                    <span>More News</span>
-                </a>
+            <Button href="/post" type={ButtonType.Primary}>
+                <span slot="content">More News</span>
             </Button>
         </div>
     </footer>
@@ -98,10 +96,6 @@
         min-width: 10em;
     }
 
-    a {
-        white-space: nowrap;
-    }
-
     .main-title {
         color: var(--text1);
         margin: 0 auto;

src/routes/post/+page.svelte

@@ -46,21 +46,23 @@
         display: flex;
         flex-wrap: wrap;
 
-        align-items: center;
+        align-content: center;
         justify-content: space-around;
 
-        padding-bottom: 25px;
+        padding: 0 0 20px 0;
         margin-bottom: 25px;
     }
 
     #search {
         height: 40px;
 
+        align-self: center;
         border: none;
         border-radius: 10px;
         font-size: 18px;
         line-height: 2;
         padding: 0.5rem 0.8rem;
+        margin-top: 0px;
 
         background-color: var(--background);
         color: var(--text1);

static/images/icons/discord.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   fill="#000000"
+   width="800.02313"
+   height="609.78137"
+   viewBox="0 0 24.000694 18.293441"
+   role="img"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 20.317481,1.5163647 a 19.791,19.791 0 0 0 -4.885,-1.51500001 0.074,0.074 0 0 0 -0.079,0.037 c -0.21,0.375 -0.444,0.864 -0.608,1.25000001 a 18.27,18.27 0 0 0 -5.4870004,0 12.64,12.64 0 0 0 -0.617,-1.25000001 0.077,0.077 0 0 0 -0.079,-0.037 19.736,19.736 0 0 0 -4.885,1.51500001 0.07,0.07 0 0 0 -0.032,0.027 c -3.11199997,4.649 -3.96499997,9.1830003 -3.54599997,13.6600003 a 0.082,0.082 0 0 0 0.031,0.057 19.9,19.9 0 0 0 5.99299997,3.03 0.078,0.078 0 0 0 0.084,-0.028 14.09,14.09 0 0 0 1.226,-1.994 0.076,0.076 0 0 0 -0.041,-0.106 13.107,13.107 0 0 1 -1.872,-0.892 0.077,0.077 0 0 1 -0.008,-0.128 10.2,10.2 0 0 0 0.372,-0.292 0.074,0.074 0 0 1 0.077,-0.01 c 3.928,1.793 8.1800004,1.793 12.0620004,0 a 0.074,0.074 0 0 1 0.078,0.01 c 0.12,0.098 0.246,0.198 0.373,0.292 a 0.077,0.077 0 0 1 -0.006,0.127 12.299,12.299 0 0 1 -1.873,0.892 0.077,0.077 0 0 0 -0.041,0.107 c 0.36,0.698 0.772,1.362 1.225,1.993 a 0.076,0.076 0 0 0 0.084,0.028 19.839,19.839 0 0 0 6.002,-3.03 0.077,0.077 0 0 0 0.032,-0.054 c 0.5,-5.177 -0.838,-9.6740003 -3.549,-13.6600003 a 0.061,0.061 0 0 0 -0.031,-0.03 z M 8.0204806,12.476365 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.956,-2.4190003 2.157,-2.4190003 1.21,0 2.1760004,1.096 2.1570004,2.4200003 0,1.333 -0.9560004,2.418 -2.1570004,2.418 z m 7.9750004,0 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.955,-2.4190003 2.157,-2.4190003 1.21,0 2.176,1.096 2.157,2.4200003 0,1.333 -0.946,2.418 -2.157,2.418 z"
+     id="path1"
+     style="fill:#fdfdfd;fill-opacity:1" />
+</svg>

static/stylesheets/main-theme.css

@@ -6,6 +6,7 @@
     --text3: #b0afad; /* Third text color. */
     --text4: #868584; /* Fourth text color. */
     --background: #232222;
+    --background1: #1b1a1a;
     --primary: #227c9d;
     --secondary: #ffcb77;
     --accent: #17c3b2;