community.scss 1.81 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13
.community__hero {
  background-color: $space-b;
  position: relative;
  @include justify-content(flex-end);

  @media screen and (min-width: $tablet) {
    .container {
      @include flexbox();
      @include justify-content(flex-end);

      background-size: 60% auto;
      background-image: url("../images/index/join-community.jpg");
      background-repeat: repeat-y;
Danilo Woznica's avatar
Danilo Woznica committed
14
      animation: positionXCommunity 50s linear infinite;
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 50%;
      bottom: 0;
      background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        $space-b 100%
      );
    }

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(
        180deg,
        $space 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 70%,
        $space 100%
      );
    }
  }
}

Danilo Woznica's avatar
Danilo Woznica committed
49
@keyframes positionXCommunity {
50
  0% {
Danilo Woznica's avatar
Danilo Woznica committed
51
    background-position: left 3244px;
52 53
  }
  100% {
Danilo Woznica's avatar
Danilo Woznica committed
54
    background-position: left 0;
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
  }
}

.community__hero--wrap {
  padding: 10vw $gutter;
  position: relative;
  z-index: 2;

  @media screen and (min-width: $tablet) {
    max-width: 48.5%;
  }
}

.community__hero_github-link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 100%;
  margin-top: 0.6em;
  transition: all 0.3s ease;
  color: #fff;

  img {
    display: inline-block;
    position: relative;
    top: 0.1em;
    margin-right: 0.5em;
    transition: all 0.3s ease;
  }

  &:hover {
    color: $grey-light;

    img {
      opacity: 0.7;
    }
  }
}


97
.community__hero-install-btn {
98 99 100 101 102 103 104
  @include flexbox();
  @include align-items(center);

  img {
    margin-right: .5em;
  }
}