Changer la taille des images [ 760px ]

Video 1, 5/1/2021 (38:43)

Feuille de style article.css

Feuille de style page.css

pages.scss = fichiers avec les déclaration @page pour les tailles

Ajout string-set (difficultés) / 08:02 – 25:20

Tentative d'ajout des titres courants, avec difficulté

Tentative de faire une named page et remplir de la couleur du background

Passe du temps à comprendre les pages nommées et les imbrications de bloc

  @media print{
    @page chapitre{
      .pagedjs_chapitre_page .pagedjs_page_content div,
      .pagedjs_chapitre_page .pagedjs_page_content div main,
        .pagedjs_chapitre_page .pagedjs_page_content div section{
        height: 100%;
        display: block;
      }
    }
    section[type="chapter"]{
      height: 100%
    }
  } 

  @media print{
    @page chapitre{
      .pagedjs_chapitre_page .pagedjs_page_content {
        > div, > div > main, > div > main > section{
          height: 100%;
          display: block;
        } 
      }
    }
    section[type="chapter"]{
      height: 100%
    }
  }

Modifications de variables personnalisés de page (32:45 - 38:43)

divers.scss = fichiers avec les variables de Benjamin

Video 2, 5/1/2021 (42:18)

Fond coloré avec hack :before (00:00 / 10:40)

Avant

Après

Baseline et font-size (10:40 / 27:55)

réglages valeur baseline + margins des pages + font-size et line-height généraux

Extrait video, 26:15 / 36:35, accéléré
h1{
 	string-set: title content(text);
 	@include f1-s4();
}

@mixin from _typo.scss

Video 3, 5/1/2021 (54:49)

Alignement des éléments sur la baseline avec line-height crop (00:00 - 22:15)

Avant

Après

CSS counters, reset et style (05:29 – 51:46)

section[type="chapitre"]{ 
  counter-increment: chapCount 1;
  &:after{
    content: counter(chapCount);
    @mixin f1-s1(white);
    font-size: 10rem;
  }
}
36:18 / 40:03
41:00 / Prototypage avec les outils d'inspection
html{ counter-reset: chapCount; } section#retrospective { counter-increment: chapCount 20; } // Pas logique mais bug else section[type="chapitre"]{ page: chapitre; counter-increment: chapCount }

Modification des styles de texte (51:46 - 54:49)

25:05 - 54:49 / Prototypage avec les outils d'inspection

Video 4, 6/1/2021 (13:21)

Modification du style de certains éléments, page "rétrospective 2020" (00:00 - 22:15)

05:44 / 06:20 / Prototypage avec les outils d'inspection

Travail sur l'image de couverture (6:20 / 10:23)

Enlève marges et padding de la couverture (10:23 /13:21)

Video 5, 6/1/2021 (01:56:33)

couverture, changement pseudo-élément `:before` sur l'élément `section id="cover"` + positionnement image (00:00 / 06:42)

00:00 - 06:42 / Prototypage avec les outils d'inspection

Éléments textuels de la couverture: HTML, layout, style (06:42 - 21:26)

  .logo {
    width: 25mm;
    position: absolute;
    right: $unite;
    bottom: $baseline;
    z-index: 10;
  }

  .logo {
    right: $unite/2;
    bottom: 10px;
    ...
  }

Filtre duotone sur une image pleine page (21:30 - 1:06:38) 

section:not([type="chapitre"]):not(#cover){
  page: article;
}

création des named page pour chaque section (1:06:40 - 1:17:00)

section:not[type="chapitre"]:not(#cover):not(#toc):not(#a01-le_mot_du_president.txt):not([id~='annexes']){ 
  page: article;
}
    
@page article {
  main{
    p { @include f1-s1; }
  }
}
    
section#a01-le_mot_du_president.txt {
  page: introduction; 
}
@media print{
  @page introduction {
    main {
      p {  @include f1-s1; }
    }
  }
}

organisation du code HTML et CSS : id, class et type + cascade (1:17:00 - 1:49:30)

avant

après

cherche à comprendre le fonctionnement des marges dans le DOM généré par Paged.js ? (1:49:30 - 01:56:33)

1:49:30 - 01:56:33