main.scss

@import "node_modules/bootstrap/scss/bootstrap";

//variables
$vendors: (
  '-webkit-', '-moz-', '-ms-', '-o-', ''
);
$font-raleway: 'Raleway', sans-serif;
$font-inconsalita: 'Inconsalita', monospace;
$grey: rgb(177, 173, 173);
$darkgrey: #888;
$black: rgb(20, 20, 20);

//mixins
@mixin prefix($prop, $val) {
  @each $vendor in $vendors {
    #{$vendor}#{$prop}: $val;
  }
}

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
@keyframes fade-in { from { opacity: 0;} to {opacity: 1;}}

body {
  font-family: $font-raleway, sans-serif, Arial, Helvetica;

  .left-sidebar {

    .navbar-nav {
      a {
        margin: 10px;
        font-size: 1.4em;
        font-weight: 700;
        color: $grey;
        @include prefix(transition, color 0.2s ease-out)
      }
      @media (hover: hover) {
        a:hover{
          color: whitesmoke;
        }
      }
      a:active {
        color: whitesmoke;
      }
    }

    .navlogos-desktop {
      margin-top: 50%;
      a {
        .nav-logo {
          font-size: 3em;
          color: $grey;
          @include prefix(transition, color 0.2s ease-out);
        }
        .nav-logo:hover {
          color: whitesmoke;
        }
      }
      a:hover {
        text-decoration: none;
      }
    }
  }

  #intro {
    background-image: url("resources/img/Black-White-City.jpg");
    background-size: cover;
    .intro-content {
      .row{
        position: absolute;
        top: 50%;
        width: 100%;
        .intro-text {
          position: relative;
          top: 40%;
          @include prefix(transform, translateY(-60%));
          .intro-name {
            border-right: .1em solid white;
            width: 18.5ch;
            white-space: nowrap;
            overflow: hidden;
            @include prefix(animation, (typing 2.5s steps(15, end),
                                        blink-caret .5s step-end infinite alternate));
          }
        }
      }
    }
  }

  #intro-mobile {
    background-image: url("resources/img/Black-White-Landscape.jpg");
    background-size: cover;
    .intro-content {
      .intro-text {
        @include prefix(transform, translateY(35%));
        .intro-name {
          @include prefix(animation, (fade-in 2.0s))
        }
        .intro-occupation {
          @include prefix(animation, (fade-in 2.0s))
        }
      }
    }
  }

  #about-me {
    .about-me-intro {
      margin: 2%;
      p {
        margin: 2%;
        font-size: 1.7em;
        color: $darkgrey;
      }
    }

    .about-me-profile {
      p {
        margin: .4em;
      }
    }

    .about-me-skills {
      .about-me-skills-logos {
        p{
          font-size: 1em;
        }
        a {
          i {
            font-size: 2.0em;
            color: $black;
            @include prefix(transition, color 0.2s ease-out);
          }
          i:hover {
            color: $grey;
          }
        }
        a:hover {
          text-decoration: none;
        }
      }
    }
  }

  footer {
    .navlogos-mobile {
      a {
        i {
          color: whitesmoke;
          font-size: 3em;
        }
        i:hover {
          color: $grey;
        }
      }
    }
    i {
      font-size: 4em;
    }
  }
}

// Guitar css main
body {
  .guitar-nav {
    position: fixed;
    width: 100%;
    top: 0;
    a {
      text-decoration: none;
      font-size: 1.4em;
      font-weight: 700;
      color: $grey;
      @include prefix(transition, color 0.2s ease-out)
    }
    @media (hover: hover) {
      a:hover {
        color: whitesmoke;
      }
    }
    a:active {
      color: whitesmoke;
    }
  }

  .songs-list {
    padding-top: 7em;
  }
}

// Guitar css songs tabs
body {
  .guitar-nav {
    position: fixed;
    width: 100%;
    top: 0;
    a {
      text-decoration: none;
      font-size: 1.4em;
      font-weight: 700;
      color: $grey;
      @include prefix(transition, color 0.2s ease-out)
    }
    @media (hover: hover) {
      a:hover {
        color: whitesmoke;
      }
    }
    a:active {
      color: whitesmoke;
    }
  }

  .tabs {
    padding-top: 7em;

    .tab {
      font-family: $font-inconsalita;
    }
  }
}

// change preset elements
h1 {
  font-size: 5.0em;
}
h2 {
  font-size: 3.9em;
}
h3 {
  font-size: 2.8em;
  text-align: center;
}
h4 {
  font-size: 1.7em;
}
h5 {
  font-size: 1.2em;
}
p {
  font-size: 1.0em;
}

// global usage
.darken-overlay {
  .darkened-div {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.font-inconsalita {
  font-family: $font-inconsalita;
}

.text-whitesmoke {
  color: whitesmoke;
}
.text-grey {
  color: $grey;
}
.text-darkgrey {
  color: $darkgrey;
}
.text-link {
  color: $black
}
.bg-black {
  background-color: $black;
}
.h-100vh {
  height: 100vh;
}
.w-100vw {
  width: 100vw;
}
.h-0 {
  height: 0%;
}
.h-40 {
  height: 40%;
}
.z-index-max {
  z-index: 999;
}
.big-ass-word {
  word-wrap: break-word;
}