Improved sidebar, Added misc rules and options
Update index.php, sidebar.php, and 6 more files...
This commit is contained in:
@@ -5,122 +5,128 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
}
|
||||
?>
|
||||
|
||||
<nav id="sidebar" class="sidebar p-m pt-l">
|
||||
<a href="/" class="no-select">
|
||||
<img class="logo-sidebar-v2"
|
||||
src="/img/logo-large-fluent-unshaded.svg"
|
||||
alt="Website's logo"
|
||||
draggable="false">
|
||||
</a>
|
||||
<hr class="subtle">
|
||||
<nav id="sidebar" class="sidebar">
|
||||
|
||||
<p class="t-bold t-size-14 py-xxs t-half-muted _t-underline t-center">Text</p>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
<div class="p-m pt-l">
|
||||
<a href="/" class="no-select">
|
||||
<img class="logo-sidebar-v2"
|
||||
src="/img/logo-large-fluent-unshaded.svg"
|
||||
alt="Website's logo"
|
||||
draggable="false">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr class="subtle">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<hr class="subtle">
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
|
||||
<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">Basic</span>
|
||||
</p>
|
||||
</a>
|
||||
<hr class="subtle">
|
||||
|
||||
<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>
|
||||
</a>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="subtle">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user