Convert the education block to use BEM convention

5 files changed, 77 insertions, 89 deletions

diff --git a/app/assets/index.html b/app/assets/index.html
index 33c68e0..b70ce5c 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -283,13 +283,13 @@
       </article>
 
       <article class="education">
-        <h1>Education</h1>
-        <article>
-          <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>
+        <h1 class="education__header section-header">Education</h1>
+        <article class="education__details">
+          <h2 class="education__details__degree">B.E. in Computer Science and Engineering</h2>
+          <p class="education__details__university">Arab Academy for Science and Technology</p>
+          <p class="education__details__gpa">GPA 3.1/4.0 (B - Very Good)</p>
+          <em class="education__details__location">Alexandria, Egypt</em>
+          <em class="education__details__duration">Sep. 2005 - Jan. 2011</em>
         </article>
       </article>
     </main>
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
-      }
-    }
-  }
-}
diff --git a/app/print.styl b/app/print.styl
index c2173be..5e3b05e 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -19,6 +19,7 @@ body {
 @require "stylesheets/print/skills.styl"
 @require "stylesheets/print/writing.styl"
 @require "stylesheets/print/projects.styl"
+@require "stylesheets/print/education.styl"
 
 .work {
   // avoid page breaks inside a work experience section
@@ -34,21 +35,6 @@ body {
   }
 }
 
-.education {
-  // avoid page breaks inside the education section
-  page-break-inside: avoid
-
-  article {
-    // remove the extra space added for the website
-    margin-bottom: 0
-
-    // title
-    h2 {
-      margin-top: 1.2em
-    }
-  }
-}
-
 footer {
   display: block
   position: fixed
diff --git a/app/stylesheets/print/education.styl b/app/stylesheets/print/education.styl
new file mode 100644
index 0000000..c3d6fd8
--- /dev/null
+++ b/app/stylesheets/print/education.styl
@@ -0,0 +1,10 @@
+.education {
+  // avoid page breaks inside the education section
+  page-break-inside: avoid
+  // remove the extra space added for the website
+  margin-bottom: 0
+}
+
+.education__details {
+  margin-top: 0.3em
+}
diff --git a/app/stylesheets/web/education.styl b/app/stylesheets/web/education.styl
new file mode 100644
index 0000000..d6ea3a6
--- /dev/null
+++ b/app/stylesheets/web/education.styl
@@ -0,0 +1,58 @@
+.education {
+  // add empty space to the end of page (as big as the header)
+  margin-bottom: 150px
+}
+
+.education__details {
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-between
+  @media screen and (max-width: 780px) {
+    flex-flow: column wrap
+  }
+}
+
+.education__details__degree {
+  min-width: 100%
+  align-self: center
+  font-size: 1.1em
+  margin-bottom: 0
+}
+
+.education__details__university
+.education__details__gpa
+.education__details__duration
+.education__details__location {
+  min-width: 50%
+  margin: 0
+}
+
+.education__details__university {
+}
+
+.education__details__gpa {
+  order: 3
+  @media screen and (max-width: 780px) {
+    order: 2
+  }
+}
+
+.education__details__duration {
+  order: 2
+  text-align: right
+  align-self: flex-end
+  @media screen and (max-width: 780px) {
+    text-align: left
+    align-self: flex-start
+  }
+}
+
+.education__details__location {
+  order: 4
+  text-align: right
+  align-self: flex-end
+  @media screen and (max-width: 780px) {
+    text-align: left
+    align-self: flex-start
+  }
+}