Move Docs to Pug templates

1 files changed, 99 insertions, 0 deletions

diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
new file mode 100644
index 0000000..7ae771c
--- /dev/null
+++ b/docs/src/_docs-layout.pug
@@ -0,0 +1,99 @@
+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
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+    #sidebar.docs-sidebar.off-canvas-sidebar
+      .docs-brand
+        a.docs-logo(href='/')
+          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+          h2 SPECTRE
+      .docs-nav
+        .accordion-container
+          +docs-accordion(
+            'getting-started',
+            'Getting started',
+            {url: '#introduction', name: 'Introduction'},
+            {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: '#codes', name: 'Codes'},
+            {url: '#media', name: 'Media'}
+          )
+          +docs-accordion(
+            'layout',
+            'Layout',
+            {url: '#flexbox', 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: '#menus', name: 'Menus'},
+            {url: '#modals', name: 'Modals'},
+            {url: '#navs', name: 'Navs'},
+            {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