// https://kuler.adobe.com/Sunrise-(subtle)-color-theme-1450987/
$dark1: #525454;
$dark2: #67A6A6;
$dark3: #222222;
$light1: #F0F0F0;
$light2: #FFFFFF;
$light3: lighten($dark2, 25%);
$alert: #ea3e3a;

$sidebar-width: 300px;
$header-height: 56px;
$font-weight: 300;

@import "normalize-scss/sass/normalize";
@import "bourbon/core/bourbon";
@import "responsive";
@import "deprecated_bourbon";

*, *:before, *:after {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}

html {
  font: 14px "Raleway", "Roboto", Arial, sans-serif;
  font-weight: $font-weight;
  line-height: 1.25;
}

body {
  padding: 0;
  margin: 0;
  color: $dark3;
  background: $dark3 url(../images/bg.png) repeat;
  background-image: url(data:image/png;base64,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);
}

p,h1,h2,h3,h4,h5,h6 {
  font-weight: $font-weight;
  margin: .25em 0 .5em 0;
}

a, a:link, a:visited, a:active {
  text-decoration: none;
}

.browserupgrade {
  @include position(absolute, 0px 0px auto 0px);
  padding: 1rem;
  margin: 0 !important;
  z-index: 1000;
  margin: 1rem auto;
  text-align: center;
  background: $alert;
  color: $light1;
  font-size: 1.2rem;
}

.nav {
  color: $light1;
  position: relative;

  @media #{$landscape} {
    @include position(fixed, 0px auto 0px 0px);
    width: $sidebar-width;
    border-right: .3em solid rgba($dark2, .5);
    overflow-y: auto;
    z-index: 2;
  }

  .menu {
    display: block;
    @include clearfix;

    h3 {
      margin: 0;
      padding: 7px 10px;
      text-transform: uppercase;
      background: rgba($dark2, .5);
    }

    a, a:link, a:visited, a:active, a:hover {
      display: block;
      cursor: pointer;
      line-height: 32px;
      padding: 0 10px;
      position: relative;
      color: $light1;
/*      @include transition(background .2s); */

      &.toggle {
        float: right;
        z-index: 100;
        overflow: hidden;
        text-align: center;
        border-left: 1px dashed rgba($dark2, .33);

        .icon {
          margin-right: 0;
        }
      }

      &.active {
        background: rgba(darken($dark2, 20%), .5);
        &:after {
          display: block;
        }
        .icon-block {
          display: none;
        }
      }

      &:hover {
        background: $dark3;
      }
    }
  }

  .logo {
    background: $dark3;

    h1 {
      font-size: 24px;
      margin: 0;
    }

    a, a:link, a:visited, a:active, a:hover {
      color: $light3;
      white-space: nowrap;
      display: block;
      text-transform: uppercase;
      text-decoration: none;
      line-height: $header-height;
      text-align: center;
      /* @include transition(color .2s, background .2s); */
      &:hover {
        color: $light1;
      }
    }
  }
}

.content {
  margin: 0;
  padding: .5rem;
  color: $dark1;

  @media #{$landscape} {
    margin-left: $sidebar-width;
  }

  .content-article {
    color: $light2;
    padding: 1rem;
    line-height: 1.5;

    h2 {
      font-size: 2rem;
    }

    a {
      color: $light3;
    }
  }

  .content-grid {
    @include column-count(1);
    @include column-gap(0);

    @media #{$portrait-2} {
      @include column-count(2);
    }
    @media #{$landscape-2} {
      @include column-count(2);
    }
    @media #{$landscape-3} {
      @include column-count(3);
    }
    @media #{$landscape-4} {
      @include column-count(4);
    }
    @media #{$landscape-5} {
      @include column-count(5);
    }
  }

  .tool-container {
    display: inline-block;
    text-align: center;
    padding: .5rem;
    width: 100%;
  }

  .tool {
    border-radius: 3px;
    background: $light1;
    color: $dark1;
    /* @include transition(background .2s, color .2s); */

    &>* {
      padding: 10px;
      margin: 0;
      display: block;
      border-bottom: 1px dashed $light3;
      &:last-child {
        border-bottom: 0
      }
    }

    a {
      text-decoration: none;
      color: darken($dark2, 10%);
      /* @include transition(color .2s); */
      &:hover {
        color: $dark3;
      }
    }

    &:hover {
      background: $light2;
      color: $dark3;
    }

    p.tags {
      i {
        &.disabled {
          opacity: .1;
        }
      }
    }

    p.topics {
      small {
        text-transform: lowercase;
        &:after {
          content: ', ';
        }
        &:last-child:after {
          display: none;
        }
      }
    }
  }

  .random-tool {
    h3 {
      text-align: center;
      color: $light2;
      margin: 0 .5rem;
      padding: .5rem;
      border-bottom: 1px dashed $light2;
    }

    @media #{$landscape} {
      width: $sidebar-width;
      margin: 0 auto;
    }
  }
}
