Convert the education block to use BEM convention

2 files changed, 68 insertions, 0 deletions

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
+  }
+}