parker/pkrm.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VH -> VW for font sizing

Browse Source 
Might change later, to clamp or something, idrk
This commit is contained in:
Parker M. 2023-08-27 00:56:50 -05:00
parent cda8d2fe1b
commit 6b9f9a4181
No known key found for this signature in database
GPG Key ID: 95CD2E0C7E329F2A
2 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
contact/index.html
View File

@ -59,8 +59,8 @@
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding-top: 5vh; padding-top: 2.604vw;
font-size: 4vh; font-size: 2.083vw;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -73,8 +73,8 @@
/* "Back Home" media query for mobile */ /* "Back Home" media query for mobile */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#back-home { #back-home {
font-size: 6vh; font-size: 3.125vw;
padding-top: 8vh; padding-top: 4.167vw;
width: 90%; width: 90%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -100,15 +100,15 @@
} }
#attention { #attention {
font-size: 2.5vh; font-size: 1.302vw;
text-align: center; text-align: center;
margin: 1vh; margin: 0.521vw;
} }
#pgp-key, #contact-email { #pgp-key, #contact-email {
color: #fff; color: #fff;
text-decoration: underline; text-decoration: underline;
font-size: 2.5vh; font-size: 1.302vw;
} }
form { form {
@ -122,10 +122,10 @@
background-color: #242424; background-color: #242424;
border: 2px solid #242424; border: 2px solid #242424;
border-radius: 10px; border-radius: 10px;
padding: 1vh; padding: 0.521vw;
margin: 1vh; margin: 0.521vw;
width: 50vw; width: 50vw;
font-size: 3vh; font-size: 1.563vw;
resize: none; resize: none;
} }
@ -142,7 +142,7 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
form input, form textarea, form button { form input, form textarea, form button {
width: 70vw; width: 70vw;
font-size: 3vh; font-size: 1.563vw;
} }
form button { form button {
@ -153,7 +153,7 @@
} }
.response { .response {
font-size: 2.5vh; font-size: 1.302vw;
text-align: center; text-align: center;
visibility: hidden; visibility: hidden;
} }

96
style.css
View File

@ -14,12 +14,12 @@ body{
.fa-angle-down { .fa-angle-down {
color: #fff; color: #fff;
font-size: 3.5vh; font-size: 1.823vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute; position: absolute;
bottom: 10vh; bottom: 5.208vw;
} }
.fa-angle-down:hover { .fa-angle-down:hover {
@ -32,12 +32,12 @@ footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
background-color: #0d0d0d; background-color: #0d0d0d;
font-size: 2vh; font-size: 1.042vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10; z-index: 10;
padding: 2vh; padding: 1.042vw;
} }
footer a { footer a {
@ -53,13 +53,13 @@ footer a:hover {
/* Media query for footer on mobile */ /* Media query for footer on mobile */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
footer { footer {
font-size: 2.75vh; font-size: 1.432vw;
} }
} }
/* Navbar mobile icons */ /* Navbar mobile icons */
#hamburger i { #hamburger i {
font-size: 4vh; font-size: 2.083vw;
position: absolute; position: absolute;
top: 40px; top: 40px;
right: 40px; right: 40px;
@ -67,7 +67,7 @@ footer a:hover {
} }
#x i { #x i {
font-size: 4vh; font-size: 2.083vw;
position: absolute; position: absolute;
top: 40px; top: 40px;
right: 40px; right: 40px;
@ -95,7 +95,7 @@ nav {
nav a { nav a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
font-size: 3.5vh; font-size: 1.823vw;
margin: 0 25px; margin: 0 25px;
} }
@ -111,8 +111,8 @@ nav a:hover {
} }
.icons i { .icons i {
font-size: 6vh; font-size: 3.125vw;
margin: 2vh 50px; margin: 1.042vw 50px;
} }
.icons i:hover { .icons i:hover {
@ -129,37 +129,37 @@ header {
} }
header h1 { header h1 {
font-size: 16vh; font-size: 8.333vw;
} }
header h2 { header h2 {
font-size: 6vh; font-size: 3.125vw;
animation: bringIn 2s; /* animation: bringIn 2s; */
padding-right: 50px; padding-right: 50px;
} }
/* Main section media query for tablets */ /* Main section media query for tablets */
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
nav a { nav a {
font-size: 2.5vh; font-size: 1.302vw;
margin-bottom: 7vh; margin-bottom: 3.646vw;
} }
header h1 { header h1 {
font-size: 10vh; font-size: 5.208vw;
} }
header h2 { header h2 {
font-size: 5vh; font-size: 2.604vw;
padding-right: 25px; padding-right: 25px;
} }
.icons { .icons {
margin-top: 5vh; margin-top: 2.604vw;
} }
.icons i { .icons i {
font-size: 5vh; font-size: 2.604vw;
margin: 0 25px; margin: 0 25px;
} }
} }
@ -172,8 +172,8 @@ header h2 {
} }
nav a { nav a {
font-size: 3.5vh; font-size: 1.823vw;
margin-bottom: 5vh; margin-bottom: 2.604vw;
} }
header { header {
@ -182,22 +182,22 @@ header h2 {
} }
header h1 { header h1 {
font-size: 10vh; font-size: 5.208vw;
} }
header h2 { header h2 {
font-size: 5vh; font-size: 2.604vw;
padding-right: 0; padding-right: 0;
} }
.icons { .icons {
flex-direction: row; flex-direction: row;
position: absolute; position: absolute;
bottom: 30vh; bottom: 15.625vw;
} }
.icons i { .icons i {
font-size: 6vh; font-size: 3.125vw;
margin: 0 5px; margin: 0 5px;
} }
} }
@ -225,12 +225,12 @@ header h2 {
} }
#about h1 { #about h1 {
font-size: 8vh; font-size: 4.167vw;
margin-bottom: 3vh; margin-bottom: 1.563vw;
} }
#about p { #about p {
font-size: 3vh; font-size: 1.563vw;
width: 50%; width: 50%;
text-align: center; text-align: center;
} }
@ -238,7 +238,7 @@ header h2 {
/* About section media query for tablets */ /* About section media query for tablets */
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
#about p { #about p {
font-size: 2.5vh; font-size: 1.302vw;
width: 80%; width: 80%;
} }
} }
@ -246,10 +246,10 @@ header h2 {
/* About section media query for mobile */ /* About section media query for mobile */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#about h1 { #about h1 {
font-size: 6vh; font-size: 3.125vw;
} }
#about p { #about p {
font-size: 2.5vh; font-size: 1.302vw;
width: 80%; width: 80%;
} }
} }
@ -270,9 +270,9 @@ header h2 {
} }
.slider__nav { .slider__nav {
width: 2vh; width: 1.042vw;
height: 2vh; height: 1.042vw;
margin: 2vh 1vh; margin: 1.042vw 0.521vw;
border-radius: 50%; border-radius: 50%;
z-index: 10; z-index: 10;
outline: 14px solid white; outline: 14px solid white;
@ -325,26 +325,26 @@ header h2 {
} }
.slider__caption { .slider__caption {
font-size: 8vh; font-size: 4.167vw;
margin: 3vh; margin: 1.563vw;
max-width: 75%; max-width: 75%;
} }
.slider__txt { .slider__txt {
color: white; color: white;
max-width: 30%; max-width: 30%;
font-size: 3vh; font-size: 1.563vw;
} }
.slider__button { .slider__button {
font-size: 3vh; font-size: 1.563vw;
padding: .75vh 2vh; padding: 0.391vw 1.042vw;
border-radius: 5px; border-radius: 5px;
background: #333; background: #333;
color: white; color: white;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
margin-right: 2vh; margin-right: 1.042vw;
} }
.slider__button:hover { .slider__button:hover {
@ -359,40 +359,40 @@ header h2 {
max-width: 95%; max-width: 95%;
} }
.slider__txt { .slider__txt {
font-size: 2.5vh; font-size: 1.302vw;
max-width: 80%; max-width: 80%;
} }
.slider__button { .slider__button {
font-size: 2.5vh; font-size: 1.302vw;
} }
.slider__nav { .slider__nav {
margin-bottom: 10vh; margin-bottom: 5.208vw;
} }
} }
/* Projects section media query for mobile */ /* Projects section media query for mobile */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.slider__caption { .slider__caption {
font-size: 6vh; font-size: 3.125vw;
max-width: 95%; max-width: 95%;
} }
.slider__txt { .slider__txt {
font-size: 2.5vh; font-size: 1.302vw;
max-width: 80%; max-width: 80%;
} }
.slider__button { .slider__button {
font-size: 2.5vh; font-size: 1.302vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
margin-bottom: 2.5vh; margin-bottom: 1.302vw;
} }
.slider__nav { .slider__nav {
margin-bottom: 5vh; margin-bottom: 2.604vw;
} }
} }