From 0a08a16f0b141d7c1bf65ada1ff2771ef9821378 Mon Sep 17 00:00:00 2001
From: Herwin Bozet <herwin.bozet@gmail.com>
Date: Sat, 23 Nov 2024 12:52:32 +0100
Subject: [PATCH] Revamped sidebar Update sidebar.php and wedge.scss

---
 htdocs/parts/sidebar.php | 87 +++++++++++++++++-----------------------
 scss/site/wedge.scss     |  2 +-
 2 files changed, 37 insertions(+), 52 deletions(-)

diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php
index 67b3b8e..574b57c 100644
--- a/htdocs/parts/sidebar.php
+++ b/htdocs/parts/sidebar.php
@@ -17,114 +17,99 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     </div>
 
     <details class="by t-noselect" open>
-        <summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Core</summary>
-        <div class="p-xs bt bkgd-grey">
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Core</summary>
+        <div class="p-xs px-m bt bkgd-grey t-size-11">
             <a class="a-hidden" href="#text-weights">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-text-height pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Weights</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights
                 </p>
             </a>
             <a class="a-hidden" href="#text-styles">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-italic pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Styles</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles
                 </p>
             </a>
             <a class="a-hidden" href="#text-alignment">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-text-width pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Alignment</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment
                 </p>
             </a>
             <a class="a-hidden" href="#text-modifiers">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-subscript pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Modifiers</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers
                 </p>
             </a>
             <a class="a-hidden" href="#text-links">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-link pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Links</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-link pr-xs t-half-muted"></i>Links
                 </p>
             </a>
             <a class="a-hidden" href="#text-misc">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Miscellaneous</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
                 </p>
             </a>
 
             <hr class="subtle">
 
             <a class="a-hidden" href="#spacing">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Spacing</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing
                 </p>
             </a>
             <a class="a-hidden" href="#rounding">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-bezier-curve pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Rounding</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
                 </p>
             </a>
 
             <hr class="subtle">
 
             <a class="a-hidden" href="#lists-basic">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-list pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Lists</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists
                 </p>
             </a>
             <a class="a-hidden" href="#grids">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-table-cells-large pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Grids</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
                 </p>
             </a>
             <a class="a-hidden" href="#tables">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-table pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Tables</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
                 </p>
             </a>
         </div>
     </details>
 
     <details class="by t-noselect" open>
-        <summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Site</summary>
-        <div class="p-xs bt bkgd-grey">
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Site</summary>
+        <div class="p-xs px-m bt bkgd-grey t-size-11">
             <a class="a-hidden" href="#horizontal-rulers">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ruler pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Horizontal Rulers</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
                 </p>
             </a>
             <a class="a-hidden" href="#backgrounds">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-paint-roller pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Backgrounds</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
                 </p>
             </a>
             <a class="a-hidden" href="#buttons">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-stop pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Buttons</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
                 </p>
             </a>
         </div>
     </details>
 
     <details class="by t-noselect" open>
-        <summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Examples</summary>
-        <div class="p-xs bt bkgd-grey">
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
+        <div class="p-xs px-m bt bkgd-grey t-size-11">
             <a class="a-hidden" href="#lists-composed">
-                <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
-                    <span class="t-size-12">Composed</span>
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Composed
                 </p>
             </a>
         </div>
diff --git a/scss/site/wedge.scss b/scss/site/wedge.scss
index 290c5d0..a465b88 100644
--- a/scss/site/wedge.scss
+++ b/scss/site/wedge.scss
@@ -2,7 +2,7 @@
 
 /* Custom Elements > Wedge */
 
-.wedge {
+wedge, .wedge {
 	position: absolute;
 	//top: 0;
 	//right: 0;