161 lines
3.7 KiB
Svelte
161 lines
3.7 KiB
Svelte
<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> |