diff --git a/_posts/2017-03-09-example-content.md b/_posts/2017-03-09-example-content.md index 0c460a4..fecb8ed 100644 --- a/_posts/2017-03-09-example-content.md +++ b/_posts/2017-03-09-example-content.md @@ -1,7 +1,6 @@ --- layout: post -title: "Example content" -categories: jekyll update +title: Example content --- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. @@ -29,7 +28,7 @@ Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est ### Code -Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus. +Inline code is available with the `` element. Snippets of multiple lines of code are supported through Pygments. Longer lines will automatically scroll horizontally when needed. {% highlight js %} // Example can be run directly in your JavaScript console @@ -42,6 +41,19 @@ adder(2, 6); // > 8 {% endhighlight %} +You may also optionally show code snippets with line numbers. Add `linenos` to the Pygments tags. + +{% highlight js linenos %} +// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function("a", "b", "return a + b"); + +// Call the function +adder(2, 6); +// > 8 +{% endhighlight %} + Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa. ### Lists @@ -60,19 +72,16 @@ Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a p Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. -
-
HyperText Markup Language (HTML)
-
The language used to describe and define the content of a Web page
- -
Cascading Style Sheets (CSS)
-
Used to describe the appearance of Web content
- -
JavaScript (JS)
-
The programming language used to build advanced Web sites and applications
-
- Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. +### Images + +Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at. + +![placeholder](http://placehold.it/800x400 "Large example image") +![placeholder](http://placehold.it/400x200 "Medium example image") +![placeholder](http://placehold.it/200x200 "Small example image") + ### Tables Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..522ed3a --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,54 @@ +* { + @include box-sizing; +} + +html, +body { + color: $default-color; + margin: 0; + padding: 0; +} + +html { + font-family: $serif-font; + font-size: $default-font-size; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $sans-font; +} + +a { + color: $blue; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +blockquote { + border-left: .25rem solid $grey-2; + color: $grey-1; + margin: .8rem 0; + padding: .5rem 1rem; + + p:last-child { + margin-bottom: 0; + } + + @media (min-width: 600px) { + padding: 0 5rem 0 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + max-width: 100%; +} diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 0000000..300cf42 --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,46 @@ +pre, +code { + font-family: $monospaced-font; +} + +code { + background-color: $grey-3; + border-radius: 3px; + color: $code-color; + font-size: 85%; + padding: .25em .5em; +} + +pre { + margin: 0 0 1rem; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; +} + +.highlight { + background-color: $grey-3; + border-radius: 3px; + line-height: 1.4; + margin: 0 0 1rem; + padding: 1rem; + + pre { + margin-bottom: 0; + overflow-x: auto; + } + + .lineno { + color: $default-tint; + display: inline-block; // Ensures the null space also isn't selectable + padding: 0 .75rem 0 .25rem; + // Make sure numbers aren't selectable + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } +} diff --git a/_sass/_home.scss b/_sass/_home.scss index 2f087ce..0e1cf5a 100644 --- a/_sass/_home.scss +++ b/_sass/_home.scss @@ -3,6 +3,25 @@ position: relative; } +.post-link { + text-align: right; + + a { + @include transition (all .3s ease-out); + color: $default-tint; + display: inline-block; + font-family: $sans-font; + font-size: 1.3rem; + font-weight: 500; + letter-spacing: .3px; + + &:hover, + &:focus { + color: $default-color; + } + } +} + .pagination { font-family: $serif-font; position: relative; diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 1c9eb8b..825e5d9 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -1,39 +1,6 @@ -* { - @include box-sizing; -} - -html, -body { - margin: 0; - padding: 0; -} - -html { - font-family: $serif-font; - font-size: $default-font-size; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: $sans-font; -} - -pre, -code { - font-family: menlo; -} - -a { - text-decoration: none; -} - .container { margin: 0 auto; - max-width: 1200px; + max-width: 1000px; width: 80%; } diff --git a/_sass/_post.scss b/_sass/_post.scss index 0b746a8..b9e31fe 100644 --- a/_sass/_post.scss +++ b/_sass/_post.scss @@ -18,28 +18,8 @@ } p { - color: $default-color; line-height: 1.5rem; margin: 0 0 1rem; text-align: justify; } - - .post-link { - text-align: right; - - a { - @include transition (all .3s ease-out); - color: $default-tint; - display: inline-block; - font-family: $sans-font; - font-size: 1.3rem; - font-weight: 500; - letter-spacing: .3px; - - &:hover, - &:focus { - color: $default-color; - } - } - } } diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss new file mode 100644 index 0000000..15ad797 --- /dev/null +++ b/_sass/_syntax.scss @@ -0,0 +1,65 @@ +.highlight .hll { background-color: #ffc; } +.highlight .c { color: #999; } /* Comment */ +.highlight .err { color: #a00; background-color: #faa } /* Error */ +.highlight .k { color: #069; } /* Keyword */ +.highlight .o { color: #555 } /* Operator */ +.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #099 } /* Comment.Preproc */ +.highlight .c1 { color: #999; } /* Comment.Single */ +.highlight .cs { color: #999; } /* Comment.Special */ +.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #f00 } /* Generic.Error */ +.highlight .gh { color: #030; } /* Generic.Heading */ +.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ +.highlight .go { color: #aaa } /* Generic.Output */ +.highlight .gp { color: #009; } /* Generic.Prompt */ +.highlight .gs { } /* Generic.Strong */ +.highlight .gu { color: #030; } /* Generic.Subheading */ +.highlight .gt { color: #9c6 } /* Generic.Traceback */ +.highlight .kc { color: #069; } /* Keyword.Constant */ +.highlight .kd { color: #069; } /* Keyword.Declaration */ +.highlight .kn { color: #069; } /* Keyword.Namespace */ +.highlight .kp { color: #069 } /* Keyword.Pseudo */ +.highlight .kr { color: #069; } /* Keyword.Reserved */ +.highlight .kt { color: #078; } /* Keyword.Type */ +.highlight .m { color: #f60 } /* Literal.Number */ +.highlight .s { color: #d44950 } /* Literal.String */ +.highlight .na { color: #4f9fcf } /* Name.Attribute */ +.highlight .nb { color: #366 } /* Name.Builtin */ +.highlight .nc { color: #0a8; } /* Name.Class */ +.highlight .no { color: #360 } /* Name.Constant */ +.highlight .nd { color: #99f } /* Name.Decorator */ +.highlight .ni { color: #999; } /* Name.Entity */ +.highlight .ne { color: #c00; } /* Name.Exception */ +.highlight .nf { color: #c0f } /* Name.Function */ +.highlight .nl { color: #99f } /* Name.Label */ +.highlight .nn { color: #0cf; } /* Name.Namespace */ +.highlight .nt { color: #2f6f9f; } /* Name.Tag */ +.highlight .nv { color: #033 } /* Name.Variable */ +.highlight .ow { color: #000; } /* Operator.Word */ +.highlight .w { color: #bbb } /* Text.Whitespace */ +.highlight .mf { color: #f60 } /* Literal.Number.Float */ +.highlight .mh { color: #f60 } /* Literal.Number.Hex */ +.highlight .mi { color: #f60 } /* Literal.Number.Integer */ +.highlight .mo { color: #f60 } /* Literal.Number.Oct */ +.highlight .sb { color: #c30 } /* Literal.String.Backtick */ +.highlight .sc { color: #c30 } /* Literal.String.Char */ +.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #c30 } /* Literal.String.Double */ +.highlight .se { color: #c30; } /* Literal.String.Escape */ +.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ +.highlight .si { color: #a00 } /* Literal.String.Interpol */ +.highlight .sx { color: #c30 } /* Literal.String.Other */ +.highlight .sr { color: #3aa } /* Literal.String.Regex */ +.highlight .s1 { color: #c30 } /* Literal.String.Single */ +.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ +.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #033 } /* Name.Variable.Class */ +.highlight .vg { color: #033 } /* Name.Variable.Global */ +.highlight .vi { color: #033 } /* Name.Variable.Instance */ +.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 043c19d..3927526 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,11 +1,18 @@ -$default-color: #555555; +$default-color: #555; $default-shade: #353535; -$default-tint: #AAAAAA; +$default-tint: #aaa; +$grey-1: #979797; +$grey-2: #e5e5e5; +$grey-3: #f9f9f9; +$blue: #4a9ae1; $serif-font: 'Libre Baskerville'; $sans-font: 'Helvetica Neue'; $default-font-size: 14px; +$monospaced-font: Menlo, Monaco, monospace; +$code-color: #bf616a; + @mixin box-sizing($type: border-box) { -webkit-box-sizing: $type; -moz-box-sizing: $type; diff --git a/styles.scss b/styles.scss index 63705ee..513c724 100644 --- a/styles.scss +++ b/styles.scss @@ -5,5 +5,8 @@ @import 'variables'; @import 'layout'; +@import 'syntax'; @import 'post'; @import 'home'; +@import 'code'; +@import 'base';