fixed bug regarding PDF viewer being cut off, though it isn't resizing for mobile. implemented desktop-only layout of SLCC e-portfolio
This commit is contained in:
Joshua Ashton
+200
-32
@@ -55,6 +55,14 @@ h4 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2rem, 3vw, 4rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
width: max-content;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.5rem, 2vw, 3rem);
|
||||
}
|
||||
@@ -90,6 +98,30 @@ p {
|
||||
0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
|
||||
}
|
||||
|
||||
.center-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/**SWIPER PAGES**/
|
||||
.swiper {
|
||||
width: 100vw;
|
||||
@@ -111,14 +143,16 @@ p {
|
||||
}
|
||||
|
||||
/**ACTIVE PAGE ANIMATIONS**/
|
||||
#header,
|
||||
.header,
|
||||
#skill-cards,
|
||||
#project-section,
|
||||
#project-cards-section,
|
||||
#contact-section {
|
||||
opacity: 0;
|
||||
}
|
||||
.swiper-slide-active #header,
|
||||
|
||||
.swiper-slide-active .header,
|
||||
#slcc-splash .header,
|
||||
.swiper-slide-active #skill-cards,
|
||||
.swiper-slide-active #project-section,
|
||||
.swiper-slide-active #project-cards-section,
|
||||
@@ -126,7 +160,8 @@ p {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header,
|
||||
.swiper-slide-active .header,
|
||||
#slcc-splash .header,
|
||||
.swiper-slide-active #skill-cards,
|
||||
.swiper-slide-active #project-section,
|
||||
.swiper-slide-active #project-cards-section,
|
||||
@@ -135,7 +170,8 @@ p {
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header,
|
||||
.swiper-slide-active .header,
|
||||
#slcc-splash .header,
|
||||
.swiper-slide-active #project-section,
|
||||
.down-indicator {
|
||||
animation-delay: 0.2s;
|
||||
@@ -168,38 +204,38 @@ p {
|
||||
height: 100vh;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 40% 40% 10%;
|
||||
column-gap: 10vh;
|
||||
column-gap: 5%;
|
||||
}
|
||||
|
||||
#header {
|
||||
.header {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 55% 45%;
|
||||
grid-template-columns: 30% 60%;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
.header-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header-image {
|
||||
.header-image {
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header-image img {
|
||||
.header-image img {
|
||||
width: calc(var(--width) / 2);
|
||||
filter: drop-shadow(5px 6px 5px rgba(36, 36, 42, 0.5));
|
||||
user-select: none;
|
||||
@@ -449,29 +485,152 @@ p {
|
||||
|
||||
#resume-section {
|
||||
margin: 2vw;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/**PDF Viewer**/
|
||||
.pdf-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
height: 70vh;
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 90% 10%;
|
||||
}
|
||||
|
||||
.pdf-document {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
width: max-content;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.pdf-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.pdf-button {
|
||||
width: 100%;
|
||||
background-color: #ebd2ff;
|
||||
color: #4a245e;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 1vw;
|
||||
margin: 1vw;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.pdf-button span {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #4a245e;
|
||||
font-size: clamp(1rem, 2rem, 3rem);
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.pdf-button:hover,
|
||||
.pdf-button:hover span {
|
||||
background-color: #4a245e;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
/**SLCC Navigation Bar**/
|
||||
.nav {
|
||||
width: 90%;
|
||||
margin-top: 3vw;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: grid;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
border-left: 2px solid #4a245e;
|
||||
border-right: 2px solid #4a245e;
|
||||
font-size: clamp(1rem, 1.5vw, 1.25rem);
|
||||
list-style: none;
|
||||
padding: 2vw;
|
||||
color: #4a245e;
|
||||
background-color: #ebd2ff;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item-active {
|
||||
background-color: #4a245e;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
/**SLCC Course View**/
|
||||
#course-view-container {
|
||||
height: 70vh;
|
||||
width: 90%;
|
||||
display: grid;
|
||||
grid-template-columns: 10% 80%;
|
||||
grid-template-rows: 100%;
|
||||
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
#course-view-selector {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(7, 10%);
|
||||
}
|
||||
|
||||
.course-nav-selector {
|
||||
border: 2px solid #4a245e;
|
||||
background-color: #ebd2ff;
|
||||
color: #4a245e;
|
||||
height: 100%;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.course-nav-selector:hover,
|
||||
.course-nav-selector-active {
|
||||
color: #ebd2ff;
|
||||
background-color: #4a245e;
|
||||
}
|
||||
|
||||
.course-header {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.course-section {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
display: grid;
|
||||
grid-template-columns: 47.5% 47.5%;
|
||||
column-gap: 5%;
|
||||
}
|
||||
|
||||
.course-section-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-page-slider {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-rtl .swiper-button-next {
|
||||
color: #ebd2ff !important;
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-rtl .swiper-button-prev {
|
||||
color: #ebd2ff !important;
|
||||
}
|
||||
|
||||
.swiper-button-prev.swiper-button-disabled {
|
||||
color: #ebd2ff !important;
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
color: #ebd2ff !important;
|
||||
}
|
||||
|
||||
/**Animations**/
|
||||
@@ -546,18 +705,34 @@ p {
|
||||
}
|
||||
|
||||
@media (max-width: 790px) {
|
||||
#primary {
|
||||
#primary,
|
||||
#slcc-splash {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 40% 40% 10%;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
#header {
|
||||
grid-template-columns: 60% 40%;
|
||||
.header {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 50% 50%;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
margin: 0;
|
||||
.header .header-image {
|
||||
max-height: 20vh;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header .header-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -580,13 +755,6 @@ p {
|
||||
font-size: clamp(0.5rem, 0.8rem, 1rem);
|
||||
}
|
||||
|
||||
#header-image {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.skill-card-header {
|
||||
border-radius: 18px 18px 18px 18px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user