Add Hero layout #380

8 files changed, 134 insertions, 6 deletions

diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug
index a935fc1..3393cfc 100644
--- a/docs/src/_layout/_docs-layout.pug
+++ b/docs/src/_layout/_docs-layout.pug
@@ -47,6 +47,7 @@ block content
             'Layout',
             {url: 'grid', name: 'Flexbox grid'},
             {url: 'responsive', name: 'Responsive'},
+            {url: 'hero', name: 'Hero'},
             {url: 'navbar', name: 'Navbar'}
           )
           +docs-accordion(
diff --git a/docs/src/_layout/_example-layout.pug b/docs/src/_layout/_example-layout.pug
new file mode 100644
index 0000000..f74bc81
--- /dev/null
+++ b/docs/src/_layout/_example-layout.pug
@@ -0,0 +1,35 @@
+block variables
+  - var slug = ''
+  - var parent = ''
+  - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='robots' content='index, follow')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
+    meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='description' content= description)
+    link(rel='shortcut icon' href='../img/favicons/favicon.ico')
+    link(rel='icon' href='../img/favicons/favicon.png')
+    link(rel='stylesheet' href='../dist/spectre.min.css')
+    link(rel='stylesheet' href='../dist/spectre-icons.min.css')
+    link(rel='stylesheet' href='../dist/spectre-exp.min.css')
+    link(rel='stylesheet' href='../dist/docs.min.css') 
+
+  body
+    block content
+
+    script.
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+
+  
\ No newline at end of file
diff --git a/docs/src/components.pug b/docs/src/components.pug
index fa7d1cd..ffc8f7b 100644
--- a/docs/src/components.pug
+++ b/docs/src/components.pug
@@ -3,7 +3,7 @@ extends _layout/_docs-layout.pug
 block variables
   - var slug = 'components'
   - var parent = 'components'
-  - var title = 'components - Spectre.css CSS Framework'
+  - var title = 'Components - Spectre.css CSS Framework'
   - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug
index 05cd719..3cd4c2c 100644
--- a/docs/src/elements/media.pug
+++ b/docs/src/elements/media.pug
@@ -17,10 +17,15 @@ block docs-content
     p
       | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
 
-    .columns
+    .docs-demo.columns
       .column.col-12
         img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+
     p
       | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
       | This feature can replace the classic background image trick. Microsoft Edge support 
@@ -40,7 +45,6 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
 
@@ -59,6 +63,14 @@ block docs-content
           img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
           figcaption.figure-caption.text-center macOS Yosemite wallpaper
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="figure">
+            <img class="img-responsive ..." src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+            <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+          </figure>
+
     +docs-subheading('media-video', 'Video')
 
     p
diff --git a/docs/src/examples/starter.pug b/docs/src/examples/starter.pug
new file mode 100644
index 0000000..e062def
--- /dev/null
+++ b/docs/src/examples/starter.pug
@@ -0,0 +1,26 @@
+extends ../_layout/_example-layout.pug
+
+block variables
+  - var slug = 'starter'
+  - var parent = 'examples'
+  - var title = 'Starter Page Example -  Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block content
+  .section.bg-gray
+    H1 Starter Page Example
+  .section.section-ads.bg-gray
+    include ../_layout/_ad-c.pug
+
+  footer.section.section-footer
+    #copyright.docs-footer.container.grid-lg
+      p
+        a(href='getting-started.html' target='_blank') Documents
+        |  · 
+        a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+        |  · 
+        a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+        |  · 
+        a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+        |  · Version 
+        span.version
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index 582a98b..b07efd0 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -34,6 +34,15 @@ block docs-content
             | Responsive layout grid system and responsive visibility utilities
           .card-footer
             a.btn.btn-primary(href="layout/responsive.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Hero
+          .card-body
+            | Container for key featured content or information
+          .card-footer
+            a.btn.btn-primary(href="layout/hero.html") View
         
       .column.col-6.col-xs-12
         .card
diff --git a/docs/src/layout/hero.pug b/docs/src/layout/hero.pug
new file mode 100644
index 0000000..b095b7e
--- /dev/null
+++ b/docs/src/layout/hero.pug
@@ -0,0 +1,45 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'hero'
+  - var parent = 'layout'
+  - var title = 'Hero - Layout - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('hero', 'Hero')
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Hero container shows key featured content or information.
+
+    .docs-demo.columns
+      .column
+        .hero.bg-gray
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- hero example -->
+
+    .docs-demo.columns
+      .column
+        .hero.hero-sm.bg-gray
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+            
+    .docs-demo.columns
+      .column
+        .hero.hero-lg.bg-gray
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index d5a33e5..ae496ed 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -120,7 +120,7 @@
       z-index: $zindex-1 - 1;
 
       &::before {
-        background: $light-color;      
+        background: $light-color;
         bottom: 0;
         content: "";
         display: block;
@@ -319,7 +319,7 @@
 
 .docs-footer {
   color: $gray-color;
-  padding: .5rem .5rem 1.5rem .5rem;
+  padding: .5rem .5rem 1.5rem;
 
   a {
     color: $gray-color-dark;
@@ -398,7 +398,7 @@
 
 .section-footer {
   color: $gray-color;
-  padding: 1.8rem .75rem 1rem .75rem;
+  padding: 1.8rem .75rem 1rem;
   position: relative;
   z-index: 200;