Modifications de variables personnalisés de page (32:45 - 38:43)
divers.scss = fichiers avec les variables de Benjamin
Modifie variable des grands fond ($page-margin_gf) / petit fond ($page-margin_pf)
34:36 → exploration du DOM et des variables --pagedjs-margin-..
36:44 → regarde variables taille page dans le DOM
36:55 → explore le DOM (pagedjs_content; pagedjs_page)
37:05 → modifie --pagedjs-pagebox-width d'un millimetre à l'autre directement dans les outils d'inspection
38:00 → dans le DOM, va regarder à quoi correspond les variables --pagedjs-width-right et --pagedjs-height-right (par défaut: 8.5in / 11in)
38:34 → modification width page ($page-width) dans les variables: 165mm
Video 2, 5/1/2021 (42:18)
Fond coloré avec hack :before (00:00 / 10:40)
00:53 → utilise :before pour créer un élément de background des pages de type chapitre / remplace valeurs (100%, 0) par variables de la page
Avant
Après
2:30 → calcul avec marges négatives pour les positions absolute top: $page-margin_top * -1; left: $page-margin_bottom * -1/ reste espace blanc en bas de la page
03:21 → inspecte variables DOM paged.js
03:29 → change les positionnement absolute top et left de l'élément before dans les outils d'inspection (regarde ce que ça donne ?) agit sur l'artefact pour en comprendre le fonctionnement
06:02 → ajout calc dans la déclaration top top: calc(#{$page-margin_top} * -2) / mais reste du blanc en bas de la page
08:35 → créé une déclaration @page chapitre avec margin-top: 0 et margin-bottom: 0
09:18 → remplace positionnements absolute par top: 0 et left: 0
09:36 → remet positionnement left avec variable left: $page-margin_bottom * -1
Baseline et font-size (10:40 / 27:55)
réglages valeur baseline + margins des pages + font-size et line-height généraux
10:40 → ouverture du fichier interface.css + uncomment to see baseline
11:27 → dans divers.scss → ::root{ --pagedjs-baseline: $baseline }réutilisation d'une variable personnelle dans une variable issue d'une conception collective, adaptation
12:34 → change directement la valeur de --pagedjs-baseline dans le fichier interface.css (15px)
13:15 → recherche web "pixel to millimeter" + site web unitconverters.net / 5mm
13:56 → _divers.scss / remplace 5mm par variable: $page-margin_top: $baseline
14:30 → _divers.scss / remplace 15mm par variable: $page-margin_bottom: $baseline*3
16:45 → sélectionne --pagedjs-baseline-position dans interface.scss
18:45 → interface.scss → dans la longue ligne de background, remplace var(--pagedjs-baseline) - 1px par var(--pagedjs-baseline) - 0.5pxrendu de la ligne de base plus fin
19:56 → fichiers _typo.scss avec un certain nombre de variables
20:18 → ajout dans balise `html`, `line-height: $baseline`
h1{
string-set: title content(text);
@include f1-s4();
}
@mixin from _typo.scss
28:43 → ajout h1 `margin-bottom: $baseline*3`
29:11 → changement valeur line-height h1 dans le @mixin, la valeur `$l ` (`line-height: $baseline*$l`) passe de 4 à 5;
29:38 → outil d'inspection, regarde el line-height "calculé" de h1
31:24 → changement taille margin-top (variable) dans _divers.scss pour correspondre à la taille de la baseline: `$page-margin_top: 5mm` > `$page-margin_top: $baseline`
32:18 → changement taille margin-bottom (variable) dans _divers.scss pour correspondre à la taille de la baseline: `$page-margin_bottom: 15mm` > `$page-margin_top: $baseline*2`
33:10 → changement `--pagedjs-baseline-position` dans les outils d'inspection, met à 0px
33:13 → outil d'inspection, sélectionne margin-box-top-left-corner dans l'aperçu du navigateur, qui correspond parfaitement à la hauteur de la ligne de base
34:03 → inspecte différents paragraphe
34:26 → changement `--pagedjs-baseline-position` dans les outils d'inspection, pour caler les paragraphes sur la baseline
35:17 → outil d'inspection, ajoute propriété `top` à l'élément h1, `top: -5px` cale h1 sur la ligne de base
36:11 → recherche web « css baseline » puis « css line-height » / puis consultation de divers articles web sur la baseline et le leading-trim
Video 3, 5/1/2021 (54:49)
Alignement des éléments sur la baseline avec line-height crop (00:00 - 22:15)
00:00 → medium.com/codyhouse, « Line-height Crop – a simple CSS formula to remove top space from your text »
00:38 → copie code from medium article (`@mixin 1hCrop()`) et colle dans _typo.scss
02:13 → inspecte élément `:before` créé par le `@mixin 1hCrop()`
04:41 → dans le code source, remplace une variable par une valeur directe dans un mixin `@include 1h-crop($baseline*$l)` > `@include 1h-crop(1.25)` (1.25, copié depuis la valeur de `$baseline: 1.25`)
06:44 → website tool « Text crop » / text-crop.eightshapes.com
07:04 → entre les valeurs de la typographie qu'il utilise pour les titres (ont-family: faustina, weight, size, line-height) et cale les top crop et bottom crop en fonction
09:49 → recherche web « leading-trim »
09:51 /10:30 → zellwk.com/blog/leading-trim, article de blog « Leading Trim is in the works! »
10:44 → MDN website, « margin-trim »
10:54 → matthiasot.com, billet de blog « The thing with leading in CSS »
12:03 → change valeur de `@include leading-trim(1.25)` dans le `@mixin-f1` pour remettre une variable (plutôt qu'une valeur fixe)> `@include leading-trim($l)`
12:10 → supprime valeurs inutils dans l'appel du mixin `@mixin leading-trim($line-height, $capital-letter: 1)` > `@mixin leading-trim($line-height)`
12:55 → code source, refait entièrement le calcul du margin-top dans le `@mixin leading-trim`
Avant
Après
17:08 → clic droit sur un paragraphe, utilise Fontanello (extention de navigateur) pour inspecter les valeurs du patragraphe rendu
17:46 → code source _typo.scss, change plusieurs valeurs absolutes dans les `@mixin f1-s1` et `@mixin f1-s0`
18:19 → outils d'inspection, coche et décoche la propriété `left` pour l'élément `::before` qui fait le background-color des pages avec h1, puis modifie plusieurs fois la valeur
51:46 → recherche web "open sans condensed" + site google fonts, "Open Sans Condensed" / change texte par défaut et remplace par "2020"
52:14 → outil d'inspection, change les styles de l'élement after contenant le counter
54:00 → report des modifications et ajouts de propriété dans le code source
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)
00:00 / 3:05 → positionnement et style counter (élément after de la section) sur la page "rétrospective"
positionnement en absolute (bottom et right)
d'aide des outils d'inspection pour positionner comme il le souhaite
change le @include qui défini une partie du style du counter : @include f2-s1(var(--color-2))
3:05 / 5:44 → avec les outils d'inpection, fait des tests de style pour la page (mais ne les garde pas dans le code)
élément before de la section qui sert de fond-coloré: raccourci la largeur / le fond coloré fait les 3/4 de la page environ
utilise z-index mix-blend-mode pour faire un effet avec la typo
change style et positionnement du counter pour le caler pile sur la baseline
05:44 / 06:20 → dans les outils d'inspection, avec l'élément before de la section, teste une forme colorée (border-radius, positionnement absolute, height et width) / plusieurs versions de l'élément
05:44 / 06:20 / Prototypage avec les outils d'inspection
Travail sur l'image de couverture (6:20 / 10:23)
taille
code source: width: $page-width
puis agrandit en valeur "fixe" dans les outils d'inpection
code source: width: $page-width*1.2
positionnement en absolute, utilise les outils d'inspection pour placer horizontalement
Enlève marges et padding de la couverture (10:23 /13:21)
joute une named page spéciale pour la couverture @page cover avec margin-top et margin-bottom à 0
supprime la named page et utilise @page:first à la place
copie la déclaration .pagejs_chapitre_page .pagejs_page_content { > div ... } de _chapitre.scss dans _cover.scss (qui permet d'avoir des les éléments en pleine page) / remplace .pagejs_chapitre_page par .pagedjs_first_page
ajoute padding à l'élément #cover copié de section[type="chapitre"] (permet d'avoir les marges de la page)
(déjà fait avant enregistrement →) utilise background-image: linear-gradient(...), linear-gradient(...) pour faire une forme géométrique + mix-blend-mode-image + width, height et positionnement absolute
outil d'inspection: change des valeurs deg dans les functions linear-gradient pour changer la forme
outils d'inspection: change right de l'image pour la positionner horizontalement
00:00 - 06:42 / Prototypage avec les outils d'inspection
Éléments textuels de la couverture: HTML, layout, style (06:42 - 21:26)
style h1 et .subtitle de la couverture / code source, ajoute @include f1-s1 pout les deux + font-weight: 700 (gras) pour le h1
ajoute logo de l'asso dans l'HTML (svg dans balise img)
positionne le logo avec position absolute dans différents endroits (nombreux) / outil d'inspection pour positionnement
modification du logo sur illustrator pour rappetisser la zone du logo (trop de blanc tournant)
cale les élément sur la ligne de base en utilisant le line-height et un positionnement relatif négatif (pour les titre) ou les valeurs du positionnement absolute pour le logo
ajoute filter: invert(1) brightness(11) au logo puis supprime (décide de ne pas le garder)/ dans les outils d'inspection
report des porpriétés CSS du logo ajoutés avec les outils d'inspection dans le code source
change les valeurs `right` et `bottom` du logo qui sont en valeur fixe pour des variables
met le navigateur en plein écran pour caler correctement le logo sur la baseline
remet valeur fixe pour la propriété `bottom` du logo pour caler sur la baseline + divise right en 2
.logo {
right: $unite/2;
bottom: 10px;
...
}
Filtre duotone sur une image pleine page (21:30 - 1:06:38)
21:52 → recherche web "svg duotone filter"
22:01 → codepen "Duotone SVG filters (@lentilz)" // passe du temps à lire le code html
css-ticks.com, billet "using svg to crate a duotone image effect"
copie code html/svg from crodepen (ligne 27/45) in base.html
remplace id + ajoute class ( <svg class="visibility-hidden"> <filter id="duotone">... </filter> </svg>)
25:25 → outil d'inspection, sur une image, ajoute le filtre duotone en ajoutant style dutotone (de l'élément filter HTML) avec la propriété CSS filter: url(#duotone)
remplace une partie du code filter depuis le codepen (choisi d'autres couleurs duotone parmi les couleurs proposées)
27:38 → code source _article.scss, ajoute un appel de named page
- passe du temps à regarder codepen et lire article css-tricks
recherche web "nunjucks hex"
30:20 → récupère une couleur bleu en hex déjà utilisée dans son code (depuis les outils d'inspection) et utilise outil google pour avoir la valeur rgb + remplace couleur hex par rgb dans _variable.json (ligne 7, colors: [[99, 191, 194], #333, #888, #ffffff]) // fait pareil avec toutes les autres couleurs de la ligne de code
vérifie dans les outils d'inspection, en sélectionnant les balises styles que les variables json ont bien été compilés dans les variables css / code source base.html: les variables json sont appelées dans une balise style, dans des variables css
manque `rgb()` dans le css autour des variables json, l'ajoute
code source base.html, remplace valeurs fixes des couleurs dans la baseline <filter> par variable json et calcul (lignes 40/42, tableValues=*{{ _variable.color[1][0] / 255 }} {{ _variable.color[0][0] / 255 }})
restructure sass de _article.scss et ajoute .pagedjs_article_page récupéré depuis le DOM dans les outils d'inspection // duotone ne fonctionne plus sur l'image
cherche pourquoi filter ne fonctionne pas avec plusieurs stratégie
code source, modifie par filter: greyscale(1) / fonctionne
outil d'inspection, ajoute sur l'élément image filter: url(#duotone) / ne fonctionne pas
terminal, relance module sass / ne fonctionne pas
outil d'inscepction, inspecte l'image dans le DOM et remarque dans le CSS que l'URL correspond au chemin depuis localhost (ajout du à la compilation sass)
42:26 - 55:30 → recherche web "sass url relative path" puis "sass url anchor" puis "eleventy plugin sass" puis "eleventy url filter", etc. (plusieurs minutes à chercher, lire des articles, modifie une config du pluggin sass dans eleventy.js tester différentes syntaxes pour l'url)
57:32 → solution finale: dans le code source, place .pagedjs_article_page main img { filter: url({{ "#duotone"/ url }}) } dans une balise <style> de base.html / le path de l'url n'est pas modifié par la compilation sass mais par eleventy
modifie plusieurs fois les variables des couleurs dans le <filter> de base.html / obligé de re rendre la page à chaque fois et ne peu pas utiliser les outils d'inspection car doit compiler
création des named page pour chaque section (1:06:40 - 1:17:00)
code source _article.scss, ajoute sélecteurs css pour les pages articles (défini les page articles sen négatif, "ce ne sont pas les page de type...") / inspecte le DOM avec les outils d'inspection pour regarder les class et id des sections + une recherche web "css selector"
création de'un nouveau fichier sass _introduction.scss / copie code de _article.scss et modifie code
section#a01-le_mot_du_president.txt {
page: introduction;
}
@media print{
@page introduction {
main {
p { @include f1-s1; }
}
}
}
pareil avec fichier _annexes.scs (section[id~='annexes'] { page: annexes; } ...) et _table_of_content.scss (section#toc { page: toc; } ...)
ajout des liens vers les fichiers scss dans index.scss
organisation du code HTML et CSS : id, class et type + cascade (1:17:00 - 1:49:30)
inspecte DOM liste DOM
regarde code source de paged.js → function `pageWeight()` qui ajoute classes `pagedjs_first_page`, `pagedjs_left_page`, `pagedjs_right_page`, `pagedjs_blanck_page`, `pagedjs_named_page`
index.html, modification structure des sections: ajoute titre h2 pour les noms de fichiers contenant `00-` + modifie les variables appelées pour les id, class et type
avant
après
_article.scss, simplification sélecteur css `:not(#a01 -le_mot_du_president.txt)` → `:not(#le-mot-du-president)` / id copié depuis le DOM
index.html, modification structure des sections: modifie les variables appelées pour les id, class et type pour ajouter la `class='annexes`
article.scss et _annexes.scss, simplification sélecteur css `[id~='annexes']` → `.annexes` / id copié depuis le DOM
1:36:06 → utilise l'outil recherche des outils d'inspection pour trouver le titre rechercher et s'aperçoit qu'il n'est pas visible dans le rendu (à cause de la class)
_chapitre.scss, ajoute sélecteur `h2` dans `@page chapitre` et déplace `@include f1-s2(-` et pseudo éléments `:before` et `:after` dedans (avant dans `@page chapitre`)
ne fonctionne pas car ces éléments ne peuvent pas être contenu dans le `@page`
ajoute `color:red` au h2, mais ne fonctionne toujours pas
cherche différentes structuration du code css/sass pour avoir les styles qui fonctionnent (certains styles contenu dans @media, d'autres dans @page chapitre, pseudos élements dans h2 ou @page chapitre ect....
ajoute `break-before: right` dans `h2[type="chapitre"]` (essaie d'jaouter el break das 3 endroits dans le code avant de trouver le bon)
ajoute `>div > main h2` dans les sélecteurs ligne 21 // numéro réapparait en grand
inspecte le DOM dans la version HTML sans paged.js (DOM généré par eleventy aussi)
index.html, ajoute nouveau titre h1 au début de la page html générée (ligne 4) avec visibility-hidden
cherche à cibler uniquement les paragraphes des articles (se trompe plusieurs fois dans les bons sélecteurs css et @page) + besoin de recompilation terminal du module sass
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
ajout bordures rouge à pagebox des articles (ligne 9) / classes pagedjs trouvé par inspection du DOM
ajout bordure rouge à toutes les marges avec classes pagedjs (ligne 9) + inspection des marges dans le DOM généré
ajout bordure à `.pagedjs_margin-content` de `.pagedjs_margin-lef-top` directement dans les outils d'inspection