personal-website/frontend/src/lib/components/footer.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 DiscordIcon from "$lib/images/icons/social/discord.svg";

</script>

<footer class="footer prevent-select">

    <div class="footer__social-notice-box">
        <p class="social-row footer__social-notice-text">Me on other resources:</p>
    </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">WeirdCat.su</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">Useful links</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">Contact</p>
        <p>nikolai@weirdcat.su</p>
        <p>+7 999 999 99 99</p>
        <Icon image={CatIcon} size="64px"/>
    </div>

    <p class="footer__copyright">© WeirdCat 2024</p>

</footer>

<style>

    ::before,
    ::after {
        box-sizing: inherit;
    }

    .footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "social-notice social-notice social-links"
                             "column1 column2 column3"
                             "copyright copyright copyright";

        box-shadow: 0px 5px var(--col_footer_copyright);
        background-color: var(--col_footer);
    }

    .social-row {
        padding: 20px;

        background-color: var(--col_panel);
    }

    .footer__social-notice-box {
        grid-area: social-notice;

        height: 100%;
        margin: 0;
        padding: inherit 40px;

        line-height: 30px;

        background-color: var(--col_panel);
    }

    .footer__social-notice-text {
        display: inline-block;
        vertical-align: middle;

        margin: 0 auto;
        padding: inherit 40px;
        width: 100%;

        font-family: 'Source_Sans_3' sans-serif;
        font-weight: bold;
        font-size: 20px;
        line-height:1fr;

        color: var(--col_text_panel);
    }

    .footer__social-links {
        display: flex;
        justify-content: right;
        grid-area: social-links;

        gap: 20px;
        width: auto;
    }

    .footer-column {

        display: flex;
        flex-direction: column;
        justify-self: center;

        gap: 20px;
        padding: 30px 20px;

        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__column1 {
        grid-area: column1;
    }

    .footer__column2 {
        grid-area: column2;
    }

    .footer__column3 {
        grid-area: column3;
    }

    .footer-column-title {
        position: relative;
        padding-bottom: 20px;

        font-family: "Source_Sans_3" sans-serif;
        font-weight: bold;
        text-transform: uppercase;
    }

    .footer-column-title::after {
        content: "";
        
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 45%;

        background-color: var(--col_text_footer);
    }

    .footer__copyright {
        grid-area: copyright;

        margin: auto 0 0 0;
        padding: 10px;
        height: fit-content;

        font-family: "Montserrat" sans-serif;
        font-size: 24px;
        text-align: center;

        color: var(--col_text_copyright);
        background-color: var(--col_footer_copyright);
    }

    @media screen and (max-width: 800px) {
        .footer {
            grid-template-areas: "social-notice social-notice social-links"
                             "column1 column1 column1"
                             "column2 column2 column2"
                             "column3 column3 column3"
                             "copyright copyright copyright";
        }

        .footer-column
        {
            justify-content: center;
            justify-items: center;

            padding: 20px;
            max-width: 60%;
            width: 100%;

            text-align: center;
        }

        .footer-column > :global(.icon) {
            align-self: center;
        }

        .footer-column-title::after {
            left: 28%;
            margin: inherit auto;
        }
    }

    @media screen and (max-width: 543px) {

        .footer {
            grid-template-areas: "social-links social-links social-links"
                                 "column1 column1 column1"
                                 "column2 column2 column2"
                                 "column3 column3 column3"
                                 "copyright copyright copyright";
        }

        .footer__social-notice-text {
            display: none;
        }

        .footer__social-links {
            justify-content: center;
            gap: 10%;
            margin: inherit 20px;
        }
    }
</style>