« Modèle:MiniCard/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 3 : / Ligne 3 : @@
     ============================================================================= */
-/* Conteneur de grille - 6 colonnes fixes */
+/* Conteneur de grille - colonnes gérées par JS, fallback auto-fill */
 .minicard-grid {
      display: grid;
      gap: 12px;
-     grid-template-columns: repeat(6, 1fr);
+     grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      grid-auto-rows: 60px;
      margin: 0 auto 24px auto;
@@ Ligne 89 : / Ligne 89 : @@
      color: #ffffff !important;
      text-decoration: none !important;
      text-shadow:
          -1px -1px 4px rgba(0, 0, 0, 0.8),
 px 1px 4px rgba(0, 0, 0, 0.8),
@@ Ligne 98 : / Ligne 98 : @@
 .minicard:hover > a:not(.minicard-link-external) {
      padding-left: 20px;
      text-shadow:
          -1px -1px 6px rgba(0, 0, 0, 0.9),
 px 1px 6px rgba(0, 0, 0, 0.9),
@@ Ligne 115 : / Ligne 115 : @@
      color: #ffffff !important;
      text-decoration: none !important;
      text-shadow:
          -1px -1px 4px rgba(0, 0, 0, 0.8),
 px 1px 4px rgba(0, 0, 0, 0.8),
@@ Ligne 127 : / Ligne 127 : @@
 .minicard:hover .minicard-link-external {
      padding-left: 20px;
      text-shadow:
          -1px -1px 6px rgba(0, 0, 0, 0.9),
 px 1px 6px rgba(0, 0, 0, 0.9),
@@ Ligne 151 : / Ligne 151 : @@
      padding: 0 16px;
      color: #ffffff;
      text-shadow:
          -1px -1px 4px rgba(0, 0, 0, 0.8),
 px 1px 4px rgba(0, 0, 0, 0.8),
@@ Ligne 166 : / Ligne 166 : @@
 }
-/* Responsive - 4 colonnes */
+/* Responsive tablette - le JS recalcule, mais on ajuste la hauteur */
 @media (max-width: 900px) {
      .minicard-grid {
-        grid-template-columns: repeat(4, 1fr);
          gap: 8px;
      }
@@ Ligne 178 : / Ligne 177 : @@
 }
-/* Responsive - 3 colonnes */
+/* Responsive mobile */
 @media (max-width: 650px) {
      .minicard-grid {
-        grid-template-columns: repeat(3, 1fr);
          grid-auto-rows: 52px;
          gap: 8px;
@@ Ligne 199 : / Ligne 197 : @@
 }
-/* Responsive - 2 colonnes */
 @media (max-width: 420px) {
      .minicard-grid {
-        grid-template-columns: repeat(2, 1fr);
          gap: 6px;
      }
 }