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 @@
- Réseaux sociaux
+ Contact
+ Je suis présent relativement partout sur internet 😸
+ Réseaux sociaux
- Forges
+ Forges
- Autre
+ Autre