Convert the work experience to a BEM convention

2 files changed, 97 insertions, 0 deletions

diff --git a/app/stylesheets/print/work.styl b/app/stylesheets/print/work.styl
new file mode 100644
index 0000000..17179ba
--- /dev/null
+++ b/app/stylesheets/print/work.styl
@@ -0,0 +1,30 @@
+.work {
+}
+
+.work__header {
+}
+
+.work__experience {
+  page-break-inside: avoid
+}
+
+.job-postion {
+}
+
+.job-position__company {
+}
+
+.job-position__title {
+}
+
+.job-position__duration {
+}
+
+.job-position__location {
+}
+
+.note {
+}
+
+.tasks {
+}
diff --git a/app/stylesheets/web/work.styl b/app/stylesheets/web/work.styl
new file mode 100644
index 0000000..caa127d
--- /dev/null
+++ b/app/stylesheets/web/work.styl
@@ -0,0 +1,67 @@
+.work {
+}
+
+.work__header {
+}
+
+.work__experience {
+}
+
+.job-position {
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-between
+  @media screen and (max-width: 780px) {
+    flex-flow: column wrap
+  }
+}
+
+.job-position__company
+.job-position__title
+.job-position__duration
+.job-position__location {
+  min-width: 50%
+}
+
+.job-position__company {
+  order: 0
+  margin-bottom: 0
+  font-size: 1.4em
+}
+
+.job-position__title {
+  order: 2
+  @media screen and (max-width: 780px) {
+    order: 1
+  }
+}
+
+.job-position__duration {
+  order: 1
+  text-align: right
+  align-self: flex-end
+  @media screen and (max-width: 780px) {
+    order: 2
+    text-align: left
+    align-self: flex-start
+  }
+}
+
+.job-position__location {
+  order: 3
+  text-align: right
+  align-self: flex-end
+  @media screen and (max-width: 780px) {
+    text-align: left
+    align-self: flex-start
+  }
+}
+
+.note {
+  margin-top: 0.4em
+  margin-bottom: 0.4em
+}
+
+.tasks {
+  margin-top: 0.4em
+}