Add hero element

Fix #29

README.md

@@ -30,6 +30,7 @@ Included features:
 * Media object
 * Boxes
 * Navbar
+* Hero
 * Sticky footer
 
 Sites built with Hocus-Pocus:

docs/hero.md

@@ -0,0 +1,14 @@
+Set `$hero-img` to path to your background. Change `$hero-size` to define
+what % of a viewport hero element takes, default is 40.
+
+<div class="example">
+  <div class="hero">
+    <h1>Example Title</h1>
+  </div>
+</div>
+
+```html
+<div class="hero">
+  <h1>Example Title</h1>
+</div>
+```

docs/template/scss/docs.scss

@@ -4,6 +4,7 @@ $rwd-type: desktop-first;
 $rwd-map: (mobile: 680px);
 $navbar-background: #000;
 $sticky-footer-height: 60px;
+$hero-img: 'https://images.unsplash.com/photo-1442120108414-42e7ea50d0b5';
 
 @import '../../../hocus-pocus';
 

docs/template/tag/navigation.tag

@@ -17,6 +17,7 @@
     <li><a href="#boxes">Boxes</a></li>
     <li><a href="#media">Media</a></li>
     <li><a href="#navbar">Navbar</a></li>
+    <li><a href="#hero">Hero</a></li>
     <li><a href="#sticky-footer">Sticky Footer</a></li>
   </ul>
 </navigation>

hocus-pocus.scss

@@ -26,4 +26,5 @@
         'scss/box',
         'scss/media',
         'scss/navbar',
+        'scss/hero',
         'scss/sticky-footer';

scss/_defaults.scss

@@ -86,6 +86,9 @@ $navbar-color: $color-white !default;
 $navbar-link-color: $color-white !default;
 $navbar-link-background: rgba($color-white, .15) !default;
 
+$hero-img: "/img/bg-hero.png" !default;
+$hero-size: 40 !default;
+
 $sticky-footer-height: 0 !default;
 
 $table-zebra-background: rgba($color-ui, .5) !default;

scss/_hero.scss

@@ -0,0 +1,12 @@
+.hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: #{$hero-size}vh;
+  background-image: url(#{$hero-img});
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+  background-attachment: fixed;
+  text-align: center;
+}