From 6a63d2d7d0de5df39238b947a145df2e1aa176c2 Mon Sep 17 00:00:00 2001 From: Mylloon Date: Fri, 13 Oct 2023 18:31:44 +0200 Subject: [PATCH] css contact --- static/css/contact.css | 60 +++++++++++++++++++++++++++++------------- templates/contact.html | 10 ++++--- 2 files changed, 48 insertions(+), 22 deletions(-) diff --git a/static/css/contact.css b/static/css/contact.css index 31a89ae..3d6c9a0 100644 --- a/static/css/contact.css +++ b/static/css/contact.css @@ -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; } diff --git a/templates/contact.html b/templates/contact.html index 33e1e20..75adcd1 100644 --- a/templates/contact.html +++ b/templates/contact.html @@ -7,7 +7,9 @@
{{>navbar.html}}
-

Réseaux sociaux

+

Contact

+

Je suis présent relativement partout sur internet 😸

+

Réseaux sociaux

-

Forges

+

Forges

-

Autre

+

Autre