make8bitart.com
finish removal of jquery, now with working draggydivs
+110
-119
+11
-13
Gruntfile.js
+11
-13
Gruntfile.js
···
16
16
},
17
17
},
18
18
19
-
// uglify: {
20
-
// build: {
21
-
// src: ["src/js/libs/draggydivs.js", "src/js/app/make8bitart.js"],
22
-
// dest: "build/app.min.js",
23
-
// },
24
-
// },
19
+
uglify: {
20
+
build: {
21
+
src: [
22
+
"src/js/libs/draggydivs.js",
23
+
"src/js/libs/keymaster.js",
24
+
"src/js/app/make8bitart.js",
25
+
],
26
+
dest: "build/app.min.js",
27
+
},
28
+
},
25
29
26
30
cssmin: {
27
31
minify: {
···
47
51
dest: "build/",
48
52
filter: "isFile",
49
53
},
50
-
js: {
51
-
cwd: "src/js",
52
-
src: "**/*",
53
-
dest: "build",
54
-
expand: true,
55
-
},
56
54
},
57
55
});
58
56
···
64
62
65
63
grunt.registerTask("default", [
66
64
"concat",
67
-
// "uglify",
65
+
"uglify",
68
66
"cssmin",
69
67
"jshint",
70
68
"copy",
+1
-1
package.json
+1
-1
package.json
+8
src/assets/bobross-palette.csv
+8
src/assets/bobross-palette.csv
src/assets/make8bitart-180.png
src/assets/make8bitart-180.png
This is a binary file and will not be displayed.
src/assets/make8bitart-800.png
src/assets/make8bitart-800.png
This is a binary file and will not be displayed.
+23
-40
src/css/make8bitart.css
+23
-40
src/css/make8bitart.css
···
66
66
overflow: hidden;
67
67
}
68
68
69
-
#draggydivs-minimized {
70
-
margin: 0 0 0.5em;
71
-
padding: 0;
72
-
list-style: none;
73
-
}
74
-
75
-
#draggydivs-minimized li {
76
-
display: inline-block;
77
-
margin-bottom: 0;
78
-
}
79
-
80
-
#draggydivs-minimized a {
81
-
display: inline-block;
82
-
padding: 3px 10px;
83
-
background: #0f0;
84
-
margin: 3px;
85
-
border: none;
86
-
font-family: VT323, monospace;
87
-
font-size: 1em;
88
-
}
89
-
90
-
#draggydivs-minimized a:hover {
91
-
background-color: blue;
92
-
color: white;
93
-
}
94
-
95
69
.draggydiv .menu {
96
70
float: right;
71
+
margin-left: 5px;
97
72
}
98
73
.draggydiv .menu button {
99
74
width: auto;
···
105
80
}
106
81
.draggydiv .menu .draggydivs-drag {
107
82
cursor: move;
83
+
width: 30px;
84
+
height: 30px;
85
+
background: url("/assets/draggydivs/dragger.png");
108
86
}
109
-
.draggy .menu .draggydivs-minimize,
110
-
.draggy .menu .draggydivs-close {
87
+
.draggydiv .menu .draggydivs-minimize,
88
+
.draggydiv .menu .draggydivs-close {
111
89
cursor: pointer;
90
+
width: 30px;
91
+
height: 30px;
92
+
background: url("/assets/draggydivs/hider.png");
93
+
color: red;
112
94
}
113
95
114
96
#header {
115
-
left: 260px !important;
97
+
left: 60px !important;
116
98
top: 20px !important;
117
99
}
118
100
119
-
#what {
120
-
left: 500px !important;
121
-
top: 120px !important;
122
-
}
123
-
124
101
#toolbox {
125
102
left: 30px !important;
126
-
top: 120px !important;
103
+
top: 250px !important;
127
104
}
128
105
129
106
#colorbox {
···
132
109
}
133
110
134
111
#filebox {
135
-
left: 255px !important;
112
+
left: 285px !important;
136
113
top: 234px !important;
114
+
}
115
+
#what {
116
+
left: 505px !important;
117
+
top: 120px !important;
137
118
}
138
119
139
120
/* tabs */
···
176
157
margin: 0;
177
158
}
178
159
179
-
#minimized-tools-menu {
160
+
#draggydivs-minimized {
180
161
font-size: 1.2em;
181
162
margin-top: 10px;
182
163
padding: 0;
183
164
}
184
165
185
-
#minimized-tools-menu button {
166
+
#draggydivs-minimized a {
186
167
display: inline-block;
187
168
padding: 3px 10px;
188
169
background: lime;
···
190
171
border: none;
191
172
font-family: "VT323", monospace;
192
173
font-size: 1em;
174
+
color: black;
175
+
text-decoration: none;
193
176
}
194
177
195
-
#minimized-tools-menu button:hover {
178
+
#draggydivs-minimized a:hover {
196
179
color: green;
197
180
cursor: pointer;
198
181
}
199
182
200
-
#minimized-tools-menu button:after {
183
+
#draggydivs-minimized a:after {
201
184
content: " +";
202
185
}
203
186
+65
-61
src/index.html
+65
-61
src/index.html
···
35
35
<link rel="icon" href="/assets/brighton.png" />
36
36
<link rel="manifest" href="/manifest.json" />
37
37
<meta name="theme-color" content="#00ffff" />
38
-
<!-- <script src="app.min.js" defer></script> -->
39
-
<script src="libs/draggydivs.js" defer></script>
40
-
<script src="libs/keymaster.js" defer></script>
41
-
<script src="app/make8bitart.js" defer></script>
38
+
<script src="app.min.js" defer></script>
42
39
<script
43
40
defer
44
41
data-domain="make8bitart.com"
···
98
95
99
96
<header id="header" class="draggydiv" title="make 8-bit art!" role="banner">
100
97
<div class="menu">
101
-
<button role="button" class="draggydivs-drag">
102
-
<img
103
-
src="assets/draggydivs/dragger.png"
104
-
width="30"
105
-
height="30"
106
-
alt="move controls window"
107
-
/>
98
+
<button
99
+
role="button"
100
+
class="draggydivs-drag"
101
+
aria-label="move this box"
102
+
>
103
+
✥
108
104
</button>
109
105
</div>
110
106
111
-
<h1>make 8-bit art!</h1>
112
-
<ul id="draggydivs-minimized"></ul>
107
+
<div class="inner">
108
+
<h1>make 8-bit art!</h1>
109
+
<ul id="draggydivs-minimized"></ul>
110
+
</div>
113
111
</header>
114
112
115
113
<!--
···
135
133
data-title="what"
136
134
>
137
135
<div class="menu">
138
-
<button role="button" class="draggydivs-drag">
139
-
<img
140
-
src="assets/draggydivs/dragger.png"
141
-
width="30"
142
-
height="30"
143
-
alt="move controls window"
144
-
/>
136
+
<button
137
+
role="button"
138
+
class="draggydivs-drag"
139
+
aria-label="move this box"
140
+
>
141
+
✥
145
142
</button>
146
-
<button role="button" class="draggydivs-minimize">
147
-
<img
148
-
src="assets/draggydivs/hider.png"
149
-
width="30"
150
-
height="30"
151
-
alt="move controls window"
152
-
/>
143
+
144
+
<button
145
+
role="button"
146
+
class="draggydivs-minimize"
147
+
aria-label="minimize this box"
148
+
>
149
+
⨯
153
150
</button>
154
151
</div>
155
152
···
199
196
data-title="tools"
200
197
>
201
198
<div class="menu">
202
-
<button role="button" class="draggydivs-drag">
203
-
<img
204
-
src="assets/draggydivs/dragger.png"
205
-
width="30"
206
-
height="30"
207
-
alt="move controls window"
208
-
/>
199
+
<button
200
+
role="button"
201
+
class="draggydivs-drag"
202
+
aria-label="move this box"
203
+
>
204
+
✥
209
205
</button>
210
-
<button role="button" class="draggydivs-minimize">
211
-
<img
212
-
src="assets/draggydivs/hider.png"
213
-
width="30"
214
-
height="30"
215
-
alt="move controls window"
216
-
/>
206
+
207
+
<button
208
+
role="button"
209
+
class="draggydivs-minimize"
210
+
aria-label="minimize this box"
211
+
>
212
+
⨯
217
213
</button>
218
214
</div>
219
215
···
331
327
id="filebox"
332
328
class="draggydiv draggydivs-init-closed"
333
329
title="export/save"
334
-
data-title="export-save"
330
+
data-title="export/save"
335
331
>
336
332
<div class="menu">
337
-
<button role="button" class="draggydivs-drag">
338
-
<img src="assets/draggydivs/dragger.png" alt="move controls window" />
333
+
<button
334
+
role="button"
335
+
class="draggydivs-drag"
336
+
aria-label="move this box"
337
+
>
338
+
✥
339
339
</button>
340
-
<button role="button" class="draggydivs-minimize">
341
-
<img src="assets/draggydivs/hider.png" alt="move controls window" />
340
+
341
+
<button
342
+
role="button"
343
+
class="draggydivs-minimize"
344
+
aria-label="minimize this box"
345
+
>
346
+
⨯
342
347
</button>
343
348
</div>
344
349
···
415
420
416
421
<section
417
422
id="colorbox"
418
-
class="draggydiv"
423
+
class="draggydiv draggydivs-init-closed"
419
424
title="color tools"
420
425
data-title="colors"
421
426
>
422
427
<div class="menu">
423
-
<button role="button" class="draggydivs-drag">
424
-
<img
425
-
src="assets/draggydivs/dragger.png"
426
-
width="30"
427
-
height="30"
428
-
alt="move controls window"
429
-
/>
428
+
<button
429
+
role="button"
430
+
class="draggydivs-drag"
431
+
aria-label="move this box"
432
+
>
433
+
✥
430
434
</button>
431
-
<button role="button" class="draggydivs-minimize">
432
-
<img
433
-
src="assets/draggydivs/hider.png"
434
-
width="30"
435
-
height="30"
436
-
alt="move controls window"
437
-
/>
435
+
436
+
<button
437
+
role="button"
438
+
class="draggydivs-minimize"
439
+
aria-label="minimize this box"
440
+
>
441
+
⨯
438
442
</button>
439
443
</div>
440
444
-2
src/js/libs/draggydivs.js
-2
src/js/libs/draggydivs.js
+2
-2
src/manifest.json
+2
-2
src/manifest.json
···
6
6
{
7
7
"sizes": "800x800",
8
8
"type": "image/png",
9
-
"src": "https://cdn.glitch.global/2bc3df24-5bca-426a-9445-f1f6dbdd528e/make8bitart-800.png",
9
+
"src": "/assets/make8bitart-800.png",
10
10
"purpose": "any"
11
11
},
12
12
{
13
13
"sizes": "180x180",
14
14
"type": "image/png",
15
-
"src": "https://cdn.glitch.global/2bc3df24-5bca-426a-9445-f1f6dbdd528e/make8bitart-180.png",
15
+
"src": "/assets/make8bitart-180.png",
16
16
"purpose": "maskable"
17
17
}
18
18
],