From 6b9f9a41817a21eb6d73ca1a89fd0b7f97230414 Mon Sep 17 00:00:00 2001
From: Parker M <contact@pkrm.dev>
Date: Sun, 27 Aug 2023 00:56:50 -0500
Subject: [PATCH] VH -> VW for font sizing

Might change later, to clamp or something, idrk
---
 contact/index.html | 24 ++++++------
 style.css          | 96 +++++++++++++++++++++++-----------------------
 2 files changed, 60 insertions(+), 60 deletions(-)

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;
     }
 }