Working on footer
This commit is contained in:
161
frontend/src/lib/components/footer.svelte
Normal file
161
frontend/src/lib/components/footer.svelte
Normal file
@@ -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>
|
||||||
@@ -11,9 +11,19 @@
|
|||||||
|
|
||||||
import Announcement from '$lib/components/announcement.svelte';
|
import Announcement from '$lib/components/announcement.svelte';
|
||||||
import Header from '$lib/components/header.svelte';
|
import Header from '$lib/components/header.svelte';
|
||||||
|
import Footer from '../lib/components/footer.svelte';
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Announcement message="This site is yet in development" color="var(--col_accent)"/>
|
<Announcement message="This site is yet in development" color="var(--col_accent)"/>
|
||||||
<Header/>
|
<Header/>
|
||||||
<slot></slot>
|
<main>
|
||||||
|
<slot class="content"></slot>
|
||||||
|
</main>
|
||||||
|
<Footer/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user