/* Imports */
@import "variables.scss";
@import "octicons.css";

$mono-dark: #454545;
@mixin octicon-link($char){
  font: normal normal 1em octicons;
  text-decoration: none;
  color: $color-dark;

  &:after{
    content: $char;
    margin-left: 5px;
  }
}

.nav-list>li>a{
  font-size: 8pt;
}

.curriculum{
  position: relative;
  font-size: 16px;

  img{
    width: 100%;
    height: auto;
  }

  h3{
    font-size: 400%;
    line-height: 1.25em;
    margin-bottom: .5em;
    text-shadow: 0 1px rgba(0,0,0,.1);
  }

  h4{
    font-size: 250%;
    line-height: 1.35em;
    margin-bottom: .5em;
    text-shadow: 0 1px rgba(0,0,0,.1);
    color: $mono-dark;
    border-bottom: solid 1px $mono-light;
  }

  pre, table{
    background: #f9fafa;
    border: solid 1px #edeff0;
    border-radius: 3px;
    box-shadow: 0px 4px 0 0px #edeff0;
    line-height: 2em;
  }

  pre{
    &:before {
      content: "\f0c8";
      font: normal normal 22px octicons;
      float: right;
      color: #c0c7ce;
    }
  }
  table{
    th, td{
      text-align: left;
      padding: 0 1em;
    }
  }

  p{
    line-height: 1.75em;
    margin-bottom: 2em;
  }

  iframe{
    display: block;
    margin: 0 auto;
  }

  .slide{
    width: 100%;
    background: #ffffff;
    display: table;

    h3,h4,h5{
      text-align: center;
    }

    h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
      margin-left: 0;
      margin-right: 0;
    }

    pre{
      code{
        font-size: 1.5em;
      }
    }

    .alignment{
      padding: 0 10%;
      display: table-cell;
      vertical-align: middle;
    }


  }

  /* General external link */
  a[href^="http://"],
  a[href^="https://"] {
    @include octicon-link("\f0b6");
  }

  /* GitHub Links */
  a[href^="https://github.com"],
  a[href^="https://www.github.com"],
  a[href^="https://help.github.com"]
  {
    @include octicon-link("\f008");
  }

  /* GitHub Book Links, Guide Links */
  a[href^="http://git-scm.com/book"],
  a[href^="https://guides.github.com"]
  {
    @include octicon-link("\f007");
  }


  /* YouTube Links */
  a[href^="https://youtube.com"],
  a[href^="https://www.youtube.com"] {
    @include octicon-link("\f0b9");
  }

  .summary, .outline, .details{
    h2:before{
      padding: 5px;
      color: #CCCCCC;
      content: "\f078";
      font: normal normal 20px octicons;
    }
  }
}

#toc-wrapper{
  opacity: .2;
  transition: all 200ms;
  &:hover{
    opacity: 1;
  }
}

#toc{
  font-size: .8em;

  .active{
    font-weight: 700;

    a{
      color: #222222;
    }
  }
}

.affix-top{
  position: absolute;
}

.affix{
  margin-top: -145px;
}

.affix-bottom{
}
