quentin/MastermindReact
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer more responsive-ish

Browse Source
This commit is contained in:
quentin 2025-03-05 14:38:33 +01:00
parent c5d502eea8
commit 11cfaf0fb7
3 changed files with 71 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.css
View File

@ -21,7 +21,6 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 10rem;
} }
.card { .card {

71
src/objects/Footer/Footer.css
View File

@ -10,10 +10,11 @@ footer {
grid-template-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr;
opacity: 0.8; opacity: 0.8;
z-index: 200; z-index: 200;
padding: 2em 0;
} }
footer .middle { footer .middle {
margin-left: 50px; margin-left: 2em;
} }
footer .middle h2,p { footer .middle h2,p {
@ -26,10 +27,12 @@ footer .middle h2,p {
footer .right { footer .right {
width: 100%; width: 100%;
margin-left: 2%;
display: grid; display: grid;
margin-right: 50px; padding: 0;
overflow: scroll;
grid-column-gap: 0; grid-column-gap: 0;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
justify-items: center; justify-items: center;
justify-content: center; justify-content: center;
@ -48,7 +51,57 @@ footer .right .socials {
align-self: start; align-self: start;
} }
@media (max-width: 500px) {
footer .right {
margin-left: 2%;
display: grid;
padding: 0;
overflow: scroll;
grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr;
justify-items: center;
justify-content: center;
align-items: center;
}
footer .right .socials {
width: 25px;
height: 25px;
align-self: start;
}
footer .right .socials + .empty {
display: none;
}
}
@media (max-width: 720px) { @media (max-width: 720px) {
footer .right {
margin-left: 2%;
display: grid;
padding: 0;
overflow: scroll;
grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr;
justify-items: center;
justify-content: center;
align-items: center;
}
footer .right .socials {
width: 32px;
height: 32px;
align-self: start;
}
footer .right .socials + .empty {
display: none;
}
}
@media (min-width: 940px) {
footer .right { footer .right {
margin-left: 2%; margin-left: 2%;
display: grid; display: grid;
@ -61,14 +114,18 @@ footer .right .socials {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
}
footer .right .socials { @media (max-width: 940px) {
width: clamp(16px, 0.6rem + 0.86vw, 32px); footer .right .mail-to + .empty{
height: clamp(16px, 0.6rem + 0.86vw, 32px); display: none;
align-self: start;
} }
} }
footer .right .socials + .empty {
display: none;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
footer { footer {
background-color: #4C585B; background-color: #4C585B;

12
src/objects/Footer/Footer.tsx
View File

@ -12,25 +12,27 @@ function Footer() {
<div className="mail-to"> <div className="mail-to">
<p><b>Mail: </b><a className="link" href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></p> <p><b>Mail: </b><a className="link" href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></p>
</div> </div>
<div></div> <div className="empty"></div>
<div></div> <div className={"empty"}></div>
<div className="socials"> <div id="linkedin" className="socials">
<a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank"><img className="social" <a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank"><img className="social"
src="src/assets/icons/linkedin.svg" src="src/assets/icons/linkedin.svg"
alt="Quentin's LinkedIN"/></a> alt="Quentin's LinkedIN"/></a>
</div> </div>
<div className="socials"> <div className={"empty"}></div>
<div id="git" className="socials">
<a href="https://git.quentin-leblanc.ch/quentin" target="_blank"><img className="social" <a href="https://git.quentin-leblanc.ch/quentin" target="_blank"><img className="social"
src="src/assets/icons/git-alt.svg" src="src/assets/icons/git-alt.svg"
alt="Quentin's Git"/></a> alt="Quentin's Git"/></a>
</div> </div>
<div className={"empty"}></div>
<div className="socials"> <div className="socials">
<a href="https://www.instagram.com/th3wh1t3q/" target="_blank"><img className="social" <a href="https://www.instagram.com/th3wh1t3q/" target="_blank"><img className="social"
src="src/assets/icons/square-instagram.svg" src="src/assets/icons/square-instagram.svg"
alt="Quentin's Instagram"/></a> alt="Quentin's Instagram"/></a>
</div> </div>
<div></div> <div className={"empty"}></div>
</div> </div>
</footer> </footer>
) )