Skip to content

Commit 96ec481

Browse files
committed
fixing subpages
1 parent 8cfec30 commit 96ec481

File tree

7 files changed

+718
-5
lines changed

7 files changed

+718
-5
lines changed

css/crumple.css

Lines changed: 394 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,394 @@
1+
2+
@-webkit-keyframes a {
3+
0% {
4+
-webkit-clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
5+
clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 0 100%)
6+
}
7+
20% {
8+
-webkit-clip-path: polygon(0 0, 27% 24%, 40% 66%, 100% 50%, 100% 100%, 0 100%);
9+
clip-path: polygon(0 0, 27% 24%, 40% 66%, 100% 50%, 100% 100%, 0 100%)
10+
}
11+
40% {
12+
-webkit-clip-path: polygon(0 16%, 19% 54%, 24% 89%, 64% 67%, 100% 100%, 0 100%);
13+
clip-path: polygon(0 16%, 19% 54%, 24% 89%, 64% 67%, 100% 100%, 0 100%)
14+
}
15+
60% {
16+
-webkit-clip-path: polygon(0 47%, 9% 70%, 14% 100%, 44% 89%, 89% 100%, 0 100%);
17+
clip-path: polygon(0 47%, 9% 70%, 14% 100%, 44% 89%, 89% 100%, 0 100%)
18+
}
19+
80% {
20+
-webkit-clip-path: polygon(0 61%, 6% 89%, 10% 100%, 27% 95%, 87% 100%, 0 100%);
21+
clip-path: polygon(0 61%, 6% 89%, 10% 100%, 27% 95%, 87% 100%, 0 100%)
22+
}
23+
to {
24+
-webkit-clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%);
25+
clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%)
26+
}
27+
}
28+
@keyframes a {
29+
0% {
30+
-webkit-clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
31+
clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 0 100%)
32+
}
33+
20% {
34+
-webkit-clip-path: polygon(0 0, 27% 24%, 40% 66%, 100% 50%, 100% 100%, 0 100%);
35+
clip-path: polygon(0 0, 27% 24%, 40% 66%, 100% 50%, 100% 100%, 0 100%)
36+
}
37+
40% {
38+
-webkit-clip-path: polygon(0 16%, 19% 54%, 24% 89%, 64% 67%, 100% 100%, 0 100%);
39+
clip-path: polygon(0 16%, 19% 54%, 24% 89%, 64% 67%, 100% 100%, 0 100%)
40+
}
41+
60% {
42+
-webkit-clip-path: polygon(0 47%, 9% 70%, 14% 100%, 44% 89%, 89% 100%, 0 100%);
43+
clip-path: polygon(0 47%, 9% 70%, 14% 100%, 44% 89%, 89% 100%, 0 100%)
44+
}
45+
80% {
46+
-webkit-clip-path: polygon(0 61%, 6% 89%, 10% 100%, 27% 95%, 87% 100%, 0 100%);
47+
clip-path: polygon(0 61%, 6% 89%, 10% 100%, 27% 95%, 87% 100%, 0 100%)
48+
}
49+
to {
50+
-webkit-clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%);
51+
clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%)
52+
}
53+
}
54+
@-webkit-keyframes b {
55+
0% {
56+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 50%);
57+
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 50%)
58+
}
59+
20% {
60+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 86%, 0 100%, 0 50%);
61+
clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 86%, 0 100%, 0 50%)
62+
}
63+
40% {
64+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 81%, 74% 71%, 19% 89%, 13% 44%);
65+
clip-path: polygon(0 0, 100% 0, 100% 81%, 74% 71%, 19% 89%, 13% 44%)
66+
}
67+
60% {
68+
-webkit-clip-path: polygon(21% 0, 100% 0, 100% 58%, 84% 54%, 39% 74%, 40% 29%);
69+
clip-path: polygon(21% 0, 100% 0, 100% 58%, 84% 54%, 39% 74%, 40% 29%)
70+
}
71+
80% {
72+
-webkit-clip-path: polygon(46% 0, 100% 0, 100% 31%, 94% 21%, 63% 37%, 62% 8%);
73+
clip-path: polygon(46% 0, 100% 0, 100% 31%, 94% 21%, 63% 37%, 62% 8%)
74+
}
75+
to {
76+
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0);
77+
clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0)
78+
}
79+
}
80+
@keyframes b {
81+
0% {
82+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 50%);
83+
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 50%)
84+
}
85+
20% {
86+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 86%, 0 100%, 0 50%);
87+
clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 86%, 0 100%, 0 50%)
88+
}
89+
40% {
90+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 81%, 74% 71%, 19% 89%, 13% 44%);
91+
clip-path: polygon(0 0, 100% 0, 100% 81%, 74% 71%, 19% 89%, 13% 44%)
92+
}
93+
60% {
94+
-webkit-clip-path: polygon(21% 0, 100% 0, 100% 58%, 84% 54%, 39% 74%, 40% 29%);
95+
clip-path: polygon(21% 0, 100% 0, 100% 58%, 84% 54%, 39% 74%, 40% 29%)
96+
}
97+
80% {
98+
-webkit-clip-path: polygon(46% 0, 100% 0, 100% 31%, 94% 21%, 63% 37%, 62% 8%);
99+
clip-path: polygon(46% 0, 100% 0, 100% 31%, 94% 21%, 63% 37%, 62% 8%)
100+
}
101+
to {
102+
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0);
103+
clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0)
104+
}
105+
}
106+
@-webkit-keyframes c {
107+
0% {
108+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%);
109+
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%)
110+
}
111+
20% {
112+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 11% 51%);
113+
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 11% 51%)
114+
}
115+
40% {
116+
-webkit-clip-path: polygon(0 0, 100% 0, 92% 40%, 87% 83%, 44% 79%, 19% 36%);
117+
clip-path: polygon(0 0, 100% 0, 92% 40%, 87% 83%, 44% 79%, 19% 36%)
118+
}
119+
60% {
120+
-webkit-clip-path: polygon(20% 0, 100% 0, 67% 13%, 70% 50%, 41% 69%, 30% 23%);
121+
clip-path: polygon(20% 0, 100% 0, 67% 13%, 70% 50%, 41% 69%, 30% 23%)
122+
}
123+
80% {
124+
-webkit-clip-path: polygon(31% 0, 71% 0, 57% 9%, 54% 30%, 41% 50%, 36% 16%);
125+
clip-path: polygon(31% 0, 71% 0, 57% 9%, 54% 30%, 41% 50%, 36% 16%)
126+
}
127+
to {
128+
-webkit-clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
129+
clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0)
130+
}
131+
}
132+
@keyframes c {
133+
0% {
134+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%);
135+
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%)
136+
}
137+
20% {
138+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 11% 51%);
139+
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 11% 51%)
140+
}
141+
40% {
142+
-webkit-clip-path: polygon(0 0, 100% 0, 92% 40%, 87% 83%, 44% 79%, 19% 36%);
143+
clip-path: polygon(0 0, 100% 0, 92% 40%, 87% 83%, 44% 79%, 19% 36%)
144+
}
145+
60% {
146+
-webkit-clip-path: polygon(20% 0, 100% 0, 67% 13%, 70% 50%, 41% 69%, 30% 23%);
147+
clip-path: polygon(20% 0, 100% 0, 67% 13%, 70% 50%, 41% 69%, 30% 23%)
148+
}
149+
80% {
150+
-webkit-clip-path: polygon(31% 0, 71% 0, 57% 9%, 54% 30%, 41% 50%, 36% 16%);
151+
clip-path: polygon(31% 0, 71% 0, 57% 9%, 54% 30%, 41% 50%, 36% 16%)
152+
}
153+
to {
154+
-webkit-clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
155+
clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0)
156+
}
157+
}
158+
@-webkit-keyframes d {
159+
0% {
160+
-webkit-clip-path: polygon(99% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0);
161+
clip-path: polygon(99% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0)
162+
}
163+
20% {
164+
-webkit-clip-path: polygon(88% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 29% 6%);
165+
clip-path: polygon(88% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 29% 6%)
166+
}
167+
40% {
168+
-webkit-clip-path: polygon(62% 9%, 75% 48%, 100% 100%, 0 100%, 36% 55%, 43% 24%);
169+
clip-path: polygon(62% 9%, 75% 48%, 100% 100%, 0 100%, 36% 55%, 43% 24%)
170+
}
171+
60% {
172+
-webkit-clip-path: polygon(53% 22%, 62% 61%, 85% 100%, 0 100%, 43% 75%, 45% 46%);
173+
clip-path: polygon(53% 22%, 62% 61%, 85% 100%, 0 100%, 43% 75%, 45% 46%)
174+
}
175+
80% {
176+
-webkit-clip-path: polygon(49% 43%, 56% 83%, 72% 100%, 29% 100%, 42% 90%, 46% 69%);
177+
clip-path: polygon(49% 43%, 56% 83%, 72% 100%, 29% 100%, 42% 90%, 46% 69%)
178+
}
179+
to {
180+
-webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
181+
clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)
182+
}
183+
}
184+
@keyframes d {
185+
0% {
186+
-webkit-clip-path: polygon(99% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0);
187+
clip-path: polygon(99% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0)
188+
}
189+
20% {
190+
-webkit-clip-path: polygon(88% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 29% 6%);
191+
clip-path: polygon(88% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 29% 6%)
192+
}
193+
40% {
194+
-webkit-clip-path: polygon(62% 9%, 75% 48%, 100% 100%, 0 100%, 36% 55%, 43% 24%);
195+
clip-path: polygon(62% 9%, 75% 48%, 100% 100%, 0 100%, 36% 55%, 43% 24%)
196+
}
197+
60% {
198+
-webkit-clip-path: polygon(53% 22%, 62% 61%, 85% 100%, 0 100%, 43% 75%, 45% 46%);
199+
clip-path: polygon(53% 22%, 62% 61%, 85% 100%, 0 100%, 43% 75%, 45% 46%)
200+
}
201+
80% {
202+
-webkit-clip-path: polygon(49% 43%, 56% 83%, 72% 100%, 29% 100%, 42% 90%, 46% 69%);
203+
clip-path: polygon(49% 43%, 56% 83%, 72% 100%, 29% 100%, 42% 90%, 46% 69%)
204+
}
205+
to {
206+
-webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
207+
clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)
208+
}
209+
}
210+
@-webkit-keyframes e {
211+
0% {
212+
-webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0);
213+
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0)
214+
}
215+
20% {
216+
-webkit-clip-path: polygon(32% 4%, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0);
217+
clip-path: polygon(32% 4%, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0)
218+
}
219+
40% {
220+
-webkit-clip-path: polygon(21% 18%, 100% 50%, 83% 88%, 27% 83%, 0 100%, 0 0);
221+
clip-path: polygon(21% 18%, 100% 50%, 83% 88%, 27% 83%, 0 100%, 0 0)
222+
}
223+
60% {
224+
-webkit-clip-path: polygon(12% 32%, 100% 50%, 49% 70%, 11% 71%, 0 85%, 0 0);
225+
clip-path: polygon(12% 32%, 100% 50%, 49% 70%, 11% 71%, 0 85%, 0 0)
226+
}
227+
80% {
228+
-webkit-clip-path: polygon(6% 42%, 43% 44%, 20% 59%, 6% 63%, 0 72%, 0 28%);
229+
clip-path: polygon(6% 42%, 43% 44%, 20% 59%, 6% 63%, 0 72%, 0 28%)
230+
}
231+
to {
232+
-webkit-clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%);
233+
clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%)
234+
}
235+
}
236+
@keyframes e {
237+
0% {
238+
-webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0);
239+
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0)
240+
}
241+
20% {
242+
-webkit-clip-path: polygon(32% 4%, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0);
243+
clip-path: polygon(32% 4%, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 0)
244+
}
245+
40% {
246+
-webkit-clip-path: polygon(21% 18%, 100% 50%, 83% 88%, 27% 83%, 0 100%, 0 0);
247+
clip-path: polygon(21% 18%, 100% 50%, 83% 88%, 27% 83%, 0 100%, 0 0)
248+
}
249+
60% {
250+
-webkit-clip-path: polygon(12% 32%, 100% 50%, 49% 70%, 11% 71%, 0 85%, 0 0);
251+
clip-path: polygon(12% 32%, 100% 50%, 49% 70%, 11% 71%, 0 85%, 0 0)
252+
}
253+
80% {
254+
-webkit-clip-path: polygon(6% 42%, 43% 44%, 20% 59%, 6% 63%, 0 72%, 0 28%);
255+
clip-path: polygon(6% 42%, 43% 44%, 20% 59%, 6% 63%, 0 72%, 0 28%)
256+
}
257+
to {
258+
-webkit-clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%);
259+
clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%)
260+
}
261+
}
262+
@-webkit-keyframes f {
263+
0% {
264+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
265+
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%)
266+
}
267+
20% {
268+
-webkit-clip-path: polygon(6% 5%, 75% 11%, 100% 50%, 100% 100%, 9% 95%, 0 50%);
269+
clip-path: polygon(6% 5%, 75% 11%, 100% 50%, 100% 100%, 9% 95%, 0 50%)
270+
}
271+
40% {
272+
-webkit-clip-path: polygon(20% 15%, 63% 29%, 80% 50%, 100% 100%, 21% 83%, 0 50%);
273+
clip-path: polygon(20% 15%, 63% 29%, 80% 50%, 100% 100%, 21% 83%, 0 50%)
274+
}
275+
60% {
276+
-webkit-clip-path: polygon(31% 30%, 55% 37%, 70% 49%, 88% 91%, 36% 63%, 18% 50%);
277+
clip-path: polygon(31% 30%, 55% 37%, 70% 49%, 88% 91%, 36% 63%, 18% 50%)
278+
}
279+
80% {
280+
-webkit-clip-path: polygon(39% 42%, 50% 50%, 62% 50%, 68% 70%, 45% 56%, 31% 50%);
281+
clip-path: polygon(39% 42%, 50% 50%, 62% 50%, 68% 70%, 45% 56%, 31% 50%)
282+
}
283+
to {
284+
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
285+
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
286+
}
287+
}
288+
@keyframes f {
289+
0% {
290+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
291+
clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%)
292+
}
293+
20% {
294+
-webkit-clip-path: polygon(6% 5%, 75% 11%, 100% 50%, 100% 100%, 9% 95%, 0 50%);
295+
clip-path: polygon(6% 5%, 75% 11%, 100% 50%, 100% 100%, 9% 95%, 0 50%)
296+
}
297+
40% {
298+
-webkit-clip-path: polygon(20% 15%, 63% 29%, 80% 50%, 100% 100%, 21% 83%, 0 50%);
299+
clip-path: polygon(20% 15%, 63% 29%, 80% 50%, 100% 100%, 21% 83%, 0 50%)
300+
}
301+
60% {
302+
-webkit-clip-path: polygon(31% 30%, 55% 37%, 70% 49%, 88% 91%, 36% 63%, 18% 50%);
303+
clip-path: polygon(31% 30%, 55% 37%, 70% 49%, 88% 91%, 36% 63%, 18% 50%)
304+
}
305+
80% {
306+
-webkit-clip-path: polygon(39% 42%, 50% 50%, 62% 50%, 68% 70%, 45% 56%, 31% 50%);
307+
clip-path: polygon(39% 42%, 50% 50%, 62% 50%, 68% 70%, 45% 56%, 31% 50%)
308+
309+
}
310+
to {
311+
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
312+
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
313+
background-position:0% 50%;
314+
}
315+
}
316+
@-webkit-keyframes gradient {
317+
0% { background-position: 0% 50% }
318+
50% { background-position: 100% 50% }
319+
to { background-position: 0% 50% }
320+
}
321+
@-moz-keyframes gradient {
322+
0%{background-position:0% 50%}
323+
50%{background-position:100% 50%}
324+
to {background-position:0% 50%}
325+
}
326+
@keyframes gradient {
327+
0%{background-position:0% 50%}
328+
50%{background-position:100% 50%}
329+
to {background-position:0% 50%}
330+
}
331+
332+
.crumple {
333+
z-index: -1;
334+
position: fixed;
335+
top: 0;
336+
left: 0;
337+
width: 100vw;
338+
height: 100vh;
339+
pointer-events: none
340+
}
341+
.crumple:after {
342+
content: "";
343+
position: absolute;
344+
top: 0;
345+
left: 0;
346+
display: block;
347+
width: 100%;
348+
height: 100%;
349+
background-color: #222;
350+
}
351+
352+
@media (hover: hover) {
353+
.footer > a:nth-child(odd):hover~.crumple {
354+
background: #1E90FF; /* fallback for old browsers */
355+
background: -webkit-linear-gradient(45deg, #1E90FF, #00BFFF); /* Chrome 10-25, Safari 5.1-6 */
356+
background: linear-gradient(45deg, #1E90FF, #00BFFF);
357+
background-size: 400% 400%;
358+
}
359+
.footer > a:nth-child(2n):hover~.crumple {
360+
background: #66CDAA; /* fallback for old browsers */
361+
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA); /* Chrome 10-25, Safari 5.1-6 */
362+
background: linear-gradient(45deg, #66CDAA, #20B2AA);
363+
background-size: 400% 400%;
364+
}
365+
.footer > a:hover~.crumple {
366+
-webkit-animation: gradient 30s ease infinite;
367+
animation: gradient 30s ease infinite;
368+
}
369+
370+
.footer__link--email:hover~.crumple:after {
371+
-webkit-animation: a 1s .25s linear forwards;
372+
animation: a 1s .25s linear forwards
373+
}
374+
.footer__link--github:hover~.crumple:after {
375+
-webkit-animation: b 1s .25s linear forwards;
376+
animation: b 1s .25s linear forwards
377+
}
378+
.footer__link--playlists:hover~.crumple:after {
379+
-webkit-animation: c 1s .25s linear forwards;
380+
animation: c 1s .25s linear forwards
381+
}
382+
.footer__link--linkedin:hover~.crumple:after {
383+
-webkit-animation: d 1s .25s linear forwards;
384+
animation: d 1s .25s linear forwards
385+
}
386+
.footer__link--twitter:hover~.crumple:after {
387+
-webkit-animation: e 1s .25s linear forwards;
388+
animation: e 1s .25s linear forwards
389+
}
390+
.footer__link--instagram:hover~.crumple:after {
391+
-webkit-animation: f 1s .25s linear forwards;
392+
animation: f 1s .25s linear forwards
393+
}
394+
}

0 commit comments

Comments
 (0)