style: Putting ColorTable beneath a menu ( Fixes #108 )

2bitdesigns · Oct 27, 2024 · f5e95b7 · f5e95b7
1 parent 00bc3ed
commit f5e95b7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 57 deletions.
diff --git a/docs/_includes/HowTo.md b/docs/_includes/HowTo.md
@@ -1,57 +1,11 @@
-<h3 style='text-align:center'>HTML</h3>
+<menu class='centeredText' hx-target='#HowToContent'>
+    <button hx-get='/About/Using-4bitCSS-In-HTML'>HTML</button>
+    <button hx-get='/About/Using-4bitCSS-In-SVG'>SVG</button>
+    <button hx-get='/About/Using-4bitCSS-In-CSS'>CSS</button>
+    <button hx-get='/About/Using-4bitCSS-In-JavaScript'>JS</button>
+    <button hx-get='/About/4bitCSS-Color-Table' hx-trigger="load,click">Table</button>
+</menu>
 
-~~~html
-    <div style='text-align:center'>
-        <span class='ANSI9 ANSI0-background'>
-            BrightRed on Black
-        </span>
-        <br/>
-        <span class='black white-background'>
-            Black on White
-        </span>
-    </div>
-~~~
+<div id='HowToContent'>
 
-<h3 style='text-align:center'>SVG</h3>
-
-~~~svg
-    <svg
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 100 100"
-        height="20%" width="20%">
-        <rect
-            width="50%" height="50%"
-            x="25%" y="25%"
-            class="purple-stroke blue-fill" />
-        <circle 
-            r="25%" cx="50%" cy="50%" 
-            class="red-stroke green-fill" />
-        <line 
-            x1="0%" x2="100%" y1="50%" y2="50%"
-            class="purple-stroke" />
-    </svg>
-~~~
-
-<div style='text-align:center'>
-    <span class='ANSI9 ANSI0-background'>BrightRed on Black</span>
-    <br/>
-    <span class='black white-background'>Black on White</span>
-    <br/>
-    <svg
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 100 100"
-        height="20%" width="20%">
-        <rect
-            width="50%" height="50%"
-            x="25%" y="25%"
-            class="purple-stroke blue-fill" />
-        <circle 
-            r="25%" cx="50%" cy="50%" 
-            class="red-stroke green-fill" />
-        <line 
-            x1="0%" x2="100%" y1="50%" y2="50%"
-            class="purple-stroke" />
-    </svg>
-</div>
+</div>
diff --git a/docs/index.ps.markdown b/docs/index.ps.markdown
@@ -31,6 +31,4 @@ description: 4bit css
     </a>    
 </div>
 
-{% include ColorTable.md %}
-
 {% include HowTo.md %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,4 @@ description: 4bit css @@
         </a>
     </div>
-    {% include ColorTable.md %}
     {% include HowTo.md %}