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>
</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"/>
@@ -23,21 +22,21 @@
</div>
<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>
</div>
<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>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>
<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>
@@ -55,7 +54,7 @@
.footer {
display: grid;
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"
"copyright copyright copyright";
@@ -73,8 +72,9 @@
display: flex;
flex-direction: column;
justify-self: center;
gap: 20px;
padding: 30px 90px;
padding: 30px 20px;
font-family: "Montserrat" sans-serif;
font-size: 20px;
@@ -92,10 +92,11 @@
.footer-column-title {
position: relative;
padding-bottom: 5px;
padding-bottom: 20px;
font-family: "Source_Sans_3" sans-serif;
font-weight: bold;
text-transform: uppercase;
}
@@ -112,30 +113,28 @@
/*FIXME: Make another class title here*/
.container {
grid-area: social-notice;
color: var(--col_panel);
height: 100%;
background-color: var(--col_panel);
margin: 0;
line-height: 30px;
}
.footer__social-notice {
margin: 0;
margin: 0 auto;
padding: 20px;
height: 32px;
width: 100%;
font-family: 'Source_Sans_3' sans-serif;
font-weight: bold;
font-size: 20px;
display: inline-block;
vertical-align: middle;
line-height:1fr;
color: var(--col_text_panel);
}
.footer__social-spacer {
grid-area: spacer;
width: auto;
}
.footer__social-links {
display: flex;
@@ -149,8 +148,9 @@
.footer__copyright {
grid-area: copyright;
margin: auto 0 0 0;
padding: 10px;
height: fit-content;
width: 100%;
font-family: "Montserrat" sans-serif;
font-size: 24px;