update grabber doc

docs/learn/2026-02-21.md

@@ -0,0 +1,82 @@
+# Cheat Sheet Tailwind
+
+Tailwind utilise des classes utilitaires. La logique est souvent `[Propriété]-[Taille/Couleur/Valeur]`.
+
+## 1. Espacement (Margin & Padding)
+La syntaxe : `[Type][Direction]-[Taille]`.
+
+- **Type** : `m` (Margin / Extérieur) ou `p` (Padding / Intérieur).
+
+- **Direction** : `t` (Haut), `b` (Bas), `l` (Gauche), `r` (Droite), `x` (Horizontal), `y` (Vertical), ou rien (Partout).
+
+- **Taille** : Échelle basée sur des multiples de 4px (ex: `1` = 4px, `2` = 8px, `4` = 16px).
+
+| Classe | Équivalent CSS | Explication |
+| :--- | :--- | :--- |
+| `p-4` | `padding: 16px;` | Espace à l'intérieur partout. |
+| `px-6` | `padding-left: 24px; padding-right: 24px;` | Espace à l'intérieur, à gauche et à droite. |
+| `mt-2` | `margin-top: 8px;` | Espace à l'extérieur, vers le haut. |
+| `mx-auto` | `margin: 0 auto;` | Centre un bloc horizontalement. |
+
+## 2. Dimensions (Width & Height)
+La syntaxe : `w-[Taille]` (Largeur) et `h-[Taille]` (Hauteur).
+
+| Classe | Équivalent CSS | Explication |
+| :--- | :--- | :--- |
+| `w-full` | `width: 100%;` | Prend toute la largeur disponible. |
+| `w-1/2` | `width: 50%;` | Prend la moitié de la largeur. |
+| `w-screen` | `width: 100vw;` | Prend la largeur totale de l'écran. |
+| `h-screen` | `height: 100vh;` | Prend la hauteur totale de l'écran. |
+| `w-16` | `width: 64px;` | Échelle numérique classique (16 * 4px). |
+
+## 3. Couleurs
+La syntaxe : `[Cible]-[Couleur]-[Intensité]`.
+
+L'intensité va de `50` (très clair) à `950` (très foncé).
+
+| Cible | Exemple Tailwind | Ce que ça colore |
+| :--- | :--- | :--- |
+| **Texte** | `text-blue-500`, `text-white` | La couleur de la police. |
+| **Fond** | `bg-red-600`, `bg-gray-900` | La couleur d'arrière-plan. |
+| **Bordure** | `border-green-400` | La couleur de la bordure. |
+
+## 4. Typographie
+Gérez la taille, la graisse et l'alignement.
+
+| Catégorie | Classes utiles | Explication |
+| :--- | :--- | :--- |
+| **Taille** | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl` | Du plus petit au plus grand. |
+| **Graisse** | `font-light`, `font-normal`, `font-semibold`, `font-bold` | L'épaisseur des lettres. |
+| **Alignement**| `text-left`, `text-center`, `text-right` | L'alignement du texte. |
+
+## 5. Flexbox (Mise en page)
+Déclarez `flex` pour commencer à aligner vos éléments.
+
+| Classe | Équivalent CSS | Explication |
+| :--- | :--- | :--- |
+| `flex` | `display: flex;` | Aligne les enfants en ligne (côte à côte). |
+| `flex-col` | `flex-direction: column;` | Aligne les enfants en colonne. |
+| `justify-center` | `justify-content: center;` | Centre sur l'axe principal. |
+| `justify-between`| `justify-content: space-between;`| Écarte les éléments aux extrémités. |
+| `items-center` | `align-items: center;` | Centre sur l'axe secondaire (souvent verticalement). |
+| `gap-4` | `gap: 16px;` | Ajoute 16px d'espace entre chaque enfant. |
+
+## 6. Bordures et Arrondis (Border & Rounded)
+Il faut toujours spécifier une épaisseur pour voir la bordure.
+
+| Classe | Équivalent CSS | Explication |
+| :--- | :--- | :--- |
+| `border` | `border-width: 1px;` | Ajoute une bordure de 1px partout. |
+| `border-t` | `border-top-width: 1px;` | Bordure uniquement en haut. |
+| `rounded` | `border-radius: 4px;` | Arrondit légèrement les angles. |
+| `rounded-md` | `border-radius: 6px;` | Arrondi moyen (idéal pour boutons). |
+| `rounded-full` | `border-radius: 9999px;` | Fait un cercle parfait ou une pilule. |
+
+## 7. États et Responsif (Préfixes)
+Préfixez n'importe quelle classe avec un état ou une taille d'écran.
+
+- **Survol (Hover) :** `hover:bg-blue-600`
+- **Focus :** `focus:border-blue-500`
+- **Responsif (Mobile First) :** - `w-full` (100% sur mobile par défaut)
+  - `md:w-1/2` (50% sur tablette)
+  - `lg:w-1/3` (33% sur grand écran)

docs/projects/2025-12-05.md

@@ -4,7 +4,7 @@ tags:
   - Bash
   - Docs
 ---
-<img src="https://github.com/buchtioof/grabber/blob/main/assets/logo.png?raw=true">
+<img src="https://github.com/buchtioof/portfolio/blob/main/public/img/assets/projects/grabber.png?raw=true">
 
 # Alternavive GLSI léger : Grabber
 

mkdocs.yml

@@ -63,6 +63,7 @@ nav:
     - 🐍 Python :
       - learn/python/2026-01-16.md
       - learn/python/2026-02-16.md
+    - learn/2026-02-21.md
   - Projets:
     - projects/2025-12-05.md
     - projects/2026-01-23.md

site/404.html

@@ -786,6 +786,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="/learn/2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/index.html

@@ -852,6 +852,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="learn/2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/devops/2025-10-30/index.html

@@ -858,6 +858,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/devops/2025-11-28/index.html

@@ -908,6 +908,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/devops/2025-12-12/index.html

@@ -958,6 +958,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/devops/2026-01-22/index.html

@@ -930,6 +930,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/javascript/2026-01-30/index.html

@@ -809,6 +809,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/javascript/2026-02-06/index.html

@@ -936,6 +936,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/javascript/2026-02-09/index.html

@@ -908,6 +908,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/python/2026-01-16/index.html

@@ -869,6 +869,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/learn/python/2026-02-16/index.html

@@ -12,7 +12,7 @@
         <link rel="prev" href="../2026-01-16/">
       
       
-        <link rel="next" href="../../../projects/2025-12-05/">
+        <link rel="next" href="../../2026-02-21/">
       
       
         
@@ -930,6 +930,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/links/index.html

@@ -793,6 +793,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../learn/2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/projects/2025-12-05/index.html

@@ -9,7 +9,7 @@
       
       
       
-        <link rel="prev" href="../../learn/python/2026-02-16/">
+        <link rel="prev" href="../../learn/2026-02-21/">
       
       
         <link rel="next" href="../2026-01-23/">
@@ -795,6 +795,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../learn/2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/projects/2026-01-23/index.html

@@ -795,6 +795,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../learn/2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       

site/projects/2026-02-13/index.html

@@ -795,6 +795,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../../learn/2026-02-21/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Cheat Sheet de Tailwind
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>