Habiller la page de l'équipe — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Habiller la page de l'équipe

Variables, transitions, animations et projet · niveau 3 (difficile)

Énoncé

La page « À propos » présente l'équipe dans une simple liste. En réutilisant uniquement les variables de la feuille de la Librairie (aucune couleur écrite en dur, à part le blanc des initiales), présenter chaque libraire dans une carte : un disque de 4rem aux initiales, le nom, le rôle. Les cartes forment une grille qui passe d'une à trois colonnes sans requête média, s'élèvent au survol pour qui accepte le mouvement, et fonctionnent dans les deux thèmes. Calculer la largeur des cartes dans une fenêtre de 800 pixels.

Corrigé


.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: calc(var(--espace) * 1.5);
  padding: 0;
  list-style: none;
}

.membre {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: calc(var(--espace) * 1.5) var(--espace);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  text-align: center;
}

.membre-initiales {
  display: grid;
  place-items: center;
  width: 4rem;
  aspect-ratio: 1;
  background: var(--entete);
  color: #fff;
  border-radius: 50%;
  font-family: var(--police-titre);
}

.membre-role {
  color: var(--texte-doux);
}

@media (prefers-reduced-motion: no-preference) {
  .membre {
    transition: translate var(--duree) ease-out;
  }

  .membre:hover {
    translate: 0 -4px;
  }
}

auto-fit plutôt que auto-fill : avec trois cartes seulement, les cartes s'étirent sur toute la largeur au lieu de laisser des colonnes vides. Les initiales sont du décor (aria-hidden="true") : le nom est écrit juste dessous.

Dans une fenêtre de 800 pixels, --espace vaut 20 pixels ; le contenu a des marges latérales de 32 pixels, il reste 736 pixels. Trois colonnes d'au moins 192 pixels tiennent ( $3 \times 192 + 2 \times 30 = 636$ ), quatre non ; chaque carte mesure $(736 - 2 \times 30) /3 \approx 225, 33$ pixels, ce que Chromium confirme. En thème sombre, la carte prend le fond #1f242b et le nom le bleu clair, sans une ligne de plus.