Skip to content

Commit c032c2d

Browse files
theprivilegesjesuswasrasta
theprivileges
authored and
jesuswasrasta
committed
docs: Add dracula base16 syntax highlighting (mmistakes#2438)
Updates stylesheets doc by adding a section for [dracula theme](https://draculatheme.com/).
1 parent e74606d commit c032c2d

File tree

2 files changed

+393
-0
lines changed

2 files changed

+393
-0
lines changed

‎docs/_docs/16-stylesheets.md

+393
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
---
2+
title: "Stylesheets"
3+
permalink: /docs/stylesheets/
4+
excerpt: "Instructions for customizing and building the theme's stylesheets."
5+
last_modified_at: 2018-11-25T19:47:43-05:00
6+
toc: true
7+
---
8+
9+
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:
10+
11+
```bash
12+
minimal-mistakes
13+
├── _sass
14+
| └── minimal-mistakes
15+
| ├── vendor # vendor SCSS partials
16+
| | ├── breakpoint # media query mixins
17+
| | ├── magnific-popup # Magnific Popup lightbox
18+
| | └── susy # Susy grid system
19+
| ├── _animations.scss # animations
20+
| ├── _archive.scss # archives (list, grid, feature views)
21+
| ├── _base.scss # base HTML elements
22+
| ├── _buttons.scss # buttons
23+
| ├── _footer.scss # footer
24+
| ├── _masthead.scss # masthead
25+
| ├── _mixins.scss # mixins (em function, clearfix)
26+
| ├── _navigation.scss # nav links (breadcrumb, priority+, toc, pagination, etc.)
27+
| ├── _notices.scss # notices
28+
| ├── _page.scss # pages
29+
| ├── _print.scss # print styles
30+
| ├── _reset.scss # reset
31+
| ├── _sidebar.scss # sidebar
32+
| ├── _syntax.scss # syntax highlighting
33+
| ├── _tables.scss # tables
34+
| ├── _utilities.scss # utility classes (text/image alignment)
35+
| └── _variables.scss # theme defaults (fonts, colors, etc.)
36+
├── assets
37+
| ├── css
38+
| | └── main.scss # main stylesheet, loads SCSS partials in _sass
39+
```
40+
41+
## Customizing
42+
43+
To override the default [Sass](http://sass-lang.com/guide) (located in theme's
44+
`_sass` directory), do one of the following:
45+
46+
1. Copy directly from the Minimal Mistakes theme gem
47+
48+
- Go to your local Minimal Mistakes gem installation directory (run
49+
`bundle show minimal-mistakes-jekyll` to get the path to it).
50+
- Copy the contents of `/assets/css/main.scss` from there to
51+
`<your_project>`.
52+
- Customize what you want inside `<your_project>/assets/css/main.scss`.
53+
54+
2. Copy from this repo.
55+
56+
- Copy the contents of [assets/css/main.scss](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss)
57+
to `<your_project>`.
58+
- Customize what you want inside `<your_project/assets/css/main.scss`.
59+
60+
**Note:** To make more extensive changes and customize the Sass partials bundled
61+
in the gem. You will need to copy the complete contents of the `_sass` directory
62+
to `<your_project>` due to the way Jekyll currently reads those files.
63+
64+
To make basic tweaks to theme's style Sass variables can be overridden by adding
65+
to `<your_project>/assets/css/main.scss`. For instance, to change the
66+
link color used throughout the theme add:
67+
68+
```scss
69+
$link-color: red;
70+
```
71+
72+
Before any `@import` lines.
73+
74+
### Paragraph indention
75+
76+
To mimic the look of type set in a printed book or manuscript you may want to enable paragraph indention. When `$paragraph-indent` is set to `true` indents are added to each sibling and the margin below each paragraph is removed.
77+
78+
<figure>
79+
<img src="{{ '/assets/images/mm-paragraph-indent-example.jpg' | relative_url }}" alt="indented paragraph example">
80+
<figcaption>Example of indented paragraphs.</figcaption>
81+
</figure>
82+
83+
The size of the indent can also be customized by changing the value of `$indent-var`.
84+
85+
### Font stacks
86+
87+
By default the theme uses [system fonts](https://medium.com/designing-medium/system-shock-6b1dc6d6596f#.rb81vgn7i) for all of the font stacks (serif, sans-serif, and monospace). This is done in part to provide a clean base for you to build off of and to improve performance since we aren't loading any custom webfonts by default.
88+
89+
```scss
90+
/* system typefaces */
91+
$serif : Georgia, Times, serif;
92+
$sans-serif : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
93+
$monospace : Monaco, Consolas, "Lucida Console", monospace;
94+
```
95+
96+
Sans-serif fonts have been used for most of the type, with serifs reserved for captions. If you wish to change this you'll need to poke around the various `SCSS` partials and modify `font-family` declarations.
97+
98+
**ProTip:** To use webfonts from services like [Adobe TypeKit](https://typekit.com/) or [Google Fonts](https://www.google.com/fonts) simply update the font stacks and then add their scripts to `_includes/head/custom.html`.
99+
{: .notice--info}
100+
101+
#### Typography from older versions
102+
103+
Not a fan of the refreshed typography of the theme and want to revert back an older version? Easy enough.
104+
105+
**1.** Add this Google Fonts script to [`_includes/head/custom.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/head/custom.html):
106+
107+
```html
108+
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic" rel="stylesheet" type="text/css">
109+
```
110+
111+
**2.** Update the following SCSS variables:
112+
113+
```scss
114+
$serif : "PT Serif", Georgia, Times, serif;
115+
$sans-serif-narrow : "PT Sans Narrow", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
116+
117+
$global-font-family : $serif;
118+
$header-font-family : $sans-serif-narrow;
119+
```
120+
121+
### Type scale
122+
123+
Wherever possible type scale variables have been used instead of writing out fixed sizes. This makes updating much easier by changing values in one file.
124+
125+
Example:
126+
127+
```scss
128+
.page__lead {
129+
font-family: $global-font-family;
130+
font-size: $type-size-4;
131+
}
132+
```
133+
134+
Type sizes are set in ems to proportional scale as the screen size changes. Large headlines that look great on desktop monitors will shrink ever so slightly as to not be too big on mobile devices. To adjust this hierarchy simply edit the default values:
135+
136+
```scss
137+
/* type scale */
138+
$type-size-1 : 2.441em; // ~39.056px
139+
$type-size-2 : 1.953em; // ~31.248px
140+
$type-size-3 : 1.563em; // ~25.008px
141+
$type-size-4 : 1.25em; // ~20px
142+
$type-size-5 : 1em; // ~16px
143+
$type-size-6 : 0.75em; // ~12px
144+
$type-size-7 : 0.6875em; // ~11px
145+
$type-size-8 : 0.625em; // ~10px
146+
```
147+
148+
### Colors
149+
150+
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.
151+
152+
#### Syntax highlighting
153+
154+
To make customizing the colors used in code highlighted blocks, a base of sixteen colors ([Base16](http://chriskempson.com/projects/base16/)) have been used.
155+
156+
Code block colors can easily be changed by overriding any of the following color variables:
157+
158+
##### Default
159+
160+
![default-code-block]({{ '/assets/images/default-code-block.jpg' | relative_url }})
161+
162+
```scss
163+
/* default syntax highlighting (base16) */
164+
$base00: #263238;
165+
$base01: #2e3c43;
166+
$base02: #314549;
167+
$base03: #546e7a;
168+
$base04: #b2ccd6;
169+
$base05: #eeffff;
170+
$base06: #eeffff;
171+
$base07: #ffffff;
172+
$base08: #f07178;
173+
$base09: #f78c6c;
174+
$base0a: #ffcb6b;
175+
$base0b: #c3e88d;
176+
$base0c: #89ddff;
177+
$base0d: #82aaff;
178+
$base0e: #c792ea;
179+
$base0f: #ff5370;
180+
```
181+
182+
##### Solarized light
183+
184+
![solarized-light-code-block]({{ '/assets/images/solarized-light-code-block.jpg' | relative_url }})
185+
186+
```scss
187+
/* solarized light syntax highlighting (base16) */
188+
$base00: #fafafa !default;
189+
$base01: #073642 !default;
190+
$base02: #586e75 !default;
191+
$base03: #657b83 !default;
192+
$base04: #839496 !default;
193+
$base05: #586e75 !default;
194+
$base06: #eee8d5 !default;
195+
$base07: #fdf6e3 !default;
196+
$base08: #dc322f !default;
197+
$base09: #cb4b16 !default;
198+
$base0a: #b58900 !default;
199+
$base0b: #859900 !default;
200+
$base0c: #2aa198 !default;
201+
$base0d: #268bd2 !default;
202+
$base0e: #6c71c4 !default;
203+
$base0f: #d33682 !default;
204+
```
205+
206+
##### Contrast
207+
208+
![contrast-code-block]({{ '/assets/images/contrast-code-block.jpg' | relative_url }})
209+
210+
```scss
211+
/* contrast syntax highlighting (base16) */
212+
$base00: #000000;
213+
$base01: #242422;
214+
$base02: #484844;
215+
$base03: #6c6c66;
216+
$base04: #918f88;
217+
$base05: #b5b3aa;
218+
$base06: #d9d7cc;
219+
$base07: #fdfbee;
220+
$base08: #ff6c60;
221+
$base09: #e9c062;
222+
$base0a: #ffffb6;
223+
$base0b: #a8ff60;
224+
$base0c: #c6c5fe;
225+
$base0d: #96cbfe;
226+
$base0e: #ff73fd;
227+
$base0f: #b18a3d;
228+
```
229+
230+
##### Dark
231+
232+
![dark-code-block]({{ '/assets/images/dark-code-block.jpg' | relative_url }})
233+
234+
```scss
235+
/* dark syntax highlighting (base16) */
236+
$base00: #ffffff;
237+
$base01: #e0e0e0;
238+
$base02: #d0d0d0;
239+
$base03: #b0b0b0;
240+
$base04: #000000;
241+
$base05: #101010;
242+
$base06: #151515;
243+
$base07: #202020;
244+
$base08: #ff0086;
245+
$base09: #fd8900;
246+
$base0a: #aba800;
247+
$base0b: #00c918;
248+
$base0c: #1faaaa;
249+
$base0d: #3777e6;
250+
$base0e: #ad00a1;
251+
$base0f: #cc6633;
252+
```
253+
254+
##### Dirt
255+
256+
![dirt-code-block]({{ '/assets/images/dirt-code-block.jpg' | relative_url }})
257+
258+
```scss
259+
/* dirt syntax highlighting (base16) */
260+
$base00: #231e18;
261+
$base01: #302b25;
262+
$base02: #48413a;
263+
$base03: #9d8b70;
264+
$base04: #b4a490;
265+
$base05: #cabcb1;
266+
$base06: #d7c8bc;
267+
$base07: #e4d4c8;
268+
$base08: #d35c5c;
269+
$base09: #ca7f32;
270+
$base0a: #e0ac16;
271+
$base0b: #b7ba53;
272+
$base0c: #6eb958;
273+
$base0d: #88a4d3;
274+
$base0e: #bb90e2;
275+
$base0f: #b49368;
276+
```
277+
278+
##### Dracula
279+
280+
![dracula-code-block]({{ '/assets/images/dracula-code-block.jpg' | relative_url }})
281+
282+
```scss
283+
/* dracula syntax highlighting (base16) */
284+
/* https://github.com/dracula/base16-dracula-scheme */
285+
$base00: #282936;
286+
$base01: #3a3c4e;
287+
$base02: #4d4f68;
288+
$base03: #626483;
289+
$base04: #62d6e8;
290+
$base05: #e9e9f4;
291+
$base06: #f1f2f8;
292+
$base07: #f7f7fb;
293+
$base08: #ea51b2;
294+
$base09: #b45bcf;
295+
$base0a: #00f769;
296+
$base0b: #ebff87;
297+
$base0c: #a1efe4;
298+
$base0d: #62d6e8;
299+
$base0e: #b45bcf;
300+
$base0f: #00f769;
301+
```
302+
303+
##### Neon
304+
305+
![neon-code-block]({{ '/assets/images/neon-code-block.jpg' | relative_url }})
306+
307+
```scss
308+
/* neon syntax highlighting (base16) */
309+
$base00: #ffffff;
310+
$base01: #e0e0e0;
311+
$base02: #d0d0d0;
312+
$base03: #b0b0b0;
313+
$base04: #000000;
314+
$base05: #101010;
315+
$base06: #151515;
316+
$base07: #202020;
317+
$base08: #ff0086;
318+
$base09: #fd8900;
319+
$base0a: #aba800;
320+
$base0b: #00c918;
321+
$base0c: #1faaaa;
322+
$base0d: #3777e6;
323+
$base0e: #ad00a1;
324+
$base0f: #cc6633;
325+
```
326+
327+
##### Plum
328+
329+
![plum-code-block]({{ '/assets/images/plum-code-block.jpg' | relative_url }})
330+
331+
```scss
332+
/* plum syntax highlighting (base16) */
333+
$base00: #ffffff;
334+
$base01: #e0e0e0;
335+
$base02: #d0d0d0;
336+
$base03: #b0b0b0;
337+
$base04: #000000;
338+
$base05: #101010;
339+
$base06: #151515;
340+
$base07: #202020;
341+
$base08: #ff0086;
342+
$base09: #fd8900;
343+
$base0a: #aba800;
344+
$base0b: #00c918;
345+
$base0c: #1faaaa;
346+
$base0d: #3777e6;
347+
$base0e: #ad00a1;
348+
$base0f: #cc6633;
349+
```
350+
351+
##### Sunrise
352+
353+
![sunrise-code-block]({{ '/assets/images/sunrise-code-block.jpg' | relative_url }})
354+
355+
```scss
356+
/* sunrise syntax highlighting (base16) */
357+
$base00: #1d1f21;
358+
$base01: #282a2e;
359+
$base02: #373b41;
360+
$base03: #969896;
361+
$base04: #b4b7b4;
362+
$base05: #c5c8c6;
363+
$base06: #e0e0e0;
364+
$base07: #ffffff;
365+
$base08: #cc6666;
366+
$base09: #de935f;
367+
$base0a: #f0c674;
368+
$base0b: #b5bd68;
369+
$base0c: #8abeb7;
370+
$base0d: #81a2be;
371+
$base0e: #b294bb;
372+
$base0f: #a3685a;
373+
```
374+
375+
### Breakpoints and grid stuff
376+
377+
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.
378+
379+
And `$susy` is used for setting [the grid](http://susy.oddbird.net/) the theme uses. Uncommenting the lines under `debug` can be useful if you want to show the columns when adjusting the layout.
380+
381+
<figure>
382+
<img src="{{ '/assets/images/mm-susy-grid-overlay.jpg' | relative_url }}" alt="Susy grid overlay for debugging">
383+
<figcaption>Susy grid debug overlay enabled.</figcaption>
384+
</figure>
385+
386+
### Disabling animations
387+
388+
You can disable either the fade-in intro animation, element transition animations, or both by overriding the corresponding variables. For example if you wanted to disable all animations you could include the following lines:
389+
390+
```scss
391+
$intro-transition : none;
392+
$global-transition : none;
393+
```

‎docs/assets/images/dracula-code-block.jpg

139 KB
Loading

0 commit comments

Comments
 (0)