Nice mobile version of the site

2 files changed, 39 insertions, 7 deletions

diff --git a/index.css b/index.css
index 41e4fab..0c2e614 100644
--- a/index.css
+++ b/index.css
@@ -1,7 +1,7 @@
 body {
     width: 60vw;
     height: 100vh;
-    font-family: Arial, Helvetica, sans-serif; 
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
     font-size: 16px;
     background-color: transparent;
     color: black;
@@ -250,8 +250,8 @@ input:focus {
 }
 
 /* Phone screen adjustments */
-@media only screen and (device-width: 1280px),
-only screen and (max-width:1280px) {
+@media only screen and (device-width: 1440px),
+only screen and (max-width:1440px) {
     header > h1 {
         font-size: 1.5rem;
     }
@@ -259,12 +259,20 @@ only screen and (max-width:1280px) {
     body {
         width: 90vw !important;
     }
-    
+}
+
+@media only screen and (device-width: 960px),
+only screen and (max-width:960px) {
     #theme_selector  {
         padding-bottom: 2rem !important;
     }
 
     .carousel_image_expanded_container > .carousel_image {
-        width: 100vw;
+        width: 80vw;
+    }
+
+    #carousel > button {
+        font-size: 6rem;
+        top: calc(50% - 3rem);
     }
 }
diff --git a/resume.css b/resume.css
index e426252..00394d1 100755
--- a/resume.css
+++ b/resume.css
@@ -37,13 +37,15 @@ header {
 }
 
 #resume_header > h1 {
-    font-size: 30px;
+    font-size: 24px;
     padding: 0;
     margin: 0;
 	font-weight: 500;
 }
 
 #resume_header_contact {
+    display: flex;
+    flex-direction: row;
 }
 
 #resume_header_contact span {
@@ -83,6 +85,10 @@ header {
     justify-content: space-between;
 }
 
+.skill-section > b {
+    width: 25%;
+}
+
 .skill-section > div {
     width: 75%;
 }
@@ -126,4 +132,22 @@ header {
     width: calc(100vw - 4rem);
     height: calc(100vh - 4rem);
     overflow: auto;
-}
\ No newline at end of file
+}
+
+/* Phone screen adjustments */
+@media only screen and (device-width: 960px),
+only screen and (max-width:960px) {
+    #resume_header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    #resume_header_contact {
+        flex-direction: column;
+    }
+
+    #resume_header_contact span {
+        margin: 0;
+        margin-top: 5px;
+    }
+}