Skip to content

Commit 879e262

Browse files
SuremotooSuremotoo
committed
init commit repo
1 parent f6823a9 commit 879e262

File tree

210 files changed

+13814
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

210 files changed

+13814
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
package-lock.json

‎assets/app-icon/mac/app.icns

256 KB
Binary file not shown.

‎assets/app-icon/png/1024.png

209 KB
Loading

‎assets/app-icon/png/128.png

16.8 KB
Loading

‎assets/app-icon/png/16.png

983 Bytes
Loading

‎assets/app-icon/png/24.png

1.75 KB
Loading

‎assets/app-icon/png/256.png

42.3 KB
Loading

‎assets/app-icon/png/32.png

2.6 KB
Loading

‎assets/app-icon/png/48.png

4.65 KB
Loading

‎assets/app-icon/png/512.png

98 KB
Loading

‎assets/app-icon/png/64.png

6.83 KB
Loading

‎assets/app-icon/png/96.png

11.6 KB
Loading

‎assets/app-icon/win/app.ico

361 KB
Binary file not shown.

‎assets/code-blocks.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const fs = require('fs')
2+
const path = require('path')
3+
4+
const codeBlocksWithPaths = document.querySelectorAll('code[data-path]')
5+
6+
Array.prototype.forEach.call(codeBlocksWithPaths, function (code) {
7+
const codePath = path.join(__dirname, '..', code.dataset.path)
8+
const extension = path.extname(codePath)
9+
code.classList.add('language-' + extension.substring(1))
10+
code.textContent = fs.readFileSync(codePath)
11+
})
12+
13+
document.addEventListener('DOMContentLoaded', function () {
14+
const highlight = require('highlight.js')
15+
const codeBlocks = document.querySelectorAll('pre code')
16+
Array.prototype.forEach.call(codeBlocks, function (code) {
17+
highlight.highlightBlock(code)
18+
})
19+
})

‎assets/css/about.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/* Welcome ------------------------ */
2+
3+
.about {
4+
--about-space: 4rem;
5+
6+
position: absolute;
7+
display: flex;
8+
top: 0;
9+
left: 0;
10+
right: 0;
11+
bottom: 0;
12+
z-index: 1;
13+
overflow-x: hidden;
14+
overflow-y: auto;
15+
padding: 0;
16+
background-color: hsl(0,0%,98%);
17+
pointer-events: none;
18+
visibility: hidden;
19+
opacity: 0;
20+
transform: scale(1.1);
21+
transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
22+
}
23+
.about.is-shown {
24+
pointer-events: auto;
25+
visibility: visible;
26+
opacity: 1;
27+
transform: scale(1);
28+
transition: visibility 0s 0s linear , opacity .24s ease-out, transform .24s ease-out;
29+
}
30+
31+
.about-wrapper {
32+
margin: auto;
33+
}
34+
35+
.about-header {
36+
padding: var(--about-space) 0;
37+
border-bottom: 1px solid hsl(0,0%,88%);
38+
}
39+
40+
.about-logo {
41+
display: block;
42+
margin: 0 auto;
43+
width: 320px; /* TODO: Adjust asset to this size */
44+
max-width: 100%;
45+
}
46+
47+
.about-sections {
48+
max-width: 680px;
49+
padding: 0 var(--about-space);
50+
}
51+
52+
.about-section {
53+
margin: var(--about-space) 0;
54+
}
55+
56+
.about h2 {
57+
text-align: center;
58+
margin: 0 0 1em 0;
59+
font-size: 1.5em;
60+
color: hsl(0, 0%, 55%);
61+
}
62+
63+
.about .about-code h2 {
64+
color: hsl(330, 65%, 55%);
65+
}
66+
67+
.about .play-along h2 {
68+
color: hsl(222, 53%, 50%);
69+
}
70+
71+
.about-button {
72+
display: block;
73+
margin: 0 auto;
74+
padding: .4em 1.2em;
75+
font: inherit;
76+
font-size: 1.6em;
77+
color: inherit;
78+
border: 2px solid;
79+
border-radius: 4px;
80+
background-color: transparent;
81+
}
82+
.about-button:focus {
83+
outline: none;
84+
border-color: hsl(0,0%,88%);
85+
}
86+
87+
footer.about-section {
88+
text-align: center;
89+
}
90+
91+
.rainbow-button-wrapper {
92+
--rainbow-button-width: 170px;
93+
--rainbow-button-height: 50px;
94+
--rainbow-button-width-inner: 164px;
95+
--rainbow-button-height-inner: 44px;
96+
--rainbow-color-1: hsl(116, 30%, 36%);
97+
--rainbow-color-2: hsl(194, 60%, 36%);
98+
--rainbow-color-3: hsl(222, 53%, 50%);
99+
--rainbow-color-4: hsl(285, 47%, 46%);
100+
--rainbow-color-5: hsl(330, 65%, 48%);
101+
--rainbow-color-6: hsl(32, 79%, 49%);
102+
--rainbow-color-7: hsl(53, 84%, 50%);
103+
104+
display: inline-block;
105+
width: var(--rainbow-button-width);
106+
height: var(--rainbow-button-height);
107+
position: relative;
108+
overflow: hidden;
109+
border-radius: 5px;
110+
}
111+
112+
.rainbow-button-wrapper:before {
113+
display: block;
114+
position: absolute;
115+
z-index: 2;
116+
top: 0;
117+
left: 0;
118+
width: 600px;
119+
height: var(--rainbow-button-height);
120+
background: #CCC;
121+
background: linear-gradient(to right, var(--rainbow-color-1) 0%, var(--rainbow-color-2) 14%, var(--rainbow-color-3) 28%, var(--rainbow-color-4) 42%, var(--rainbow-color-5) 56%, var(--rainbow-color-6) 70%, var(--rainbow-color-7) 84%, var(--rainbow-color-1) 100%);
122+
background-position: -200px 0;
123+
transition: all 0.5s;
124+
content: "";
125+
}
126+
127+
.rainbow-button-wrapper button {
128+
display: block;
129+
width: var(--rainbow-button-width-inner);
130+
height: var(--rainbow-button-height-inner);
131+
position: absolute;
132+
z-index: 3;
133+
top: 3px;
134+
left: 3px;
135+
border: none;
136+
background: white;
137+
color: black;
138+
font-size: 1.3rem;
139+
}
140+
141+
.rainbow-button-wrapper:hover:before {
142+
background-position: 200px 0;
143+
}
144+
145+
@media (min-width: 940px) {
146+
.about-header {
147+
align-self: center;
148+
padding: var(--about-space);
149+
border-right: 1px solid hsl(0,0%,88%);
150+
border-bottom: none;
151+
}
152+
.about-wrapper {
153+
display: flex;
154+
}
155+
}

‎assets/css/demo.css

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/* Demo */
2+
3+
.demo:first-of-type {
4+
margin-top: 2rem;
5+
}
6+
.demo:last-of-type {
7+
margin-bottom: 2rem;
8+
}
9+
@media (min-width: 940px) {
10+
.demo:last-of-type {
11+
margin-bottom: 4rem;
12+
}
13+
}
14+
15+
.demo-wrapper {
16+
position: relative;
17+
max-width: 740px;
18+
margin: 0 auto;
19+
padding: 0 2rem;
20+
}
21+
22+
23+
/* Toggle Button ----------------------------- */
24+
25+
.demo-toggle-button {
26+
position: relative;
27+
display: block;
28+
margin: 0;
29+
padding: .5em 1.5em;
30+
line-height: 1.5;
31+
font: inherit;
32+
font-weight: 600;
33+
font-size: 1.2em;
34+
text-align: left;
35+
border: none;
36+
color: inherit;
37+
background-color: transparent;
38+
transition: border-color .12s;
39+
outline: none;
40+
}
41+
42+
.demo-toggle-button:before,
43+
.demo-toggle-button:after {
44+
content: "";
45+
position: absolute;
46+
left: 0;
47+
width: 2px;
48+
height: 50%;
49+
background-color: hsl(0,0%,88%);
50+
transition: transform .2s cubic-bezier(.4,.1,0,1);
51+
}
52+
.demo-toggle-button:before {
53+
top: 0;
54+
transform-origin: bottom center;
55+
transform: translateX(.7em) rotate(-30deg) scale(.75);
56+
}
57+
.demo-toggle-button:after {
58+
bottom: 0;
59+
transform-origin: top center;
60+
transform: translateX(.7em) rotate(30deg) scale(.75);
61+
}
62+
.is-open .demo-toggle-button:before,
63+
.is-open .demo-toggle-button:after {
64+
transform: rotate(0deg);
65+
}
66+
.demo-toggle-button:focus:before,
67+
.demo-toggle-button:focus:after {
68+
background-color: currentColor;
69+
}
70+
71+
/* Meta info */
72+
73+
.demo-meta {
74+
margin-top: .2em;
75+
font-size: 11px;
76+
font-weight: 300;
77+
text-transform: uppercase;
78+
color: var(--color-subtle);
79+
}
80+
.demo-meta-divider {
81+
margin: 0 .5em;
82+
}
83+
84+
85+
/* Demo Box ----------------------------- */
86+
87+
.demo-box {
88+
display: none;
89+
position: relative;
90+
padding: 2em;
91+
margin-top: 1em;
92+
margin-bottom: 2em;
93+
border-radius: 6px;
94+
border: 1px solid var(--color-border);
95+
background-color: var(--color-bg);
96+
}
97+
.demo-box:before {
98+
content: "";
99+
position: absolute;
100+
top: -11px;
101+
width: 20px;
102+
height: 20px;
103+
background-color: inherit;
104+
border-top: inherit;
105+
border-right: inherit;
106+
border-top-right-radius: 3px;
107+
transform: rotate(-45deg);
108+
}
109+
110+
.is-open .demo-box {
111+
display: block;
112+
animation: demo-box-fade-in .2s cubic-bezier(0, .20, .20, .96);
113+
}
114+
@keyframes demo-box-fade-in {
115+
0% { opacity: 0; transform: translateY(-20px); }
116+
100% { opacity: 1; transform: translateY(0); }
117+
}
118+
119+
.demo-box > p:first-child {
120+
margin-top: 0;
121+
}
122+
123+
.demo-box h5 {
124+
font-size: 1em;
125+
margin-bottom: .6em;
126+
}
127+
128+
129+
/* Demo Controls ----------------------------- */
130+
131+
.demo-controls {
132+
display: flex;
133+
align-items: center;
134+
}
135+
136+
.demo-button {
137+
align-self: flex-start;
138+
margin-right: 1em;
139+
border: 2px solid;
140+
border-radius: 4px;
141+
font: inherit;
142+
font-size: 1.2em;
143+
padding: .4em 1.2em;
144+
color: inherit;
145+
background-color: transparent;
146+
}
147+
.demo-button:focus {
148+
outline: none;
149+
background-color: white;
150+
}
151+
.demo-button:active {
152+
border-color: var(--color-border);
153+
}
154+
155+
.demo-input {
156+
flex: 1;
157+
border: 2px solid var(--color-border);
158+
border-radius: 4px;
159+
font: inherit;
160+
font-size: 1.2em;
161+
padding: .4em .8em;
162+
color: inherit;
163+
background-color: transparent;
164+
}
165+
.demo-input:focus {
166+
outline: none;
167+
border-color: hsl(0,0%,80%);
168+
background-color: white;
169+
}
170+
171+
.demo-response {
172+
flex: 1;
173+
word-break: break-word;
174+
}
175+
176+
.smooth-appear {
177+
opacity: 1;
178+
transition: opacity .5s ease-in-out;
179+
}
180+
181+
.disappear {
182+
opacity: 0;
183+
}
184+
.demo-button.smooth-disappear:focus {
185+
outline: inherit;
186+
border-color: inherit;
187+
background-color: inherit;
188+
}
189+
190+
/* ProTip ----------------------------- */
191+
192+
.demo-protip {
193+
margin-top: 2rem;
194+
padding: 1.5rem 2rem 2rem 2rem;
195+
border: 1px solid hsla(0,0%,0%,.06);
196+
border-radius: 6px;
197+
background: var(--color-accent) linear-gradient(hsla(0,0%,100%,.85), hsla(0,0%,100%,.85));
198+
}
199+
.demo-protip h2 {
200+
margin: 0 0 .5rem 0;
201+
}
202+
.demo-protip strong {
203+
font-weight: 600;
204+
}
205+

‎assets/css/fonts/SourceCodePro-Regular.ttf

70 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-Black.otf

95.3 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-BlackIt.otf

93.8 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-Bold.otf

101 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-BoldIt.otf

99 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-ExtraLight.otf

91.5 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-ExtraLightIt.otf

90.2 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-It.otf

97.8 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-Light.otf

95.8 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-LightIt.otf

94.6 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-Regular.otf

98.5 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-Semibold.otf

98.6 KB
Binary file not shown.

‎assets/css/fonts/SourceSansPro-SemiboldIt.otf

97.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)