From 945fbf0c8f55a91b0896cf57b14296b0d1d02fb4 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Fri, 11 Aug 2023 22:24:40 +0300
Subject: Fix phone website and media queries

---
 assets/scss/web/_base.scss      |  7 +++++--
 assets/scss/web/_education.scss | 17 +++++++++++++----
 assets/scss/web/_header.scss    | 12 +++++++++++-
 assets/scss/web/_projects.scss  |  6 ++++++
 assets/scss/web/_skills.scss    | 17 +++++++++++++++--
 assets/scss/web/_work.scss      | 30 ++++++++++++++++++++++++++----
 6 files changed, 76 insertions(+), 13 deletions(-)

(limited to 'assets/scss')

diff --git a/assets/scss/web/_base.scss b/assets/scss/web/_base.scss
index d293dec..79b386a 100644
--- a/assets/scss/web/_base.scss
+++ b/assets/scss/web/_base.scss
@@ -20,8 +20,11 @@ body {
   float: none;
   line-height: 1.5;
   font-size: 16px;
-  @media screen and (max-width: 780px) {
-    font-size: 0.9rem;
+
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 10px;
+    }
   }
 }
 
diff --git a/assets/scss/web/_education.scss b/assets/scss/web/_education.scss
index 3707c4a..39e769a 100644
--- a/assets/scss/web/_education.scss
+++ b/assets/scss/web/_education.scss
@@ -7,7 +7,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;
   }
 }
@@ -25,14 +25,23 @@
 .education__location {
   min-width: 50%;
   margin: 0;
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 0.9rem;
+    }
+  }
 }
 
 .education__university {
+  text-align: left;
+  align-self: flex-start;
 }
 
 .education__gpa {
   order: 3;
-  @media screen and (max-width: 780px) {
+  text-align: left;
+  align-self: flex-start;
+  @media (max-width: 780px) {
     order: 2;
   }
 }
@@ -41,7 +50,7 @@
   order: 2;
   text-align: right;
   align-self: flex-end;
-  @media screen and (max-width: 780px) {
+  @media (max-width: 780px) {
     text-align: left;
     align-self: flex-start;
   }
@@ -51,7 +60,7 @@
   order: 4;
   text-align: right;
   align-self: flex-end;
-  @media screen and (max-width: 780px) {
+  @media (max-width: 780px) {
     text-align: left;
     align-self: flex-start;
   }
diff --git a/assets/scss/web/_header.scss b/assets/scss/web/_header.scss
index 196afa0..6de805a 100644
--- a/assets/scss/web/_header.scss
+++ b/assets/scss/web/_header.scss
@@ -8,8 +8,12 @@
   margin-bottom: -0.2rem;
   clear: right;
   margin-top: 3.3rem;
-  @media screen and (max-width: 780px) {
+
+  @media (max-width: 812px) {
     font-size: 2rem;
+    @media (orientation: landscape) {
+      font-size: 3.3rem;
+    }
   }
 }
 
@@ -40,4 +44,10 @@
 .header__linkedin {
   display: inline-block;
   margin: 8px;
+
+  @media (max-width: 812px) {
+    font-size: 0.9rem;
+    @media (orientation: landscape) {
+    }
+  }
 }
diff --git a/assets/scss/web/_projects.scss b/assets/scss/web/_projects.scss
index 54ebf07..2bd0225 100644
--- a/assets/scss/web/_projects.scss
+++ b/assets/scss/web/_projects.scss
@@ -10,6 +10,12 @@
 .project__title {
   margin-bottom: 0;
   font-size: 1rem;
+  font-weight: 900;
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 0.7rem;
+    }
+  }
 }
 
 .project__content {
diff --git a/assets/scss/web/_skills.scss b/assets/scss/web/_skills.scss
index 21e9ce3..80f1202 100644
--- a/assets/scss/web/_skills.scss
+++ b/assets/scss/web/_skills.scss
@@ -14,7 +14,14 @@
   min-width: 14%;
   text-align: right;
   font-weight: 900;
-  @media screen and (max-width: 780px) {
+
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 1rem;
+    }
+  }
+
+  @media (max-width: 680px) {
     text-align: left;
   }
 }
@@ -25,7 +32,13 @@
   margin-left: 25px;
   font-size: 0.9rem;
 
-  @media screen and (max-width: 780px) {
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 0.6rem;
+    }
+  }
+
+  @media (max-width: 680px) {
     margin-bottom: 1rem;
     width: 100%;
   }
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;
+    }
+  }
 }
-- 
cgit v1.2.3