css: general placement

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