diff --git a/_layouts/default.html b/_layouts/default.html index 009b03e..ed90a1b 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,9 +6,26 @@

Liquid

+
- {{ content }} +
+ {{ content }} +
diff --git a/_posts/2015-01-26-welcome-to-jekyll.markdown b/_posts/2015-01-26-welcome-to-jekyll.markdown index e48eead..e6af1b9 100644 --- a/_posts/2015-01-26-welcome-to-jekyll.markdown +++ b/_posts/2015-01-26-welcome-to-jekyll.markdown @@ -1,14 +1,28 @@ --- layout: post -title: "Welcome to Jekyll!" +title: "Test Post" date: 2015-01-26 17:50:59 -categories: jekyll update +categories: liquid docs yo --- -You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. -To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. +# Heading 1 -Jekyll also offers powerful support for code snippets: +## Heading 2 + +### Heading 3 + +#### Heading 4 + +This is a dummy paragraph. Find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. + +This is a dummy paragraph. Find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. + +This is a dummy paragraph. Find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. + + +> Blockquote + +Code snippet: {% highlight ruby %} def print_hi(name) diff --git a/_sass/_base.scss b/_sass/_base.scss index fd11f18..55c42ec 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -12,160 +12,88 @@ dl, dd, ol, ul, figure { * Basic styling */ body { - font-family: $base-font-family; - font-size: $base-font-size; - line-height: $base-line-height; - font-weight: 300; - color: $color-slate; - -webkit-text-size-adjust: 100%; + font-family: $base-font-family; + font-size: $base-font-size; + line-height: $base-line-height; + font-weight: 300; + color: $color-slate; + -webkit-text-size-adjust: 100%; } -/** - * Set `margin-bottom` to maintain vertical rhythm - */ +/** Set `margin-bottom` to maintain vertical rhythm */ + h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm { - margin-bottom: $spacing-unit / 2; + margin-bottom: $spacing-unit / 2; } -/** - * Images - */ +/** Images */ + img { - max-width: 100%; - vertical-align: middle; + max-width: 100%; + vertical-align: middle; } -/** - * Figures - */ +/** Figures */ + figure > img { - display: block; + display: block; } figcaption { - font-size: $small-font-size; + font-size: $small-font-size; } -/** - * Lists - */ +/** Lists */ ul, ol { - margin-left: $spacing-unit; + margin-left: $spacing-unit; } li { - > ul, - > ol { - margin-bottom: 0; - } + > ul, > ol { + margin-bottom: 0; + } } -/** - * Headings - */ +/** Headings */ + h1, h2, h3, h4, h5, h6 { - font-weight: 300; + font-weight: 300; } -/** - * Links - */ +/** Links */ a { - // color: $brand-color; + color: $color-blue-5; text-decoration: none; &:visited { - // color: darken($brand-color, 15%); + color: #609; } &:hover { - // color: $text-color; text-decoration: underline; } } +/** Wrapper */ -/** - * Blockquotes - */ -blockquote { - //color: $grey-color; - // border-left: 4px solid $grey-color-light; - padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; - font-style: italic; - - > :last-child { - margin-bottom: 0; - } -} - - - -/** - * Code formatting - */ -pre, -code { - font-size: 15px; - // border: 1px solid $grey-color-light; - border-radius: 3px; - background-color: #eef; -} - -code { - padding: 1px 5px; -} - -pre { - padding: 8px 12px; - overflow-x: scroll; - - > code { - border: 0; - padding-right: 0; - padding-left: 0; - } -} - - - -/** - * Wrapper - */ - - /* .wrapper { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); - max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); - margin-right: auto; - margin-left: auto; - padding-right: $spacing-unit; - padding-left: $spacing-unit; - @extend %clearfix; - - @include media-query($on-laptop) { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); - max-width: calc(#{$content-width} - (#{$spacing-unit})); - padding-right: $spacing-unit / 2; - padding-left: $spacing-unit / 2; - } + max-width: $content-width; + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + @extend %clearfix; } -*/ - -/** - * Clearfix - */ +/** Clearfix */ %clearfix { - &:after { - content: ""; - display: table; - clear: both; - } + &:after { + content: ""; + display: table; + clear: both; + } } diff --git a/css/main.scss b/css/main.scss index 4590be8..21185a8 100755 --- a/css/main.scss +++ b/css/main.scss @@ -28,9 +28,10 @@ $grey-color-dark: darken($grey-color, 25%); */ // Width of the content area -$content-width: 800px; +$sidebar-width: 250px; +$content-width: 900px; $on-palm: 600px; -$on-laptop: 800px; +$on-laptop: 900px; // Using media queries with like this: // @include media-query($on-palm) { @@ -39,16 +40,17 @@ $on-laptop: 800px; // padding-left: $spacing-unit / 2; // } // } + @mixin media-query($device) { - @media screen and (max-width: $device) { - @content; - } + @media screen and (max-width: $device) { + @content; + } } // Import partials from `sass_dir` (defaults to `_sass`) @import - "base", - "syntax-highlighting" + "base", + "syntax-highlighting" ; @@ -58,17 +60,16 @@ $on-laptop: 800px; box-sizing: border-box; } -body { - display: flex; -} - -/***** Sidebar ******/ - +/*============================================================================ + Sidebar + ==============================================================================*/ .sidebar { background: $color-blue-5; - flex: 0 1 250px; + //flex: 0 0 250px; + width: $sidebar-width; height: 100vh; + position: fixed; } .sidebar--logo { @@ -77,15 +78,89 @@ body { text-align: center; padding: $spacing-unit; border-bottom: 1px solid $color-blue-4; + a { color: $color-white; } } +.sidebar--nav { + padding: $spacing-unit / 2; -/***** Content ******/ + > ul { + margin: 0; + } + + li { + list-style: none; + + a { + color: $color-white; + } + } + +} + + +/*============================================================================ + Content & Markdown Styles + ==============================================================================*/ .content { - padding: $spacing-unit; - flex: 0 1 auto; + 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; + } + } + } + + diff --git a/index.html b/index.html index 83d9398..30173a4 100644 --- a/index.html +++ b/index.html @@ -2,22 +2,9 @@ layout: default --- -
- -

Posts

- - - -

subscribe via RSS

- -
+{% for post in site.posts %} +

+ {{ post.title }} +

+ {{ post.content }} +{% endfor %}