organized and refactored CSS for clarity and future edits. tweaked styling, production ready.
This commit is contained in:
Joshua Ashton
+187
-243
@@ -7,6 +7,7 @@
|
||||
#4a245e
|
||||
*/
|
||||
|
||||
/**GLOBAL**/
|
||||
:root {
|
||||
--width: 480px;
|
||||
}
|
||||
@@ -20,31 +21,68 @@
|
||||
font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#84509f 0%,
|
||||
#5e3276 39%,
|
||||
hsl(279deg 62% 19%) 61%,
|
||||
hsl(279deg 94% 7%) 100%
|
||||
#39124e 61%,
|
||||
#170123 100%
|
||||
);
|
||||
background-size:
|
||||
300% 100%,
|
||||
cover;
|
||||
animation: background-fade 4s linear infinite;
|
||||
animation-direction: alternate;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(4.25rem, 5.5vw, 10rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
width: max-content;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
color: #ebd2ff;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.5rem, 2vw, 3rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1rem, 1.5vw, 1.25rem);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 200,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
font-size: 5vw;
|
||||
color: #ebd2ff;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
|
||||
0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
|
||||
0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
|
||||
}
|
||||
|
||||
/**SWIPER PAGES**/
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
@@ -57,6 +95,32 @@ body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/**ACTIVE PAGE ANIMATIONS**/
|
||||
.swiper-slide-active #header,
|
||||
.swiper-slide-active #skills-section,
|
||||
.swiper-slide-active #project-section,
|
||||
.swiper-slide-active #project-cards-section {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header,
|
||||
.swiper-slide-active #skills-section,
|
||||
.swiper-slide-active #project-section,
|
||||
.swiper-slide-active #project-cards-section {
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header,
|
||||
.swiper-slide-active #project-section {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section,
|
||||
.swiper-slide-active #project-cards-section {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
/**SWIPER BULLETS**/
|
||||
.swiper-pagination-bullet {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@@ -71,6 +135,7 @@ body {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
/**PRIMARY PAGE**/
|
||||
#primary {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
@@ -79,108 +144,6 @@ body {
|
||||
column-gap: 1vh;
|
||||
}
|
||||
|
||||
#project-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 5vw;
|
||||
}
|
||||
|
||||
#project-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 10% 80%;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 100%;
|
||||
overflow: hidden;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.project-card .img-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project-card img {
|
||||
height: 100%;
|
||||
box-shadow:
|
||||
0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
|
||||
0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
|
||||
0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
|
||||
}
|
||||
|
||||
.project-text-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 3vw;
|
||||
background-color: #4a245e;
|
||||
box-shadow:
|
||||
0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
|
||||
0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
|
||||
0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
|
||||
}
|
||||
|
||||
.project-text {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 15% 35% 40% 15%;
|
||||
}
|
||||
|
||||
.project-text h3 {
|
||||
font-size: clamp(3rem, 3.5rem, 4rem);
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.project-text p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: clamp(1rem, 1.5rem, 2rem);
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
#project-cards-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: bottom;
|
||||
align-items: bottom;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
font-size: clamp(1rem, 1.5rem, 2rem);
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@@ -199,64 +162,6 @@ body {
|
||||
justify-content: center;
|
||||
padding-left: 120px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(4.25rem, 5.5vw, 10rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
width: max-content;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
#header-text h3,
|
||||
#header-text h4 {
|
||||
color: #ebd2ff;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#header-text h3 {
|
||||
font-size: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
#header-text h4 {
|
||||
font-size: clamp(1rem, 1.5vw, 1.25rem);
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h1,
|
||||
.swiper-slide-active #header-text h3,
|
||||
.swiper-slide-active #header-text h4,
|
||||
.swiper-slide-active #project-grid-container h1,
|
||||
.swiper-slide-active .project-card {
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h3 {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h4 {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.swiper-slide-active #project-grid-container h1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.swiper-slide-active .project-card {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
#header-image {
|
||||
@@ -276,7 +181,6 @@ h1 {
|
||||
width: calc(var(--width) / 2);
|
||||
filter: drop-shadow(5px 6px 5px rgba(36, 36, 42, 0.5));
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -285,21 +189,6 @@ h1 {
|
||||
animation: imgMoveDown 0.8s ease-in forwards 0.2s;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 200,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
font-size: 5vw;
|
||||
color: #ebd2ff;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#skills-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -309,13 +198,6 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#skills-section h2 {
|
||||
font-size: clamp(3.25rem, 4.5vw, 8rem);
|
||||
color: #ebd2ff;
|
||||
opacity: 0;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 30% 30%;
|
||||
@@ -324,6 +206,12 @@ h1 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.down-indicator {
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
/**SKILL CARDS**/
|
||||
.card {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -331,22 +219,18 @@ h1 {
|
||||
background-color: #ebd2ff;
|
||||
border-radius: 20px;
|
||||
width: 20vw;
|
||||
box-shadow:
|
||||
0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
|
||||
0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
|
||||
0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
|
||||
}
|
||||
|
||||
.card .skill-section-header {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 60%;
|
||||
grid-template-rows: 100%;
|
||||
column-gap: 1vw;
|
||||
column-gap: 20%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
padding: 2vw;
|
||||
padding: 1vw 2vw 1vw 2vw;
|
||||
margin: 0;
|
||||
background-color: #4a245e;
|
||||
border-radius: 18px 18px 0 0;
|
||||
@@ -361,39 +245,9 @@ h1 {
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
font-size: 5vw;
|
||||
height: 5vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.card .skill-section-header h3 {
|
||||
font-size: clamp(1rem, 2vw, 3rem);
|
||||
}
|
||||
|
||||
.card .skill-section-header h3 {
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ebd2ff;
|
||||
}
|
||||
|
||||
.view-button-link {
|
||||
font-size: clamp(1rem, 1.5vw, 2rem);
|
||||
color: #4a245e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding: 1vw;
|
||||
}
|
||||
@@ -404,23 +258,113 @@ h1 {
|
||||
color: #4a245e;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section .cards .card {
|
||||
opacity: 0;
|
||||
/**PROJECTS PAGE**/
|
||||
#project-section {
|
||||
height: 90vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 5vw;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section h2,
|
||||
.swiper-slide-active #skills-section .card {
|
||||
animation: moveCardsDown 0.8s ease-in forwards;
|
||||
#project-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 20% 80%;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section .card {
|
||||
animation-delay: 1.2s;
|
||||
#project-cards-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.down-indicator {
|
||||
opacity: 0;
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
animation-delay: 0.2s;
|
||||
/**PROJECT CARDS**/
|
||||
.project-card {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 100%;
|
||||
overflow: hidden;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project-card .img-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project-card img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.project-text-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2vw;
|
||||
background-color: #4a245e;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.project-text {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 10% 30% 45% 15%;
|
||||
}
|
||||
|
||||
.project-text h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.project-text p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: clamp(1rem, 1.5rem, 2rem);
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ebd2ff;
|
||||
height: 100%;
|
||||
padding-left: 4vw;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
font-size: clamp(1rem, 1.5rem, 2rem);
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
color: #4a245e;
|
||||
background-color: #ebd2ff;
|
||||
border-radius: 18px;
|
||||
font-size: clamp(1rem, 1.5vw, 2rem);
|
||||
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/**Animations**/
|
||||
|
||||
Reference in New Issue
Block a user