/
getting-started.html
353 lines (291 loc) · 27.8 KB
/
getting-started.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kraken</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Kraken: A lightweight, mobile-first boilerplate for front-end web developers">
<!-- Icons -->
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
<!-- Stylesheet -->
<link rel="stylesheet" href="dist/main.css" type="text/css">
<style type="text/css">
.container-small {
max-width: 50em;
}
html {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/**
* Nav layout
*/
@media (min-width: 40em) {
.nav {
align-items: center;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
.row-thirds {
align-items: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
}
/**
* Nav links
*/
nav a {
text-decoration: none;
}
nav a:active,
nav a:hover {
text-decoration: underline;
}
/**
* Background colors
*/
.bg-muted {
background-color: #f7f7f7;
}
@media (max-width: 25em) {
.list-inline li {
width: 100%;
}
}
/**
* Grid Highlighting
*/
.grid-highlight {
background-color: #f7f7f7;
border: 1px solid #e5e5e5;
border-radius: 0.0725em;
margin-bottom: 1.5625em;
padding: 0.9375em;
}
/**
* Prism
* Code syntax highlighting by Lea Verou.
* http://prismjs.com/
*/
@media screen {
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.builtin {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #a67f59;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.regex,
.token.important {
color: #e90;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}
}
</style>
</head>
<body>
<a class="visually-hidden focusable" href="#main">Skip Navigation</a>
<div class="bg-muted padding-top margin-bottom-large">
<nav class="container container-small">
<div class="nav">
<div>
<a href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" role="img" style="height:4em;width:4em;" viewBox="0 0 100 100"><path fill="currentColor" d="M97.035 51.533c-2.617-.202-3.956-2.63-5.297-4.547-1.49-1.908-3.537-3.36-6.032-3.466-6.11-.256-7.966 6.15-6.693 11.002 1.487 5.525 6.41 9.185 8.02 14.482 1.464 4.818-2.184 8.835-7.05 8.835 1.627-1.223 1.35-3.842.272-5.316-.357-.488-1.17-1.25-1.866-1.01-.944.326.546 2.206.673 2.645.757 2.698-2.923 3.102-4.64 2.383-2.06-.86-4-1.784-6.127-2.49.96-1.44 1.37-3.38 1.096-5.088-.086-.688-1.076-3.973-2.35-3.207-.59.335-1.187 3.306-1.6 4.062-.744 1.36-1.718 2.536-3.03 3.382-.86.666-2.81.712-3.17-.58-.294-.958 1.98-1.924 2.543-2.306 1.944-1.317 3.617-3.65 5.146-5.456 5.094-5.76 9.19-12.93 10.84-20.48.593-2.712.03-6.125 2.88-7.345 3.48-1.697 6.677-4.074 5.588-8.384-.828-3.27-2.124-6.467-3.095-9.705C82.34 16.27 81.87 11.898 79.7 9.9c-2.63-2.417-5.608.585-7.215 2.562-2.59 3.188-6.273 4.284-9.97 5.687-3.76 1.427-5.983 3.424-7.9 6.948-1.34 2.91-4.286 4.826-6.514 6.993-4.405 4.26-13.313 10.267-13.846 17.03-.17 1.477.144 2.993-.46 4.405-.528 1.25-1.643 2.054-2.275 3.235-.6 1.12-1.16 2.85-1.16 4.146-.016 1.192.497 2.402.186 3.578-1.923-1.434.065-2.636-.386-4.146-1.263-1.68-5.052 2.32-4.985 3.876-.944-.944-.644-5.89-2.116-5.237-1.986.788-4.077 4.613-2.75 6.575-6.143-3.836-7.137-13.57-3.026-19.042 4.212-5.588 11.528-6.46 17.633-8.828 6.63-2.57 12.204-7.96 9.402-15.542-3.077-8.32-10.505-11.108-18.784-9.715-3.16.542-6.28 2.694-9.496 2.188-1.186-.187-3.46-1.814-3.17-.362.083 1.62 1.75 3.108 2.984 3.935 5.037 3.373 11.205 2.03 16.618.896 5.93-1.24 13.047 4.098 9.512 10.53-3.454 6.307-13.446 7.576-19.468 10.177-11.685 5.048-13.292 21.397-2.23 28.175-3.003 1.32-4.367 3.94-8.027 3.372-1.565-.244-4.093-.6-4.482-2.378C7.42 67.32 8.91 64.44 7.69 65.38c-6.49 5.01 2.533 11.376 7.726 11.216-2.642.992-6.716.98-9.326-.103-1.455-.597-2.29-1.908-2.562-3.436-.265-1.483-1.327-1.464-1.495.06-.28 2.36 1.613 5.33 3.18 6.884 2.31 2.258 5.22 2.668 8.31 2.668-2.19.74-4.757 9.05-2.308 8.684.807-.12 1.096-1.427 1.542-1.947.62-.726 1.438-1.27 2.22-1.805 1.98-1.35 4.392-1.69 6.738-1.795 7.366-.313 19.416 7.174 24.543-1.303 3.494 3.842 9.39 4.648 14.28 3.676 2.634-.52 4.593-2.46 7.16-3.018 2.93-.684 5.332 1.323 8.04 1.98 4.39 1.064 10.896.312 12.803-4.413.276-.68.745-2.478-.375-2.804-.56-.16-2.23 1.604-2.903 1.858-2.49.94-5.58-.308-7.56-1.854 5.147.148 11.377-1.82 11.8-7.766.49-5.66-4.624-10.094-6.96-14.85-.868-1.767-2.892-5.416-.683-6.983 1.577-1.12 3.773 2.41 4.76 3.226 1.95 1.823 4.82 3.036 7.483 2.203.97-.3 5.964-4.223 2.932-4.223-.526-.04.207 0 0 0zM16.787 16.08c7.424.207 10.12-4.265 18.137-1.373.46.167 2.855 1.322 1.668 2.042-.758.46-1.908-.597-3.77-.107-1.725.454-3.377 1.265-5.147 1.636-1.26.263-8.565.85-10.888-2.2zm51.537 61.337c-2.354.3-4.06 1.46-6.193 2.374-1.453.624-3.638 1.087-4.962-.085-1.746-.988-.886-2.377-.886-3.87 1.766 2.76 5.19 2.12 7.73 1.052 1.857-.74 3.418-1.115 5.406-.654 1.94.448 3.445 1.666 5.297 2.2-.833.267-4.436-1.267-6.39-1.016zm-.877-8.13c.846 2.928-1.81 6.063-5.44 7.02-1.51.4-4.89-.298-4.304-1.638.426-.857 1.757 1.168 4.676.267 1.288-.4 3.94-3.12 5.067-5.65zM63.45 19.99c.913-.31 1.822-.64 2.72-.998-2.835 2.428-6.04 4.548-9.313 6.338 1.81-2.455 3.614-4.327 6.592-5.34.31-.105-2.432.828 0 0zM41.16 41.518c3.624-3.596 7.206-7.438 11.18-10.65 3.893-3.308 8.508-5.716 12.755-8.537 2.283-1.685 4.56-3.435 6.524-5.493 1.338-1.407 2.29-3.108 3.59-4.528 4.166-4.557 6.315 6.946 7.077 9.495.727 2.37 1.75 4.72 2.33 7.12.683 2.82-1.025 4.49-3.332 5.856-2.072 1.22-4.586 1.873-6.536 3.24-1.096.904-2.077 2.126-2.287 3.573.055 1.392 1.422-.025 1.692-.502.342-.738 2.34-3.437 2.31-1.377-.04 2.24-.576 4.492-1.22 6.63-1.505 6.152-4.954 11.585-9.024 16.362.047-6.425-5.945-11.08-11.636-12.51-5.027-1.264-12.873-1.713-17.576 1.07-1.338-3.244 2.05-7.622 4.15-9.748.186-.184-.09.09 0 0zM28.6 61.673c.63.434-.957 2.023.598 3.37.286 1.1-1.443.694-1.97.606-1.758-.767.042-4.17 1.372-3.977.074.05-.05-.008 0 0zm-6.562.442l.476-.503c.29 3.697 2.096 5.997 5.89 5.997-2.777 3.76-8.604-2.34-6.366-5.495.05-.24-.055.077 0 0zM80.214 83.18c1.7.657 3.634 1.185 5.448.666-3.25 1.952-7.72 2.637-11.273 1.11-1.722-.737-3.342-1.676-5.255-1.772-2.296-.116-4.196 1.103-6.186 2.048-3.446 1.64-8.41 2.007-11.94.38-2.773-1.277-6.79-4.982-5.123-8.438.184-.384 1.31-1.165 1.105-1.608-.204-.893-1.522-.104-1.853.232-1.715 1.753-.664 4.036-.478 6.09 0 4.522-5.256 4.9-8.697 4.557-7.495-.75-17.762-6.45-23.685 1.448.087-3.265 4.146-5.91 6.89-6.91 3.19-1.16 6.91-.504 10.063.462 3.002.9 5.306 1.234 8.193-.23 1.426-.726 2.54-1.87 3.192-3.328.226-.563.75-3.05-.42-3.05-.323 0-.146 1.883-1.61 3.737-.84 1.066-2.223 1.604-3.52 1.926-3.334.888-6.482-1.075-9.743-1.438-3.058-.313-6.122.098-9.082.86-3.39.874-8.495 1.19-10.688-2.278 5.14 1.708 9.507.764 14.312-1.294 4.748-2.035 9.24-3.146 14.394-2.567.363.04 2.113-.05 1.008-.944-.805-.652-2.41-.834-3.39-.9-2.78-.188-6.025.776-8.662 1.603-2.277.618-4.65 2.026-7.068 1.685-2.696-.388-5.68-1.048-7.497-3.253 2.147.987 5.057 1.722 7.315.7 2.382-.817 3.78-3.268 6.51-3.08 2.194.494 4.626 1.29 6.706-.028 2.31-1.447 3.82-3.272 3.54-6.035-.298-3.075-.398-5.6 1.966-7.965 1.93-2 4.78-3.217 7.45-3.837 5.317-1.23 11.5-.422 16.285 2.213 4.662 2.566 7.917 8.474 3.968 13.208-2.852 3.44-8.093 5.053-8.507 10.203-.13 2.37 1.317 4.026 3.545 4.755 2.618.953 4.984-.287 7.304-1.408 5.85-2.83 10.05.448 15.484 2.48.878.34-.214-.08 0 0zm1.33-36.19c.903-1.077 2.697-1.527 4.03-1.58 4.266-.156 6.03 5.862 9.49 7.608-4.283 4.71-7.815-3.566-11.25-4.46-1.314-.342-3.44-.175-2.27-1.568z"/><path fill="currentColor" d="M60.445 61.983c-.285-1.58-2.18-1.806-2.91-.494-.39.7-.44 1.53-.622 2.27-.76.956-1.954 1.752-2.85 1.016-.403-.332-.604-1.19-.812-1.655-.267-.6-.9-1.263-1.518-1.27-.153-.002-.31.038-.456.13-1.13 1.104-1.063 3.063-.14 4.207.146.16.31.31.484.444.524.41 1.17.707 1.853.856 1.55.45 3.332.31 4.522-.542 1.477-1.05 2.783-3.114 2.45-4.96zM50.244 52.803c-.358.02-.718.18-.85.542-.194.487 0 1.108.49 1.338.393.162.914.13 1.176-.264.358-.556.164-1.305-.47-1.563-.104-.036-.22-.054-.346-.054zM40.882 54.108c-.452-.023-.81.27-.942.694-.13.456.065.98.49 1.175.555.262 1.207-.032 1.403-.588.164-.49-.13-1.045-.6-1.228-.103-.033-.22-.054-.35-.054zM41.86 58.144c-.405-.026-.765.234-.927.563-.13.26-.098.587 0 .848.26.586 1.044.75 1.567.36.326-.293.423-.785.26-1.208-.098-.26-.326-.425-.547-.51-.105-.035-.223-.053-.354-.053zM48.583 39.022c-.267.03-.54.116-.745.266-.206.15-.345.362-.345.64-.008.18.038.342.123.483.256.423.857.64 1.35.478.102-.035.19-.086.266-.15.303-.25.403-.688.303-1.064-.026-.094-.063-.184-.114-.267-.132-.164-.262-.295-.463-.354-.105-.03-.23-.04-.374-.03zM50.748 44.533c-.438.05-.83.247-.992.64-.163.456-.032 1.044.425 1.272.555.26 1.142-.033 1.403-.523.23-.456.13-1.207-.463-1.348-.107-.032-.232-.05-.372-.04zM55.538 32.966c-.1-.007-.195.003-.29.027-.27.047-.5.243-.598.504-.032.092-.052.188-.063.284-.046.488.195.995.686 1.185.26.098.49.132.75 0 .425-.228.52-.718.457-1.143-.032-.36-.262-.62-.583-.78-.108-.044-.228-.07-.36-.076zM64.788 28.203c-.476.005-.9.234-1.063.66-.13.325-.064.684.163.945.424.392 1.044.49 1.535.163.26-.194.327-.487.327-.782 0-.358-.198-.816-.6-.926-.105-.036-.225-.056-.362-.06zM26.416 15.947c-1.01 0-1.212 1.253-.606 1.756.076.063.163.113.265.148.292.12.684.053.947-.147.077-.062.14-.137.19-.22.352-.575.087-1.536-.796-1.536zM25.96 13.793c-1.264 0-1.264 1.958 0 1.958 1.262 0 1.262-1.957 0-1.957zM29.353 14.968c-1.262 0-1.262 1.958 0 1.958 1.263 0 1.263-1.958 0-1.958zM88.11 46.11c-1.264 0-1.264 1.958 0 1.958 1.263 0 1.263-1.96 0-1.96z"/><path fill="currentColor" d="M86.558 47.288c-.505-.04-.83.25-.96.615-.034.092-.053.19-.06.286.01.202-.022.398.103.566.045.086.103.166.174.234.14.137.336.23.587.25 1.26.1 1.417-1.85.158-1.952zM77.688 20.213c-.416 1.435-.393 3.04-.603 4.518-.222 1.568-.475 3.12-.917 4.645-.222.767-.47 1.527-.674 2.3-.09.343-.175.687-.245 1.034-.067.337-.032.928-.24 1.2-.304.395-.313 1.067.35 1.108.67.042 1.066-1.32 1.24-1.808.48-1.36.818-2.798 1.227-4.183.472-1.61.736-3.232.87-4.904.108-1.325.48-2.814.213-4.132-.04-.2-.38-1.45-.752-1.12-.322.28-.4.946-.47 1.343-.316 1.09.005-.042 0 0zM88.698 49.44c-1.264 0-1.264 1.957 0 1.957 1.26 0 1.26-1.958 0-1.958z"/><path fill="currentColor" d="M90.098 48.323c-1.18.454-.474 2.283.705 1.828 1.176-.454.472-2.28-.705-1.827zM28.766 13.01c-1.263 0-1.263 1.957 0 1.957 1.262 0 1.262-1.958 0-1.958zM91.05 51.202c-1.265 0-1.265 1.958 0 1.958 1.26 0 1.26-1.958 0-1.958zM23.478 15.947c-1.263 0-1.263 1.958 0 1.958 1.262 0 1.262-1.958 0-1.958z"/></svg><br>
<strong class="h1">Kraken</strong>
</a>
<p class="text-muted">Version 12</p>
</div>
<div>
<p class="no-margin-bottom">
<strong>A lightweight, mobile-first boilerplate for front-end developers.</strong> Kraken isn't a framework. It's a starting point for your web projects.
</p>
</div>
</div>
<ul class="list-inline padding-top">
<li class="text-muted">Getting Started</li><li><a href="components.html">Components</a></li><li><a href="https://github.com/cferdinandi/kraken/archive/master.zip">Download</a></li>
</ul>
</nav>
</div>
<main class="container container-small" id="main" tabindex="-1" markdown="1"><h1 id="getting-started">Getting Started</h1>
<h2 id="installation">Installation</h2>
<p>There are three ways to use Kraken with your project:</p>
<ol>
<li><a href="https://github.com/cferdinandi/kraken/archive/master.zip">Download Kraken directly from GitHub.</a></li>
<li>Clone Kraken from GitHub: <code>git@github.com:cferdinandi/kraken.git</code></li>
<li>Install Kraken from GitHub using your favorite package manager: <code>npm install kraken-css</code></li>
</ol>
<hr>
<h2 id="working-with-css">Working with CSS</h2>
<p>The stylesheets in the <code>dist</code> directory contain CSS variables (also known as custom properties) that you can modify to change the colors, typefaces, and sizes for your project.</p>
<pre><code class="language-css">/**
* Configs
*/
:root {
/* Colors */
--color-primary: #0088cc;
--color-primary-dark: #005580;
--color-secondary: #377f31;
--color-secondary-dark: #2C6327;
--color-code: #dd1144;
--color-highlight: #fbf9c9;
--color-black: #272727;
--color-white: #ffffff;
--color-gray-dark: #808080;
--color-gray-darker: #555555;
--color-gray-medium: #B8B8B8;
--color-gray-light: #e5e5e5;
--color-gray-lighter: #f7f7f7;
/* Fonts */
--font-primary: "Helvetica Neue", Arial, sans-serif;
--font-monospace: Menlo, Monaco, "Courier New", monospace;
/* Sizes */
--font-size: 100%;
--spacing: 1.5625em;
--container-width: 88%;
--container-max-width: 80em;
}</code></pre>
<dl>
<dt>Page Width</dt>
<dd>The <code>.container</code> class sets the width for page content. Adjust the <code>--max-width</code> property to set the maximum width of the page.</dd>
<dt>Font Stack</dt>
<dd>The <code>body</code> element sets the typeface for the entire set. By default, the font stack is Helvetica Neue, Arial, and sans-serif. The two exceptions are <code>pre</code> and <code>code</code> elements, which use a monospace stack. Adjust as desired.</dd>
<dt>Typographic Scale</dt>
<dd>Kraken uses a <a href="http://lamb.cc/typograph/">fluid typographic scale</a>. You can scale the size of all site elements proportionately by adjusting the <code>--font-size</code> property on the body element, which is set to 100% by default.</dd>
<dt>Colors</dt>
<dd>The color palette is used to style text, buttons, forms, and form. Adjust to suit your design.</dd>
<dt>Breakpoints (used throughout)</dt>
<dd>CSS variables cannot be used in media queries, so these are hard-coded through the stylesheet.<br><br>Extra Small: 20em<br>
Small: 30em<br>
Medium: 40em<br>
Large: 60em<br>
Extra Large: 80em</dd>
</dl>
<hr>
<h2 id="working-with-sass">Working with Sass</h2>
<p>Kraken's Sass files are located in the <code>src/scss</code> directory.</p>
<p>The compiled CSS in the <code>dist</code> directory can be built from the command line by running <code>npm install</code>, then <code>npm run css</code>, or using your favorite Sass compiler.</p>
<h3 id="file-structure">File Structure</h3>
<ul>
<li>The <code>_config.scss</code> file contains all of the configuration options, including Sass variables for breakpoints, and CSS custom properties for everything else.</li>
<li>The <code>components</code> directory holds the styles for each of the individual component groups (typography, the grid, buttons, forms, and so on).</li>
<li>The <code>main.scss</code> file pulls the configurations and components together into a single file.</li>
</ul>
<h3 id="_configscss"><code>_config.scss</code></h3>
<p>The <code>_config.scss</code> file contains variables for all of the colors, font stacks, breakpoints, and sizing used in Kraken. It also contains settings for the grid.</p>
<pre><code class="language-scss">/**
* Configs
*/
:root {
/* Colors */
--color-primary: #0088cc;
--color-primary-dark: #005580;
--color-secondary: #377f31;
--color-secondary-dark: #2C6327;
--color-code: #dd1144;
--color-highlight: #fbf9c9;
--color-black: #272727;
--color-white: #ffffff;
--color-gray-dark: #808080;
--color-gray-darker: #555555;
--color-gray-medium: #B8B8B8;
--color-gray-light: #e5e5e5;
--color-gray-lighter: #f7f7f7;
/* Fonts */
--font-primary: "Helvetica Neue", Arial, sans-serif;
--font-monospace: Menlo, Monaco, "Courier New", monospace;
/* Sizes */
--font-size: 100%;
--spacing: 1.5625em;
--container-width: 88%;
--container-max-width: 80em;
}
// Breakpoints
$bp-xsmall: 20em;
$bp-small: 30em;
$bp-medium: 40em;
$bp-large: 60em;
$bp-xlarge: 80em;</code></pre>
</main>
<footer class="container container-small padding-bottom">
<hr>
<nav>
<ul class="list-inline">
<li><a href="https://github.com/cferdinandi/kraken/issues">Report Bugs</a></li>
<li><a href="https://github.com/cferdinandi/kraken">GitHub</a></li>
<li><a href="https://github.com/cferdinandi/kraken/blob/master/LICENSE.md">MIT License</a></li>
</ul>
</nav>
<p class="text-small text-muted">Made with ❤️ <a href="https://gomakethings.com">Chris Ferdinandi</a>. Kraken logo by <a href="http://thenounproject.com/term/squid/30310/">Joe Shelton from the Noun Project</a>.</p>
</footer>
<script>
// Table of Contents
(function () {
// Variables
var h1 = document.querySelector('h1');
var headings = document.querySelectorAll('main h2');
var toc = document.createElement('nav');
// Create toc items
toc.innerHTML = '<ul class="list-inline">' + Array.prototype.map.call(headings, function (heading) {
// Make sure heading has an ID
if (!heading.id) return '';
// create the list item
return '<li><a href="#' + heading.id + '">' + heading.textContent + '</a></li>';
}).filter(function (item) {
return item.length > 0;
}).join('') + '</ul>';
// Inject the TOC
h1.parentNode.insertBefore(toc, h1);
})();
/*! PrismJS 1.15.0| https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+scss */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e,t){var a=n.util.type(e);switch(t=t||{},a){case"Object":if(t[n.util.objId(e)])return t[n.util.objId(e)];var r={};t[n.util.objId(e)]=r;for(var l in e)e.hasOwnProperty(l)&&(r[l]=n.util.clone(e[l],t));return r;case"Array":if(t[n.util.objId(e)])return t[n.util.objId(e)];var r=[];return t[n.util.objId(e)]=r,e.forEach(function(e,a){r[a]=n.util.clone(e,t)}),r}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){r=r||n.languages;var l=r[e],i={};for(var o in l)if(l.hasOwnProperty(o)){if(o==t)for(var s in a)a.hasOwnProperty(s)&&(i[s]=a[s]);a.hasOwnProperty(o)||(i[o]=l[o])}var u=r[e];return r[e]=i,n.languages.DFS(n.languages,function(t,n){n===u&&t!=e&&(this[t]=i)}),i},DFS:function(e,t,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],a||l),"Object"!==n.util.type(e[l])||r[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||r[n.util.objId(e[l])]||(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,r)):(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,r)))}},plugins:{},highlightAll:function(e,t){n.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,a){var r={callback:a,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",r);for(var l,i=r.elements||e.querySelectorAll(r.selector),o=0;l=i[o++];)n.highlightElement(l,t===!0,r.callback)},highlightElement:function(t,a,r){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1].toLowerCase(),i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,t.parentNode&&(o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l));var s=t.textContent,u={element:t,language:l,grammar:i,code:s},g=function(e){u.highlightedCode=e,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,n.hooks.run("after-highlight",u),n.hooks.run("complete",u),r&&r.call(u.element)};if(n.hooks.run("before-sanity-check",u),!u.code)return n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),!u.grammar)return g(n.util.encode(u.code)),void 0;if(a&&_self.Worker){var c=new Worker(n.filename);c.onmessage=function(e){g(e.data)},c.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else g(n.highlight(u.code,u.grammar,u.language))},highlight:function(e,t,r){var l={code:e,grammar:t,language:r};return n.hooks.run("before-tokenize",l),l.tokens=n.tokenize(l.code,l.grammar),n.hooks.run("after-tokenize",l),a.stringify(n.util.encode(l.tokens),l.language)},matchGrammar:function(e,t,a,r,l,i,o){var s=n.Token;for(var u in a)if(a.hasOwnProperty(u)&&a[u]){if(u==o)return;var g=a[u];g="Array"===n.util.type(g)?g:[g];for(var c=0;c<g.length;++c){var f=g[c],h=f.inside,d=!!f.lookbehind,m=!!f.greedy,p=0,y=f.alias;if(m&&!f.pattern.global){var v=f.pattern.toString().match(/[imuy]*$/)[0];f.pattern=RegExp(f.pattern.source,v+"g")}f=f.pattern||f;for(var b=r,k=l;b<t.length;k+=t[b].length,++b){var w=t[b];if(t.length>e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){f.lastIndex=k;var _=f.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,O=k,x=t.length;x>A&&(P>O||!t[A].type&&!t[A-1].greedy);++A)O+=t[A].length,j>=O&&(++b,k=O);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,O),_.index-=k}else{f.lastIndex=0;var _=f.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),E=[b,I];N&&(++b,k+=N.length,E.push(N));var C=new s(u,h?n.tokenize(_,h):_,y,_,m);if(E.push(C),S&&E.push(S),Array.prototype.splice.apply(t,E),1!=I&&n.matchGrammar(e,t,a,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var l in r)t[l]=r[l];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[\w-]|\$[-\w]+|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss;
</script>
</body>
</html>