liquid/css/main.scss

---
# 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
$sidebar-width: 250px;
$content-width:    900px;
$on-palm:          600px;
$on-laptop:        900px;

// 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;
}

/*============================================================================
  Sidebar
 ==============================================================================*/

.sidebar {
  background: $color-blue-5;
  //flex: 0 0 250px;
  width: $sidebar-width;
  height: 100vh;
  position: fixed;
}

.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;
  }
}

.sidebar--nav {
  padding: $spacing-unit / 2;

  > ul {
    margin: 0;
  }

  li {
    list-style: none;

    a {
      color: $color-white;
    }
  }

}


/*============================================================================
  Content & Markdown Styles
 ==============================================================================*/

.content {
  padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 2em;
    text-decoration: underline;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.5em;
    text-decoration: underline;
  }

  blockquote {
    color: lighten($color-slate, 20);
    border-left: 4px solid lighten($color-slate, 20);
    padding-left: $spacing-unit / 2;
    font-size: 18px;
    letter-spacing: -1px;
    font-style: italic;

    > :last-child {
      margin-bottom: 0;
    }
  }

  pre, code {
    font-size: 15px;
    border: 1px solid $color-blue-2;
    border-radius: 3px;
    background-color: lighten($color-blue-1, 0.9);
  }

  code {
    padding: 1px 5px;
  }

  pre {
    padding: 8px 12px;

    > code {
      border: 0;
      padding-right: 0;
      padding-left: 0;
    }
  }

}