writing the second cheatsheet

nx-academy · Jul 19, 2024 · a79b85c · a79b85c
1 parent b52eb98
commit a79b85c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/public/enfant-rangeant-jouets.webp b/public/enfant-rangeant-jouets.webp
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,9 +4,9 @@
       <li class="brand-name">
         <a href="/">NX Academy</a>
       </li>
-      <li>
+      <!-- <li>
         <a href="/blog/welcome-v2"> Blog </a>
-      </li>
+      </li> -->
     </ul>
   </nav>
 </header>

diff --git 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/...ches/decouvrir-la-propriete-box-sizing.md → .../decouvrir-la-propriete-css-box-sizing.md b/...ches/decouvrir-la-propriete-box-sizing.md → .../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,17 +24,36 @@ 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
 
 - Pour moi, il n'y a qu'un seul cas d'utilisation possible
 - 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/)
 
 </article>