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

Footer adaptive for galaxy fold;

Browse Source
This commit is contained in:
Николай
2024-08-14 18:07:56 +03:00
parent 884a61fa99
commit a15db2b4b8
1 changed files with 113 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@
<Icon image={CatIcon} size="64px"/>
</div>
<p class="footer__copyright">(C) WeirdCat 2024</p>
<p class="footer__copyright">© WeirdCat 2024</p>
</footer>
@@ -68,48 +68,6 @@
background-color: var(--col_panel);
}
.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-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: "";
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;
@@ -139,12 +97,67 @@
display: flex;
justify-content: right;
gap: 20px;
grid-area: social-links;
width: 1fr;
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: "";
background-color: var(--col_text_footer);
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 45%;
}
.footer__copyright {
grid-area: copyright;
margin: auto 0 0 0;
@@ -161,4 +174,60 @@
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 {
content: "";
background-color: var(--col_text_footer);
position: absolute;
bottom: 0;
left: 28%;
height: 2px;
width: 45%;
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 {
display: none;
}
.footer__social-links {
justify-content: center;
margin: inherit 20px;
}
}
</style>