« Modèle:MiniCard/styles.css » : différence entre les versions
De Nefald
Autres actions
revert Balise : Révocation manuelle |
mAucun résumé des modifications |
||
| Ligne 7 : | Ligne 7 : | ||
display: grid; | display: grid; | ||
gap: 12px; | gap: 12px; | ||
grid-template-columns: repeat(auto-fill, minmax( | grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); | ||
grid-auto-rows: 60px; | grid-auto-rows: 60px; | ||
margin: 0 | margin: 0 auto 24px auto; | ||
width: 100%; | |||
} | } | ||
| Ligne 21 : | Ligne 22 : | ||
overflow: hidden; | overflow: hidden; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
display: | display: flex; | ||
align-items: center; | align-items: center; | ||
height: 60px; | height: 60px; | ||
width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
| Ligne 177 : | Ligne 167 : | ||
} | } | ||
/* Responsive */ | /* Responsive tablette */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.minicard-grid { | .minicard-grid { | ||
grid-template-columns: repeat(auto-fill, minmax( | grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); | ||
grid-auto-rows: 52px; | grid-auto-rows: 52px; | ||
gap: 8px; | gap: 8px; | ||
} | } | ||
.minicard { | .minicard { | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
height: 52px; | height: 52px; | ||
} | } | ||
.minicard > a:not(.minicard-link-external), | .minicard > a:not(.minicard-link-external), | ||
.minicard-link-external, | .minicard-link-external, | ||
.minicard-text { | .minicard-text { | ||
padding: 0 12px; | padding: 0 12px; | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
} | } | ||
} | } | ||
/* Responsive mobile */ | |||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.minicard-grid { | .minicard-grid { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
gap: 6px; | |||
} | } | ||
} | } | ||