diff --git a/_layouts/default.html b/_layouts/default.html index 8c8758f..fe34e10 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,13 +4,12 @@ {% include head.html %} - -
+
+

Liquid

+
+
{{ content }}
- - {% include footer.html %} - diff --git a/_sass/_base.scss b/_sass/_base.scss index 29b16d0..fd11f18 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -16,8 +16,7 @@ body { font-size: $base-font-size; line-height: $base-line-height; font-weight: 300; - color: $text-color; - background-color: $background-color; + color: $color-slate; -webkit-text-size-adjust: 100%; } @@ -75,15 +74,15 @@ h1, h2, h3, h4, h5, h6 { * Links */ a { - color: $brand-color; + // color: $brand-color; text-decoration: none; &:visited { - color: darken($brand-color, 15%); + // color: darken($brand-color, 15%); } &:hover { - color: $text-color; + // color: $text-color; text-decoration: underline; } } @@ -94,8 +93,8 @@ a { * Blockquotes */ blockquote { - color: $grey-color; - border-left: 4px solid $grey-color-light; + //color: $grey-color; + // border-left: 4px solid $grey-color-light; padding-left: $spacing-unit / 2; font-size: 18px; letter-spacing: -1px; @@ -114,7 +113,7 @@ blockquote { pre, code { font-size: 15px; - border: 1px solid $grey-color-light; + // border: 1px solid $grey-color-light; border-radius: 3px; background-color: #eef; } diff --git a/css/main.scss b/css/main.scss index a86c568..2e7c180 100755 --- a/css/main.scss +++ b/css/main.scss @@ -1,8 +1,8 @@ --- -# Only the main Sass file needs front matter (the dashes are enough) +# Liquid Docs Main Styles --- -@charset "utf-8"; +@charset "utf-8"; // Our variables @@ -10,20 +10,26 @@ $base-font-family: Helvetica, Arial, sans-serif; $base-font-size: 16px; $small-font-size: $base-font-size * 0.875; $base-line-height: 1.5; +$spacing-unit: 40px; -$spacing-unit: 30px; +// Liquid Docs Blues. 1 --> 5, lightest --> darkest. -$text-color: #111; -$background-color: #fdfdfd; -$brand-color: #2a7ae2; +$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; @@ -47,3 +53,24 @@ $on-laptop: 800px; ; +/***** Layout Styles ******/ + + +* { + box-sizing: border-box; +} + +body { + display: flex; +} + +.sidebar { + background: $color-blue-5; + flex: 0 1 250px; + height: 100vh; + padding: $spacing-unit; +} + +.content { + +}