implemented responsive portfolio and adjusted font sizes globally.

This commit is contained in:
Joshua Ashton
2025-01-08 21:26:33 -07:00
parent 7fe060c096
commit d83699380f
5 changed files with 233 additions and 183 deletions
+44 -20
View File
@@ -53,7 +53,7 @@ li {
}
h1 {
font-size: clamp(4.25rem, 5.5vw, 10rem);
font-size: clamp(4rem, 5vw, 10rem);
font-weight: 600;
letter-spacing: 2px;
width: max-content;
@@ -67,11 +67,11 @@ h3 {
}
h2 {
font-size: clamp(2rem, 3vw, 4rem);
font-size: clamp(3rem, 4vw, 7rem);
}
h3 {
font-size: clamp(1.5rem, 2rem, 3rem);
font-size: clamp(2rem, 3rem, 6rem);
}
h4 {
@@ -85,20 +85,21 @@ h6 {
}
h4 {
font-size: clamp(1rem, 1.5vw, 2rem);
font-size: clamp(1rem, 1.5vw, 4rem);
}
h5 {
font-size: clamp(1rem, 1.25vw, 1.5rem);
font-size: clamp(1rem, 1.25vw, 3.5rem);
}
h6 {
font-size: clamp(1rem, 1.125vw, 1.25rem);
font-size: clamp(1rem, 1.125vw, 2rem);
}
p {
font-weight: 200;
font-size: clamp(1rem, 1.5vw, 2rem);
p,
li {
font-weight: 300;
font-size: clamp(1rem, 1.1vw, 1.5rem);
color: var(--text);
}
@@ -303,8 +304,8 @@ p {
border-radius: 18px 18px 0 0;
}
.skill-card-header h3 {
font-size: clamp(1.3rem, 2vw, 3rem);
.skill-card-header h4 {
font-weight: 700;
text-align: right;
}
@@ -324,7 +325,6 @@ p {
.card ul li {
list-style: none;
font-size: clamp(1rem, 1.25vw, 1.5rem);
color: var(--dark-0);
}
@@ -377,7 +377,6 @@ p {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 5vw;
}
/* Tooltip container */
@@ -449,6 +448,7 @@ p {
}
.project-text p {
font-weight: 400;
display: flex;
flex-direction: column;
justify-content: center;
@@ -472,7 +472,6 @@ p {
}
.feature-list li {
font-size: clamp(1rem, 1.5rem, 2rem);
color: var(--text);
}
@@ -719,28 +718,38 @@ p {
width: 50%;
}
.job {
width: 100%;
.jobs,
.education-section {
border-top: 1px solid var(--accent-0);
width: 100%;
}
.job,
.edu {
width: 100%;
padding: 0vw 1vw 1vw 1vw;
}
.job-header-row {
.job-header-row,
.edu-header-row {
display: grid;
grid-template-columns: 70% 30%;
align-items: center;
}
.job-time {
.job-time,
.edu-time {
justify-self: right;
}
.company-and-location {
.company-and-location,
.edu-and-degree {
display: flex;
align-items: center;
}
.company-and-location h6 {
.company-and-location h6,
.edu-and-degree h6 {
margin-left: .25vw;
}
@@ -753,6 +762,21 @@ p {
font-weight: 300;
}
.resume-skills {
border-top: 1px solid var(--accent-0);
width: 100%;
}
.resume-skills-skill {
display: flex;
align-items: center;
}
.resume-skills-skill p {
margin-left: .5vw;
padding: 1vw;
}
/**Animations**/
@keyframes background-fade {
from {