implemented responsive portfolio and adjusted font sizes globally.
This commit is contained in:
+44
-20
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user