From 5cf45c20844910874cb11d95bbedd5c0f1e56397 Mon Sep 17 00:00:00 2001 From: julien Date: Tue, 3 Nov 2026 13:51:03 +0100 Subject: [PATCH] Improve style --- netig.rb | 4 + public/css/style.css | 182 +++++++++++++++++++++++++++---------------- views/contact.erb | 8 -- views/layout.erb | 20 ++++- 4 files changed, 137 insertions(+), 77 deletions(-) diff --git a/netig.rb b/netig.rb index d11809c..f703975 100644 --- a/netig.rb +++ b/netig.rb @@ -35,6 +35,10 @@ class Netig < Roda password_label "Mot de passe" login_button "Se connecter" + login_notice_flash "Vous êtes maintenant connecté." + login_error_flash "La connexion a échoué." + logout_notice_flash "Vous êtes maintenant déconnecté." + login_redirect "/temporary_page" login_return_to_requested_location? true diff --git a/public/css/style.css b/public/css/style.css index 3c53568..999b0cb 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -37,6 +37,7 @@ --color-flash-notice-background: #294e43; --color-flash-error-background: #2c4647; --color-flash-error-border: #e6afa2; + --flash-space: 6rem; /* Ombres */ --color-shadow-light: rgb(202 210 197 / 20%); @@ -58,9 +59,9 @@ html { body { display: flex; - flex-direction: column; min-height: 100vh; min-height: 100dvh; + flex-direction: column; margin: 0; background: var(--color-background); color: var(--color-text); @@ -70,12 +71,26 @@ body { main { display: flex; - flex: 1; min-width: 0; + flex: 1; flex-direction: column; } -/* Image sur les sections alternées de l'accueil et les pages intérieures. */ +.content { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding: 20px; +} + +.prose { + max-width: 72ch; + line-height: 1.6; +} + +/* Sections et pages intérieures +------------------------------------------------------------------------ */ + main > section { background-color: var(--color-background); } @@ -91,19 +106,6 @@ main > section:nth-of-type(odd):not(:only-of-type), background-repeat: no-repeat; } -.content { - width: 100%; - max-width: 1200px; - margin-inline: auto; - padding: 20px; -} - -.prose { - max-width: 72ch; - line-height: 1.6; -} - -/* Une seule feuille de lecture sur les pages intérieures. */ .page-section { flex: 1; padding: clamp(24px, 5vw, 72px) 20px; @@ -119,11 +121,6 @@ main > section:nth-of-type(odd):not(:only-of-type), max-width: 72ch; } -.section-services, -.section-hosting { - padding-bottom: 100px; -} - /* Typographie et liens ------------------------------------------------------------------------ */ @@ -174,13 +171,15 @@ a:hover { text-decoration: underline; } -/* Liens dans les paragraphes et le pied de page. */ main p a:not(.button), footer a { text-decoration: underline; text-underline-offset: 0.15em; } +/* Navigation clavier et focus +------------------------------------------------------------------------ */ + a:focus-visible, button:focus-visible, input:focus-visible, @@ -214,9 +213,9 @@ summary:focus-visible { min-height: 70px; flex-wrap: wrap; align-items: center; - text-align: left; - background: var(--color-surface); border-bottom: 1px solid rgb(202 210 197 / 18%); + background: var(--color-surface); + text-align: left; } .topbar a { @@ -232,8 +231,8 @@ summary:focus-visible { } .topbar a.topbar__account { - margin-left: auto; margin-right: 20px; + margin-left: auto; } .topbar .topbar__account { @@ -265,6 +264,9 @@ summary:focus-visible { height: 48px; } +/* Accueil et présentation +------------------------------------------------------------------------ */ + .logo { display: flex; align-items: center; @@ -332,7 +334,9 @@ summary:focus-visible { margin-top: 80px; padding: 20px 20px 40px; border: 2px solid var(--color-text); - box-shadow: 0 0 5px var(--color-shadow-light), 0 4px 4px var(--color-shadow-dark); + box-shadow: + 0 0 5px var(--color-shadow-light), + 0 4px 4px var(--color-shadow-dark); } .box img { @@ -350,34 +354,6 @@ summary:focus-visible { translate: 0 -55px; } -/* Bordure supérieure interrompue autour des titres, sans masquer la photo. */ -.section-hosting .box { - border-top: 0; - background: rgb(15 40 55 / 30%); -} - -.section-hosting .box__title { - display: flex; - align-items: center; - gap: 8px; - width: auto; - margin-inline: -22px; - padding: 10px 0; - background: transparent; - translate: 0 calc(-50% - 20px); -} - -.section-hosting .box__title::before, -.section-hosting .box__title::after { - content: ""; - flex: 1; - border-top: 2px solid var(--color-text); -} - -.section-hosting .box__title::before { - flex: 0 0 20px; -} - .box__link { padding: 20px; color: var(--color-text); @@ -394,7 +370,9 @@ summary:focus-visible { margin-bottom: 10px; } -/* Couleur des cartes selon leur position. */ +/* Cartes des services +------------------------------------------------------------------------ */ + .section-services .box:nth-child(3n + 1) { --service-accent: var(--color-link); } @@ -415,7 +393,42 @@ summary:focus-visible { border-color: var(--service-accent); } -/* Formulaires et messages +.section-services, +.section-hosting { + padding-bottom: 100px; +} + +/* Hébergement et infrastructure +------------------------------------------------------------------------ */ + +.section-hosting .box { + border-top: 0; + background: rgb(15 40 55 / 30%); +} + +.section-hosting .box__title { + display: flex; + width: auto; + align-items: center; + gap: 8px; + margin-inline: -22px; + padding: 10px 0; + background: transparent; + translate: 0 calc(-50% - 20px); +} + +.section-hosting .box__title::before, +.section-hosting .box__title::after { + content: ""; + flex: 1; + border-top: 2px solid var(--color-text); +} + +.section-hosting .box__title::before { + flex: 0 0 20px; +} + +/* Formulaires ------------------------------------------------------------------------ */ .contact-form { @@ -435,7 +448,6 @@ summary:focus-visible { font-size: 1.2rem; } -/* Ne pas appliquer le fond clair au bouton d'envoi. */ .contact-form input:not([type="submit"]), .contact-form textarea { background: var(--color-text); @@ -448,11 +460,6 @@ summary:focus-visible { box-shadow: 0 0 10px var(--color-surface-dark); } -.contact-form input:not([type="submit"]):focus-visible, -.contact-form textarea:focus-visible { - outline-color: var(--color-surface); -} - .submit { width: 100%; background: var(--color-accent); @@ -469,25 +476,52 @@ summary:focus-visible { overflow: hidden; } +/* Notifications +------------------------------------------------------------------------ */ + +main.main--with-flash { + position: relative; +} + +.flash-container { + position: absolute; + z-index: 1; + inset: 0 0 auto; + display: grid; + gap: 10px; + padding: 20px; +} + .flash { - margin: 0 0 1rem; + width: 100%; + max-width: 1000px; + margin: 0 auto; padding: 0.75rem 1rem; border-left: 3px solid; } .flash--notice { - background-color: var(--color-flash-notice-background); border-color: var(--color-accent); + background: var(--color-flash-notice-background); color: var(--color-text); } .flash--error { - background-color: var(--color-flash-error-background); border-color: var(--color-flash-error-border); + background: var(--color-flash-error-background); color: var(--color-text); } -/* Admin +main.main--with-flash > section:first-of-type { + padding-top: var(--flash-space); +} + +main.main--with-flash > section.page-section:first-of-type { + padding-top: + calc(var(--flash-space) + clamp(24px, 5vw, 72px)); +} + +/* Tableaux ------------------------------------------------------------------------ */ .members-table { @@ -531,7 +565,7 @@ footer { margin-inline: auto; } -/* Adaptations et accessibilité +/* Adaptations pour les écrans larges ------------------------------------------------------------------------ */ @media screen and (min-width: 1080px) { @@ -555,7 +589,9 @@ footer { } } -/* Effets au survol sur les écrans et périphériques adaptés. */ +/* Effets au survol +------------------------------------------------------------------------ */ + @media (hover: hover) and (min-width: 1080px) { .box__link:hover { transform: scale(1.04); @@ -566,7 +602,14 @@ footer { } } +/* Adaptations pour les petits écrans +------------------------------------------------------------------------ */ + @media screen and (max-width: 600px) { + :root { + --flash-space: 8rem; + } + .box { margin-top: 60px; padding: 20px; @@ -582,6 +625,9 @@ footer { } } +/* Préférences d'accessibilité +------------------------------------------------------------------------ */ + @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; diff --git a/views/contact.erb b/views/contact.erb index 594fe58..7f42a01 100644 --- a/views/contact.erb +++ b/views/contact.erb @@ -6,14 +6,6 @@

Vous avez un projet en tête ? Un service vous intéresse ? Ou simplement une question ? Ce formulaire est là pour ça !

- <% if notice = flash["notice"] %> -

<%= notice %>

- <% end %> - - <% if error = flash["error"] %> - - <% end %> -
<%== csrf_tag("/contact/send") %> diff --git a/views/layout.erb b/views/layout.erb index 11aabbf..23ad670 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -54,7 +54,25 @@ -
+ <% notice = flash["notice"] %> + <% error = flash["error"] %> + +
+ <% if notice || error %> +
+ <% if notice %> +

<%= notice %>

+ <% end %> + + <% if error %> + + <% end %> +
+ <% end %> + <%== yield %>