Skip to content

Commit 14c7dbb

Browse files
mmistakesmmistakes
authored
Improve syntax highlighting styles (mmistakes#1450)
* Cleanup syntax highlighting styles * Replace hardcoded color values with [base16](http://chriskempson.com/projects/base16/) Sass variables * Harmonize padding between GFM code blocks and `{% highlight %}` code blocks * Improve readability of line numbers * Add longer code block example to test double digit line numbers * Adjust code block colors for specific skins
1 parent c076f7f commit 14c7dbb

10 files changed

+537
-342
lines changed

‎_sass/minimal-mistakes/_syntax.scss

+273-230
Large diffs are not rendered by default.

‎_sass/minimal-mistakes/_variables.scss

+108-92
Original file line numberDiff line numberDiff line change
@@ -6,132 +6,148 @@
66
Typography
77
========================================================================== */
88

9-
$doc-font-size : 16 !default;
9+
$doc-font-size: 16 !default;
1010

1111
/* paragraph indention */
12-
$paragraph-indent : false !default; // true, false (default)
13-
$indent-var : 1.3em !default;
12+
$paragraph-indent: false !default; // true, false (default)
13+
$indent-var: 1.3em !default;
1414

1515
/* system typefaces */
16-
$serif : Georgia, Times, serif !default;
17-
$sans-serif : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
18-
$monospace : Monaco, Consolas, "Lucida Console", monospace !default;
16+
$serif: Georgia, Times, serif !default;
17+
$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
18+
"Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
19+
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;
1920

2021
/* sans serif typefaces */
21-
$sans-serif-narrow : $sans-serif !default;
22-
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
22+
$sans-serif-narrow: $sans-serif !default;
23+
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
2324

2425
/* serif typefaces */
25-
$georgia : Georgia, serif !default;
26-
$times : Times, serif !default;
27-
$bodoni : "Bodoni MT", serif !default;
28-
$calisto : "Calisto MT", serif !default;
29-
$garamond : Garamond, serif !default;
26+
$georgia: Georgia, serif !default;
27+
$times: Times, serif !default;
28+
$bodoni: "Bodoni MT", serif !default;
29+
$calisto: "Calisto MT", serif !default;
30+
$garamond: Garamond, serif !default;
3031

31-
$global-font-family : $sans-serif !default;
32-
$header-font-family : $sans-serif !default;
33-
$caption-font-family : $serif !default;
32+
$global-font-family: $sans-serif !default;
33+
$header-font-family: $sans-serif !default;
34+
$caption-font-family: $serif !default;
3435

3536
/* type scale */
36-
$type-size-1 : 2.441em !default; // ~39.056px
37-
$type-size-2 : 1.953em !default; // ~31.248px
38-
$type-size-3 : 1.563em !default; // ~25.008px
39-
$type-size-4 : 1.25em !default; // ~20px
40-
$type-size-5 : 1em !default; // ~16px
41-
$type-size-6 : 0.75em !default; // ~12px
42-
$type-size-7 : 0.6875em !default; // ~11px
43-
$type-size-8 : 0.625em !default; // ~10px
44-
37+
$type-size-1: 2.441em !default; // ~39.056px
38+
$type-size-2: 1.953em !default; // ~31.248px
39+
$type-size-3: 1.563em !default; // ~25.008px
40+
$type-size-4: 1.25em !default; // ~20px
41+
$type-size-5: 1em !default; // ~16px
42+
$type-size-6: 0.75em !default; // ~12px
43+
$type-size-7: 0.6875em !default; // ~11px
44+
$type-size-8: 0.625em !default; // ~10px
4545

4646
/*
4747
Colors
4848
========================================================================== */
4949

50-
$gray : #7a8288 !default;
51-
$dark-gray : mix(#000, $gray, 40%) !default;
52-
$darker-gray : mix(#000, $gray, 60%) !default;
53-
$light-gray : mix(#fff, $gray, 50%) !default;
54-
$lighter-gray : mix(#fff, $gray, 90%) !default;
55-
56-
$background-color : #fff !default;
57-
$code-background-color : #fafafa !default;
58-
$code-background-color-dark : $light-gray !default;
59-
$text-color : $dark-gray !default;
60-
$muted-text-color : mix(#fff, $text-color, 35%) !default;
61-
$border-color : $lighter-gray !default;
62-
$form-background-color : $lighter-gray !default;
63-
$footer-background-color : $lighter-gray !default;
64-
65-
$primary-color : #7a8288 !default;
66-
$success-color : #62c462 !default;
67-
$warning-color : #f89406 !default;
68-
$danger-color : #ee5f5b !default;
69-
$info-color : #52adc8 !default;
50+
$gray: #7a8288 !default;
51+
$dark-gray: mix(#000, $gray, 40%) !default;
52+
$darker-gray: mix(#000, $gray, 60%) !default;
53+
$light-gray: mix(#fff, $gray, 50%) !default;
54+
$lighter-gray: mix(#fff, $gray, 90%) !default;
55+
56+
$background-color: #fff !default;
57+
$code-background-color: #fafafa !default;
58+
$code-background-color-dark: $light-gray !default;
59+
$text-color: $dark-gray !default;
60+
$muted-text-color: mix(#fff, $text-color, 35%) !default;
61+
$border-color: $lighter-gray !default;
62+
$form-background-color: $lighter-gray !default;
63+
$footer-background-color: $lighter-gray !default;
64+
65+
$primary-color: #7a8288 !default;
66+
$success-color: #62c462 !default;
67+
$warning-color: #f89406 !default;
68+
$danger-color: #ee5f5b !default;
69+
$info-color: #52adc8 !default;
7070

7171
/* YIQ color contrast */
72-
$yiq-contrasted-dark-default : $dark-gray !default;
73-
$yiq-contrasted-light-default : #fff !default;
74-
$yiq-contrasted-threshold : 175 !default;
75-
$yiq-debug : false !default;
72+
$yiq-contrasted-dark-default: $dark-gray !default;
73+
$yiq-contrasted-light-default: #fff !default;
74+
$yiq-contrasted-threshold: 175 !default;
75+
$yiq-debug: false !default;
7676

7777
/* brands */
78-
$behance-color : #1769FF !default;
79-
$bitbucket-color : #205081 !default;
80-
$dribbble-color : #ea4c89 !default;
81-
$facebook-color : #3b5998 !default;
82-
$flickr-color : #ff0084 !default;
83-
$foursquare-color : #0072b1 !default;
84-
$github-color : #171516 !default;
85-
$google-plus-color : #dd4b39 !default;
86-
$instagram-color : #517fa4 !default;
87-
$lastfm-color : #d51007 !default;
88-
$linkedin-color : #007bb6 !default;
89-
$pinterest-color : #cb2027 !default;
90-
$rss-color : #fa9b39 !default;
91-
$soundcloud-color : #ff3300 !default;
92-
$stackoverflow-color : #fe7a15 !default;
93-
$tumblr-color : #32506d !default;
94-
$twitter-color : #55acee !default;
95-
$vimeo-color : #1ab7ea !default;
96-
$vine-color : #00bf8f !default;
97-
$youtube-color : #bb0000 !default;
98-
$xing-color : #006567 !default;
78+
$behance-color: #1769ff !default;
79+
$bitbucket-color: #205081 !default;
80+
$dribbble-color: #ea4c89 !default;
81+
$facebook-color: #3b5998 !default;
82+
$flickr-color: #ff0084 !default;
83+
$foursquare-color: #0072b1 !default;
84+
$github-color: #171516 !default;
85+
$google-plus-color: #dd4b39 !default;
86+
$instagram-color: #517fa4 !default;
87+
$lastfm-color: #d51007 !default;
88+
$linkedin-color: #007bb6 !default;
89+
$pinterest-color: #cb2027 !default;
90+
$rss-color: #fa9b39 !default;
91+
$soundcloud-color: #ff3300 !default;
92+
$stackoverflow-color: #fe7a15 !default;
93+
$tumblr-color: #32506d !default;
94+
$twitter-color: #55acee !default;
95+
$vimeo-color: #1ab7ea !default;
96+
$vine-color: #00bf8f !default;
97+
$youtube-color: #bb0000 !default;
98+
$xing-color: #006567 !default;
9999

100100
/* links */
101-
$link-color : $info-color !default;
102-
$link-color-hover : mix(#000, $link-color, 25%) !default;
103-
$link-color-visited : mix(#fff, $link-color, 25%) !default;
104-
$masthead-link-color : $primary-color !default;
105-
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
106-
$navicon-link-color-hover : mix(#fff, $primary-color, 75%) !default;
101+
$link-color: $info-color !default;
102+
$link-color-hover: mix(#000, $link-color, 25%) !default;
103+
$link-color-visited: mix(#fff, $link-color, 25%) !default;
104+
$masthead-link-color: $primary-color !default;
105+
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
106+
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
107+
108+
/* syntax highlighting (base16) */
109+
$base00: #263238 !default;
110+
$base01: #2e3c43 !default;
111+
$base02: #314549 !default;
112+
$base03: #546e7a !default;
113+
$base04: #b2ccd6 !default;
114+
$base05: #eeffff !default;
115+
$base06: #eeffff !default;
116+
$base07: #ffffff !default;
117+
$base08: #f07178 !default;
118+
$base09: #f78c6c !default;
119+
$base0a: #ffcb6b !default;
120+
$base0b: #c3e88d !default;
121+
$base0c: #89ddff !default;
122+
$base0d: #82aaff !default;
123+
$base0e: #c792ea !default;
124+
$base0f: #ff5370 !default;
107125

108126
/*
109127
Breakpoints
110128
========================================================================== */
111129

112-
$small : 600px !default;
113-
$medium : 768px !default;
114-
$medium-wide : 900px !default;
115-
$large : 1024px !default;
116-
$x-large : 1280px !default;
117-
130+
$small: 600px !default;
131+
$medium: 768px !default;
132+
$medium-wide: 900px !default;
133+
$large: 1024px !default;
134+
$x-large: 1280px !default;
118135

119136
/*
120137
Grid
121138
========================================================================== */
122139

123-
$right-sidebar-width-narrow : 200px !default;
124-
$right-sidebar-width : 300px !default;
125-
$right-sidebar-width-wide : 400px !default;
126-
140+
$right-sidebar-width-narrow: 200px !default;
141+
$right-sidebar-width: 300px !default;
142+
$right-sidebar-width-wide: 400px !default;
127143

128144
/*
129145
Other
130146
========================================================================== */
131147

132-
$border-radius : 4px !default;
133-
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
134-
$navicon-width : 1.5rem !default;
135-
$navicon-height : 0.25rem !default;
136-
$global-transition : all 0.2s ease-in-out !default;
137-
$intro-transition : intro 0.3s both !default;
148+
$border-radius: 4px !default;
149+
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
150+
$navicon-width: 1.5rem !default;
151+
$navicon-height: 0.25rem !default;
152+
$global-transition: all 0.2s ease-in-out !default;
153+
$intro-transition: intro 0.3s both !default;

‎_sass/minimal-mistakes/skins/_contrast.scss

+18
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,24 @@ $masthead-link-color: $text-color !default;
1313
$masthead-link-color-hover: $text-color !default;
1414
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
1515

16+
/* contrast syntax highlighting (base16) */
17+
$base00: #000000 !default;
18+
$base01: #242422 !default;
19+
$base02: #484844 !default;
20+
$base03: #6c6c66 !default;
21+
$base04: #918f88 !default;
22+
$base05: #b5b3aa !default;
23+
$base06: #d9d7cc !default;
24+
$base07: #fdfbee !default;
25+
$base08: #ff6c60 !default;
26+
$base09: #e9c062 !default;
27+
$base0a: #ffffb6 !default;
28+
$base0b: #a8ff60 !default;
29+
$base0c: #c6c5fe !default;
30+
$base0d: #96cbfe !default;
31+
$base0e: #ff73fd !default;
32+
$base0f: #b18a3d !default;
33+
1634
.page__content {
1735
.notice,
1836
.notice--primary,

‎_sass/minimal-mistakes/skins/_dark.scss

+18
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
1818
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
1919
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
2020

21+
/* dark syntax highlighting (base16) */
22+
$base00: #ffffff !default;
23+
$base01: #e0e0e0 !default;
24+
$base02: #d0d0d0 !default;
25+
$base03: #b0b0b0 !default;
26+
$base04: #000000 !default;
27+
$base05: #101010 !default;
28+
$base06: #151515 !default;
29+
$base07: #202020 !default;
30+
$base08: #ff0086 !default;
31+
$base09: #fd8900 !default;
32+
$base0a: #aba800 !default;
33+
$base0b: #00c918 !default;
34+
$base0c: #1faaaa !default;
35+
$base0d: #3777e6 !default;
36+
$base0e: #ad00a1 !default;
37+
$base0f: #cc6633 !default;
38+
2139
.page__footer-follow .social-icons .svg-inline--fa {
2240
color: inherit;
2341
}

‎_sass/minimal-mistakes/skins/_dirt.scss

+19-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,22 @@ $footer-background-color: #e9dcbe !default;
1212
$link-color: #343434 !default;
1313
$masthead-link-color: $text-color !default;
1414
$masthead-link-color-hover: $text-color !default;
15-
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
15+
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
16+
17+
/* dirt syntax highlighting (base16) */
18+
$base00: #231e18 !default;
19+
$base01: #302b25 !default;
20+
$base02: #48413a !default;
21+
$base03: #9d8b70 !default;
22+
$base04: #b4a490 !default;
23+
$base05: #cabcb1 !default;
24+
$base06: #d7c8bc !default;
25+
$base07: #e4d4c8 !default;
26+
$base08: #d35c5c !default;
27+
$base09: #ca7f32 !default;
28+
$base0a: #e0ac16 !default;
29+
$base0b: #b7ba53 !default;
30+
$base0c: #6eb958 !default;
31+
$base0d: #88a4d3 !default;
32+
$base0e: #bb90e2 !default;
33+
$base0f: #b49368 !default;

‎_sass/minimal-mistakes/skins/_neon.scss

+18
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
1818
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
1919
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
2020

21+
/* neon syntax highlighting (base16) */
22+
$base00: #ffffff !default;
23+
$base01: #e0e0e0 !default;
24+
$base02: #d0d0d0 !default;
25+
$base03: #b0b0b0 !default;
26+
$base04: #000000 !default;
27+
$base05: #101010 !default;
28+
$base06: #151515 !default;
29+
$base07: #202020 !default;
30+
$base08: #ff0086 !default;
31+
$base09: #fd8900 !default;
32+
$base0a: #aba800 !default;
33+
$base0b: #00c918 !default;
34+
$base0c: #1faaaa !default;
35+
$base0d: #3777e6 !default;
36+
$base0e: #ad00a1 !default;
37+
$base0f: #cc6633 !default;
38+
2139
.author__urls.social-icons .fa,
2240
.page__footer-follow .social-icons .svg-inline--fa {
2341
color: inherit;

‎_sass/minimal-mistakes/skins/_plum.scss

+18
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
1818
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
1919
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
2020

21+
/* plum syntax highlighting (base16) */
22+
$base00: #ffffff !default;
23+
$base01: #e0e0e0 !default;
24+
$base02: #d0d0d0 !default;
25+
$base03: #b0b0b0 !default;
26+
$base04: #000000 !default;
27+
$base05: #101010 !default;
28+
$base06: #151515 !default;
29+
$base07: #202020 !default;
30+
$base08: #ff0086 !default;
31+
$base09: #fd8900 !default;
32+
$base0a: #aba800 !default;
33+
$base0b: #00c918 !default;
34+
$base0c: #1faaaa !default;
35+
$base0d: #3777e6 !default;
36+
$base0e: #ad00a1 !default;
37+
$base0f: #cc6633 !default;
38+
2139
.author__urls.social-icons .fa,
2240
.page__footer-follow .social-icons .svg-inline--fa {
2341
color: inherit;

‎_sass/minimal-mistakes/skins/_sunrise.scss

+18
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,24 @@ $masthead-link-color: $text-color !default;
2020
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
2121
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
2222

23+
/* sunrise syntax highlighting (base16) */
24+
$base00: #1d1f21 !default;
25+
$base01: #282a2e !default;
26+
$base02: #373b41 !default;
27+
$base03: #969896 !default;
28+
$base04: #b4b7b4 !default;
29+
$base05: #c5c8c6 !default;
30+
$base06: #e0e0e0 !default;
31+
$base07: #ffffff !default;
32+
$base08: #cc6666 !default;
33+
$base09: #de935f !default;
34+
$base0a: #f0c674 !default;
35+
$base0b: #b5bd68 !default;
36+
$base0c: #8abeb7 !default;
37+
$base0d: #81a2be !default;
38+
$base0e: #b294bb !default;
39+
$base0f: #a3685a !default;
40+
2341
.author__urls.social-icons .fa,
2442
.page__footer-follow .social-icons .svg-inline--fa {
2543
color: inherit;

0 commit comments

Comments
 (0)