From c0fd8353a6fca87b86d9ace619f4a334d07d561f Mon Sep 17 00:00:00 2001 From: BlackAngelTVdev Date: Thu, 28 May 2026 21:55:32 +0200 Subject: [PATCH] Refactor contact page styling --- p/assets/styles/contact.css | 234 ++++++++++++------------------------ p/contact/index.html | 128 +++++--------------- 2 files changed, 108 insertions(+), 254 deletions(-) diff --git a/p/assets/styles/contact.css b/p/assets/styles/contact.css index e0048da..1027384 100644 --- a/p/assets/styles/contact.css +++ b/p/assets/styles/contact.css @@ -1,193 +1,111 @@ @import "./var.css"; -.contact-page { - display: grid; - gap: 1.25rem; +html { + scroll-behavior: smooth; } -.contact-hero { - display: grid; - grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); - gap: 1.25rem; - padding: clamp(1.25rem, 3vw, 2rem); - border-radius: 1.25rem; +body { + margin: 0; + min-height: 100vh; + font-family: "Trebuchet MS", "Segoe UI", sans-serif; + color: var(--generic-text-color); background: - radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 32%), - linear-gradient(180deg, rgba(11, 19, 36, 0.92), rgba(8, 16, 29, 0.96)); - border: 1px solid rgba(148, 163, 184, 0.16); - box-shadow: var(--shadow); + radial-gradient(circle at top left, rgba(0, 212, 255, 0.18), transparent 24%), + radial-gradient(circle at right center, rgba(255, 165, 0, 0.14), transparent 28%), + linear-gradient(160deg, var(--sidebar-background) 0%, var(--sidebar-select) 50%, var(--background-color) 100%); } -.contact-hero-copy, -.contact-hero-card, -.contact-card, -.contact-panel { - position: relative; +.contact-header { + max-width: 1120px; + margin: 0 auto; + padding: clamp(2.5rem, 6vw, 5rem) 1.25rem 1.25rem; + text-align: center; } -.contact-hero-copy h1 { - margin: 0 0 0.75rem; - font-family: "Georgia", "Palatino Linotype", serif; - font-size: clamp(2.3rem, 5vw, 4rem); - line-height: 0.98; - letter-spacing: -0.02em; +.contact-header h1 { + margin: 0; + font-family: "Georgia", "Times New Roman", serif; + font-size: clamp(2.5rem, 7vw, 5.2rem); + line-height: 0.95; + letter-spacing: -0.05em; + color: var(--highlighted-text-color); } -.contact-hero-copy .lead { +.contact-header p { max-width: 62ch; - margin-bottom: 1.25rem; + margin: 1rem auto 0; + color: var(--generic-text-color); + opacity: 0.84; + font-size: 1.05rem; + line-height: 1.8; } -.contact-hero-card { - align-self: stretch; - padding: 1.25rem; - border-radius: 1rem; - background: rgba(15, 23, 42, 0.72); - border: 1px solid rgba(125, 211, 252, 0.16); - display: grid; - align-content: center; - gap: 0.75rem; +hr { + width: min(1120px, calc(100% - 2.5rem)); + margin: 0 auto; + border: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--sidebar-text-highlight), var(--warning-text-color), transparent); } -.contact-hero-label, -.contact-kicker { - margin: 0; - color: var(--accent); - font-size: 0.82rem; - letter-spacing: 0.12em; - text-transform: uppercase; - font-weight: 700; +main { + width: min(1120px, calc(100% - 2.5rem)); + margin: 1.5rem auto 0; + padding: 0 0 3rem; } -.contact-hero-card strong { - font-size: clamp(1.2rem, 2vw, 1.55rem); - color: var(--text); +main section { + padding: clamp(1.4rem, 3vw, 2rem); + border-radius: 1.6rem; + border: 1px solid rgba(224, 224, 224, 0.16); + background: linear-gradient(145deg, var(--sidebar-background), var(--sidebar-select)); + box-shadow: 0 24px 70px rgba(2, 6, 23, 0.42); } -.contact-hero-card p, -.contact-help, -.contact-card p, -.contact-panel p, -.contact-panel li { - color: var(--muted); - line-height: 1.7; +main section h2 { + margin: 0 0 0.85rem; + color: var(--highlighted-text-color); + font-family: "Georgia", "Times New Roman", serif; + font-size: clamp(1.4rem, 3vw, 2.1rem); } -.contact-grid { - display: grid; - grid-template-columns: minmax(0, 1.6fr) minmax(290px, 0.9fr); - gap: 1.25rem; - align-items: start; +main section p { + margin: 0 0 1rem; + color: var(--generic-text-color); + opacity: 0.9; + line-height: 1.8; } -.contact-main, -.contact-sidebar { - display: grid; - gap: 1rem; +main section strong { + color: var(--highlighted-text-color); } -.contact-main h2 { - margin: 0; - font-family: "Georgia", "Palatino Linotype", serif; - font-size: clamp(1.5rem, 2.8vw, 2rem); -} - -.contact-methods { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 1rem; -} - -.contact-card, -.contact-panel { - padding: 1.1rem; - border-radius: 1rem; - border: 1px solid rgba(148, 163, 184, 0.16); - background: rgba(255, 255, 255, 0.03); - box-shadow: 0 16px 30px rgba(2, 6, 23, 0.22); -} - -.contact-card h3, -.contact-panel h2 { - margin: 0.25rem 0 0.65rem; - color: var(--text); - font-family: "Georgia", "Palatino Linotype", serif; - font-size: 1.2rem; -} - -.contact-card a, -.contact-inline-links a { - color: var(--text); -} - -.contact-link { - display: inline-flex; - margin-top: 0.5rem; - color: var(--accent); - text-decoration: none; - font-weight: 700; -} - -.contact-link:hover { +main section a:not(.button) { + color: var(--sidebar-text-highlight); text-decoration: underline; + text-underline-offset: 0.15em; } -.contact-checklist, -.contact-steps { - margin: 0.75rem 0 0; - padding-left: 1.15rem; - display: grid; - gap: 0.45rem; -} - -.contact-inline-links { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; -} - -.contact-inline-links a { - text-decoration: none; - padding: 0.45rem 0.7rem; - border-radius: 999px; - background: rgba(125, 211, 252, 0.08); - border: 1px solid rgba(125, 211, 252, 0.18); -} - -.contact-inline-links a:hover { - background: rgba(125, 211, 252, 0.14); -} - -.contact-panel-soft { - background: rgba(255, 255, 255, 0.02); -} - -.contact-quick-links { - display: grid; - gap: 0.7rem; - margin: 1rem 0 0.85rem; -} - -.contact-help { - margin: 0; -} - -@media (max-width: 980px) { - .contact-hero, - .contact-grid, - .contact-methods { - grid-template-columns: 1fr; - } +main section a:not(.button):hover, +main section a:not(.button):focus-visible { + color: var(--highlighted-text-color); } @media (max-width: 700px) { - .contact-page { - gap: 1rem; + .contact-header { + padding-top: 2rem; } - .contact-hero, - .contact-card, - .contact-panel { - border-radius: 0.9rem; + main, + hr { + width: min(100% - 1rem, 1120px); } -} \ No newline at end of file + + main section { + border-radius: 1.1rem; + } + + main section a.button { + width: 100%; + } +} diff --git a/p/contact/index.html b/p/contact/index.html index f6017bd..274d242 100644 --- a/p/contact/index.html +++ b/p/contact/index.html @@ -1,101 +1,37 @@ - + - - - - - Contact - FWS Linux - - - - - -
-
-
-
-

Contact

-

Parle-nous de ton besoin, on te répond vite.

-

- Pour une question technique, une idée d'amélioration ou un retour sur la distribution, utilise le canal le plus simple pour toi. -

-
- Envoyer un mail - Voir les téléchargements -
-
+ + + + Contact - Linux OS + + + + - -
- -
-
-

Moyens de contact

- -
- - -
-

Support projet

-

Dis-nous ce que tu veux faire

-

Installation, compatibilité, environnement de bureau ou packaging: précise ton contexte pour qu’on puisse aller droit au but.

-
    -
  • Version utilisée
    • -
  • Matériel concerné
    • -
  • Étape où le souci apparaît
    • -
-
- -
-

Réseaux

-

Suivre le projet

-

Tu peux aussi retrouver FWS Linux sur les pages liées au projet et dans le footer du site.

-
- GitHub - Instagram - LinkedIn -
-
-
-
- -
-
-
- - + +
+ + + + + + + \ No newline at end of file