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