From 376ff42754ca22763cfc3da49cb95ad319ead19b Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Fri, 9 Dec 2022 12:30:03 +0400
Subject: [PATCH] Update index with new naming for gap, bord & deco

---
 src/index.html | 64 +++++++++++++++++++++++++-------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/index.html b/src/index.html
index f052e04..c7bb262 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@ <h2>Colors</h2>
 
         <section>
             <h3>Hues</h3>
-            <ul class="flex-col gap-1tn items-center width-md-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all">
                 <li class="red">Red : class="red"</li>
                 <li class="orange">Orange : class="orange"</li>
                 <li class="yellow">Yellow : class="yellow"</li>
@@ -44,7 +44,7 @@ <h3>Hues</h3>
 
         <section>
             <h3>Grayscale</h3>
-            <ul class="flex-col gap-1tn items-center width-md-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all">
                 <li class="bg-white black">Black : class="black"</li>
                 <li class="gray">Gray : class="gray"</li>
                 <li class="silver">Silver : class="silver"</li>
@@ -58,7 +58,7 @@ <h2>Background Colors</h2>
 
         <section>
             <h3>Hues</h3>
-            <ul class="flex-col gap-1tn items-center width-md-all white-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all white-all">
                 <li class="bg-red">Red : class="bg-red"</li>
                 <li class="bg-orange">Orange : class="bg-orange"</li>
                 <li class="bg-yellow">Yellow : class="bg-yellow"</li>
@@ -72,7 +72,7 @@ <h3>Hues</h3>
 
         <section>
             <h3>Grayscale</h3>
-            <ul class="flex-col gap-1tn items-center width-md-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all">
                 <li class="white bg-black">Black : class="bg-black"</li>
                 <li class="white bg-gray">Gray : class="bg-gray"</li>
                 <li class="white bg-silver">Silver : class="bg-silver"</li>
@@ -109,7 +109,7 @@ <h2>Text</h2>
 
         <section>
             <h3>Text Align</h3>
-            <ul class="flex-col gap-1tn items-center width-md-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all">
                 <li class="center">Center : class="center"</li>
                 <li class="justify">Justify : class="justify"</li>
                 <li class="left">Left : class="left"</li>
@@ -138,25 +138,25 @@ <h3>Text Decoration Line</h3>
         <section>
             <h3>Text Decoration Style</h3>
             <ul>
-                <li class="deco-dash">Dashed : class="deco-dash"</li>
-                <li class="deco-dot">Dotted : class="deco-dot"</li>
-                <li class="deco-double">Double : class="deco-double"</li>
+                <li class="deco deco-dash">Dashed : class="deco deco-dash"</li>
+                <li class="deco deco-dot">Dotted : class="deco deco-dot"</li>
+                <li class="deco deco-double">Double : class="deco deco-double"</li>
                 <li class="deco">Solid : class="deco"</li>
-                <li class="deco-wavy">Wavy : class="deco-wavy"</li>
+                <li class="deco deco-wavy">Wavy : class="deco deco-wavy"</li>
             </ul>
         </section>
 
         <section>
             <h3>Text Decoration Color</h3>
             <ul>
-                <li class="deco-red">Red : class="deco-red"</li>
-                <li class="deco-orange">Orange : class="deco-orange"</li>
-                <li class="deco-yellow">Yellow : class="deco-yellow"</li>
-                <li class="deco-green">Green : class="deco-green"</li>
-                <li class="deco-sky">Sky : class="deco-sky"</li>
-                <li class="deco-blue">Blue : class="deco-blue"</li>
-                <li class="deco-violet">Violet : class="deco-violet"</li>
-                <li class="deco-pink">Pink : class="deco-pink"</li>
+                <li class="deco deco-red">Red : class="deco deco-red"</li>
+                <li class="deco deco-orange">Orange : class="deco deco-orange"</li>
+                <li class="deco deco-yellow">Yellow : class="deco deco-yellow"</li>
+                <li class="deco deco-green">Green : class="deco deco-green"</li>
+                <li class="deco deco-sky">Sky : class="deco deco-sky"</li>
+                <li class="deco deco-blue">Blue : class="deco deco-blue"</li>
+                <li class="deco deco-violet">Violet : class="deco deco-violet"</li>
+                <li class="deco deco-pink">Pink : class="deco deco-pink"</li>
             </ul>
         </section>
     </section>
@@ -167,7 +167,7 @@ <h2>Boxes</h2>
         <section>
             <h3>Border Style</h3>
 
-            <ul class="flex-col gap-1tn items-center width-md-all violet-all bg-white-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
                 <li class="bord-dash">Dashed : class="bord-dash"</li>
                 <li class="bord-dot">Dotted : class="bord-dot"</li>
                 <li class="bord">Solid : class="bord"</li>
@@ -182,32 +182,32 @@ <h3>Border Style</h3>
         <section>
             <h3>Border Width</h3>
 
-            <ul class="flex-col gap-1tn items-center width-md-all violet-all bg-white-all">
-                <li class="bord-sm">Small : class="bord-sm"</li>
-                <li class="bord-md">Medium : class="bord-md"</li>
-                <li class="bord-lg">Large : class="bord-lg"</li>
+            <ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
+                <li class="bord bord-sm">Small : class="bord bord-sm"</li>
+                <li class="bord bord-md">Medium : class="bord bord-md"</li>
+                <li class="bord bord-lg">Large : class="bord bord-lg"</li>
             </ul>
         </section>
 
         <section>
             <h3>Border Color</h3>
 
-            <ul class="flex-col gap-1tn items-center width-md-all violet-all bg-white-all">
-                <li class="bord-red">Red : class="bord-red"</li>
-                <li class="bord-orange">Orange : class="bord-orange"</li>
-                <li class="bord-yellow">Yellow : class="bord-yellow"</li>
-                <li class="bord-green">Green : class="bord-green"</li>
-                <li class="bord-sky">Sky : class="bord-sky"</li>
-                <li class="bord-blue">Blue : class="bord-blue"</li>
-                <li class="bord-violet">Violet : class="bord-violet"</li>
-                <li class="bord-pink">Pink : class="bord-pink"</li>
+            <ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
+                <li class="bord bord-red">Red : class="bord bord-red"</li>
+                <li class="bord bord-orange">Orange : class="bord bord-orange"</li>
+                <li class="bord bord-yellow">Yellow : class="bord bord-yellow"</li>
+                <li class="bord bord-green">Green : class="bord bord-green"</li>
+                <li class="bord bord-sky">Sky : class="bord bord-sky"</li>
+                <li class="bord bord-blue">Blue : class="bord bord-blue"</li>
+                <li class="bord bord-violet">Violet : class="bord bord-violet"</li>
+                <li class="bord bord-pink">Pink : class="bord bord-pink"</li>
             </ul>
         </section>
 
         <section>
             <h3>Border Radius</h3>
 
-            <ul class="flex-col gap-1tn items-center width-md-all violet-all bg-white-all">
+            <ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
                 <li class="bord-curve">Curve : class="bord-curve"</li>
                 <li class="bord-round">Round : class="bord-round"</li>
                 <li class="bord-circle">Circle : class="bord-circle"</li>