From 4ab657957680c8d78b27354262fbfc44326e70f7 Mon Sep 17 00:00:00 2001
From: Mark Moser <markamoser@gmail.com>
Date: Mon, 21 Aug 2017 19:50:08 -0500
Subject: [PATCH] page cleanup

---
 site/assets/scss/components/_fifty.scss | 20 +++++++++++++++-----
 site/assets/scss/components/_pie.scss   |  6 ++++--
 site/pages/index.hbs                    |  8 +++-----
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/site/assets/scss/components/_fifty.scss b/site/assets/scss/components/_fifty.scss
index 8859383..225d0d3 100644
--- a/site/assets/scss/components/_fifty.scss
+++ b/site/assets/scss/components/_fifty.scss
@@ -2,14 +2,24 @@
   display: flex;
   flex-wrap: wrap;
 
-  > * { flex: 1 1 auto; }
-
-  @media screen and (min-width: 425px) {
-    > * { width: 50%; }
+  > * {
+    flex: 1 1 auto;
+    margin: $gutter 0;
   }
 
   @media screen and (min-width: 768px) {
     flex-wrap: nowrap;
-  }
 
+    > * {
+      margin: 0 $gutter;
+    }
+
+    &.fifty-reversed {
+      > * {
+        &:first-of-type { order: 2;}
+        &:last-of-type { order: 0;}
+      }
+    }
+
+  }
 }
diff --git a/site/assets/scss/components/_pie.scss b/site/assets/scss/components/_pie.scss
index 119e4ec..2e2b140 100644
--- a/site/assets/scss/components/_pie.scss
+++ b/site/assets/scss/components/_pie.scss
@@ -6,16 +6,17 @@
   padding: $gutter;
 
   .key {
+    flex: 1 1 auto;
     margin-left: calc(#{$gutter} + 1em);
 
     div {
       position: relative;
+      margin-bottom: 0.6em;
       padding-left: 0.33em;
-      line-height: 1.4em;
 
       &::before {
         position: absolute;
-        bottom: 0.2em;
+        top: 0.1em;
         left: -1em;
         width: 1em;
         height: 1em;
@@ -34,6 +35,7 @@
   ul {
     @include slim-ul;
     position: relative;
+    flex: 0 0 auto;
     margin: 0;
     width: 100px;
     height: 100px;
diff --git a/site/pages/index.hbs b/site/pages/index.hbs
index ac9a182..34a7549 100644
--- a/site/pages/index.hbs
+++ b/site/pages/index.hbs
@@ -3,8 +3,6 @@
     img: stock/lake.png
     copy: I build web things
     theme: blue
-
-  # VALUE * 360 / 100
 ---
 
 <section>
@@ -47,8 +45,8 @@
     <div class="key">
       <div class="blue"><span>30%</span><span>Ruby</span></div>
       <div class="orange"><span>25%</span><span>CSS</span></div>
-      <div class="red"><span>10%</span><span>HTML</span></div>
-      <div class="dark-blue"><span>15%</span><span>JavaScript</span></div>
+      <div class="red"><span>10%</span><span>JavaScript</span></div>
+      <div class="dark-blue"><span>15%</span><span>HTML</span></div>
       <div class="yellow"><span>20%</span><span>SQL</span></div>
     </div>
   </div>
@@ -57,7 +55,7 @@
 
 
 
-<section class="fifty">
+<section class="fifty fifty-reversed">
   <div>
     <h2>Back-End Proficiency's</h2>
     <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>