application.scss

@import url('https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans|Maven+Pro');
@import url('https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@import "mixins.scss";

@import "nav.scss";
@import "wiki.scss";
@import "input.scss";
@import "alert.scss";
@import "header.scss";
@import "search.scss";
@import "headers.scss";
@import "modifiers.scss";
@import "code.scss";

body {
  margin: 0;
  font-family: 'Fira Sans', sans-serif;
  @include desktop {
    background: $gray-bg;
  }
}

@include mobile {
  code {
    word-break: break-all;
  }
  ul {
    padding-left: 1.2em;
  }
}

pre, code {
  font-family: 'Fira Code', monospace;
}

a, a:visited, a:hover, a:active {
  color: $red-text;
  text-decoration: underline;
}

hr {
  $hr-width: 2px;
  border: none;
  border-radius: $hr-width / 2;
  height: $hr-width;
  background: lightgray;
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
    display: inline-block;
  }
  &::before {
    width: $hr-width * 20;
    height: $hr-width;
    background: white;
    left: calc(50% - #{$hr-width * 10});
  }
  &::after {
    background: lightgray;
    width: $hr-width * 10;
    height: $hr-width * 10;
    left: calc(50% - #{$hr-width * 5});
    bottom: 1px - $hr-width * 5;
    border-radius: 50%;
  }
}

.body-container {
  width: 70%;
  min-width: 768px;
  background: white;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  @media (max-width: $big-breakpoint) {
    width: 100%;
    max-width: 1100px;
  }
  @include mobile {
    padding: 0 8px;
    min-width: 300px;
    width: 100%;
    box-sizing: border-box;
  }
}


.body {
  flex: 1;
  @include mobile {
    margin-top: 50px;
  }
}

.footer {
  font-size: 0.8em;
  color: $gray-text;
  margin-top: 30px;
  @include mobile {
    padding-bottom: 30px;
  }
}

#nprogress {
  @include desktop {
    .bar {
      position: fixed;
    }
  }
  .spinner {
    display: none;
  }
}
@include mobile {
  #nprogress {
    position: fixed;
    top: 40px;
    height: 10px;
    z-index: 101;
    width: 100%;
    overflow: hidden;
    .bar.bar {
      bottom: 0;
      top: auto;
      .peg {
        transform: rotate(-3deg) translate(0, 4px);
      }
    }
  }
}

.avatar-link {
  text-decoration: none !important;
  .avatar {
    border: 0.5px solid $gray-bg;
    margin-right: 0.25em;
    vertical-align: middle;
  }
}

blockquote {
  border-left: 4px solid $red-text;
  margin-left: 1em;
  padding-left: 1em;
  border-radius: 4px
}

.dev-warning {
  @include desktop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    font-size: 2em;
    text-align: center;
  }
  background: $red-text;
  color: white;
  @include mobile {
    &:not(.mobile) {
      display: none;
    }
    position: relative;
    bottom: 0.2em;
    font-size: 60%;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4em;
    margin-left: 0.5em;
    border-radius: 0.7em
  }
}

.hash-target {
  box-shadow: 0 0 20px #6B1A00;
  padding: 1px 20px;
}

.center {
  text-align: center;
}