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/assets/index.html |  2 ++
 app/base.styl         | 46 ++++++++++++++++++++++++++++++++++++----------
 app/print.styl        |  5 -----
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/app/assets/index.html b/app/assets/index.html
index 1b4f5da..bbed530 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -244,6 +244,8 @@
           <h2>B.E. in Computer Science and Engineering</h2>
           <p>Arab Academy for Science and Technology</p>
           <p>GPA 3.1/4.0 (B - Very Good)</p>
+          <em>Alexandria, Egypt</em>
+          <em>Sep. 2005 - Jan 2011</em>
         </article>
       </article>
     </main>
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
diff --git a/app/print.styl b/app/print.styl
index bd528d6..f6409f9 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -90,11 +90,6 @@ article {
     h2 {
       margin-top: 1.2em
     }
-
-    // university/grade
-    p {
-      margin-bottom: -0.4em
-    }
   }
 }
 
-- 
cgit v1.2.3