Gogh/sass/main.scss

@charset "UTF-8";
@import './_base.scss';
@import './terminal.scss';
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  General
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.btn {
  display         : inline-block;
  padding         : 0.5rem 2.5rem 0.55rem;
  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       : 16px;
  cursor          : pointer;
  transition      : all 0.3s ease;
}

.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;
  align-items     : center;
  justify-content : center;
  background-color: #0d1926;

  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;
    font-weight: 400;
    font-size  : 2.8rem;
  }

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

  .btn-copy {
    position  : absolute;
    right     : 10px;
    bottom    : 14px;
    display   : inline-block;
    width     : 25px;
    cursor    : pointer;
    transition: all 0.3s ease;

    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;
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  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%;
  }

  .filters {
    display        : flex;
    justify-content: center;
    margin         : 0 0 60px;

    .btn {
      position: relative;
      margin  : 0 15px;

      &: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 {
        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;
      }

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

      &.active::before {
        position        : absolute;
        right           : 0;
        bottom          : -10px;
        left            : 0;
        width           : 100%;
        height          : 1px;
        background-color: #0d1926;
        content         : " ";
        opacity         : 1;
      }
    }
  }
}
/**
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ·······  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;
  }
}