Convert the education block to use BEM convention

1 files changed, 1 insertions, 67 deletions

diff --git a/app/base.styl b/app/base.styl
index 7603ba1..dd17ea6 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -47,6 +47,7 @@ a:link, a:visited, a:hover, a:active {
 @require "stylesheets/web/skills.styl"
 @require "stylesheets/web/writing.styl"
 @require "stylesheets/web/projects.styl"
+@require "stylesheets/web/education.styl"
 
 .work {
   article {
@@ -116,70 +117,3 @@ a:link, a:visited, a:hover, a:active {
     }
   }
 }
-
-.education {
-  article {
-    display: flex
-    flex-flow: row wrap
-    justify-content: space-between;
-    @media screen and (max-width: 740px) {
-      flex-flow: column wrap
-    }
-
-    // add empty space to the end of page (as big as the header)
-    margin-bottom: 160px
-
-    // title
-    h2 {
-      order: 0
-      margin: 0
-      min-width: 100%
-      font-size: 1.2em
-      align-self: center
-    }
-
-    p, em {
-      margin: 0
-      min-width: 50%
-    }
-
-    // University
-    p:nth-of-type(1) {
-      order: 1
-    }
-
-    // Grade
-    p:nth-of-type(2) {
-      order: 3
-
-      @media screen and (max-width: 740px) {
-        order 2
-      }
-    }
-
-    // Location
-    em:nth-of-type(1) {
-      order: 2
-      text-align: right
-      align-self: flex-end
-
-      @media screen and (max-width: 740px) {
-        order: 3
-        text-align: left
-        align-self: flex-start
-      }
-    }
-
-    // Duration
-    em:nth-of-type(2) {
-      order: 4
-      text-align: right
-      align-self: flex-end
-
-      @media screen and (max-width: 740px) {
-        text-align: left
-        align-self: flex-start
-      }
-    }
-  }
-}