From 9f3e90386ec0bbcc763335acdc89ab7f68eaf62a Mon Sep 17 00:00:00 2001
From: Mark Moser <mark.moser@perficient.com>
Date: Tue, 2 May 2017 14:04:13 -0500
Subject: [PATCH] css: general placement

---
 app/assets/stylesheets/application.scss       |  6 ++++-
 app/assets/stylesheets/elements/_body.scss    | 15 ++++++++++++
 app/assets/stylesheets/elements/_header.scss  | 21 +++++++++++++++++
 .../stylesheets/elements/_progressbar.scss    |  7 ++++++
 .../stylesheets/generic/_typography.scss      | 15 ++++++++++++
 app/assets/stylesheets/settings/_reset.scss   |  3 +++
 .../stylesheets/settings/_variables.scss      | 23 +++++++++++++++----
 app/views/layouts/application.html.erb        |  9 ++++----
 8 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/stylesheets/elements/_body.scss
 create mode 100644 app/assets/stylesheets/elements/_header.scss
 create mode 100644 app/assets/stylesheets/elements/_progressbar.scss
 create mode 100644 app/assets/stylesheets/generic/_typography.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e699a18..9218486 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -18,6 +18,10 @@
 /*= require normalize-css/normalize */
 @import 'settings/reset';
 
+@import 'generic/typography';
+
+@import 'elements/body';
+@import 'elements/progressbar';
+@import 'elements/header';
 
-// @import 'elements/';
 // @import 'objects/';
diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss
new file mode 100644
index 0000000..be72e10
--- /dev/null
+++ b/app/assets/stylesheets/elements/_body.scss
@@ -0,0 +1,15 @@
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  > {
+    & header,
+    & main,
+    & footer {
+      order: 2;
+      margin: $gutter $gutter 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/elements/_header.scss b/app/assets/stylesheets/elements/_header.scss
new file mode 100644
index 0000000..ee8dc9c
--- /dev/null
+++ b/app/assets/stylesheets/elements/_header.scss
@@ -0,0 +1,21 @@
+header {
+  position: relative;
+  padding: 0.375em 0 0.375em 1.5em;
+  text-transform: uppercase;
+  line-height: 1;
+  font-size: 1.25em;
+  font-weight: bold;
+
+  &::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transform: skewX(-16.5deg);
+    background-color: $pd-red;
+    width: 3px;
+    content: "";
+    transform-origin: bottom;
+  }
+}
diff --git a/app/assets/stylesheets/elements/_progressbar.scss b/app/assets/stylesheets/elements/_progressbar.scss
new file mode 100644
index 0000000..b868849
--- /dev/null
+++ b/app/assets/stylesheets/elements/_progressbar.scss
@@ -0,0 +1,7 @@
+.progressbar {
+  order: 1;
+  margin: 0;
+  background-color: $turquoise;
+  padding: $gutter / 2 $gutter;
+  color: $white;
+}
diff --git a/app/assets/stylesheets/generic/_typography.scss b/app/assets/stylesheets/generic/_typography.scss
new file mode 100644
index 0000000..b2dbc89
--- /dev/null
+++ b/app/assets/stylesheets/generic/_typography.scss
@@ -0,0 +1,15 @@
+body {
+  font-family: $primary-font-face;
+  font-size: 1em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 $gutter;
+  font-family: $heading-font-face;
+  font-weight: 100;
+}
diff --git a/app/assets/stylesheets/settings/_reset.scss b/app/assets/stylesheets/settings/_reset.scss
index e7aa7bd..8be371a 100644
--- a/app/assets/stylesheets/settings/_reset.scss
+++ b/app/assets/stylesheets/settings/_reset.scss
@@ -1,6 +1,9 @@
 // normalize css is loaded, then these additions:
 
 html {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
   box-sizing: border-box;
 }
 
diff --git a/app/assets/stylesheets/settings/_variables.scss b/app/assets/stylesheets/settings/_variables.scss
index 022bdca..7dbfa09 100644
--- a/app/assets/stylesheets/settings/_variables.scss
+++ b/app/assets/stylesheets/settings/_variables.scss
@@ -2,14 +2,27 @@
 $tablet: 48em;  // tablet
 $desktop: 64em; // desktop
 
+$gutter: 32px;
+
+$progressbar-height: $gutter * 2;
+
 $heading-font-face: 'HalisR', sans-serif;
 $primary-font-face: 'Lato', sans-serif;
 
+//colors
+$pd-red:    #ef0734;
+$pd-yellow: #fff200;
+$pd-green:  #2ab68f;
+
 $black: #000;
-$primary-color: #202526;                        // Dark Gray
-$secondary-color: lighten($primary-color, 31%); // Gray
+$dark-grey: #202526;
+$grey: lighten($dark-grey, 31%);
 $white: #fff;
 
-$accent-color-1: #ef0734;                       // Perficient Digital Red
-$accent-color-2: #fff200;                       // Perficient Digital Yellow
-$accent-color-3: #2ab68f;                       // Perficient Digital Green
+$turquoise: #39bd9a;
+
+$primary-color: $dark-grey;
+$secondary-color: $grey;
+$accent-color-1: $pd-red;
+$accent-color-2: $pd-yellow;
+$accent-color-3: $pd-green;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 13ace20..a555293 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -22,12 +22,9 @@
       <% end %>
     </header>
 
-    <main>
-      <%= yield %>
-    </main>
-
     <% if content_for?(:progress) %>
       <aside role="progressbar"
+          class="progressbar"
           style="width: <%= yield :progress %>%"
           aria-valuemin="0"
           aria-valuemax="100"
@@ -36,6 +33,10 @@
       </aside>
     <% end %>
 
+    <main>
+      <%= yield %>
+    </main>
+
     <footer>
       <div><%= yield(:footer_title) %></div>
       <%= image_tag("perficientdigital.png",  alt:"Perficient Digital") %>