add a nice full screen above the fold intro, fixes #2

avalanchesass · Mar 4, 2016 · ae15b37 · ae15b37
1 parent 09e6b37
commit ae15b37
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/assets/style.css b/assets/style.css
diff --git a/scss/base/_default.scss b/scss/base/_default.scss
@@ -1,8 +1,3 @@
-body {
-  padding: 1.5em;
-  max-width: 90em;
-}
-
 figure {
   position: relative;
   margin-right: 0;

diff --git a/scss/component/_layout.scss b/scss/component/_layout.scss
@@ -1,3 +1,9 @@
+.c-layout {
+  margin: 0 auto;
+  padding: 1.5em;
+  max-width: 90em;
+}
+
 @media (min-width: map-get($breakpoints, l)) {
   .c-layout {
     display: flex;

diff --git a/scss/component/_main_header.scss b/scss/component/_main_header.scss
@@ -0,0 +1,21 @@
+.c-main-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2em;
+  max-height: 85em;
+  height: 100vh;
+  background: map-get($cs, a);
+}
+
+.c-main-header__container {
+  padding: 2em;
+  max-width: 42em;
+  text-align: center;
+}
+
+.c-main-header__description {
+  margin-top: 0;
+  color: map-get($cs-contrast, a);
+  font-size: map-get($font-sizes, xl);
+}
diff --git a/template.ejs b/template.ejs
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title><%- opts.title %></title>
+    <meta name="description" content="<%- opts.description %>"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <% opts.css.forEach(function (href) {
@@ -15,13 +16,18 @@
     }); %>
   </head>
   <body>
+    <header class="c-main-header">
+      <div class="c-main-header__container">
+        <img src="<%= opts.logo %>" alt="<%= opts.title %>" class="c-main-header__logo">
+        <p class="c-main-header__description"><%- opts.description %></p>
+      </div>
+    </header>
     <div class="c-layout">
-      <header class="c-main-header c-layout__sidebar">
-        <img src="<%= opts.logo %>" alt="<%= opts.title %>">
+      <div class="c-layout__sidebar">
         <nav class="c-main-nav c-main-header__nav">
           <% menu(list, 1) %>
         </nav>
-      </header>
+      </div>
       <main class="c-main-content c-layout__main">
         <% sections(list, 2) %>
       </main>