From d2ae7fb89b94e725b74e7bd54ee4eb548783d044 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Mon, 5 Jul 2021 12:05:25 +0200
Subject: Convert the education block to use BEM convention

---
 app/stylesheets/web/education.styl | 58 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 app/stylesheets/web/education.styl

(limited to 'app/stylesheets/web')

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