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

Optimize for mobile/tablet

Browse Source
This commit is contained in:
Parker Meinershagen 2023-08-28 13:38:07 -05:00
parent 6b9f9a4181
commit d9aa8eb008
1 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
style.css
View File

@ -50,10 +50,17 @@ footer a:hover {
cursor: pointer; cursor: pointer;
} }
/* Media query for footer on tablets */
@media screen and (max-width: 1280px) {
footer {
font-size: 2.5vw;
}
}
/* 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: 1.432vw; font-size: 5vw;
} }
} }
@ -141,16 +148,16 @@ header h2 {
/* 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: 1.302vw; font-size: 4vw;
margin-bottom: 3.646vw; margin-bottom: 3.646vw;
} }
header h1 { header h1 {
font-size: 5.208vw; font-size: 12vw;
} }
header h2 { header h2 {
font-size: 2.604vw; font-size: 7vw;
padding-right: 25px; padding-right: 25px;
} }
@ -159,21 +166,30 @@ header h2 {
} }
.icons i { .icons i {
font-size: 2.604vw; font-size: 7vw;
margin: 0 25px; margin: 0 25px;
} }
.fa-angle-down {
font-size: 5vw;
bottom: 15vw;
}
} }
/* Main section media query for mobile */ /* Main section media query for mobile */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#hamburger i,
#x i {
font-size: 8vw;
}
nav { nav {
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
} }
nav a { nav a {
font-size: 1.823vw; font-size: 7vw;
margin-bottom: 2.604vw; margin-bottom: 15vw;
} }
header { header {
@ -182,24 +198,29 @@ header h2 {
} }
header h1 { header h1 {
font-size: 5.208vw; font-size: 17vw;
} }
header h2 { header h2 {
font-size: 2.604vw; font-size: 12vw;
padding-right: 0; padding-right: 0;
} }
.icons { .icons {
flex-direction: row; flex-direction: row;
position: absolute; position: absolute;
bottom: 15.625vw; bottom: 75vw;
} }
.icons i { .icons i {
font-size: 3.125vw; font-size: 12vw;
margin: 0 5px; margin: 0 5px;
} }
.fa-angle-down {
font-size: 8vw;
bottom: 20vw;
}
} }
/* Create the keyframes fade in */ /* Create the keyframes fade in */
@ -237,8 +258,11 @@ 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 h1 {
font-size: 10vw;
}
#about p { #about p {
font-size: 1.302vw; font-size: 4vw;
width: 80%; width: 80%;
} }
} }
@ -246,10 +270,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: 3.125vw; font-size: 12vw;
} }
#about p { #about p {
font-size: 1.302vw; font-size: 5vw;
width: 80%; width: 80%;
} }
} }
@ -357,42 +381,49 @@ header h2 {
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
.slider__caption { .slider__caption {
max-width: 95%; max-width: 95%;
font-size: 10vw;
} }
.slider__txt { .slider__txt {
font-size: 1.302vw; font-size: 4vw;
max-width: 80%; max-width: 80%;
} }
.slider__button { .slider__button {
font-size: 1.302vw; font-size: 4vw;
} }
.slider__nav { .slider__nav {
margin-bottom: 5.208vw; margin-bottom: 2.64vw;
width: 3vw;
height: 3vw;
margin: 0 2vw 10vw 2vw;
} }
} }
/* 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: 3.125vw; font-size: 12vw;
max-width: 95%; max-width: 95%;
} }
.slider__txt { .slider__txt {
font-size: 1.302vw; font-size: 5vw;
max-width: 80%; max-width: 80%;
} }
.slider__button { .slider__button {
font-size: 1.302vw; font-size: 5vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
margin-bottom: 1.302vw; margin-bottom: 6vw;
} }
.slider__nav { .slider__nav {
margin-bottom: 2.604vw; margin-bottom: 2.64vw;
width: 5vw;
height: 5vw;
margin: 0 2vw 10vw 2vw;
} }
} }