« Modèle:Card/styles.css » : différence entre les versions
De Nefald
Autres actions
Page créée avec « →============================================================================= HOME CARD COMPONENT Composant de carte stylisé pour affichage de contenu avec image Compatible dark/light mode avec Citizen skin ============================================================================= : /* ----------------------------------------------------------------------------- STRUCTURE DE BASE ---------------------------------------------------------... » |
Aucun résumé des modifications |
||
| Ligne 242 : | Ligne 242 : | ||
/* ============================================================================= | /* ============================================================================= | ||
GRILLES - Layouts multiples | |||
============================================================================= */ | ============================================================================= */ | ||
.home-cards-grid { | .home-cards-grid, | ||
.home-cards-grid-1, | |||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
display: grid; | display: grid; | ||
gap: 24px; | gap: 24px; | ||
margin: 24px 0; | margin: 24px 0; | ||
width: 100%; | |||
} | |||
/* Auto-responsive (défaut) */ | |||
.home-cards-grid { | |||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |||
} | |||
/* Layouts fixes */ | |||
.home-cards-grid-1 { | |||
grid-template-columns: 1fr; | |||
max-width: 600px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.home-cards-grid-2 { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
.home-cards-grid-3 { | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
/* ============================================================================= | |||
RESPONSIVE - Adaptation mobile | |||
============================================================================= */ | |||
@media (max-width: 1024px) { | |||
.home-cards-grid-3 { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
@media (max-width: 768px) { | |||
.home-cards-grid, | |||
.home-cards-grid-2, | |||
.home-cards-grid-3 { | |||
grid-template-columns: 1fr; | |||
gap: 16px; | |||
} | |||
.home-card__image { | |||
height: 200px; | |||
} | |||
.home-card__content { | |||
padding: 16px; | |||
} | |||
.home-card__title { | |||
font-size: 1.25rem; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.home-card__image { | |||
height: 180px; | |||
} | |||
} | } | ||