Gogh/sass/main.scss

@charset "UTF-8";
@import './_base.scss';
@import './terminal.scss';
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  General
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.btn {
  display         : inline-block;
  padding         : 0.8rem 2.5rem 0.85rem;
  outline         : none;
  border          : 1px solid #0d1926;
  border-radius   : 0;
  background-color: transparent;
  color           : #0d1926;
  text-align      : center;
  text-decoration : none;
  text-transform  : uppercase;
  font-size       : 1.6rem;
  cursor          : pointer;
  transition      : all 0.3s ease;
  @include m360 {}
  @include m450 {}
  @include m576 {}
  @include m650 {
    font-size       : 1.4rem;
    padding: 0.57rem 1.5rem 0.55rem;
  }
  @include m768 {
    padding:  1.3rem 2.5rem 0.85rem;
  }
  @include m900 {}
  @include m992 {}
  @include m1200 {}
  @include m1400 {}
  @include m1800 {}
  @include m2200 {}
}

.btn:hover {
  background-color: #0d1926;
  color           : #ffffff;
}

.btn:active {
  position: relative;
  top     : 1px;
}

.btn:focus {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Header
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.gogh-header {
  display         : flex;
  background-color: #0d1926;
  align-items     : center;
  justify-content : center;

  h1 {
    width      : 500px;
    text-align : center;
    font-size  : 1rem;
    line-height: 1;

    span {
      display    : block;
      overflow   : hidden;
      color      : #fff;
      text-indent: 100%;
      white-space: nowrap;
    }

    img {
      width : 100%;
      height: auto;
    }
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Content
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.gogh-content {
  padding         : 50px 0;
  min-height      : 200vh;
  background-color: #e7e7e7;
  color           : #595647;

  h2 {
    margin     : 0 0 25px;
    color      : #595647;
    text-align : center;
    font-weight: 700;
    font-size  : 2.0rem;
    line-height: 1.2;
    @include m360 {}
    @include m450 {}
    @include m576 {}
    @include m650 {}
    @include m768 {
      text-align : left;
      font-weight: 400;
      font-size  : 2.8rem;
      line-height: 1;
    }
    @include m900 {}
    @include m992 {}
    @include m1200 {}
    @include m1400 {}
    @include m1800 {}
    @include m2200 {}
  }

  h3 {
    @include m360 {}
    @include m450 {
      font-size: 2.8rem;
    }
    @include m576 {}
    @include m650 {
      font-size: 3.2rem;
    }
    @include m768 {}
    @include m900 {}
    @include m992 {}
    @include m1200 {}
    @include m1400 {}
    @include m1800 {}
    @include m2200 {}
  }

  h4 {
    font-size: 1.8rem;
    @include m360 {}
    @include m450 {
      font-size: 2.2rem;
    }
    @include m576 {}
    @include m650 {
      font-size: 2.8rem;
    }
    @include m768 {}
    @include m900 {}
    @include m992 {}
    @include m1200 {}
    @include m1400 {}
    @include m1800 {}
    @include m2200 {}

    span {
      font-weight: 300;
      font-size  : 1.4rem;
    }
  }

  p {
    margin     : 0 0 40px;
    color      : #595647;
    font-size  : 1.6rem;
    line-height: 1.4;
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Code
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.code-wrap {
  position: relative;
  margin  : 0 0 40px;

  .language-bash {
    padding: 0.8rem 0.8rem 1.5rem;
    @include m360 {}
    @include m450 {
      padding: 1.5rem 1.2rem;
    }
    @include m576 {}
    @include m650 {}
    @include m768 {}
    @include m900 {}
    @include m992 {}
    @include m1200 {}
    @include m1400 {}
    @include m1800 {}
    @include m2200 {}
  }

  .code-holder {
    position: relative;
  }

  .btn-copy {
    position        : absolute;
    right           : 0;
    bottom          : 0;
    display         : inline-flex;
    padding         : 5px 10px;
    height          : 100%;
    background-color: #F5F2F0;
    cursor          : pointer;
    transition      : all 0.3s ease;
    @include m360 {}
    @include m450 {}
    @include m576 {}
    @include m650 {
      max-width: 50px;
    }
    @include m768 {}
    @include m900 {}
    @include m992 {}
    @include m1200 {}
    @include m1400 {}
    @include m1800 {}
    @include m2200 {}

    svg {
      width     : 100%;
      height    : auto;
      transition: all 0.3s ease;
      fill      : #363636;
    }

    &:hover {
      svg {
        animation-name    : anim-gogh;
        animation-duration: 8s;
        fill              : #FF0883;
      }
    }
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Github
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.github-int {
  margin    : 0 0 40px;
  text-align: center;
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Filters
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.filters {
  display        : flex;
  margin         : 0 0 40px;
  justify-content: center;
  flex-direction: column;
  @include m360 {}
  @include m450 {}
  @include m576 {}
  @include m650 {
    flex-direction: row;
  }
  @include m768 {}
  @include m900 {}
  @include m992 {}
  @include m1200 {}
  @include m1400 {}
  @include m1800 {}
  @include m2200 {}

  .btn {
    position: relative;
    margin  : 0 0 20px 0;
    @include m360 {}
    @include m450 {}
    @include m576 {}
    @include m650 {
      margin  : 0 15px;
    }
    @include m768 {

    }
    @include m900 {}
    @include m992 {}
    @include m1200 {}
    @include m1400 {}
    @include m1800 {}
    @include m2200 {}

    &:hover {
      &::before {
        position          : absolute;
        right             : 0;
        bottom            : -10px;
        left              : 0;
        margin            : 0 auto;
        width             : 100%;
        height            : 1px;
        background-color  : #0d1926;
        content           : " ";
        opacity           : 1;
        animation-name    : anim-gogh-bg;
        animation-duration: 8s;
      }
    }

    &::before {
      @include m360 {}
      @include m450 {}
      @include m576 {}
      @include m650 {}
      @include m768 {
        position        : absolute;
        right           : 0;
        bottom          : -10px;
        left            : 0;
        margin          : 0 auto;
        width           : 0;
        height          : 1px;
        background-color: #0d1926;
        content         : " ";
        opacity         : 0;
        transition      : all 0.3s ease;
      }
      @include m900 {}
      @include m992 {}
      @include m1200 {}
      @include m1400 {}
      @include m1800 {}
      @include m2200 {}

    }

    &.active {
      background-color: #0d1926;
      color           : #e7e7e7;
    }

    &.active::before {
      @include m360 {}
      @include m450 {}
      @include m576 {}
      @include m650 {}
      @include m768 {
        position        : absolute;
        right           : 0;
        bottom          : -10px;
        left            : 0;
        width           : 100%;
        height          : 1px;
        background-color: #0d1926;
        content         : " ";
        opacity         : 1;
      }
      @include m900 {}
      @include m992 {}
      @include m1200 {}
      @include m1400 {}
      @include m1800 {}
      @include m2200 {}

    }
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Filters Bg
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.filter-background {
  margin: 0 0 70px;
  border: 1px solid #ffffff;

  .btn--filter-bg {
    position  : relative;
    padding   : 0;
    width     : 5%;
    height    : 40px;
    border    : none;
    cursor    : pointer;
    transition: all 0.3s ease, border-radius 0.9s ease;

    span {
      position      : absolute;
      bottom        : -12px;
      display       : none;
      padding       : 1px 3px;
      width         : 100%;
      border-radius : 1px;
      background    : #0d1926;
      color         : #ffffff;
      text-align    : center;
      text-transform: none;
      font-size     : 0.6rem;
      transition    : all 0.3s ease;
    }

    &:hover {
      z-index      : 20;
      height       : 40px;
      border       : 1px solid #414141;
      border-radius: 1px;
      transform    : scale(1.6);

      span {
        display: block;
      }
    }
  }

  .btn--filter-bg.active {
    z-index      : 10;
    border       : 1px solid #414141;
    border-radius: 1px;
    transform    : scale(1.6);

    span {
      display: block;
    }
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Main Content
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.gogh-terminal {
  @include m360 {}
  @include m450 {}
  @include m576 {}
  @include m650 {}
  @include m768 {}
  @include m900 {}
  @include m992 {}
  @include m1200 {}
  @include m1400 {
    margin   : 0 auto;
    max-width: 96%;
  }
  @include m1800 {
    max-width: 84%;
  }
  @include m2200 {
    max-width: 74%;
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  Animations
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
@keyframes anim-gogh {
  25% {
    fill: #83FF08;
  }

  37.5% {
    fill: #FF8308;
  }

  50% {
    fill: #0883FF;
  }

  62.5% {
    fill: #8308FF;
  }

  75% {
    fill: #08FF83;
  }

  87.5% {
    fill: #363636;
  }

  100% {
    fill: #FF0883;
  }
}
@keyframes anim-gogh-bg {
  25% {
    background-color: #FF0883;
  }

  37.5% {
    background-color: #FF8308;
  }

  50% {
    background-color: #0883FF;
  }

  62.5% {
    background-color: #8308FF;
  }

  75% {
    background-color: #3dba98;
  }

  87.5% {
    background-color: #363636;
  }

  100% {
    background-color: #47af32;
  }
}