diff --git a/contact/index.html b/contact/index.html
index c4a4e09..1a629f2 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -59,8 +59,8 @@
top: 0;
left: 50%;
transform: translateX(-50%);
- padding-top: 5vh;
- font-size: 4vh;
+ padding-top: 2.604vw;
+ font-size: 2.083vw;
color: #fff;
text-decoration: none;
}
@@ -73,8 +73,8 @@
/* "Back Home" media query for mobile */
@media only screen and (max-width: 600px) {
#back-home {
- font-size: 6vh;
- padding-top: 8vh;
+ font-size: 3.125vw;
+ padding-top: 4.167vw;
width: 90%;
display: flex;
justify-content: center;
@@ -100,15 +100,15 @@
}
#attention {
- font-size: 2.5vh;
+ font-size: 1.302vw;
text-align: center;
- margin: 1vh;
+ margin: 0.521vw;
}
#pgp-key, #contact-email {
color: #fff;
text-decoration: underline;
- font-size: 2.5vh;
+ font-size: 1.302vw;
}
form {
@@ -122,10 +122,10 @@
background-color: #242424;
border: 2px solid #242424;
border-radius: 10px;
- padding: 1vh;
- margin: 1vh;
+ padding: 0.521vw;
+ margin: 0.521vw;
width: 50vw;
- font-size: 3vh;
+ font-size: 1.563vw;
resize: none;
}
@@ -142,7 +142,7 @@
@media only screen and (max-width: 600px) {
form input, form textarea, form button {
width: 70vw;
- font-size: 3vh;
+ font-size: 1.563vw;
}
form button {
@@ -153,7 +153,7 @@
}
.response {
- font-size: 2.5vh;
+ font-size: 1.302vw;
text-align: center;
visibility: hidden;
}
diff --git a/style.css b/style.css
index 7545c19..979c1f5 100644
--- a/style.css
+++ b/style.css
@@ -14,12 +14,12 @@ body{
.fa-angle-down {
color: #fff;
- font-size: 3.5vh;
+ font-size: 1.823vw;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
- bottom: 10vh;
+ bottom: 5.208vw;
}
.fa-angle-down:hover {
@@ -32,12 +32,12 @@ footer {
position: sticky;
bottom: 0;
background-color: #0d0d0d;
- font-size: 2vh;
+ font-size: 1.042vw;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
- padding: 2vh;
+ padding: 1.042vw;
}
footer a {
@@ -53,13 +53,13 @@ footer a:hover {
/* Media query for footer on mobile */
@media screen and (max-width: 600px) {
footer {
- font-size: 2.75vh;
+ font-size: 1.432vw;
}
}
/* Navbar mobile icons */
#hamburger i {
- font-size: 4vh;
+ font-size: 2.083vw;
position: absolute;
top: 40px;
right: 40px;
@@ -67,7 +67,7 @@ footer a:hover {
}
#x i {
- font-size: 4vh;
+ font-size: 2.083vw;
position: absolute;
top: 40px;
right: 40px;
@@ -95,7 +95,7 @@ nav {
nav a {
text-decoration: none;
color: #fff;
- font-size: 3.5vh;
+ font-size: 1.823vw;
margin: 0 25px;
}
@@ -111,8 +111,8 @@ nav a:hover {
}
.icons i {
- font-size: 6vh;
- margin: 2vh 50px;
+ font-size: 3.125vw;
+ margin: 1.042vw 50px;
}
.icons i:hover {
@@ -129,37 +129,37 @@ header {
}
header h1 {
- font-size: 16vh;
+ font-size: 8.333vw;
}
header h2 {
- font-size: 6vh;
- animation: bringIn 2s;
+ font-size: 3.125vw;
+ /* animation: bringIn 2s; */
padding-right: 50px;
}
/* Main section media query for tablets */
@media screen and (max-width: 1280px) {
nav a {
- font-size: 2.5vh;
- margin-bottom: 7vh;
+ font-size: 1.302vw;
+ margin-bottom: 3.646vw;
}
header h1 {
- font-size: 10vh;
+ font-size: 5.208vw;
}
header h2 {
- font-size: 5vh;
+ font-size: 2.604vw;
padding-right: 25px;
}
.icons {
- margin-top: 5vh;
+ margin-top: 2.604vw;
}
.icons i {
- font-size: 5vh;
+ font-size: 2.604vw;
margin: 0 25px;
}
}
@@ -172,8 +172,8 @@ header h2 {
}
nav a {
- font-size: 3.5vh;
- margin-bottom: 5vh;
+ font-size: 1.823vw;
+ margin-bottom: 2.604vw;
}
header {
@@ -182,22 +182,22 @@ header h2 {
}
header h1 {
- font-size: 10vh;
+ font-size: 5.208vw;
}
header h2 {
- font-size: 5vh;
+ font-size: 2.604vw;
padding-right: 0;
}
.icons {
flex-direction: row;
position: absolute;
- bottom: 30vh;
+ bottom: 15.625vw;
}
.icons i {
- font-size: 6vh;
+ font-size: 3.125vw;
margin: 0 5px;
}
}
@@ -225,12 +225,12 @@ header h2 {
}
#about h1 {
- font-size: 8vh;
- margin-bottom: 3vh;
+ font-size: 4.167vw;
+ margin-bottom: 1.563vw;
}
#about p {
- font-size: 3vh;
+ font-size: 1.563vw;
width: 50%;
text-align: center;
}
@@ -238,7 +238,7 @@ header h2 {
/* About section media query for tablets */
@media screen and (max-width: 1280px) {
#about p {
- font-size: 2.5vh;
+ font-size: 1.302vw;
width: 80%;
}
}
@@ -246,10 +246,10 @@ header h2 {
/* About section media query for mobile */
@media screen and (max-width: 600px) {
#about h1 {
- font-size: 6vh;
+ font-size: 3.125vw;
}
#about p {
- font-size: 2.5vh;
+ font-size: 1.302vw;
width: 80%;
}
}
@@ -270,9 +270,9 @@ header h2 {
}
.slider__nav {
- width: 2vh;
- height: 2vh;
- margin: 2vh 1vh;
+ width: 1.042vw;
+ height: 1.042vw;
+ margin: 1.042vw 0.521vw;
border-radius: 50%;
z-index: 10;
outline: 14px solid white;
@@ -325,26 +325,26 @@ header h2 {
}
.slider__caption {
- font-size: 8vh;
- margin: 3vh;
+ font-size: 4.167vw;
+ margin: 1.563vw;
max-width: 75%;
}
.slider__txt {
color: white;
max-width: 30%;
- font-size: 3vh;
+ font-size: 1.563vw;
}
.slider__button {
- font-size: 3vh;
- padding: .75vh 2vh;
+ font-size: 1.563vw;
+ padding: 0.391vw 1.042vw;
border-radius: 5px;
background: #333;
color: white;
text-decoration: none;
cursor: pointer;
- margin-right: 2vh;
+ margin-right: 1.042vw;
}
.slider__button:hover {
@@ -359,40 +359,40 @@ header h2 {
max-width: 95%;
}
.slider__txt {
- font-size: 2.5vh;
+ font-size: 1.302vw;
max-width: 80%;
}
.slider__button {
- font-size: 2.5vh;
+ font-size: 1.302vw;
}
.slider__nav {
- margin-bottom: 10vh;
+ margin-bottom: 5.208vw;
}
}
/* Projects section media query for mobile */
@media screen and (max-width: 600px) {
.slider__caption {
- font-size: 6vh;
+ font-size: 3.125vw;
max-width: 95%;
}
.slider__txt {
- font-size: 2.5vh;
+ font-size: 1.302vw;
max-width: 80%;
}
.slider__button {
- font-size: 2.5vh;
+ font-size: 1.302vw;
display: flex;
justify-content: center;
margin: 0;
- margin-bottom: 2.5vh;
+ margin-bottom: 1.302vw;
}
.slider__nav {
- margin-bottom: 5vh;
+ margin-bottom: 2.604vw;
}
}