/
index.html
293 lines (245 loc) · 27.8 KB
/
index.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
<!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><a href="getting-started.html">Getting Started</a></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="a-starting-point-for-front-end-projects">A starting point for front-end projects</h1>
<p>Designed to be lightweight and style agnostic, Kraken includes just the essentials.</p>
<ul>
<li>A minimal, modern CSS reset</li>
<li>A responsive, mobile-first grid built on flexbox</li>
<li>A well-designed, fluid typographic scale</li>
<li>CSS buttons</li>
<li>Simple table styling</li>
<li>Common form components</li>
<li>A set of utility classes for nudging and tweaking the layout</li>
</ul>
<p>Kraken isn't supposed to be a finished product. It's a starting point that you can adapt to any project you're working on. Add components. Remove components. Tweak the colors and font stack. Make Kraken your own.</p>
<h2 id="the-kraken-approach">The Kraken Approach</h2>
<p>Kraken is built to be flexible and modular, with performance and accessibility in mind.</p>
<ul>
<li><strong>Ugly on purpose.</strong> Out-of-the-box, Kraken is a bit ugly. That's intentional. Kraken isn't supposed to be a finished product. It's a starting point that you can adapt to any project you're working on. Add components. Remove components. Tweak the colors and font stack. Make Kraken your own.<br><br></li>
<li><strong>Mobile-First.</strong> Kraken is built mobile-first. The base structure is a fully-fluid, single-column layout. It uses <code>@media (min-width: whatever)</code> to add a grid-based layout to bigger screens. Think of it as progressive enhancement for the layout.<br><br></li>
<li><strong>Object-Oriented CSS.</strong> Kraken takes an <a href="http://www.slideshare.net/stubbornella/object-oriented-css">OOCSS approach</a> to web development. Throughout the stylesheet, you'll see base styles and modifying styles. Classes can be mixed, matched and reused throughout a project.<br><br>For example, <code>.btn</code> sets the default button styles and behavior, while <code>.btn-secondary</code> changes the color and <code>.btn-large</code> changes the size. A big button with secondary colors would look like this:<pre><code class="language-html"> <button class="btn btn-secondary btn-large">A Big Button</button></code></pre>
</li>
</ul>
<h2 id="whats-new">What's new?</h2>
<h3 id="version-13">Version 13</h3>
<p>Kraken 13 adds modern CSS updates.</p>
<ul>
<li>Switched from flexbox to CSS Grid for more predictability and control over layouts.</li>
<li>Implemented CSS custom properties (also known as CSS variables) for all colors, typefaces, and sizes, making customization faster and easier.</li>
</ul>
<h3 id="version-12">Version 12</h3>
<p>Added a simple flexbox grid back in. The new grid is designed to be a starting point (and possibly removed altogether) rather than a complete templating system.</p>
<h3 id="version-11">Version 11</h3>
<p>Kraken 11 is all about simplifying.</p>
<ul>
<li>The built-in grid system was remove entirely. Between Flexbox and CSS Grid, CSS layouts are incredibly powerful today. As a result, there's no good way to do a "one-size fits most" system.</li>
<li>The <code>normalize.css</code> reset has been dropped in favor of a more modern, minimal reset that reflects how good modern browser are at rendering things consistently.</li>
</ul>
<h3 id="version-10">Version 10</h3>
<p>Kraken 10 changed the way spacing between grids works. Grids now sit tight against one another, and using padding to provide space between content instead of margins.</p>
<p>This is a break change, and the only reason for the major version bump.</p>
<h3 id="version-9">Version 9</h3>
<p>Kraken 9 is about removing a lot of the cruft from older versions.</p>
<ul>
<li>The build tool was removed to focus on Kraken's core strength: the CSS boilerplate.</li>
<li>Sass mixins weren't really used, and have been removed.</li>
<li><code>calc-em()</code> was replaced in the Sass files with native <code>em</code>-based sizing.</li>
<li>SVG sprite styles were removed in favor of inline SVGs.</li>
<li>CSS-only responsive tables had accessibility issues and were removed.</li>
<li>The <code>.disabled</code> class for buttons was removed in favor of the <code>[disabled]</code> attribute.</li>
<li>The <code>.screen-reader</code> class was renamed <code>.visually-hidden</code> to be consistent with industry norms.</li>
<li>An accessibility bugfix was added for unstyled and inline lists.</li>
</ul>
<h2 id="browser-support">Browser Support</h2>
<p>Kraken works in all browsers, but it's optimized for modern browsers, and IE 11 and above.</p>
<p>(<em><a href="http://bradfrostweb.com/blog/mobile/support-vs-optimization/">Support is not the same as optimization.</a></em>)</p>
</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>