Update the work structure/templates and styling

This template edits allows having multiple positions in the same company

1 files changed, 34 insertions, 49 deletions

diff --git a/assets/scss/web/_work.scss b/assets/scss/web/_work.scss
index 0bb807e..811da2f 100644
--- a/assets/scss/web/_work.scss
+++ b/assets/scss/web/_work.scss
@@ -4,35 +4,41 @@
 }
 
 .work__header {
+  margin-bottom: 1.5rem;
 }
 
-.work__experience {
+.work__company {
+  margin-top: -1.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  @media (max-width: 780px) {
+    flex-flow: column wrap;
+  }
+
+  // Add horizontal line after each work experience
   &:after {
-    display: flex;
+    display: block;
+    flex: 1 100%;
     content: "";
     border-bottom: 1px solid;
-    margin: auto;
-    max-width: 75%;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
   }
+
+  // Remove the extra horizontal line after the last work article
   &:last-of-type:after {
-    // remove the extra horizontal line after the last work__experience
     display: none;
   }
 }
 
-.job-position {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  @media (max-width: 780px) {
-    flex-flow: column wrap;
-  }
-}
-
-.job-position__company,
-.job-position__title,
-.job-position__duration,
-.job-position__location {
+.work__company__name,
+.work__company__location,
+.work__company__position__title,
+.work__company__position__duration {
   min-width: 50%;
   @media (max-width: 812px) {
     @media (orientation: landscape) {
@@ -41,34 +47,13 @@
   }
 }
 
-.job-position__company {
-  order: 0;
-  margin-bottom: 0;
+.work__company__name {
+  margin-bottom: 0%;
   font-size: 1.5rem;
 }
 
-.job-position__title {
-  order: 2;
-  text-align: left;
-  align-self: flex-start;
-  @media (max-width: 780px) {
-    order: 1;
-  }
-}
-
-.job-position__duration {
-  order: 1;
-  text-align: right;
-  align-self: flex-end;
-  @media (max-width: 780px) {
-    order: 2;
-    text-align: left;
-    align-self: flex-start;
-  }
-}
-
-.job-position__location {
-  order: 3;
+.work__company__location,
+.work__company__position__duration {
   text-align: right;
   align-self: flex-end;
   @media (max-width: 780px) {
@@ -77,15 +62,15 @@
   }
 }
 
-.note {
+.work__company__note {
   max-width: 93%;
   margin-top: 0.6rem;
   margin-bottom: 0.6rem;
 }
 
-.tasks {
+.work__company__tasks {
   max-width: 90%;
-  margin-top: 0.4rem;
+  margin-bottom: 0%;
 
   @media (max-width: 812px) {
     max-width: 99%;
@@ -101,7 +86,7 @@
   }
 }
 
-.footnote {
-  margin-bottom: 0.8rem;
-  font-size: 0.8rem;
+.work__company__footnote {
+  min-width: 100%;
+  font-size: 0.9rem;
 }