Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@HugoAverty
HugoAverty committed May 29, 2024
1 parent fa8a645 commit f2fedd8
Showing 1 changed file with 32 additions and 32 deletions.
64 changes: 32 additions & 32 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,98 +95,98 @@
<div class="fixed bottom-0 left-0 h-screen bg-contrast w-[200px]">
<nav>
<ul class="list-none m-0 p-0 pt-12">
<li>
<input id="checkFoundation" class="peer/checkFoundation opacity-0 hidden" type="checkbox" checked />
<label for="checkFoundation" class="bold no-underline text-white py-3 px-3 text-base transition-all flex items-center">
<div class="grow">Foundation</div>
<li class="mb-4">
<input id="checkFoundation" class="peer/checkFoundation opacity-0 hidden" type="checkbox" />
<label for="checkFoundation" class="bold no-underline text-white py-3 px-6 text-base transition-all flex items-center bg-secondary">
<div class="grow">Foundations</div>
</label>
<ul class="list-none m-0 p-0 peer-checked/checkFoundation:hidden">
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Logo">Logo</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Logo">Logo</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#QRCode">QRCode</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#QRCode">QRCode</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Typography">Typography</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Typography">Typography</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Title">Title</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Title">Title</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Paragraphs">Paragraphs</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Paragraphs">Paragraphs</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Color">Color</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Color">Color</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Spacing">Spacing</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Spacing">Spacing</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Grid">Grid</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Grid">Grid</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Container">Container</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Container">Container</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#ContainerQueries">Container Queries</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#ContainerQueries">Container Queries</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#BorderRadius">Border radius</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#BorderRadius">Border radius</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#BackdropFilter">Backdrop filter</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#BackdropFilter">Backdrop filter</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Shadow">Shadow</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Shadow">Shadow</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Iconography">Iconography</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Iconography">Iconography</a>
</li>
</ul>
</li>
<li>
<input id="checkComponents" class="peer/checkComponents opacity-0 hidden" type="checkbox" />
<label for="checkComponents" class="bold no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all">Compononents</label>
<label for="checkComponents" class="bold no-underline text-white py-3 px-6 text-base transition-all flex items-center bg-secondary">Compononents</label>
<ul class="list-none m-0 p-0 peer-checked/checkComponents:hidden">
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Button">Button</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Button">Button</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#InputSearch">Input Search</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#InputSearch">Input Search</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#InputNumber">Input Number</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#InputNumber">Input Number</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Select">Select</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Select">Select</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#InputTag">Input Text</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#InputTag">Input Text</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Upload">File Upload</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Upload">File Upload</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Switch">Switch</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Switch">Switch</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Checkbox">Checkbox</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Checkbox">Checkbox</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Radio">Radio</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Radio">Radio</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Slider">Range Slider</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Slider">Range Slider</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Notifications">Notifications</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Notifications">Notifications</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Chips">Chip & Tag</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Chips">Chip & Tag</a>
</li>
<li>
<a class="no-underline text-white py-1 px-6 block text-base hover:bg-white/10 hover:translate-x-1 transition-all" href="#Avatar">Avatar</a>
<a class="no-underline text-white py-1 px-6 block text-base border border-solid border-x-0 border-t-0 border-white/10 opacity-80 hover:opacity-100 hover:translate-x-1 transition-all" href="#Avatar">Avatar</a>
</li>
</ul>
</li>
Expand Down

0 comments on commit f2fedd8

Please sign in to comment.