From 672dcb577ab994c5541fb45b33be9d46fd544c13 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Sat, 8 May 2021 05:41:11 +0200
Subject: Update education section with location/duration

---
 app/base.styl | 46 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 10 deletions(-)

(limited to 'app/base.styl')

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
-- 
cgit v1.2.3