css: general placement

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/';

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;
+    }
+  }
+}

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;
+  }
+}

app/assets/stylesheets/elements/_progressbar.scss

@@ -0,0 +1,7 @@
+.progressbar {
+  order: 1;
+  margin: 0;
+  background-color: $turquoise;
+  padding: $gutter / 2 $gutter;
+  color: $white;
+}

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;
+}

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;
 }
 

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;

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") %>