Antalaha Propre : site multi-pages d'une association

css/impression.css · 2.3 Ko

/* =====================================================================
   css/impression.css : feuille de style D'IMPRESSION
   =====================================================================
   Rôle : définit l'apparence de la page quand on l'imprime (Ctrl+P) ou
   qu'on l'enregistre en PDF. Elle est chargée dans chaque page avec
   <link rel="stylesheet" href="..." media="print"> : le navigateur ne
   l'applique QUE pour le papier.
   Principes : économiser l'encre (fond blanc, texte noir), supprimer ce
   qui ne sert à rien sur papier (menu, lien d'évitement, formulaire,
   grandes images), et afficher les adresses des liens. */

@media print {

  /* Variables de couleur forcées en noir et blanc, même si l'appareil
     est en mode sombre : le papier est blanc ! */
  :root {
    --fond: #fff;
    --surface: #fff;
    --texte: #000;
    --texte-doux: #333;
    --principale: #000;
    --sur-principale: #000;
    --accent: #000;
    --bordure: #999;
  }

  body {
    font-size: 12pt;            /* pt = point, l'unité du papier */
    line-height: 1.4;
    background: #fff;
    color: #000;
  }

  /* On masque ce qui est inutile sur papier. */
  .lien-evitement,
  .nav,
  .hero,
  .formulaire,
  .bouton {
    display: none !important;
  }

  /* L'en-tête reste, mais sans fond coloré. */
  .entete {
    background: none;
    border-bottom: 2px solid #000;
  }
  .entete__nom {
    color: #000;
  }

  /* Pas de marges de mise en page inutiles. */
  main {
    max-width: none;
    padding: 0;
  }

  /* Évite de couper une carte ou un événement entre deux pages. */
  .carte,
  .evenement {
    break-inside: avoid;
    border: 1px solid #999;
  }
  .evenement__date {
    border: 1px solid #000;
    background: none;
    color: #000;
  }

  /* Les titres restent collés au paragraphe qui les suit. */
  h2, h3 {
    break-after: avoid;
    color: #000;
  }

  /* Affiche l'adresse d'un lien externe après son texte : sur papier,
     on ne peut pas cliquer ! attr(href) lit l'attribut href du lien.
     On ne le fait que pour les liens qui commencent par « http » ou
     « mailto:» / « tel: » pour ne pas imprimer les chemins internes. */
  a[href^="http"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}