---
# Liquid Docs Main Styles
---

@charset "utf-8";

// Our variables
$base-font-family: 'Droid Sans', sans-serif;
$base-font-size:   16px;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;
$spacing-unit:     40px;

// Liquid Docs Blues. 1 --> 5, lightest --> darkest.

$color-blue-1: #E8F8FF;
$color-blue-2: #B4DCED;
$color-blue-3: #91C9E8;
$color-blue-4: #67B8DE;
$color-blue-5: #3399CC;
$color-white: #fff;
$color-slate: #5E5E5E;

/*
$grey-color:       #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark:  darken($grey-color, 25%);
*/

// Width of the content area
$content-width:    800px;
$on-palm:          600px;
$on-laptop:        800px;

// Using media queries with like this:
// @include media-query($on-palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left: $spacing-unit / 2;
//     }
// }
@mixin media-query($device) {
    @media screen and (max-width: $device) {
        @content;
    }
}

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "syntax-highlighting"
;




* {
  box-sizing: border-box;
}

body {
  display: flex;
}

/***** Sidebar ******/


.sidebar {
  background: $color-blue-5;
  flex: 0 1 250px;
  height: 100vh;
}

.sidebar--logo {
  font-size: $base-font-size * 2;
  font-weight: bold;
  text-align: center;
  padding: $spacing-unit;
  border-bottom: 1px solid $color-blue-4;
  a {
    color: $color-white;
  }
}


/***** Content ******/

.content {
  padding: $spacing-unit;
  flex: 0 1 auto;
}