Updates doc

Author: andreamangano

assets/scss/7-pages/_index.scss

@@ -8,6 +8,14 @@
     }
   }
 
+  &__header {
+    padding: $space-medium 0 $space-base;
+
+    @include media-query('medium') {
+      padding: $space-large 0 $space-medium;
+    }
+  }
+
   &__faq {
     border-top: 1px dashed neutral-color('lower');
     padding: 0 $h-unit $space-small;

assets/scss/docs.scss

@@ -12,14 +12,14 @@ body {
 // DOCS LAYOUT
 //------------
 .docs-layout {
-  background-color: neutral-color('lowest');
+  background-color: lighten(neutral-color('lower'), 12%);
   color: neutral-color('highest');
   font-size: $rem-base;
   min-height: 100vh;
 
   &__content {
     @include grid-row(false);
-    max-width: 100%;
+    max-width: rem-calc(1400);
 
     @include media-query('large') {
       min-height: 100%;
@@ -28,7 +28,6 @@ body {
 
   &__nav {
     @include grid-column(('xxsmall': 12, 'large': 0), true);
-    background-color: neutral-color('lower');
     border-right: 1px solid neutral-color('lower');
 
     @include media-query('large') {
@@ -42,10 +41,11 @@ body {
 
   &__page-wrapper {
     @include grid-column(('xxsmall': 12, 'large': auto));
+    background-color: neutral-color('lowest');
     padding-bottom: $space-small;
 
     @include media-query('large') {
-      padding: $space-medium $space-medium $space-small;
+      padding: $space-medium $space-medium $space-large;
     }
   }
 
@@ -86,7 +86,7 @@ body {
   }
 
   &__section-title {
-    border-bottom: 1px solid rgba(neutral-color('medium'), 0.5);
+    border-bottom: 1px dotted rgba(neutral-color('medium'), 0.5);
     margin: 0;
     padding: $v-unit $h-unit;
   }
@@ -146,9 +146,13 @@ body {
   }
 
   &__preview {
-    background-color: #f0f0f0;
+    border: 1px solid neutral-color('lower');
     margin-top: $space-small;
-    padding: $space-small;
+    padding: ($space-base / 2);
+
+    @include media-query('medium') {
+      padding: $space-small;
+    }
   }
 }
 

settings/pug.js

@@ -12,13 +12,16 @@ data.navigation = [
   {
     label: 'Components',
     items: [
+      {label: 'Separator', url: '#separator'},
+      {label: 'Subscribe form', url: '#subscribe-form'},
       {label: 'Faq', url: '#faq'}
     ]
   },
   {
     label: 'Layouts',
     items: [
       {label: 'Header', url: '#header'},
+      {label: 'Subscribe', url: '#subscribe'},
       {label: 'Footer', url: '#footer'}
     ]
   }

views/docs/_faq.pug

@@ -2,9 +2,9 @@
     title: 'Faq'})
 
   +docs-block({
-    title: 'Faq item'})
+    title: 'Item'})
     +faq(faq.entries[0])
 
   +docs-block({
-    title: 'Faq List'})
+    title: 'List'})
     +faqs({title: faq.title, entries: faq.entries})

views/docs/_typography.pug

@@ -6,7 +6,6 @@
 
   +docs-block({
       title: 'Hierarchy of Type',
-      description: 'Description here...',
       open: true})
 
     -var placeholder= 'Lorem ipsum dolor sit amet,</br>consectetur adipiscing elit.'

views/docs/docs.pug

@@ -11,8 +11,8 @@ block head_css
 block page
   - var productName = 'fullStack<strong>Bulletin</strong>';
 
-  h1 Styleguide
-  h3!=`Below is the styleguide we created for ${productName} project — both for the benefit of the (web) developers and to ensure consistency across all brand pages and UI.`
+  h1 UI Components
+  h3!=`Below is the UI components styleguide we created for ${productName} project — both for the benefit of the (web) developers and to ensure consistency across all brand pages and UI.`
 
   //- Logo
   #logo
@@ -30,10 +30,26 @@ block page
   #icons
     include _icons.pug
 
+  //- Separator
+  #separator
+    include _separator.pug
+
+  //- Separator
+  #subscribe-form
+    include _subscribe-form.pug
+
   //- Faq
   #faq
     include _faq.pug
 
+  //- Footer
+  #header
+    include _header.pug
+
+  //- Subscribe
+  #subscribe
+    include _subscribe.pug
+
   //- Footer
   #footer
     include _footer.pug