Fixed hidden linkes, Changed color palette, may change later

Update index.php, backgrounds.php, and 12 more files...

htdocs/parts/backgrounds.php

@@ -14,23 +14,35 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 <section class="p-s">
 
     <h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
-    <div class="grid grid-col-3 grid-gap-l px-s">
+    <div class="grid grid-col-2 grid-gap-l px-s">
         <div>
-            <div class="p-l border r-xl bkgd-dark my-xs"></div>
-            <span class="code mb-s">.bkgd-dark</span>
-        </div>
-        <div>
-            <div class="p-l border r-xl bkgd-grey my-xs"></div>
-            <span class="code mb-s">.bkgd-grey</span>
-            <span class="code mb-s">.bkgd-gray</span>
+            <div class="p-l border r-xl bkgd-lightest my-xs"></div>
+            <span class="code mb-s">.bkgd-lightest</span>
         </div>
         <div>
             <div class="p-l border r-xl bkgd-light my-xs"></div>
             <span class="code mb-s">.bkgd-light</span>
         </div>
     </div>
+    <div class="grid grid-col-2 grid-gap-l px-s">
+        <div>
+            <div class="p-l border r-xl bkgd-grey my-xs"></div>
+            <span class="code mb-s">.bkgd-grey</span>
+            <span class="code mb-s">.bkgd-gray</span>
+        </div>
+    </div>
+    <div class="grid grid-col-2 grid-gap-l px-s">
+        <div>
+            <div class="p-l border r-xl bkgd-dark my-xs"></div>
+            <span class="code mb-s">.bkgd-dark</span>
+        </div>
+        <div>
+            <div class="p-l border r-xl bkgd-darkest my-xs"></div>
+            <span class="code mb-s">.bkgd-darkest</span>
+        </div>
+    </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xl">Grid backgrounds</h3>
     <div class="grid grid-col-2 grid-gap-l px-s">
         <div>
             <p class="t-w-500">40% opacity (Title bars)</p>
@@ -56,7 +68,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </div>
     </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xl">Special backgrounds</h3>
     <div class="grid grid-col-3 grid-gap-l px-s">
         <div>
             <p class="t-w-500">Transparent</p>
@@ -65,7 +77,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </div>
     </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xl">Colored backgrounds</h3>
     <div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s">
         <div>
             <p class="t-w-500">Blue</p>

htdocs/parts/core/inputs.php

@@ -21,7 +21,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <div class="px-s mb-m">
         <label for="demo-core-text">Text Input: </label>
         <input id="demo-core-text" type="text" value="Lorem ipsum">
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             label+input[type=text]
         </code>
     </div>
@@ -29,7 +29,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <div class="px-s mb-m">
         <label for="demo-core-password">Password Input: </label>
         <input id="demo-core-password" type="password" value="12345678">
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             label+input[type=password]
         </code>
     </div>
@@ -37,7 +37,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <div class="px-s mb-m">
         <label for="demo-core-number">Number Input: </label>
         <input id="demo-core-number" type="number" value="42">
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             label+input[type=number]
         </code>
     </div>
@@ -49,7 +49,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <label for="demo-core-radio-2">Radio 2</label><br>
         <input type="radio" id="demo-core-radio-3" name="demo-core-radio" disabled>
         <label for="demo-core-radio-3">Radio 3</label>
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             (input[type=radio][name=myRadioInput]+label+br)*3
         </code>
     </div>
@@ -61,7 +61,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <label for="demo-core-combo-2">Checkbox 2</label><br>
         <input type="checkbox" id="demo-core-combo-3" disabled>
         <label for="demo-core-combo-3">Checkbox 3</label>
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             (input[type=checkbox]+label+br)*3
         </code>
     </div>
@@ -69,7 +69,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <div class="px-s mb-m">
         <label for="demo-core-textarea"></label>
         <textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             label+textarea
         </code>
     </div>

htdocs/parts/examples/inputs.php

@@ -19,7 +19,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <div class="px-s mb-m">
         <label for="demo-core-text">Text Input: </label>
         <input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             label+input[type=text]<b>.p-xxs.border.r-m</b>
         </code>
     </div>
@@ -27,10 +27,9 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <div class="px-s mb-m">
         <label for="demo-core-textarea"></label>
         <textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
         </code>
-
     </div>
 
 
@@ -44,7 +43,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border" disabled>
         <label for="demo-site-combo-3">Checkbox 3</label>
 
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             (input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
         </code>
     </div>
@@ -68,7 +67,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <input type="radio" id="demo-site-radio-5-solid" name="demo-site-radio-solid" class="radio-solid border" disabled>
         <label for="demo-site-radio-5-solid">Radio 5</label>
 
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             (input[type=radio][name=myRadioInput]<b>.radio-solid.border</b>+label+br)*3
         </code>
     </div>
@@ -89,7 +88,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <input type="radio" id="demo-site-radio-5-3d" name="demo-site-radio-3d" class="radio-3d border" disabled>
         <label for="demo-site-radio-5-3d">Radio 5</label>
 
-        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+        <code class="d-block p-xxs border r-s mt-xs">
             (input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
         </code>
     </div>

htdocs/parts/sidebar.php

@@ -127,11 +127,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
                 </p>
             </a>
-            <a class="a-hidden" href="#examples-cards">
+            <!--<a class="a-hidden" href="#examples-cards">
                 <p class="t-w-500 py-xs sidebar-entry">
                     <i class="fad fa-address-card pr-xs t-half-muted"></i>Cards
                 </p>
-            </a>
+            </a>-->
         </div>
     </details>