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

finished footer

Browse Source
This commit is contained in:
quentin 2025-03-03 16:49:14 +01:00
parent 8788b27021
commit 7326b6dd86
2 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -17,18 +17,20 @@
<p>If these projects or my profile interests you feel free to contact me through any of the social links on the right.</p> <p>If these projects or my profile interests you feel free to contact me through any of the social links on the right.</p>
</div> </div>
<div class="right"> <div class="right">
<table> <div class="mail-to">
<tbody> <p><b>Mail: </b><a class="link" href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></p>
<tr> </div>
<td>Email: </td> <div></div>
<td><a href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></td>
</tr>
</tbody>
</table>
<div class="socials"> <div class="socials">
<a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank">LinkedIn</a> <a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank"><img class="social" src="src/assets/icons/linkedin.svg" alt="Quentin's LinkedIN"/></a>
<a href="https://git.quentin-leblanc.ch/quentin" target="_blank">Gitea</a> </div>
<a href="https://www.instagram.com/th3wh1t3q/" target="_blank">Instagram</a> <div></div>
<div class="socials">
<a href="https://git.quentin-leblanc.ch/quentin" target="_blank"><img class="social" src="src/assets/icons/git-alt.svg" alt="Quentin's Git"/></a>
</div>
<div></div>
<div class="socials">
<a href="https://www.instagram.com/th3wh1t3q/" target="_blank"><img class="social" src="src/assets/icons/square-instagram.svg" alt="Quentin's Instagram"/></a>
</div> </div>
</div> </div>
</div> </div>

103
src/index.css
View File

@ -5,7 +5,6 @@
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
background-color: #7E99A3;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -15,15 +14,6 @@
--color-lightred: #FF7F7F; --color-lightred: #FF7F7F;
} }
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -45,53 +35,102 @@ button {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: #1a1a1a;
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s;
} }
button:hover {
border-color: #646cff;
}
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
} }
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
footer { footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
background-color: #4C585B;
} }
.footer-grid { .footer-grid {
display: inline-grid; display: grid;
grid-template-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr;
} }
.footer-grid .middle h2,p {
text-align: center;
}
.footer-grid .right { .footer-grid .right {
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1fr 1fr;
justify-items: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer-grid .right .socials { .footer-grid .right .mail-to {
grid-column-end: span 7;
display: flex; display: flex;
flex-direction: row;
} }
.mail-to p {
margin: 0;
}
.footer-grid .right .socials {
width: 32px;
height: 32px;
align-self: start;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #213547;
}
button {
background-color: #f9f9f9;
}
}
@media (prefers-color-scheme: dark) {
:root {
color: white;
background-color: #7E99A3;
}
a:hover {
color: #747bff;
}
button {
background-color: #1a1a1a;;
}
footer {
background-color: #4C585B;
}
.social {
filter: invert(1);
}
a {
color: white;
}
a:hover {
color: white;
}
}