diff --git a/public/enfant-rangeant-jouets.webp b/public/enfant-rangeant-jouets.webp
new file mode 100644
index 0000000..6656d7e
Binary files /dev/null and b/public/enfant-rangeant-jouets.webp differ
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 16cabb4..129dfc9 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -4,9 +4,9 @@
NX Academy
-
+
diff --git a/src/config/theme.ts b/src/config/theme.ts
index 37b9026..646d0fa 100644
--- a/src/config/theme.ts
+++ b/src/config/theme.ts
@@ -1,3 +1,13 @@
+const descriptiveColorVariables = {
+ night: "#151515",
+ springGreen: "#4EFFA0",
+ white: "#FEFEFE",
+ safetyOrange: "#FE7600",
+ amber: "#FFC107",
+ frenchGrey: "#B0BEC5",
+ bitterSweet: "#FF5252"
+}
+
const theme = {
colors: {
black: "#151515",
diff --git a/src/pages/fiches/decouvrir-la-propriete-box-sizing.md b/src/pages/fiches/decouvrir-la-propriete-css-box-sizing.md
similarity index 58%
rename from src/pages/fiches/decouvrir-la-propriete-box-sizing.md
rename to src/pages/fiches/decouvrir-la-propriete-css-box-sizing.md
index 99fd5cf..5758123 100644
--- a/src/pages/fiches/decouvrir-la-propriete-box-sizing.md
+++ b/src/pages/fiches/decouvrir-la-propriete-css-box-sizing.md
@@ -9,7 +9,7 @@ description: sd
# Découvrir la propriété CSS box sizing
-**Image de description de l'article**
+![Un enfant rangeant ses jouets dans un carton dans sa chambre, pixel art](/enfant-rangeant-jouets.webp)
## Problématique | Situation personnelle
@@ -24,6 +24,11 @@ description: sd
- A quoi sert cette propriété ?
- Pourquoi utilise-t-on souvent `box-sizing: border-box` ?
+```css
+* {
+ box-sizing: border-box;
+}
+```
## Utilisation | Exemples avec des cas d'usage
@@ -31,10 +36,24 @@ description: sd
- Vérifier s'il n'en existe pas d'autres.
- Préciser que c'est comme se brosser les dents, c'est une bonne pratique de le faire si on veut éviter les carries.
+La solution de Paul Irish :
+
+```css
+/* apply a natural box layout model to all elements, but allowing components to change */
+html {
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+```
+
## Ressources | Allez plus loin
-- Les deux articles de TeamTreehouse
-- Un article de la cascade ou d'alsa creation
-- Un article du MDN
+- [* { Box-sizing: Border-box } FTW](https://www.paulirish.com/2012/box-sizing-border-box-ftw/)
+- [La propriété CSS box-sizing - MDN](https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing)
+- [Box-Sizing: The Secret to Simple CSS Layouts](https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts)
+- [Take Control of the Box Model with box-sizing](https://blog.teamtreehouse.com/take-control-of-the-box-model-with-box-sizing)
+- [La propriété CSS box-sizing - Pierre Giraud](https://www.pierre-giraud.com/html-css-apprendre-coder-cours/box-sizing/)