Improve style

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
 

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;

views/contact.erb

@@ -6,14 +6,6 @@
         <p>Vous avez un projet en tête ? Un service vous intéresse ? Ou simplement une question ? Ce formulaire est là pour ça !</p>
       </div>
       <div>
-        <% if notice = flash["notice"] %>
-          <p class="flash flash--notice" role="status"><%= notice %></p>
-        <% end %>
-
-        <% if error = flash["error"] %>
-          <p class="flash flash--error" role="alert"><%= error %></p>
-        <% end %>
-
         <form action="/contact/send" method="post" class="contact-form" accept-charset="UTF-8">
           <%== csrf_tag("/contact/send") %>
 

views/layout.erb

@@ -54,7 +54,25 @@
     </nav>
   </header>
 
-  <main id="main-content">
+  <% notice = flash["notice"] %>
+  <% error = flash["error"] %>
+
+  <main
+    id="main-content"
+    class="<%= 'main--with-flash' if notice || error %>"
+  >
+    <% if notice || error %>
+      <div class="flash-container">
+        <% if notice %>
+          <p class="flash flash--notice" role="status"><%= notice %></p>
+        <% end %>
+
+        <% if error %>
+          <p class="flash flash--error" role="alert"><%= error %></p>
+        <% end %>
+      </div>
+    <% end %>
+
     <%== yield %>
   </main>