weirdcat/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed spacer in footer and added additional social-notice area instead; uppercase titles in columns; proper column alignment; social notice text centered; copyright paddings added; adaptive up to 582px as of now

Browse Source
This commit is contained in:
Николай
2024-08-13 09:33:09 +03:00
parent b91de98589
commit 884a61fa99
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/lib/components/footer.svelte
View File

@@ -15,7 +15,6 @@
<p class="social-row footer__social-notice">Me on other resources:</p> <p class="social-row footer__social-notice">Me on other resources:</p>
</div> </div>
<div class="social-row footer__social-spacer"></div>
<div class="social-row footer__social-links"> <div class="social-row footer__social-links">
<Icon image={TelegramIcon} size="32px"/> <Icon image={TelegramIcon} size="32px"/>
<Icon image={MatrixIcon} size="32px"/> <Icon image={MatrixIcon} size="32px"/>
@@ -23,21 +22,21 @@
</div> </div>
<div class="footer-column footer__column1"> <div class="footer-column footer__column1">
<p class="footer-column-title">Мясо</p> <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> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitrtempor invidunt ut aliquyam erat, sed diam voluptua. At vero eo</p>
</div> </div>
<div class="footer-column footer__column2"> <div class="footer-column footer__column2">
<p class="footer-column-title">Мясо</p> <p class="footer-column-title">Useful links</p>
<p>Buy a slave</p> <p>Buy a slave</p>
<p>Hire me please</p> <p>Hire me please</p>
<p>Buy me a coffee</p> <p>Buy me a coffee</p>
<p>Help</p> <p>Help</p>
</div> </div>
<div class="footer-column footer__column3"> <div class="footer-column footer__column3">
<p class="footer-column-title">Мясо</p> <p class="footer-column-title">Contact</p>
<p>Мясо</p> <p>nikolai@weirdcat.su</p>
<p>Мясо</p> <p>+7 999 999 99 99</p>
<Icon image={CatIcon} size="64px"/> <Icon image={CatIcon} size="64px"/>
</div> </div>
@@ -55,7 +54,7 @@
.footer { .footer {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "social-notice spacer social-links" grid-template-areas: "social-notice social-notice social-links"
"column1 column2 column3" "column1 column2 column3"
"copyright copyright copyright"; "copyright copyright copyright";
@@ -73,8 +72,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-self: center;
gap: 20px; gap: 20px;
padding: 30px 90px; padding: 30px 20px;
font-family: "Montserrat" sans-serif; font-family: "Montserrat" sans-serif;
font-size: 20px; font-size: 20px;
@@ -92,10 +92,11 @@
.footer-column-title { .footer-column-title {
position: relative; position: relative;
padding-bottom: 5px; padding-bottom: 20px;
font-family: "Source_Sans_3" sans-serif; font-family: "Source_Sans_3" sans-serif;
font-weight: bold; font-weight: bold;
text-transform: uppercase;
} }
@@ -112,30 +113,28 @@
/*FIXME: Make another class title here*/ /*FIXME: Make another class title here*/
.container { .container {
grid-area: social-notice; grid-area: social-notice;
color: var(--col_panel); height: 100%;
background-color: var(--col_panel);
margin: 0; margin: 0;
line-height: 30px;
} }
.footer__social-notice { .footer__social-notice {
margin: 0; margin: 0 auto;
padding: 20px; padding: 20px;
height: 32px; width: 100%;
font-family: 'Source_Sans_3' sans-serif; font-family: 'Source_Sans_3' sans-serif;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
display: inline-block;
vertical-align: middle;
line-height:1fr;
color: var(--col_text_panel); color: var(--col_text_panel);
} }
.footer__social-spacer {
grid-area: spacer;
width: auto;
}
.footer__social-links { .footer__social-links {
display: flex; display: flex;
@@ -149,8 +148,9 @@
.footer__copyright { .footer__copyright {
grid-area: copyright; grid-area: copyright;
margin: auto 0 0 0; margin: auto 0 0 0;
padding: 10px;
height: fit-content; height: fit-content;
width: 100%;
font-family: "Montserrat" sans-serif; font-family: "Montserrat" sans-serif;
font-size: 24px; font-size: 24px;