diff --git a/docs/_docs/16-stylesheets.md b/docs/_docs/16-stylesheets.md index cf12aef2..a21b8df3 100644 --- a/docs/_docs/16-stylesheets.md +++ b/docs/_docs/16-stylesheets.md @@ -2,7 +2,7 @@ title: "Stylesheets" permalink: /docs/stylesheets/ excerpt: "Instructions for customizing and building the theme's stylesheets." -last_modified_at: 2018-01-03T12:05:16-05:00 +last_modified_at: 2018-01-05T08:51:05-05:00 --- The theme's `assets/css/main.css` file is built from several SCSS partials located in [`_sass/`](https://github.com/mmistakes/minimal-mistakes/tree/master/_sass) and is structured as follows: @@ -148,6 +148,180 @@ $type-size-8 : 0.625em; // ~10px Change the mood of your site by altering a few color variables. `$body-color`, `$background-color`, `$text-color`, `$link-color`, and `$masthead-link-color` will have the most affect when changed. +#### Syntax Highlighting + +To make customizing the colors used in code highlighted blocks, a base of sixteen colors ([Base16](http://chriskempson.com/projects/base16/)) have been used. + +Code block colors can easily be changed by overriding any of the following color variables: + +##### Default + +![default-code-block]({{ '/assets/images/default-code-block.jpg' | absolute_url }}) + +```scss +/* default syntax highlighting (base16) */ +$base00: #263238; +$base01: #2e3c43; +$base02: #314549; +$base03: #546e7a; +$base04: #b2ccd6; +$base05: #eeffff; +$base06: #eeffff; +$base07: #ffffff; +$base08: #f07178; +$base09: #f78c6c; +$base0a: #ffcb6b; +$base0b: #c3e88d; +$base0c: #89ddff; +$base0d: #82aaff; +$base0e: #c792ea; +$base0f: #ff5370; +``` + +##### Contrast + +![contrast-code-block]({{ '/assets/images/contrast-code-block.jpg' | absolute_url }}) + +```scss +/* contrast syntax highlighting (base16) */ +$base00: #000000; +$base01: #242422; +$base02: #484844; +$base03: #6c6c66; +$base04: #918f88; +$base05: #b5b3aa; +$base06: #d9d7cc; +$base07: #fdfbee; +$base08: #ff6c60; +$base09: #e9c062; +$base0a: #ffffb6; +$base0b: #a8ff60; +$base0c: #c6c5fe; +$base0d: #96cbfe; +$base0e: #ff73fd; +$base0f: #b18a3d; +``` + +##### Dark + +![dark-code-block]({{ '/assets/images/dark-code-block.jpg' | absolute_url }}) + +```scss +/* dark syntax highlighting (base16) */ +$base00: #ffffff; +$base01: #e0e0e0; +$base02: #d0d0d0; +$base03: #b0b0b0; +$base04: #000000; +$base05: #101010; +$base06: #151515; +$base07: #202020; +$base08: #ff0086; +$base09: #fd8900; +$base0a: #aba800; +$base0b: #00c918; +$base0c: #1faaaa; +$base0d: #3777e6; +$base0e: #ad00a1; +$base0f: #cc6633; +``` + +##### Dirt + +![dirt-code-block]({{ '/assets/images/dirt-code-block.jpg' | absolute_url }}) + +```scss +/* dirt syntax highlighting (base16) */ +$base00: #231e18; +$base01: #302b25; +$base02: #48413a; +$base03: #9d8b70; +$base04: #b4a490; +$base05: #cabcb1; +$base06: #d7c8bc; +$base07: #e4d4c8; +$base08: #d35c5c; +$base09: #ca7f32; +$base0a: #e0ac16; +$base0b: #b7ba53; +$base0c: #6eb958; +$base0d: #88a4d3; +$base0e: #bb90e2; +$base0f: #b49368; +``` + +##### Neon + +![neon-code-block]({{ '/assets/images/neon-code-block.jpg' | absolute_url }}) + +```scss +/* neon syntax highlighting (base16) */ +$base00: #ffffff; +$base01: #e0e0e0; +$base02: #d0d0d0; +$base03: #b0b0b0; +$base04: #000000; +$base05: #101010; +$base06: #151515; +$base07: #202020; +$base08: #ff0086; +$base09: #fd8900; +$base0a: #aba800; +$base0b: #00c918; +$base0c: #1faaaa; +$base0d: #3777e6; +$base0e: #ad00a1; +$base0f: #cc6633; +``` + +##### Plum + +![plum-code-block]({{ '/assets/images/plum-code-block.jpg' | absolute_url }}) + +```scss +/* plum syntax highlighting (base16) */ +$base00: #ffffff; +$base01: #e0e0e0; +$base02: #d0d0d0; +$base03: #b0b0b0; +$base04: #000000; +$base05: #101010; +$base06: #151515; +$base07: #202020; +$base08: #ff0086; +$base09: #fd8900; +$base0a: #aba800; +$base0b: #00c918; +$base0c: #1faaaa; +$base0d: #3777e6; +$base0e: #ad00a1; +$base0f: #cc6633; +``` + +##### Sunrise + +![sunrise-code-block]({{ '/assets/images/sunrise-code-block.jpg' | absolute_url }}) + +```scss +/* sunrise syntax highlighting (base16) */ +$base00: #1d1f21; +$base01: #282a2e; +$base02: #373b41; +$base03: #969896; +$base04: #b4b7b4; +$base05: #c5c8c6; +$base06: #e0e0e0; +$base07: #ffffff; +$base08: #cc6666; +$base09: #de935f; +$base0a: #f0c674; +$base0b: #b5bd68; +$base0c: #8abeb7; +$base0d: #81a2be; +$base0e: #b294bb; +$base0f: #a3685a; +``` + ### Breakpoints and Grid Stuff Probably won't need to touch these, but they're there if you need to. Width variables are used with the [`@include breakpoint()`](http://breakpoint-sass.com/) mixin to adapt the design of certain elements. diff --git a/docs/assets/images/contrast-code-block.jpg b/docs/assets/images/contrast-code-block.jpg new file mode 100644 index 00000000..9e7b4258 Binary files /dev/null and b/docs/assets/images/contrast-code-block.jpg differ diff --git a/docs/assets/images/dark-code-block.jpg b/docs/assets/images/dark-code-block.jpg new file mode 100644 index 00000000..210bb35a Binary files /dev/null and b/docs/assets/images/dark-code-block.jpg differ diff --git a/docs/assets/images/default-code-block.jpg b/docs/assets/images/default-code-block.jpg new file mode 100644 index 00000000..7996f992 Binary files /dev/null and b/docs/assets/images/default-code-block.jpg differ diff --git a/docs/assets/images/dirt-code-block.jpg b/docs/assets/images/dirt-code-block.jpg new file mode 100644 index 00000000..e27e2059 Binary files /dev/null and b/docs/assets/images/dirt-code-block.jpg differ diff --git a/docs/assets/images/neon-code-block.jpg b/docs/assets/images/neon-code-block.jpg new file mode 100644 index 00000000..e7d0bb70 Binary files /dev/null and b/docs/assets/images/neon-code-block.jpg differ diff --git a/docs/assets/images/plum-code-block.jpg b/docs/assets/images/plum-code-block.jpg new file mode 100644 index 00000000..d33bf85d Binary files /dev/null and b/docs/assets/images/plum-code-block.jpg differ diff --git a/docs/assets/images/sunrise-code-block.jpg b/docs/assets/images/sunrise-code-block.jpg new file mode 100644 index 00000000..5f862cde Binary files /dev/null and b/docs/assets/images/sunrise-code-block.jpg differ