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

96
style.css
View File

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