Bring the padding back

Start new components list

Author: MrEssex

docs/_includes/sidebar.njk

@@ -1,4 +1,20 @@
 <ul>
+  <li>
+    <h2>New Components (v2)</h2>
+    <ul>
+      <li>
+        <a href="/new-components">Why new Components?</a>
+      </li>
+      <li>
+        <h3>Layout</h3>
+        <ul>
+          <li>
+            <a href="/components/container">Container</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </li>
   <li>
     <h2>Tutorials</h2>
     <ul>

docs/assets/styles/code-previews.css

@@ -15,8 +15,8 @@
   background-color: rgb(var(--zn-panel));
   min-width: 20rem;
   max-width: 100%;
-  /*padding: 1.5rem 3.25rem 1.5rem 1.5rem;*/
-  padding-right: 1.75rem;
+  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
+  /*padding-right: 1.75rem;*/
 }
 
 /* Block the preview while dragging to prevent iframes from intercepting drag events */

docs/assets/styles/docs.css

@@ -4,7 +4,7 @@
   --docs-border-color: rgb(var(--zn-border-color));
   --docs-border-width: 1px;
   --docs-border-radius: 10px;
-  --docs-content-max-width: 1400px;
+  --docs-content-max-width: 840px;
   --docs-sidebar-width: 320px;
   --docs-sidebar-transition-speed: 250ms;
   --docs-content-toc-max-width: 260px;
@@ -732,22 +732,32 @@ pre:hover .copy-code-button,
   font-size: var(--zn-font-size-medium);
   font-weight: var(--zn-font-weight-semibold);
   border-bottom: solid var(--docs-border-width) var(--docs-border-color);
-  margin: 1.5rem 0 0.5rem 0;
+  margin: 1.5rem 0 0.5rem 0 !important;
+}
+
+#sidebar nav h3 {
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-semibold);
+  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
 }
 
 #sidebar ul {
   padding: 0;
   margin: 1rem 0;
 }
 
+#sidebar ul ul {
+  margin-left: 1rem;
+}
+
 #sidebar ul li {
   list-style: none;
   padding: 0;
   margin: .5rem 0;
 }
 
 #sidebar ul ul ul {
-  margin-left: 0.75rem;
+  margin-left: 1.25rem;
 }
 
 #sidebar ul li a {

docs/pages/new-components/index.md

@@ -0,0 +1,11 @@
+---
+meta:
+  title: New Components
+  description: List of new Component based off of TailwindPlus
+---
+
+## Why New Components?
+
+The new components are based off of TailwindPlus, which is a set of TailwindCSS components that are built to be used
+with Web Components. We've decided to switch to this new set of components because it is more flexible and easier to
+use than the previous set of components.