fix(vitrine): pages PC plus larges, texte un peu plus petit.
Déploiement Hugo Staging / deploy-staging (push) Waiting to run
Déploiement Hugo Staging / deploy-staging (push) Waiting to run
This commit is contained in:
+44
-15
@@ -25,7 +25,7 @@
|
|||||||
--font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
|
--font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
|
||||||
--font-ui: "Segoe UI", "Helvetica Neue", sans-serif;
|
--font-ui: "Segoe UI", "Helvetica Neue", sans-serif;
|
||||||
--header-h: 3.75rem;
|
--header-h: 3.75rem;
|
||||||
--max: 72rem;
|
--max: 78rem;
|
||||||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -46,8 +46,8 @@ html { scroll-behavior: smooth; }
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: var(--font-ui);
|
font-family: var(--font-ui);
|
||||||
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
|
font-size: 1rem;
|
||||||
line-height: 1.6;
|
line-height: 1.55;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
background-color: var(--paper);
|
background-color: var(--paper);
|
||||||
background-image: url("/images/app/paper2.jpg");
|
background-image: url("/images/app/paper2.jpg");
|
||||||
@@ -56,6 +56,12 @@ body {
|
|||||||
background-position: center;
|
background-position: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
@media (min-width: 64rem) {
|
||||||
|
body {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 3px solid var(--mint);
|
outline: 3px solid var(--mint);
|
||||||
@@ -161,32 +167,51 @@ body {
|
|||||||
.site-main { min-height: 60vh; }
|
.site-main { min-height: 60vh; }
|
||||||
|
|
||||||
.page-shell {
|
.page-shell {
|
||||||
max-width: min(52rem, 92vw);
|
max-width: min(56rem, 94vw);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2.5rem 1.5rem 4rem;
|
padding: 2rem 1.25rem 3.5rem;
|
||||||
}
|
}
|
||||||
@media (min-width: 64rem) {
|
@media (min-width: 64rem) {
|
||||||
.page-shell {
|
.page-shell {
|
||||||
max-width: min(58rem, 88vw);
|
max-width: min(68rem, 90vw);
|
||||||
padding: 3rem 2rem 5rem;
|
padding: 2.5rem 2rem 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 90rem) {
|
||||||
|
.page-shell {
|
||||||
|
max-width: min(74rem, 86vw);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page-shell .content {
|
.page-shell .content {
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
padding: clamp(1.5rem, 3vw, 2.5rem);
|
padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.75rem);
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
box-shadow: 0 8px 32px rgba(42, 38, 34, 0.06);
|
box-shadow: 0 8px 32px rgba(42, 38, 34, 0.06);
|
||||||
}
|
}
|
||||||
|
.page-shell .content p,
|
||||||
|
.page-shell .content li {
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
@media (min-width: 64rem) {
|
||||||
|
.page-shell .content p,
|
||||||
|
.page-shell .content li {
|
||||||
|
font-size: 0.92rem;
|
||||||
|
max-width: 62rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
.page-shell h1 {
|
.page-shell h1 {
|
||||||
font-family: var(--font-brand);
|
font-family: var(--font-brand);
|
||||||
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
|
font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.page-shell h2 {
|
.page-shell h2 {
|
||||||
font-family: var(--font-brand);
|
font-family: var(--font-brand);
|
||||||
font-size: 1.35rem;
|
font-size: 1.2rem;
|
||||||
margin-top: 2rem;
|
margin-top: 1.75rem;
|
||||||
|
}
|
||||||
|
@media (min-width: 64rem) {
|
||||||
|
.page-shell h2 { font-size: 1.15rem; }
|
||||||
}
|
}
|
||||||
.page-shell a { color: var(--link); }
|
.page-shell a { color: var(--link); }
|
||||||
.note-validation {
|
.note-validation {
|
||||||
@@ -351,14 +376,18 @@ body {
|
|||||||
.section__inner--narrow { max-width: 40rem; text-align: center; }
|
.section__inner--narrow { max-width: 40rem; text-align: center; }
|
||||||
.section h2 {
|
.section h2 {
|
||||||
font-family: var(--font-brand);
|
font-family: var(--font-brand);
|
||||||
font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
|
font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.65rem;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
.section__lead {
|
.section__lead {
|
||||||
color: var(--ink-soft);
|
color: var(--ink-soft);
|
||||||
margin: 0 0 2rem;
|
margin: 0 0 1.75rem;
|
||||||
max-width: 36rem;
|
max-width: 42rem;
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
@media (min-width: 64rem) {
|
||||||
|
.section__lead { font-size: 0.92rem; max-width: 48rem; }
|
||||||
}
|
}
|
||||||
.section__inner--narrow .section__lead,
|
.section__inner--narrow .section__lead,
|
||||||
.section__inner--narrow > p { margin-left: auto; margin-right: auto; }
|
.section__inner--narrow > p { margin-left: auto; margin-right: auto; }
|
||||||
|
|||||||
Reference in New Issue
Block a user