hacken-in/hacken-in

// Call it sidebar
$sidebar-divider-color: #262930;

section.main {
  @media #{$medium-up} {
    @include grid-column(10);
  }
}

aside.sidebar {
  .social-login {
    @include grid-column(12);
    @include button;
  }

  .uberspace {
    text-align: center;
    margin-bottom: 20px;
  }

  @media #{$small-only} {
    @include off-canvas-menu(left);
    // give the off-canvas-menu a min-height to keep its content visible (see #448).
    // 789px is needed in logged-out state
    min-height: 789px;

    h3 {
      color: $topbar-link-color;
    }

    input[type=submit] {
      background-color: $alert-color;
      color: white;
      font-weight: bold;
    }

    hr {
      background-color: $sidebar-divider-color;
      height: 20px;
      border-width: 0px;
    }

    ul {
      @include off-canvas-list;
    }

    .uberspace {
      color: white;
    }
  }

  @media #{$medium-up} {
    @include grid-column(2);
    background-color: $secondary-color;

    input[type=checkbox] {
      display: inline;
    }

    label {
      margin: 0px;
    }

    .social-login {
      padding: 10px 5px;
      margin-bottom: 10px;
    }

    .sidebar-button input {
      padding: 10px 15px;
      margin-bottom: 10px;
    }

    .sidebar-button a {
      padding: 5px 15px;
      margin-bottom: 10px;
    }

    ul {
      list-style-type: none;
      padding-bottom: 10px;
      li {
        a {
          color: $body-font-color;
          @include grid-row(12);
        }

      }
    }
  }
}