style: Moving Palette Selector Up (and into _include)

2bitdesigns · Apr 22, 2024 · 41a425a · 41a425a
1 parent 641ba77
commit 41a425a
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git a/docs/_includes/HowTo.md b/docs/_includes/HowTo.md
@@ -1,28 +1,35 @@
 ---
 
 ~~~html
-<span class='Black White-Background'>
-    Black / White
-</span>
+<div style='text-align:center'>
+    <span class='black white-background'>Black/White</span>
+</div>
 ~~~
 
+---
+
 <div style='text-align:center'>
-    <span class='Black White-Background'>Black/White</span>
+    <span class='black white-background'>Black/White</span>
 </div>
 
 ---
 
 ~~~svg
-<svg viewBox="0 0 1 1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="50%">
-    <rect width="100%" height="100%" class="purple-stroke blue-fill" />
-    <circle r="1" class="red-stroke green-fill"/>
+<svg viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="15%" width="15%" >
+    <line x1="0%" x2="100%" y1="25%" y2="25%" class="purple-stroke" />
+    <rect width="25%" height="25%" x="75%" y="50%" class="blue-fill" />
+    <circle r="25%" cx="50%" cy="50%" class="red-stroke green-fill" />
 </svg>
 ~~~
 
-<svg viewBox="0 0 1 1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
-    <rect width="100%" height="100%" class="purple-stroke blue-fill" />
-    <circle r="1" class="red-stroke green-fill"/>
-</svg>
+---
+<div style='text-align:center'>
+    <svg viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="15%" width="15%" >
+        <line x1="0%" x2="100%" y1="25%" y2="25%" class="purple-stroke" />
+        <rect width="25%" height="25%" x="75%" y="50%" class="blue-fill" />
+        <circle r="25%" cx="50%" cy="50%" class="red-stroke green-fill" />
+    </svg>
+</div>
 
 ---
 

diff --git a/docs/_includes/PaletteSelector.html b/docs/_includes/PaletteSelector.html
@@ -0,0 +1,23 @@
+<div class="flexRow centered centeredText wholeWidth">        
+    <select id="schemeSelector" onchange="SetColorScheme(document.getElementById('schemeSelector').value); ">
+    </select>
+  </div>
+  <script type="text/javascript">
+    var schemeSelector = document.getElementById("schemeSelector");
+    var colorSchemes = GetColorSchemeList();
+    for (colorScheme in colorSchemes) {
+      var opt = document.createElement("option")
+      opt.value = colorSchemes[colorScheme];
+      opt.innerHTML = colorSchemes[colorScheme];
+      schemeSelector.append(opt);            
+    }                
+  </script>
+  {% if page.colorSchemeName %}
+  <script type="text/javascript" />
+  SetColorScheme("{{page.colorSchemeFileName}}");
+  </script>
+  {% else %}
+  <script type="text/javascript" />
+  SetColorScheme("Konsolas");
+  </script>
+  {% endif %}  
diff --git a/docs/_layouts/default.ps.html b/docs/_layouts/default.ps.html
@@ -166,32 +166,6 @@ <h1 class="centered halfOrWholeWidth flexible centered centeredFlex">{{ page.tit
       <div class="flexRow">
         {{ content }}
       </div>
-    </div>
-    <div class="flexible centered centeredFlex wholeWidth" style="position:fixed;bottom:5%;width:100%">
-      <div class="flexRow centered centeredText wholeWidth">
-        All Color Schemes :
-        <select id="schemeSelector" onchange="SetColorScheme(document.getElementById('schemeSelector').value); ">
-        </select>
-      </div>
-      <script type="text/javascript">
-        var schemeSelector = document.getElementById("schemeSelector");
-        var colorSchemes = GetColorSchemeList();
-        for (colorScheme in colorSchemes) {
-          var opt = document.createElement("option")
-          opt.value = colorSchemes[colorScheme];
-          opt.innerHTML = colorSchemes[colorScheme];
-          schemeSelector.append(opt);            
-        }                
-      </script>
-      {% if page.colorSchemeName %}
-      <script type="text/javascript" />
-      SetColorScheme("{{page.colorSchemeFileName}}");
-      </script>
-      {% else %}
-      <script type="text/javascript" />
-      SetColorScheme("Konsolas");
-      </script>
-      {% endif %}  
-    </div>
+    </div>    
 </body>
 </html>
diff --git a/docs/index.ps.markdown b/docs/index.ps.markdown
@@ -11,6 +11,10 @@ description: 4bit css
     </a>
 </h2>
 
+<div class='centeredText'>
+{% include PaletteSelector.html %}
+</div>
+
 <div class='centeredText'>
 {% include 4bitpreview.svg %}
 </div>