Update the Docs completely

1 files changed, 106 insertions, 0 deletions

diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug
new file mode 100644
index 0000000..a935fc1
--- /dev/null
+++ b/docs/src/_layout/_docs-layout.pug
@@ -0,0 +1,106 @@
+extends _layout.pug
+include _mixins.pug
+
+block content
+  .docs-container.off-canvas.off-canvas-sidebar-show
+    .docs-navbar
+      a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
+        i.icon.icon-menu
+      .btns
+        a.btn.btn-primary.float-right(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+        a.btn.mr-1.float-right(href='https://www.paypal.me/picturepan2' target='_blank') Sponsor
+        
+    #sidebar.docs-sidebar.off-canvas-sidebar
+      .docs-brand
+        if slug != parent
+          a.docs-logo(href='../index.html')
+            img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+            h2 SPECTRE
+        else
+          a.docs-logo(href='index.html')
+            img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+            h2 SPECTRE
+      .docs-nav
+        .accordion-container
+          +docs-accordion(
+            'getting-started',
+            'Getting started',
+            {url: 'installation', name: 'Installation'},
+            {url: 'custom', name: 'Custom version'},
+            {url: 'browsers', name: 'Browser support'},
+            {url: 'whatsnew', name: 'What\'s new'}
+          )
+          +docs-accordion(
+            'elements',
+            'Elements',
+            {url: 'typography', name: 'Typography'},
+            {url: 'tables', name: 'Tables'},
+            {url: 'buttons', name: 'Buttons'},
+            {url: 'forms', name: 'Forms'},
+            {url: 'icons', name: 'Icons'},
+            {url: 'labels', name: 'Labels'},
+            {url: 'code', name: 'Code'},
+            {url: 'media', name: 'Media'}
+          )
+          +docs-accordion(
+            'layout',
+            'Layout',
+            {url: 'grid', name: 'Flexbox grid'},
+            {url: 'responsive', name: 'Responsive'},
+            {url: 'navbar', name: 'Navbar'}
+          )
+          +docs-accordion(
+            'components',
+            'Components',
+            {url: 'accordions', name: 'Accordions'},
+            {url: 'avatars', name: 'Avatars'},
+            {url: 'badges', name: 'Badges'},
+            {url: 'bars', name: 'Bars'},
+            {url: 'breadcrumbs', name: 'Breadcrumbs'},
+            {url: 'cards', name: 'Cards'},
+            {url: 'chips', name: 'Chips'},
+            {url: 'empty', name: 'Empty states'},
+            {url: 'menu', name: 'Menu'},
+            {url: 'modals', name: 'Modals'},
+            {url: 'nav', name: 'Nav'},
+            {url: 'pagination', name: 'Pagination'},
+            {url: 'panels', name: 'Panels'},
+            {url: 'popovers', name: 'Popovers'},
+            {url: 'steps', name: 'Steps'},
+            {url: 'tabs', name: 'Tabs'},
+            {url: 'tiles', name: 'Tiles'},
+            {url: 'toasts', name: 'Toasts'},
+            {url: 'tooltips', name: 'Tooltips'}
+          )
+          +docs-accordion(
+            'utilities',
+            'Utilities',
+            {url: 'colors', name: 'Colors'},
+            {url: 'cursors', name: 'Cursors'},
+            {url: 'display', name: 'Display'},
+            {url: 'divider', name: 'Divider'},
+            {url: 'loading', name: 'Loading'},
+            {url: 'position', name: 'Position'},
+            {url: 'shapes', name: 'Shapes'},
+            {url: 'text', name: 'Text'}
+          )
+          +docs-accordion(
+            'experimentals',
+            'Experimentals',
+            {url: 'autocomplete', name: 'Autocomplete'},
+            {url: 'calendars', name: 'Calendars'},
+            {url: 'carousels', name: 'Carousels'},
+            {url: 'comparison', name: 'Comparison sliders'},
+            {url: 'filters', name: 'Filters'},
+            {url: 'meters', name: 'Meters'},
+            {url: 'off-canvas', name: 'Off-canvas'},
+            {url: 'parallax', name: 'Parallax'},
+            {url: 'progress', name: 'Progress'},
+            {url: 'sliders', name: 'Sliders'},
+            {url: 'timelines', name: 'Timelines'}
+          )
+  
+    a.off-canvas-overlay(href='#close')
+    .off-canvas-content
+      #content.docs-content
+        block docs-content
\ No newline at end of file