+
-
diff --git a/webpage/partials/_global.scss b/webpage/partials/_global.scss
index 5675f4a..0fb1c78 100644
--- a/webpage/partials/_global.scss
+++ b/webpage/partials/_global.scss
@@ -12,4 +12,17 @@ body {
#main {
margin: 0 auto;
width: 80%;
+}
+
+//Mobile
+@media (max-width: 480px) {
+ html {
+ font-size: 12px;
+ }
+}
+//Tablet & Desktop
+@media (min-width: 481px) {
+ html {
+ font-size: 16px;
+ }
}
\ No newline at end of file
diff --git a/webpage/partials/_header.scss b/webpage/partials/_header.scss
index 1500d2f..defde43 100644
--- a/webpage/partials/_header.scss
+++ b/webpage/partials/_header.scss
@@ -45,7 +45,7 @@
font-size: 1.5rem;
}
#links .column img {
- max-width: 0.8em;
+ max-width: 0.8rem;
height: auto;
}
@@ -78,4 +78,36 @@ a:visited {
}
#whoami p ~ p {
margin-top: 2%;
+}
+
+//Mobile
+@media (max-width: 480px) {
+ //Adjust font sizes to avoid overflow
+ #title_inner h1 {
+ font-size: 2.5rem;
+ }
+ #title_inner p {
+ font-size: 1.2rem;
+ margin: 1rem 0;
+ }
+
+ //Make links stacked, not next to each other
+ #links {
+ display: block;
+ margin: 0 auto;
+ }
+ #links .column {
+ margin: 0 auto;
+ width: 100%;
+ font-size: 1.25rem;
+ }
+ #links .column img {
+ max-width: 1.25rem;
+ height: auto;
+ }
+
+ #whoami p {
+ font-size: 1.25rem;
+ margin: 3vw;
+ }
}
\ No newline at end of file
diff --git a/webpage/partials/_projects.scss b/webpage/partials/_projects.scss
index 345c3c7..ba5bbd0 100644
--- a/webpage/partials/_projects.scss
+++ b/webpage/partials/_projects.scss
@@ -20,6 +20,7 @@
font-size: 1.5rem;
background-color: v.$light-blue;
color: v.$navy-blue;
+ box-sizing: border-box;
border: v.$navy-blue 2px solid;
border-top: 0;
}
@@ -31,6 +32,7 @@
}
.project_container {
+ box-sizing: border-box;
width: 70%;
padding: 3%;
background-color: v.$light-blue;
diff --git a/webpage/styles/main.css b/webpage/styles/main.css
index b39b370..da85117 100644
--- a/webpage/styles/main.css
+++ b/webpage/styles/main.css
@@ -12,6 +12,16 @@ body {
width: 80%;
}
+@media (max-width: 480px) {
+ html {
+ font-size: 12px;
+ }
+}
+@media (min-width: 481px) {
+ html {
+ font-size: 16px;
+ }
+}
/* HEADER */
#header {
position: relative;
@@ -63,7 +73,7 @@ body {
}
#links .column img {
- max-width: 0.8em;
+ max-width: 0.8rem;
height: auto;
}
@@ -99,6 +109,32 @@ a:visited {
margin-top: 2%;
}
+@media (max-width: 480px) {
+ #title_inner h1 {
+ font-size: 2.5rem;
+ }
+ #title_inner p {
+ font-size: 1.2rem;
+ margin: 1rem 0;
+ }
+ #links {
+ display: block;
+ margin: 0 auto;
+ }
+ #links .column {
+ margin: 0 auto;
+ width: 100%;
+ font-size: 1.25rem;
+ }
+ #links .column img {
+ max-width: 1.25rem;
+ height: auto;
+ }
+ #whoami p {
+ font-size: 1.25rem;
+ margin: 3vw;
+ }
+}
@media (max-width: 480px) {
div #skills {
display: block;
@@ -157,6 +193,7 @@ div#skills .column ul p {
font-size: 1.5rem;
background-color: rgb(203, 239, 252);
color: #091d3a;
+ box-sizing: border-box;
border: #091d3a 2px solid;
border-top: 0;
}
@@ -167,6 +204,7 @@ div#skills .column ul p {
background-color: rgb(169, 199, 210);
}
.project_container {
+ box-sizing: border-box;
width: 70%;
padding: 3%;
background-color: rgb(203, 239, 252);
diff --git a/webpage/styles/main.css.map b/webpage/styles/main.css.map
index 1ee7f46..e5eb71d 100644
--- a/webpage/styles/main.css.map
+++ b/webpage/styles/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../partials/_global.scss","../_variables.scss","../partials/_header.scss","../partials/_skills.scss","../partials/_projects.scss","../partials/_personal.scss","../partials/_footer.scss","../main.scss"],"names":[],"mappings":"AAEA;EACI;EACA;;;AAEJ;EACI,kBCPQ;;;ADWZ;EACI;EACA;;;AEXJ;AACA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDnBS;ECoBT,ODtBQ;;;ACwBZ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAIJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDxES;ECyET,OD3EQ;EC4ER;;;AAEJ;EACI;;;AC5EJ;EACI;IACI;IACA;;;AAKR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBFpCS;;;AEuCb;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;ACvCJ;EACI;IACI;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA,kBHlBK;IGmBL,OHrBI;IGsBJ;IACA;;EAEJ;IACI;;EAEJ;IACI,kBH5BI;;EG+BR;IACI;IACA;IACA,kBHjCK;;EGmCT;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OH3CI;;EG6CR;IACI;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBHxHQ;;;AG0HZ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;;;AAEJ;EACI;IACI;;EAEJ;IACI;;;ACzIR;AACA;EACI;EACA;EACA;EACA,kBJNQ;;;AIQZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA,OJtBQ;;;AKEZ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OLVS;EKWT;EACA;EACA;;;ACNJ","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../partials/_global.scss","../_variables.scss","../partials/_header.scss","../partials/_skills.scss","../partials/_projects.scss","../partials/_personal.scss","../partials/_footer.scss","../main.scss"],"names":[],"mappings":"AAEA;EACI;EACA;;;AAEJ;EACI,kBCPQ;;;ADWZ;EACI;EACA;;;AAIJ;EACI;IACI;;;AAIR;EACI;IACI;;;AEvBR;AACA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDnBS;ECoBT,ODtBQ;;;ACwBZ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAIJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDxES;ECyET,OD3EQ;EC4ER;;;AAEJ;EACI;;;AAIJ;EAEI;IACI;;EAEJ;IACI;IACA;;EAIJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;;AC3GR;EACI;IACI;IACA;;;AAKR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBFpCS;;;AEuCb;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;ACvCJ;EACI;IACI;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA,kBHlBK;IGmBL,OHrBI;IGsBJ;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI,kBH7BI;;EGgCR;IACI;IACA;IACA;IACA,kBHnCK;;EGqCT;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OH7CI;;EG+CR;IACI;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBH1HQ;;;AG4HZ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;;;AAEJ;EACI;IACI;;EAEJ;IACI;;;AC3IR;AACA;EACI;EACA;EACA;EACA,kBJNQ;;;AIQZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA,OJtBQ;;;AKEZ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OLVS;EKWT;EACA;EACA;;;ACNJ","file":"main.css"}
\ No newline at end of file