perfect-gui 3.5.3 → 3.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -3
- package/package.json +1 -1
- package/test/src/index.html +214 -189
- package/test/src/index.js +3 -1
- package/test/src/js/prism.js +5 -0
- package/test/src/styles/prism.css +3 -0
- package/test/src/styles/{main.scss → styles.css} +75 -16
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Features:
|
|
|
9
9
|
|
|
10
10
|
<img src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/capture.png" width="580"/>
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## API
|
|
13
13
|
https://thibka.github.io/perfect-gui/public/
|
|
14
14
|
|
|
15
15
|
## Install
|
|
@@ -18,7 +18,7 @@ https://thibka.github.io/perfect-gui/public/
|
|
|
18
18
|
npm i perfect-gui
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Hello world
|
|
22
22
|
|
|
23
23
|
```javascript
|
|
24
24
|
import GUI from 'perfect-gui';
|
|
@@ -26,7 +26,6 @@ import GUI from 'perfect-gui';
|
|
|
26
26
|
const gui = new GUI();
|
|
27
27
|
|
|
28
28
|
gui.button('Click me', callback);
|
|
29
|
-
|
|
30
29
|
```
|
|
31
30
|
|
|
32
31
|
## Options
|
package/package.json
CHANGED
package/test/src/index.html
CHANGED
|
@@ -4,15 +4,45 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8" />
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
-
<title
|
|
7
|
+
<title>Perfect GUI</title>
|
|
8
8
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
<script defer src="./bundle.js?166a9da11b001ec1b300"></script>
|
|
10
|
+
<link href="main.css?166a9da11b001ec1b300" rel="stylesheet">
|
|
11
|
+
|
|
12
|
+
<meta name="author" content="Thibaut Foussard">
|
|
13
|
+
<meta name="description" content="Nice and simple GUI for JavaScript">
|
|
14
|
+
<link rel="canonical" href="https://thibka.github.io/perfect-gui/public/">
|
|
15
|
+
|
|
16
|
+
<meta property="og:image" content="https://thibka.github.io/perfect-gui/_data/social.png">
|
|
17
|
+
<meta property="og:image:type" content="image/jpg">
|
|
18
|
+
<meta property="og:image:width" content="1200">
|
|
19
|
+
<meta property="og:image:height" content="628">
|
|
20
|
+
<meta property="og:type" content="website">
|
|
21
|
+
<meta property="og:url" content="https://thibka.github.io/perfect-gui/public/">
|
|
22
|
+
<meta property="og:title" content="Perfect GUI">
|
|
23
|
+
<meta property="og:description" content="Nice and simple GUI for JavaScript">
|
|
24
|
+
|
|
25
|
+
<link rel="apple-touch-icon" sizes="180x180" href="https://thibka.github.io/perfect-gui/_data/fav/180x180.png">
|
|
26
|
+
<link rel="icon" type="image/png" sizes="32x32" href="https://thibka.github.io/perfect-gui/_data/fav/32x32.png">
|
|
27
|
+
<link rel="icon" type="image/png" sizes="16x16" href="https://thibka.github.io/perfect-gui/_data/fav/16x16.png">
|
|
28
|
+
<link rel="shortcut icon" href="https://thibka.github.io/perfect-gui/_data/fav/16x16.ico">
|
|
9
29
|
</head>
|
|
10
30
|
|
|
11
31
|
<body>
|
|
12
|
-
|
|
32
|
+
<div class="wrapper">
|
|
33
|
+
<div class="sidebar">
|
|
34
|
+
<a class="sidebar__item" href="#basics">Basics</a>
|
|
35
|
+
<a class="sidebar__item" href="#vectors">Vectors</a>
|
|
36
|
+
<a class="sidebar__item" href="#positioning">Positioning</a>
|
|
37
|
+
<a class="sidebar__item" href="#folders">Folders</a>
|
|
38
|
+
<a class="sidebar__item" href="#other-options">Other options</a>
|
|
39
|
+
<a class="sidebar__item" href="#killing-creating">Killing and creating dynamically</a>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="main">
|
|
42
|
+
|
|
13
43
|
<h1>Perfect GUI API</h1>
|
|
14
44
|
|
|
15
|
-
<h2>Basics</h2>
|
|
45
|
+
<h2 id="basics">Basics</h2>
|
|
16
46
|
|
|
17
47
|
<div id="container-1" class="container">
|
|
18
48
|
<div class="element"></div>
|
|
@@ -21,59 +51,58 @@
|
|
|
21
51
|
|
|
22
52
|
<div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
|
|
23
53
|
<div id="code-block-basics" class="code-block code-block--hidden">
|
|
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
|
-
</pre></div>
|
|
54
|
+
<pre><code class="language-js">const position = {
|
|
55
|
+
x: 0
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const gui = new GUI({ name: 'Basics' });
|
|
59
|
+
|
|
60
|
+
gui.button('Button', changeColor);
|
|
61
|
+
|
|
62
|
+
gui.slider({ name: 'Slider (simple callback)', value: 1 },
|
|
63
|
+
value => element.style.opacity = value
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
gui.slider({
|
|
67
|
+
name: 'Slider 2 (object binding)',
|
|
68
|
+
obj: position,
|
|
69
|
+
prop: 'x',
|
|
70
|
+
min: -30,
|
|
71
|
+
max: 30,
|
|
72
|
+
step: .1
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
gui.toggle('Switch', true, state => {
|
|
76
|
+
if ( state ) element.classList.remove('round');
|
|
77
|
+
else element.classList.add('round');
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
|
|
81
|
+
element.style.backgroundColor = item;
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
gui.image('Image 1', 'path/to/image-1.jpg', evt => {
|
|
85
|
+
element.style.backgroundImage = `url(${evt.path})`;
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
gui.image('Image 2', 'path/to/image-2.jpg', evt => {
|
|
89
|
+
element.style.backgroundImage = `url(${evt.path})`;
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
gui.color('Color', '#ff0000', color => {
|
|
93
|
+
element.style.backgroundColor = color;
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
function loop() {
|
|
97
|
+
element.style.transform = `translateX(${position.x}px)`;
|
|
98
|
+
requestAnimationFrame(loop);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
loop();</code></pre>
|
|
73
102
|
|
|
74
103
|
</div>
|
|
75
104
|
|
|
76
|
-
<h2>Vectors</h2>
|
|
105
|
+
<h2 id="vectors">Vectors</h2>
|
|
77
106
|
|
|
78
107
|
<div id="container-vectors" class="container">
|
|
79
108
|
<div class="element"></div>
|
|
@@ -82,30 +111,29 @@
|
|
|
82
111
|
|
|
83
112
|
<div class="code-button" onclick="document.getElementById('code-block-vectors').classList.toggle('code-block--hidden')">See code</div>
|
|
84
113
|
<div id="code-block-vectors" class="code-block code-block--hidden">
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
</pre></div>
|
|
114
|
+
<pre><code class="language-js">const position = {
|
|
115
|
+
x: 0,
|
|
116
|
+
y: 0
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const gui = new perfectGUI({
|
|
120
|
+
name: 'Vectors'
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
gui.vector2('Position', {
|
|
124
|
+
x: { object: position, prop: 'x', min: -50, max: 50 },
|
|
125
|
+
y: { object: position, prop: 'y', min: -50, max: 50 },
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
function loop() {
|
|
129
|
+
element.style.transform = `translate(${position.x}px, ${-position.y}px)`;
|
|
130
|
+
requestAnimationFrame(loop);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
loop();</code></pre>
|
|
106
134
|
</div>
|
|
107
135
|
|
|
108
|
-
<h2>Positioning</h2>
|
|
136
|
+
<h2 id="positioning">Positioning</h2>
|
|
109
137
|
|
|
110
138
|
<p>GUI instances can be positioned in any corner of the screen / container.</p>
|
|
111
139
|
<p>When multiple instances share the same position (like GUI 1 and GUI 2 in the example below), they are stacked next to each other.</p>
|
|
@@ -116,40 +144,40 @@
|
|
|
116
144
|
|
|
117
145
|
<div class="code-button" onclick="document.getElementById('code-block-positioning').classList.toggle('code-block--hidden')">See code</div>
|
|
118
146
|
<div id="code-block-positioning" class="code-block code-block--hidden">
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
147
|
+
<pre><code class="language-js">const gui_1 = new GUI({
|
|
148
|
+
name: 'GUI 1',
|
|
149
|
+
width: 200
|
|
150
|
+
});
|
|
123
151
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
152
|
+
gui_1.button('Buttons can handle multiple lines of text.', () => {
|
|
153
|
+
element.style.backgroundColor = getRandomColor();
|
|
154
|
+
});
|
|
127
155
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
156
|
+
const gui_2 = new GUI({
|
|
157
|
+
name: 'GUI 2',
|
|
158
|
+
width: 200
|
|
159
|
+
});
|
|
132
160
|
|
|
133
|
-
|
|
161
|
+
gui_2.button('Button', () => element.style.backgroundColor = getRandomColor() );
|
|
134
162
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
163
|
+
const gui_3 = new GUI({
|
|
164
|
+
name: 'GUI 3',
|
|
165
|
+
position: 'top left'
|
|
166
|
+
});
|
|
139
167
|
|
|
140
|
-
|
|
168
|
+
gui_3.button('Button', () => element.style.backgroundColor = getRandomColor() );
|
|
141
169
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
170
|
+
const gui_4 = new GUI({
|
|
171
|
+
name: 'GUI 4',
|
|
172
|
+
position: 'bottom right'
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
gui_4.button('Button', () => element.style.backgroundColor = getRandomColor() );</code></pre>
|
|
146
176
|
|
|
147
|
-
<span style="color: #a6e22e">gui_4</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Button'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=></span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">);</span>
|
|
148
|
-
</pre></div>
|
|
149
177
|
</div>
|
|
150
178
|
|
|
151
179
|
|
|
152
|
-
<h2>Folders</h2>
|
|
180
|
+
<h2 id="folders">Folders</h2>
|
|
153
181
|
|
|
154
182
|
<p>Folders can be closed by default by setting the <i>closed</i> option to <span class="code-inline">true</span>.</p>
|
|
155
183
|
<p>Each folder can have a different color with the <span class="code-inline">color</span> option.</p>
|
|
@@ -160,31 +188,29 @@
|
|
|
160
188
|
|
|
161
189
|
<div class="code-button" onclick="document.getElementById('code-block-folders').classList.toggle('code-block--hidden')">See code</div>
|
|
162
190
|
<div id="code-block-folders" class="code-block code-block--hidden">
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
191
|
+
<pre><code class="language-js">const gui = new perfectGUI({
|
|
192
|
+
name: 'Folders'
|
|
193
|
+
});
|
|
166
194
|
|
|
167
|
-
|
|
195
|
+
let folder_1 = gui.folder({ name: 'Folder 1' });
|
|
168
196
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
197
|
+
folder_1.button('Random color', () => {
|
|
198
|
+
element.style.backgroundColor = getRandomColor();
|
|
199
|
+
});
|
|
172
200
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
201
|
+
folder_1.slider({ name: 'Size', value: 1 }, value => {
|
|
202
|
+
element.style.transform = `scale(${value})`;
|
|
203
|
+
});
|
|
176
204
|
|
|
177
|
-
|
|
205
|
+
let folder_2 = gui.folder({ name: 'Folder 2', closed: true });
|
|
178
206
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
</pre></div>
|
|
183
|
-
|
|
207
|
+
folder_2.button('Random color', () => {
|
|
208
|
+
element.style.backgroundColor = getRandomColor();
|
|
209
|
+
});</code></pre>
|
|
184
210
|
|
|
185
211
|
</div>
|
|
186
212
|
|
|
187
|
-
<h2>Other options</h2>
|
|
213
|
+
<h2 id="other-options">Other options</h2>
|
|
188
214
|
|
|
189
215
|
<p>GUI panels can be dragged around with the <span class="code-inline">draggable</span> option.</p>
|
|
190
216
|
<p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
|
|
@@ -197,53 +223,52 @@
|
|
|
197
223
|
|
|
198
224
|
<div class="code-button" onclick="document.getElementById('code-block-containers').classList.toggle('code-block--hidden')">See code</div>
|
|
199
225
|
<div id="code-block-containers" class="code-block code-block--hidden">
|
|
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
|
-
</pre></div>
|
|
226
|
+
<pre><code class="language-js">const gui_1 = new GUI({
|
|
227
|
+
name: 'GUI 1 (drag me!)',
|
|
228
|
+
width: 500,
|
|
229
|
+
draggable: true
|
|
230
|
+
});
|
|
231
|
+
gui_1.button('Custom width using the `width` option', () => {});
|
|
232
|
+
|
|
233
|
+
const gui_2 = new GUI({
|
|
234
|
+
name: 'GUI 2 (drag me!)',
|
|
235
|
+
close: true,
|
|
236
|
+
draggable: true,
|
|
237
|
+
position: 'bottom left'
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
gui_2.button('gui_1.toggleClose();', () => {
|
|
241
|
+
gui_1.toggleClose();
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
const gui_3 = new GUI({
|
|
245
|
+
name: 'GUI 3 (closed, scrollable)',
|
|
246
|
+
closed: true,
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
let f1 = gui_3.folder({ name: 'folder', color: '#33329f' });
|
|
250
|
+
for (let i = 0; i < 3; i ++) {
|
|
251
|
+
f1.button('btn '+ i, () => {});
|
|
252
|
+
}
|
|
253
|
+
let f2 = gui_3.folder({ name: 'folder', color: '#9f3293' });
|
|
254
|
+
for (let i = 0; i < 3; i ++) {
|
|
255
|
+
f2.button('btn '+ i, () => {});
|
|
256
|
+
}
|
|
257
|
+
for (let i = 0; i < 10; i ++) {
|
|
258
|
+
gui_3.button('btn '+ i, () => {});
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
const gui_4 = new GUI({
|
|
262
|
+
name: 'GUI 4 (custom color)',
|
|
263
|
+
position: 'bottom right',
|
|
264
|
+
color: '#226666'
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
gui_4.button('lorem', () => {});</code></pre>
|
|
243
268
|
|
|
244
269
|
</div>
|
|
245
270
|
|
|
246
|
-
<h2>Killing and creating dynamically</h2>
|
|
271
|
+
<h2 id="killing-creating">Killing and creating dynamically</h2>
|
|
247
272
|
|
|
248
273
|
<p>There is no .kill() method at the moment, so instances have to be killed "manually".</p>
|
|
249
274
|
|
|
@@ -251,37 +276,37 @@
|
|
|
251
276
|
|
|
252
277
|
<div class="code-button" onclick="document.getElementById('code-block-killing').classList.toggle('code-block--hidden')">See code</div>
|
|
253
278
|
<div id="code-block-killing" class="code-block code-block--hidden">
|
|
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
|
-
</pre></div>
|
|
279
|
+
<pre><code class="language-js">const guis = [];
|
|
280
|
+
|
|
281
|
+
let gui_1 = new GUI({
|
|
282
|
+
name: 'GUI 1',
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
gui_1.button('Create GUI panel', () => {
|
|
286
|
+
guis[guis.length] = new GUI({
|
|
287
|
+
name: 'Created GUI',
|
|
288
|
+
position: 'bottom left',
|
|
289
|
+
width: 150,
|
|
290
|
+
color: 'red'
|
|
291
|
+
});
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
gui_1.button('Kill GUI panel', () => {
|
|
295
|
+
const index = guis.length - 1;
|
|
296
|
+
if ( index >= 0 ) {
|
|
297
|
+
// Removes html elements
|
|
298
|
+
guis[index].wrapper.remove();
|
|
299
|
+
|
|
300
|
+
// Frees up memory
|
|
301
|
+
guis[index] = null;
|
|
302
|
+
|
|
303
|
+
// Removes null value from array
|
|
304
|
+
guis.splice(index, 1);
|
|
305
|
+
}
|
|
306
|
+
});</code></pre>
|
|
283
307
|
</div>
|
|
284
308
|
</div>
|
|
309
|
+
</div>
|
|
285
310
|
</body>
|
|
286
311
|
|
|
287
312
|
</html>
|
package/test/src/index.js
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/* PrismJS 1.29.0
|
|
2
|
+
https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
|
|
3
|
+
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.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(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,""")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
|
|
4
|
+
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
|
|
5
|
+
Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/* PrismJS 1.29.0
|
|
2
|
+
https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
|
|
3
|
+
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
|
@@ -1,30 +1,85 @@
|
|
|
1
|
-
@import url('https://
|
|
1
|
+
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--black: rgb(17, 17, 17);
|
|
5
|
+
--white: rgb(246, 246, 232);
|
|
6
|
+
--grey: #ffffff33;
|
|
7
|
+
--sans: 'General Sans', serif;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
* {
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
|
+
-moz-osx-font-smoothing: grayscale;
|
|
13
|
+
}
|
|
14
|
+
|
|
2
15
|
html, body {
|
|
3
16
|
height: 100%;
|
|
17
|
+
overscroll-behavior: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
html {
|
|
21
|
+
font-size: 10px;
|
|
4
22
|
}
|
|
5
23
|
|
|
6
24
|
body {
|
|
7
25
|
margin: 0;
|
|
8
|
-
background-color:
|
|
9
|
-
color:
|
|
26
|
+
background-color: var(--black);
|
|
27
|
+
color: var(--white);
|
|
10
28
|
font-family: Arial, sans-serif;
|
|
11
29
|
}
|
|
12
30
|
|
|
13
31
|
.wrapper {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: row;
|
|
34
|
+
font-size: 1.2rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.sidebar {
|
|
38
|
+
position: fixed;
|
|
39
|
+
top: 0;
|
|
40
|
+
left: 0;
|
|
41
|
+
width: 200px;
|
|
42
|
+
border-right: 1px solid var(--grey);
|
|
43
|
+
height: 100%;
|
|
44
|
+
background-color: #1b1b1b;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.sidebar__item {
|
|
48
|
+
padding: 20px 40px;
|
|
49
|
+
text-transform: uppercase;
|
|
50
|
+
opacity: .8;
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sidebar__item:hover {
|
|
55
|
+
opacity: 1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.sidebar__item:first-of-type {
|
|
59
|
+
margin-top: 50px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.main {
|
|
14
63
|
width: 800px;
|
|
15
64
|
margin: 0 auto;
|
|
65
|
+
padding-left: 200px;
|
|
16
66
|
padding-bottom: 100px;
|
|
17
67
|
}
|
|
18
68
|
|
|
19
|
-
@media (max-width:
|
|
20
|
-
.
|
|
69
|
+
@media (max-width: 1024px) {
|
|
70
|
+
.sidebar {
|
|
71
|
+
width: 160px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.main {
|
|
21
75
|
width: 700px;
|
|
22
|
-
padding: 0 20px 100px
|
|
76
|
+
padding: 0 20px 100px 180px;
|
|
23
77
|
}
|
|
24
78
|
}
|
|
25
79
|
|
|
26
80
|
h1, h2 {
|
|
27
|
-
font-family:
|
|
81
|
+
font-family: var(--sans), sans-serif;
|
|
82
|
+
font-weight: normal;
|
|
28
83
|
}
|
|
29
84
|
|
|
30
85
|
h1 {
|
|
@@ -39,10 +94,16 @@ p {
|
|
|
39
94
|
line-height: 1.4;
|
|
40
95
|
}
|
|
41
96
|
|
|
97
|
+
a {
|
|
98
|
+
color: var(--white);
|
|
99
|
+
text-decoration: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
42
102
|
.code-button {
|
|
43
103
|
text-decoration: underline;
|
|
44
104
|
cursor: pointer;
|
|
45
105
|
margin-bottom: 10px;
|
|
106
|
+
font-size: 1.2rem;
|
|
46
107
|
}
|
|
47
108
|
|
|
48
109
|
.code-block--hidden {
|
|
@@ -51,7 +112,7 @@ p {
|
|
|
51
112
|
|
|
52
113
|
.code-inline {
|
|
53
114
|
font-family: monospace;
|
|
54
|
-
background-color:
|
|
115
|
+
background-color: #333333;
|
|
55
116
|
color: #a6e22e;
|
|
56
117
|
padding: 3px 6px;
|
|
57
118
|
border-radius: 3px;
|
|
@@ -61,14 +122,14 @@ div:has(pre) {
|
|
|
61
122
|
border-radius: 5px;
|
|
62
123
|
}
|
|
63
124
|
|
|
64
|
-
pre {
|
|
65
|
-
padding:
|
|
125
|
+
pre[class*=language-] {
|
|
126
|
+
padding: 30px;
|
|
66
127
|
border-radius: 5px;
|
|
67
|
-
font-size: 1.
|
|
128
|
+
font-size: 1.2rem;
|
|
68
129
|
}
|
|
69
130
|
|
|
70
131
|
.container {
|
|
71
|
-
background-color: #
|
|
132
|
+
background-color: #1b1b1b;
|
|
72
133
|
transition: .3s all ease;
|
|
73
134
|
background-position: center;
|
|
74
135
|
background-size: cover;
|
|
@@ -93,7 +154,6 @@ pre {
|
|
|
93
154
|
background-size: cover;
|
|
94
155
|
background-position: center;
|
|
95
156
|
background-repeat: no-repeat;
|
|
96
|
-
border: 1px solid black;
|
|
97
157
|
transition: .1s transform ease, .3s border-radius ease;
|
|
98
158
|
}
|
|
99
159
|
|
|
@@ -105,8 +165,7 @@ pre {
|
|
|
105
165
|
position: absolute;
|
|
106
166
|
bottom: 10px;
|
|
107
167
|
left: 20px;
|
|
108
|
-
text-shadow: 0 0 1px black, 0 0 1px black;
|
|
109
168
|
font-family: arial;
|
|
110
|
-
color:
|
|
111
|
-
font-size:
|
|
169
|
+
color: var(--black);
|
|
170
|
+
font-size: 1rem;
|
|
112
171
|
}
|