css contact
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending

This commit is contained in:
Mylloon 2023-10-13 18:31:44 +02:00
parent c179eb3e0d
commit 6a63d2d7d0
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 48 additions and 22 deletions

View file

@ -1,29 +1,53 @@
/* Parameters light */
@media (prefers-color-scheme: light) {
:root {
}
/* https://stackoverflow.com/a/40244401/15436737 */
/* Title */
h1 {
margin: 0;
}
/* Parameters dark */
@media (prefers-color-scheme: dark) {
:root {
}
h1 + p {
margin: 8px;
}
:root {
/* List */
main ul {
column-count: 2;
column-gap: 5em;
}
/* Page theme */
main {
color: var(--font-color);
font-size: var(--font-size);
padding: 2em 1em;
font-family: var(--font-family);
color: var(--font-color);
margin: 0 auto;
max-width: 640px; /* breakpoint */
main li > p {
margin: 0;
padding: 3%;
}
/* breakpoint */
@media only screen and (max-width: 640px) {
main ul {
column-count: 1;
}
}
/* Links */
main a {
text-decoration: none;
display: inline-block;
color: color-mix(in srgb, var(--font-color) 30%, var(--link-color));
}
main a:after {
display: block;
content: "";
border-bottom: solid 3px;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
transform-origin: 100% 50%;
}
main a:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
}
main a:hover {
text-decoration: none;
}

View file

@ -7,7 +7,9 @@
<body>
<header>{{>navbar.html}}</header>
<main>
<h1>Réseaux sociaux</h1>
<h1>Contact</h1>
<p>Je suis présent relativement partout sur internet 😸</p>
<h2>Réseaux sociaux</h2>
<ul>
<li>
<p>
@ -119,7 +121,7 @@
</li>
</ul>
<h1>Forges</h1>
<h2>Forges</h2>
<ul>
<li>
<p>
@ -167,7 +169,7 @@
</li>
</ul>
<h1>Autre</h1>
<h2>Autre</h2>
<ul>
<li>
<p>
@ -187,7 +189,7 @@
target="_blank"
rel="noopener noreferrer me"
href="/contact/keyoxide"
>27024A99057E58B8087A5022A82D63DFF8D1317F</a
>Mylloon</a
>
</p>
</li>