Contents

/* -----------------------------------------------------------------
    - Single project
----------------------------------------------------------------- */ 

.header-project {
  margin-top: rem(24px);
  margin-bottom: rem(40px);
  position: relative;

  @media only screen and (max-width: $small) {
    margin-top: rem(16px);
    margin-bottom: rem(30px);
  }
  
  .title {
	  margin-bottom: rem(24px);
	  @include position(absolute, $bottom: 0, $left: 0);
    z-index: 2;

  	@media only screen and (max-width: $small) {
      font-size: rem(20px);
	    margin-bottom: rem(12px);
  	}
  }
  
  &__image-wrap {
    height: rem(400px);
	  margin-left: rem(-30px);
	  margin-right: rem(-30px);
	  position: relative;
	
	  &::before {
      content: '';
	    background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.4) 68.23%, rgba(13, 13, 13, 0.4) 100%);
	    height: 100%;
	    @include position(absolute, $top: 0, $left: 0);
	    width: 100%;
	    z-index: 1;
  	}

	  @media only screen and (max-width: $small) {
	    height: rem(250px);
	    margin-left: rem(-15px);
	    margin-right: rem(-15px);
	    margin-bottom: rem(24px);
  	}
  }
}

/* Slider */
.js-carousel-project {
  margin-top: rem(38px);

  .swiper-pagination {
    margin-top: rem(30px);
  }

  @media only screen and (max-width: $small) {
    margin-top: rem(24px);
  }
}

.swiper-slide-project {
  height: rem(315px);
	max-width: rem(560px);
  opacity: .5;
  overflow: hidden;
  transition: opacity .3s ease-in-out;

  &.swiper-slide-active {
    opacity: 1;
  }

  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  @media only screen and (max-width: $small) {
    height: rem(148px);
  }
}

/* Button back */
.btn-back {
  color: var(--color-paragraph);
  @include flex($align: center);

  &:hover {
    color: var(--color-accent);
  }

  i {
    margin-right: rem(8px);
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
CV-Portfolio-0.0.1	assets/css/app/_single-project.scss