Fix phone website and media queries

1 files changed, 26 insertions, 4 deletions

diff --git a/assets/scss/web/_work.scss b/assets/scss/web/_work.scss
index c4d78d6..682797b 100644
--- a/assets/scss/web/_work.scss
+++ b/assets/scss/web/_work.scss
@@ -22,7 +22,7 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  @media screen and (max-width: 780px) {
+  @media (max-width: 780px) {
     flex-flow: column wrap;
   }
 }
@@ -32,6 +32,11 @@
 .job-position__duration,
 .job-position__location {
   min-width: 50%;
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 0.9rem;
+    }
+  }
 }
 
 .job-position__company {
@@ -42,7 +47,9 @@
 
 .job-position__title {
   order: 2;
-  @media screen and (max-width: 780px) {
+  text-align: left;
+  align-self: flex-start;
+  @media (max-width: 780px) {
     order: 1;
   }
 }
@@ -51,7 +58,7 @@
   order: 1;
   text-align: right;
   align-self: flex-end;
-  @media screen and (max-width: 780px) {
+  @media (max-width: 780px) {
     order: 2;
     text-align: left;
     align-self: flex-start;
@@ -62,7 +69,7 @@
   order: 3;
   text-align: right;
   align-self: flex-end;
-  @media screen and (max-width: 780px) {
+  @media (max-width: 780px) {
     text-align: left;
     align-self: flex-start;
   }
@@ -77,9 +84,24 @@
 .tasks {
   max-width: 90%;
   margin-top: 0.4rem;
+
+  @media (max-width: 812px) {
+    max-width: 99%;
+    margin-inline-start: -1.5em;
+    @media (orientation: landscape) {
+      max-width: 90%;
+      margin-inline-start: 0em;
+    }
+  }
 }
 
 .footnote {
   margin-bottom: 0.8rem;
   font-size: 0.8rem;
+
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 0.4rem;
+    }
+  }
 }