initialisation
This commit is contained in:
commit
bae6f3c2d4
BIN
src/.DS_Store
vendored
Normal file
BIN
src/.DS_Store
vendored
Normal file
Binary file not shown.
60
src/Couleurs des titres.md
Normal file
60
src/Couleurs des titres.md
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: olive;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
# Titre
|
||||||
|
## Titre de niveau 2
|
||||||
|
|
||||||
|
La couleur des titres ne peut se définir que grâce à une feuille de style placée au début du diaporama.
|
||||||
|
|
||||||
|
`<style>`
|
||||||
|
`h1 {`
|
||||||
|
`color: green;`
|
||||||
|
`}`
|
||||||
|
`</style>`
|
||||||
|
|
||||||
|
h1 représente un seul # , h2 deux ##, etc..
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Seconde Diapositive
|
||||||
|
## Titre de niveau 2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
# Troisième diapositive
|
||||||
|
## Titre de niveau 2
|
||||||
|
|
||||||
|
A l'aide de l'instruction `scope` le style ne s'applique que dans la diapositive là où il est défini :
|
||||||
|
|
||||||
|
`<style scoped>`
|
||||||
|
`h1 {`
|
||||||
|
`color: orange;`
|
||||||
|
`}`
|
||||||
|
`h2 {`
|
||||||
|
`color: yellow;`
|
||||||
|
`}`
|
||||||
|
`</style>`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Quatrième diapositive
|
||||||
|
## Titre de niveau 2
|
||||||
|
|
||||||
|
|
||||||
|
|
33
src/Couleurs du texte.md
Normal file
33
src/Couleurs du texte.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
color: red
|
||||||
|
---
|
||||||
|
|
||||||
|
# Diapo 1
|
||||||
|
|
||||||
|
La couleur se définit comme une propriété lorsqu'elle s'applique à toutes les diapositives.
|
||||||
|
|
||||||
|
On peut aussi les définir à l'aide de directives pour définir diapositive par diapositive.
|
||||||
|
|
||||||
|
`<!-- color: red -->`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Diapo 2
|
||||||
|
Couleur du texte rouge :
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _color: blue -->
|
||||||
|
# Diapo 3
|
||||||
|
Couleur du texte d'une seule diapositive, celle fois en bleu avec la directive :
|
||||||
|
`<!-- _color: blue -->`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Diapo 4
|
||||||
|
Retour au texte du rouge
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
42
src/Couleurs en-tête et pied de page.md
Normal file
42
src/Couleurs en-tête et pied de page.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
---
|
||||||
|
header: En-tête
|
||||||
|
footer: Pied de page
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header, footer {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
# Couleurs des en-têtes et pied de page
|
||||||
|
On utilise une propriété CSS :
|
||||||
|
`<style>`
|
||||||
|
`header, footer {`
|
||||||
|
`color: red;`
|
||||||
|
`}`
|
||||||
|
`</style>`
|
||||||
|
|
||||||
|
---
|
||||||
|
# Seconde diapositive
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header, footer {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
# Troisième diapositive avec des couleurs de l'en-tête et du pied de page personnalisées
|
||||||
|
On utilise une propriété CSS :
|
||||||
|
`<style scoped>`
|
||||||
|
`header, footer {`
|
||||||
|
`color: orange;`
|
||||||
|
`}`
|
||||||
|
`</style>`
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Quatrième diapositive
|
32
src/Thème Gaia.md
Normal file
32
src/Thème Gaia.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
theme: gaia
|
||||||
|
---
|
||||||
|
# Le thème Gaia est le seul thème avec de la Couleur
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Seconde diapositive
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- class : lead -->
|
||||||
|
|
||||||
|
La classe lead assure le centrage des éléments.
|
||||||
|
`<!-- class : lead -->`
|
||||||
|
|
||||||
|
On utilise cette directive pour ne modifier qu'une seule diapositive.
|
||||||
|
`<!-- _class : lead -->`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- class : invert -->
|
||||||
|
|
||||||
|
Inversion du thème avec la classe `<!-- class : invet -->`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- class : invert lead -->
|
||||||
|
|
||||||
|
Inversion du thème avec centrage des éléments avec la classe
|
||||||
|
`<!-- class : invert lead -->`
|
||||||
|
|
34
src/Thème Uncover.md
Normal file
34
src/Thème Uncover.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
---
|
||||||
|
theme: uncover
|
||||||
|
---
|
||||||
|
# Thème Uncover
|
||||||
|
|
||||||
|
Le thème `uncover` est appliqué dans toutes les diapositives depuis une directive.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Seconde diapositive avec le thème `uncover`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- class: invert -->
|
||||||
|
|
||||||
|
Thème inversé pour toutes les diapositives qui suivent à l'aide de la directive :
|
||||||
|
`<!-- class: invert -->`
|
||||||
|
|
||||||
|
Pour n'affecter qu'une seule diapositive, utilisez plutôt :
|
||||||
|
`<!-- _class: invert -->`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Diapo au thème inversé
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- class: lead -->
|
||||||
|
|
||||||
|
La classe `<!-- class: lead -->` annule l'inversion.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Dernière diapositive.
|
33
src/Thème White.md
Normal file
33
src/Thème White.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
theme: white
|
||||||
|
---
|
||||||
|
# Thème White
|
||||||
|
|
||||||
|
Le thème `white` est appliqué dans toutes les diapositives depuis une directive.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Seconde diapositive avec le thème `white`
|
||||||
|
|
||||||
|
|
||||||
|
<!-- class: invert -->
|
||||||
|
|
||||||
|
Thème inversé pour toutes les diapositives qui suivent à l'aide de la directive :
|
||||||
|
`<!-- class: invert -->`
|
||||||
|
|
||||||
|
Pour n'affecter qu'une seule diapositive, utilisez plutôt :
|
||||||
|
`<!-- _class: invert -->`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Diapo au thème inversé.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- class: lead -->
|
||||||
|
|
||||||
|
La classe `<!-- class: lead -->` annule l'inversion.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Dernière diapositive.
|
Loading…
Reference in New Issue
Block a user