Update the work structure/templates and styling

This template edits allows having multiple positions in the same company

4 files changed, 48 insertions, 67 deletions

diff --git a/assets/scss/print/_base.scss b/assets/scss/print/_base.scss
index fba5300..b511b25 100644
--- a/assets/scss/print/_base.scss
+++ b/assets/scss/print/_base.scss
@@ -1,6 +1,6 @@
 @page {
-  margin-left: 1cm;
-  margin-right: 1cm;
+  margin-left: 1.5cm;
+  margin-right: 1.5cm;
 }
 
 body {
diff --git a/assets/scss/print/_work.scss b/assets/scss/print/_work.scss
index a2779cb..954cdd8 100644
--- a/assets/scss/print/_work.scss
+++ b/assets/scss/print/_work.scss
@@ -3,23 +3,24 @@
 }
 
 .work__header {
-  margin-bottom: 0.2rem;
+  margin-bottom: 1.7rem;
 }
 
-.work__experience {
+.work__company {
   page-break-inside: avoid;
-
   // only show the first 4 jobs completely and hide the details of the
   // rest of the older jobs (but keep the names in the CV)
   &:not(&:nth-child(-n+5)) {
-    > .tasks, .footnote {
+    > .work__company__tasks,
+      .work__company__note,
+      .work__company__footnote {
       display: none;
     }
   }
 }
 
 // Style the Company name links in the PDF with thicker underline
-.job-position__company {
+.work__company__name {
   margin-top: 0.6rem;
   font-size: 11pt;
   a:link, a:visited, a:hover, a:active {
@@ -27,19 +28,19 @@
   }
 }
 
-.job-position__title,
-.job-position__duration,
-.job-position__location {
+.work__company__location,
+.work__company__position__title,
+.work__company__position__duration{
 }
 
-.note {
+.work__company__note {
   max-width: 100%;
 }
 
-.tasks {
+.work__company__tasks {
   max-width: 90%;
 }
 
-.footnote {
+.work__company__footnote {
   font-size: 7pt;
 }
diff --git a/assets/scss/web/_base.scss b/assets/scss/web/_base.scss
index cd56020..0789eb5 100644
--- a/assets/scss/web/_base.scss
+++ b/assets/scss/web/_base.scss
@@ -45,11 +45,6 @@ body {
   }
 }
 
-main {
-  margin-left: 0.5cm;
-  margin-right: 0.5cm;
-}
-
 a {
   &:link, &:visited, &:active {
     text-decoration-color: $secondaryColor;
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;
 }