From 50c7e14d1f7fec86eb81279cc47d209b6aa58cd5 Mon Sep 17 00:00:00 2001
From: Nico <narduin@pm.me>
Date: Sun, 17 Jul 2022 11:05:02 +0200
Subject: [PATCH] custom css + snippets + dep

---
 docs/.vitepress/theme/custom.css | 12 ++++++++
 docs/dev/code-camp/index.md      | 47 ++++++++++++++++++++++++++------
 docs/snippets/css/base.css       |  4 +++
 package.json                     | 22 +++++++--------
 4 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 4398ba6..ab1a322 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,3 +1,15 @@
 :root {
 	--vp-code-font-size: 0.9375rem;
 }
+
+:where(details summary) {
+	cursor: pointer;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+.prev-next a:hover {
+	text-decoration: none;
+}
diff --git a/docs/dev/code-camp/index.md b/docs/dev/code-camp/index.md
index f9784f0..9a2fb0f 100644
--- a/docs/dev/code-camp/index.md
+++ b/docs/dev/code-camp/index.md
@@ -59,7 +59,7 @@ code-camp/
 
 ## HTML
 
-Le HTML est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :  
+Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :  
 `<` `nom de la balise` `attributs` `>`  
 `contenu de la balise`  
 `<` `nom de la balise` `/>`
@@ -126,9 +126,40 @@ Ci-dessous, quelques exemples de balises (listes non exhaustives).
 <<< @/snippets/html/base.html#full
 :::
 
-## Sélecteurs CSS
+## CSS
 
-### Sélecteurs de balise
+Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
+
+- la mise en page
+- les couleurs
+- les tailles
+- la justification
+- les polices de caractères
+- etc.
+
+On parle de « règle CSS ». Une règle se construit ainsi :
+
+`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
+
+::: details Afficher l'exemple
+
+<<< @/snippets/css/base.css#rule
+
+- `p` est le sélecteur
+- `color` est la propriété
+- `blue` est la valeur
+- `color: blue;` est la déclaration
+- l'ensemble forme la règle
+
+:::
+
+::: tip Astuce
+Tout est une boîte en HTML/CSS.
+:::
+
+### Sélecteurs CSS
+
+#### Sélecteurs de balise
 
 Ils sont identiques aux balises HTML (sauf head).
 
@@ -136,7 +167,7 @@ Ils sont identiques aux balises HTML (sauf head).
 <<< @/snippets/css/base.css#tag
 :::
 
-### Sélecteurs de classe
+#### Sélecteurs de classe
 
 Cible une classe définie dans le HTML avec un point.
 
@@ -144,7 +175,7 @@ Cible une classe définie dans le HTML avec un point.
 <<< @/snippets/css/base.css#class
 :::
 
-### Sélecteurs d’attribut
+#### Sélecteurs d’attribut
 
 Cible un attribut spécifique avec ou sans valeur entre crochets.
 
@@ -152,7 +183,7 @@ Cible un attribut spécifique avec ou sans valeur entre crochets.
 <<< @/snippets/css/base.css#attr
 :::
 
-### Sélecteurs multiples et chaînés
+#### Sélecteurs multiples et chaînés
 
 Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
 
@@ -160,14 +191,14 @@ Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs
 <<< @/snippets/css/base.css#chain
 :::
 
-## Propriétés CSS
+### Propriétés CSS
 
 ::: info
 Il en existe beaucoup trop pour essayer de les résumer ici.
 Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
 :::
 
-## La cascade du style
+### La cascade du style
 
 Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
 
diff --git a/docs/snippets/css/base.css b/docs/snippets/css/base.css
index eacca85..6454798 100644
--- a/docs/snippets/css/base.css
+++ b/docs/snippets/css/base.css
@@ -1,3 +1,7 @@
+// #region rule
+p { color: blue; }
+// #endregion rule
+
 // #region tag
 body {}
 main {}
diff --git a/package.json b/package.json
index c26ed13..503e034 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "vitepress-starter",
-  "packageManager": "yarn@3.2.1",
-  "scripts": {
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
-  },
-  "devDependencies": {
-    "vitepress": "^1.0.0-alpha.4",
-    "vue": "^3.2.37"
-  }
+	"name": "vitepress-starter",
+	"packageManager": "yarn@3.2.1",
+	"scripts": {
+		"dev": "vitepress dev docs",
+		"build": "vitepress build docs",
+		"serve": "vitepress serve docs"
+	},
+	"devDependencies": {
+		"vitepress": "^1.0.0-alpha.4",
+		"vue": "^3.2.37"
+	}
 }