src/views/Explore/styles.scss
@import '../../common/SASS/palette';
@import '../../common/SASS/mixins';
.explore-container {
color: white;
text-align: left;
width: 100%;
margin-bottom: 5rem;
margin: 0rem 1rem 1rem 2rem;
@include themify($themes) {
color: themed('text');
}
header {
border-bottom: 1px solid $field-bg;
width: 100%;
margin-bottom: 1rem;
@include themify($themes) {
border-bottom: 1px solid #662a2b31;
}
h1 {
font-size: 2rem;
font-weight: 200;
margin: 1rem 0;
margin-top: 2rem;
}
p {
font-size: 1rem;
font-weight: 200;
margin: 1rem 0;
margin-bottom: 2rem;
}
}
// .header-popular-projects {
// margin-top: 1rem;
// display: flex;
// justify-content: flex-end;
// // grid-template-columns: 20% 33.5%;
// // grid-gap: 2%;
// .large-project-thumbnail {
// width: 100%;
// height: 350px;
// object-fit: cover;
// border-radius: 5px;
// border: 8px solid $field-bg;
// }
// }
.empty-state {
display: flex;
flex-direction: column;
align-content: center;
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 0px;
.empty-icon {
opacity: 0.03;
}
.no-projects {
width: 100%;
text-align: center;
color: $dark-grey;
margin-bottom: 20px;
user-select: none;
opacity: 0.6;
margin-top: 0px;
}
}
.explore-projects-array {
margin-top: 1rem;
display: grid;
grid-template-columns: 22% 22% 22% 22%;
grid-column-gap: 3%;
width: 100%;
@media (max-width: 1300px) {
grid-template-columns: 29% 29% 29%;
}
.project-content {
width: 100%;
height: 14vw;
// height: 11.5rem;
position: relative;
transition: all 0.2s ease-in-out;
border: 8px solid $field-bg;
border-radius: 5px;
overflow: hidden;
margin: 10px 10px 10px 10px;
object-fit: cover;
@media (max-width: 1300px) {
height: 18vw;
}
@include themify($themes) {
border: 8px solid #e7e7e7;
}
.project-info {
position: absolute;
bottom: 0;
width: 100%;
color: $white;
text-decoration: none;
background: $blue;
overflow: hidden;
height: 50px;
display: none;
pointer-events: none;
h1 {
margin-top: 10px;
font-size: 14px;
font-weight: 500;
}
.created {
font-weight: 400;
color: rgba(255, 255, 255, 0.507);
}
}
.project-thumbnail {
object-fit: cover;
width: 22rem;
height: 15rem;
will-change: transform;
transition: 0.1s ease-in-out;
cursor: pointer;
}
}
.project-content:hover {
border: 8px solid $blue;
text-align: left;
will-change: transform;
}
}
.project-content:hover {
.project-info {
display: inline;
animation: slideUp 0.25s ease-in-out;
will-change: transform;
z-index: 1;
}
}
@keyframes slideUp {
from {
height: 0px;
}
to {
height: 50px;
}
}
.explore-tabs-container {
.explore-nav-links {
width: 100%;
text-align: left;
display: flex;
justify-content: space-between;
.explore-nav-div {
display: flex;
}
.links {
margin: 2rem 0.5rem 0.5rem 0;
color: $white;
font-weight: 500;
cursor: pointer;
width: 118px;
height: 70px;
padding: 0.5rem;
border-radius: 2.5px;
text-align: center;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.links:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.linkText {
font-size: 13px;
}
.tabs-0 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url('../../ASSETS/dh_illustrations3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-0:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_illustrations3.jpg');
top: -8px;
}
.tabs-0.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_illustrations3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-1 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url('../../ASSETS/dh_webDesign3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-1:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_webDesign3.jpg');
top: -8px;
}
.tabs-1.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_webDesign3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-2 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url('../../ASSETS/dh_graphicDesign3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-2:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_graphicDesign3.jpg');
top: -8px;
}
.tabs-2.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_graphicDesign3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-3 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url('../../ASSETS/dh_uxDesign3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-3:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_uxDesign3.jpg');
top: -8px;
}
.tabs-3.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_uxDesign3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-4 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url('../../ASSETS/dh_uiDesign3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-4:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_uiDesign3.jpg');
top: -8px;
}
.tabs-4.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_uiDesign3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-5 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('../../ASSETS/dh_motionDesign3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-5:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_motionDesign3.jpg');
top: -8px;
}
.tabs-5.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_motionDesign3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-6 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('../../ASSETS/dh_animation3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-6:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_animation3.jpg');
top: -8px;
}
.tabs-6.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_animation3.jpg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
.tabs-7 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('../../ASSETS/dh_productDesign3.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
}
.tabs-7:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_productDesign3.jpg');
top: -8px;
}
.tabs-7.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_productDesign3.jpg');
@include themify($themes) {
color: $white;
font-weight: bold;
}
}
.active-link:hover {
background-color: $blue;
color: $white;
}
}
.tabs-8 {
@include explore-category-tabs;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../../ASSETS/dh_all.jpeg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
position: relative;
//turned off display,
display: none;
}
.tabs-8:hover {
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_all.jpeg');
top: -8px;
}
.tabs-8.active-link {
color: white;
background-image: linear-gradient(rgba(105, 73, 223, 0.75), rgba(105, 73, 223, 0.75)),
url('../../ASSETS/dh_all.jpeg');
@include themify($themes) {
color: $black;
font-weight: bold;
}
}
}
}