Simple footer

src/lib/IO/Button.svelte

@@ -49,7 +49,7 @@
 
         cursor: pointer;
 
-        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25);
+        filter: brightness(130%);
     }
 
     .content {

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>

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;