Skip to content

Commit fa43dcb

Browse files
jagretzjagretz
committed
Init repo and push up all changes for info & demo decks
0 parents  commit fa43dcb

32 files changed

+9908
-0
lines changed

‎.editorconfig

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# EditorConfig is awesome: http://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
# Defaults
7+
[*]
8+
end_of_line = lf
9+
insert_final_newline = false
10+
charset = utf-8
11+
trim_trailing_whitespace = true
12+
indent_style = space
13+
indent_size = 4
14+
max_line_length = 100
15+
16+
# HTML types get 2 space indentation
17+
[*.{hbs,html,jsp,md,mdx}]
18+
indent_size = 2
19+
max_line_length = off

‎.gitignore

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# jsdocs
10+
/docs
11+
12+
# production
13+
/build
14+
15+
# misc
16+
.DS_Store
17+
.env.local
18+
.env.development.local
19+
.env.test.local
20+
.env.production.local
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*
25+
26+
settings.json
27+
launch.json

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
registry=https://registry.npmjs.org

‎assets/css/blinkingText.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.blinkingText {
2+
font-size: 4rem;
3+
font-family: "Comic Sans MS", Curiour, Arial;
4+
color: red;
5+
animation: flashing-lights 3s cubic-bezier(0, 1, 0, 1) infinite;
6+
}
7+
8+
blinkingText:before {
9+
content: "FLASHING";
10+
animation: flashing-text 6s infinite;
11+
}
12+
13+
@keyframes flashing-lights {
14+
0% {
15+
color: red;
16+
}
17+
16.6% {
18+
color: green;
19+
}
20+
33.3% {
21+
color: purple;
22+
}
23+
50% {
24+
color: yellow;
25+
}
26+
66.6% {
27+
color: blue;
28+
}
29+
83.3% {
30+
color: orange;
31+
}
32+
}
33+
34+
@keyframes flashing-text {
35+
0% {
36+
content: "FLASHING";
37+
}
38+
50% {
39+
content: "TEXT";
40+
}
41+
}

‎assets/css/dayNight.css

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
Attributions to https://codepen.io/jagretz/pen/GwpMdy
3+
*/
4+
5+
/* defaults */
6+
7+
.toggle {
8+
display: block;
9+
text-align: center;
10+
margin-top: 40px;
11+
user-select: none;
12+
}
13+
14+
.toggle--checkbox {
15+
display: none;
16+
}
17+
18+
.toggle--btn {
19+
display: block;
20+
margin: 0 auto;
21+
font-size: 1.4em;
22+
transition: all 350ms ease-in;
23+
}
24+
.toggle--btn:hover {
25+
cursor: pointer;
26+
}
27+
28+
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
29+
.toggle--checkbox,
30+
.toggle--checkbox:before,
31+
.toggle--checkbox:after,
32+
.toggle--feature,
33+
.toggle--feature:before,
34+
.toggle--feature:after {
35+
transition: all 250ms ease-in;
36+
}
37+
.toggle--btn:before, .toggle--btn:after,
38+
.toggle--checkbox:before,
39+
.toggle--checkbox:after,
40+
.toggle--feature:before,
41+
.toggle--feature:after {
42+
content: '';
43+
display: block;
44+
}
45+
46+
/* Day/Night */
47+
48+
.toggle--daynight .toggle--btn {
49+
position: relative;
50+
height: 70px;
51+
width: 125px;
52+
border-radius: 70px;
53+
border: 5px solid #1c1c1c;
54+
background-color: #3c4145;
55+
}
56+
57+
.toggle--daynight .toggle--btn:before {
58+
position: absolute;
59+
top: 2px;
60+
left: 4px;
61+
width: 56px;
62+
height: 56px;
63+
border-radius: 50%;
64+
background-color: #fff;
65+
border: 5px solid #e3e3c7;
66+
}
67+
68+
.toggle--daynight .toggle--btn:after {
69+
position: absolute;
70+
top: 62%;
71+
left: 39px;
72+
z-index: 10;
73+
width: 11.2px;
74+
height: 11.2px;
75+
opacity: 0;
76+
background-color: #fff;
77+
border-radius: 50%;
78+
box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
79+
transition: opacity 100ms ease-in;
80+
}
81+
@keyframes starry_star {
82+
50% {
83+
background-color: rgba(255, 255, 255, 0.1);
84+
box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
85+
}
86+
}
87+
@keyframes bounceIn {
88+
0% {
89+
opacity: 0;
90+
transform: scale(0.3);
91+
}
92+
50% {
93+
opacity: 100;
94+
transform: scale(1.1);
95+
}
96+
55% {
97+
transform: scale(1.1);
98+
}
99+
75% {
100+
transform: scale(0.9);
101+
}
102+
100% {
103+
opacity: 100;
104+
transform: scale(1);
105+
}
106+
}
107+
.toggle--daynight .toggle--feature {
108+
display: block;
109+
position: absolute;
110+
top: 9px;
111+
left: 52.5%;
112+
z-index: 20;
113+
width: 4px;
114+
height: 4px;
115+
border-radius: 50%;
116+
background-color: #fff;
117+
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
118+
animation: starry_star 5s ease-in-out infinite;
119+
}
120+
.toggle--daynight .toggle--feature:before {
121+
position: absolute;
122+
top: -2px;
123+
left: -25px;
124+
width: 18px;
125+
height: 18px;
126+
background-color: #fff;
127+
border-radius: 50%;
128+
border: 5px solid #e3e3c7;
129+
box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
130+
transform-origin: -6px 130%;
131+
}
132+
.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
133+
background-color: #9ee3fb;
134+
border: 5px solid #86c3d7;
135+
}
136+
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
137+
left: 55px;
138+
background-color: #ffdf6d;
139+
border: 5px solid #e1c348;
140+
}
141+
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
142+
opacity: 100;
143+
animation-name: bounceIn;
144+
animation-duration: 0.60s;
145+
animation-delay: 0.10s;
146+
animation-fill-mode: backwards;
147+
animation-timing-function: ease-in-out;
148+
}
149+
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
150+
opacity: 0;
151+
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
152+
animation: none;
153+
}
154+
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
155+
left: 25px;
156+
transform: rotate(70deg);
157+
}

‎assets/css/imports.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "./reset.css";
2+
@import "./dayNight.css";
3+
@import "./blinkingText.css";

‎assets/css/reset.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.reset,
2+
.reset::before,
3+
.reset::after {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}

‎assets/images/favicon-16x16.png

758 Bytes
Loading

‎assets/images/favicon-32x32.png

1.17 KB
Loading

‎assets/images/favicon.ico

14.7 KB
Binary file not shown.

‎assets/images/js_50px.png

569 Bytes
Loading

‎assets/images/markdown_50px.png

329 Bytes
Loading

‎assets/images/mdx.svg

+14
Loading

‎deck.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import intro from "./src/intro.mdx";
2+
import mdx from "./src/mdx.mdx";
3+
import mdxDeck from "./src/mdxDeck.mdx";
4+
5+
export { default as theme } from "./src/themes/first.js";
6+
7+
export default [...intro, ...mdx, ...mdxDeck];

0 commit comments

Comments
 (0)