Update education section with location/duration

1 files changed, 36 insertions, 10 deletions

diff --git a/app/base.styl b/app/base.styl
index 28dade7..4e938ae 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -197,33 +197,59 @@ article {
     display: flex
     flex-flow: row wrap
     justify-content: space-between;
-    // add empty space to the end of page (as big as the header)
-    margin-bottom: 160px
-
     @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
     }
 
-    // university
-    p:nth-of-type(1) {
-      min-width: 50%
+    p, em {
       margin: 0
-      text-align: left
+      min-width: 50%
+    }
+
+    // University
+    p:nth-of-type(1) {
+      order: 1
     }
 
-    // grade
+    // Grade
     p:nth-of-type(2) {
-      min-width: 50%
-      margin: 0
+      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