Improve style
This commit is contained in:
julien committed
1 parent
b8fd7863d6
commit
5cf45c2084
4 files changed
+137
-77
No files matched your search
@@ -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
|
||||
|
||||
|
||||
+114
-68
@@ -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;
|
||||
|
||||
@@ -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") %>
|
||||
|
||||
|
||||
+19
-1
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user