fix(styles): typographie strong, grille layout, ajustements collection mobile
- fonts.css : strong { font-weight: 900 }
- layout.css : ajustement grid-template-rows (lignes 6-7 réduites à 2fr)
- collection.css : padding header mobile, tailles de police, gap carte,
image aspect-ratio avec marges, line-height description
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b655a22bf6
commit
65e345585a
3 changed files with 22 additions and 7 deletions
|
|
@ -47,7 +47,7 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1.5rem;
|
||||||
max-width: 640px;
|
max-width: 640px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -130,19 +130,24 @@
|
||||||
/* --- Mobile --- */
|
/* --- Mobile --- */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
.collection-header {
|
.collection-header {
|
||||||
padding: 4rem 0 2rem;
|
padding: 6rem 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-header :global(h1) {
|
.collection-header h1 {
|
||||||
font-size: var(--font-size-title-main-mobile);
|
font-size: var(--font-size-title-section-mobile);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-header :global(p) {
|
.collection-header p {
|
||||||
font-size: var(--font-size-subtitle-mobile);
|
font-family: "Danzza Medium", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: var(--font-size-subtitle);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-card {
|
.collection-card {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-card-image img,
|
.collection-card-image img,
|
||||||
|
|
@ -150,6 +155,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
aspect-ratio: 16/9;
|
aspect-ratio: 16/9;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-card--featured .collection-card-title {
|
.collection-card--featured .collection-card-title {
|
||||||
|
|
@ -159,6 +166,10 @@
|
||||||
.collection-card-title {
|
.collection-card-title {
|
||||||
font-size: var(--font-size-title-section-mobile);
|
font-size: var(--font-size-title-section-mobile);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.collection-card-description {
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Tablet --- */
|
/* --- Tablet --- */
|
||||||
|
|
|
||||||
|
|
@ -69,3 +69,7 @@
|
||||||
.pixel {
|
.pixel {
|
||||||
font-family: "Terminal", sans-serif;
|
font-family: "Terminal", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
min-height: 100% !important;
|
min-height: 100% !important;
|
||||||
display: grid !important;
|
display: grid !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 2fr 2fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
||||||
grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue