Working on footer

frontend/src/lib/components/footer.svelte

@@ -0,0 +1,161 @@
+<script>
+    import Icon from "./icon.svelte";
+
+    import CatIcon from "$lib/images/icons/misc/cat.svg";
+	import TelegramIcon from "$lib/images/icons/social/telegram.svg";
+    import MatrixIcon from "$lib/images/icons/social/matrix.svg";
+    import GiteaIcon from "$lib/images/icons/social/gitea.svg";
+    import DiscordIcon from "$lib/images/icons/social/discord.svg";
+
+</script>
+
+<footer class="footer prevent-select">
+
+    <div class="container">
+        <p class="social-row footer__social-notice">Me on other resources:</p>
+    </div>
+    
+    <div class="social-row footer__social-spacer"></div>
+    <div class="social-row footer__social-links">
+        <Icon image={TelegramIcon} size="32px"/>
+        <Icon image={MatrixIcon} size="32px"/>
+        <Icon image={DiscordIcon} size="32px"/>
+    </div>
+
+    <div class="footer-column footer__column1">
+        <p class="footer-column-title">Мясо</p>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitrtempor invidunt ut aliquyam erat, sed diam voluptua. At vero eo</p>
+
+    </div>
+    <div class="footer-column footer__column2">
+        <p class="footer-column-title">Мясо</p>
+        <p>Buy a slave</p>
+        <p>Hire me please</p>
+        <p>Buy me a coffee</p>
+        <p>Help</p>
+    </div>
+    <div class="footer-column footer__column3">
+        <p class="footer-column-title">Мясо</p>
+        <p>Мясо</p>
+        <p>Мясо</p>
+    </div>
+
+    <p class="footer__copyright">(C) WeirdCat 2024</p>
+
+</footer>
+
+<style>
+
+    ::before,
+    ::after {
+        box-sizing: inherit;
+    }
+
+    .footer {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-areas: "social-notice spacer social-links"
+                             "column1 column2 column3"
+                             "copyright copyright copyright";
+
+        background-color: var(--col_footer);
+    }
+
+    .social-row {
+        padding: 20px;
+        background-color: var(--col_panel);
+    }
+
+    .footer-column {
+
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        padding: 30px 90px;
+
+        font-family: "Montserrat" sans-serif;
+        font-size: 20px;
+        color: var(--col_text_footer);
+        background-color: var(--col_footer);
+    }
+
+    .footer-column > * {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding: 0;
+
+    }
+
+    .footer-column-title {
+
+        position: relative;
+        padding-bottom: 5px;
+
+        font-family: "Source_Sans_3" sans-serif;
+        font-weight: bold;
+
+    }
+
+    .footer-column-title::after {
+        content: "";
+        background-color: var(--col_text_footer);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        width: 45%;
+    }
+
+    /*FIXME: Make another class title here*/
+    .container {
+        grid-area: social-notice;
+        color: var(--col_panel);
+        margin: 0;
+    }
+
+    .footer__social-notice {
+
+        margin: 0;
+        padding: 20px;
+        height: 32px;
+
+        font-family: 'Source_Sans_3' sans-serif;
+        font-weight: bold;
+        font-size: 20px;
+
+        color: var(--col_text_panel);
+    }
+
+    .footer__social-spacer {
+
+        grid-area: spacer;
+        width: auto;
+
+    }
+
+    .footer__social-links {
+
+        display: flex;
+        justify-content: right;
+        gap: 20px;
+        grid-area: social-links;
+        width: 1fr;
+
+    }
+
+    .footer__copyright {
+        grid-area: copyright;
+        margin: auto 0 0 0;
+        height: fit-content;
+        width: 100%;
+
+        font-family: "Montserrat" sans-serif;
+        font-size: 24px;
+        color: var(--col_text_copyright);
+
+        text-align: center;
+
+        background-color: var(--col_footer_copyright);
+    }
+
+</style>

frontend/src/routes/+layout.svelte

@@ -11,9 +11,19 @@
 
     import Announcement from '$lib/components/announcement.svelte';
     import Header from '$lib/components/header.svelte';
+	import Footer from '../lib/components/footer.svelte';
     
 </script>
 
 <Announcement message="This site is yet in development" color="var(--col_accent)"/>
 <Header/>
-<slot></slot>
+<main>
+    <slot class="content"></slot>
+</main>
+<Footer/>
+
+<style>
+    main {
+    height: 100vh;
+    }
+</style>