custom css + snippets + dep

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;
+}

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.
 

docs/snippets/css/base.css

@@ -1,3 +1,7 @@
+// #region rule
+p { color: blue; }
+// #endregion rule
+
 // #region tag
 body {}
 main {}

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "vitepress-starter",
+	"name": "vitepress-starter",
-  "packageManager": "yarn@3.2.1",
+	"packageManager": "yarn@3.2.1",
-  "scripts": {
+	"scripts": {
-    "docs:dev": "vitepress dev docs",
+		"dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
+		"build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+		"serve": "vitepress serve docs"
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "vitepress": "^1.0.0-alpha.4",
+		"vitepress": "^1.0.0-alpha.4",
-    "vue": "^3.2.37"
+		"vue": "^3.2.37"
-  }
+	}
 }