174 lines
3.4 KiB
SCSS
174 lines
3.4 KiB
SCSS
@use "../../assets/stylesheets/base/colors" as *;
|
|
@use "../../assets/stylesheets/abstracts/mixins" as *;
|
|
|
|
#projects {
|
|
.swiper {
|
|
width: 100%;
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
@include for-mobile {
|
|
background-size: 150%;
|
|
background-position: 50%;
|
|
}
|
|
|
|
&#active-slide-0 {
|
|
background: radial-gradient(
|
|
31.95% 51.75% at 50% 51.75%,
|
|
rgba(255, 0, 92, 0.4) 0%,
|
|
rgba(23, 23, 23, 0) 90%
|
|
);
|
|
}
|
|
|
|
&#active-slide-1 {
|
|
background: radial-gradient(
|
|
31.95% 51.75% at 50% 51.75%,
|
|
rgba(255, 0, 0, 0.5) 0%,
|
|
rgba(23, 23, 23, 0) 90%
|
|
);
|
|
}
|
|
&#active-slide-2 {
|
|
background: radial-gradient(
|
|
31.95% 51.75% at 50% 51.75%,
|
|
rgba(255, 196, 105, 0.7) 0%,
|
|
rgba(23, 23, 23, 0) 90%
|
|
);
|
|
}
|
|
&#active-slide-3 {
|
|
background: radial-gradient(
|
|
31.95% 51.75% at 50% 51.75%,
|
|
rgba(37, 192, 255, 0.9) 0%,
|
|
rgba(23, 23, 23, 0) 90%
|
|
);
|
|
}
|
|
&#active-slide-4 {
|
|
background: radial-gradient(
|
|
31.95% 51.75% at 50% 51.75%,
|
|
rgba(0, 231, 10, 0.4) 0%,
|
|
rgba(23, 23, 23, 0) 90%
|
|
);
|
|
}
|
|
&#active-slide-5 {
|
|
background: radial-gradient(
|
|
31.95% 51.75% at 50% 51.75%,
|
|
rgba(245, 194, 26, 0.4) 0%,
|
|
rgba(23, 23, 23, 0) 90%
|
|
);
|
|
}
|
|
|
|
@include for-tablets {
|
|
&#active-slide-0,
|
|
&#active-slide-1,
|
|
&#active-slide-2,
|
|
&#active-slide-3,
|
|
&#active-slide-4,
|
|
&#active-slide-5 {
|
|
background-size: 150%;
|
|
background-position: 50%;
|
|
}
|
|
}
|
|
|
|
// &:before {
|
|
// content: "";
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// position: absolute;
|
|
// background: linear-gradient(
|
|
// 90deg,
|
|
// rgba(17, 17, 17, 1) 0%,
|
|
// rgba(255, 255, 255, 0) 10%,
|
|
// rgba(255, 255, 255, 0) 90%,
|
|
// rgba(17, 17, 17, 1) 100%
|
|
// );
|
|
// z-index: 4;
|
|
// pointer-events: none;
|
|
// }
|
|
}
|
|
|
|
.swiper-container {
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
.swiper-slide {
|
|
// width: 50%;
|
|
|
|
background-position: center;
|
|
background-size: cover;
|
|
width: 300px;
|
|
height: 300px;
|
|
|
|
transition: all 0.5s;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
h2 {
|
|
width: max-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.img-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
p {
|
|
&:last-of-type {
|
|
text-align: center;
|
|
color: $color-text-secondary;
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
// width: 66%;
|
|
// background: linear-gradient(
|
|
// 90deg,
|
|
// rgba(0, 0, 0, 0) 0%,
|
|
// rgba(17, 17, 17, 1) 5%,
|
|
// rgba(17, 17, 17, 1) 95%,
|
|
// rgba(0, 0, 0, 0) 100%
|
|
// );
|
|
}
|
|
|
|
.project-info {
|
|
div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
padding-top: 33px;
|
|
margin: 0 auto;
|
|
width: 50%;
|
|
white-space: nowrap;
|
|
|
|
@include for-mobile {
|
|
width: 66%;
|
|
}
|
|
|
|
p {
|
|
margin: 0 29px;
|
|
text-transform: uppercase;
|
|
color: $color-accent-primary;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.swiper-slide-active) {
|
|
h2 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.project-info {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-slide-active {
|
|
width: 600px;
|
|
pointer-events: none;
|
|
}
|
|
}
|