Skip to content

Commit b7d3276

Browse files
zesamerizesameri
committed
updated vids, fixed bug with minimal crumple
1 parent d7128c1 commit b7d3276

File tree

6 files changed

+67
-39
lines changed

6 files changed

+67
-39
lines changed

‎assets/videos/20180226_180744.mp4‎

5.18 MB
Binary file not shown.

‎css/crumple.css‎

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -536,82 +536,105 @@
536536
background-color: #210120;
537537
}
538538

539-
body:has(.footer__link--writings:hover) .crumple {
539+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple {
540540
background: transparent;
541541
z-index: 2;
542542
}
543543

544-
body:has(.footer__link--writings:hover) .crumple-video--writings {
544+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple-video--writings {
545545
opacity: 1;
546546
-webkit-animation: e 1s 0s linear reverse forwards;
547547
animation: e 1s 0s linear reverse forwards;
548548
}
549549

550550
/* Videos for home page only */
551-
body:not(#trash):not(#essays):has(.footer__link--github:hover) .crumple-video--github {
551+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple {
552+
z-index: 2;
553+
}
554+
555+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple-video--github {
552556
opacity: 1;
553557
-webkit-animation: b 1s .25s linear reverse forwards;
554558
animation: b 1s .25s linear reverse forwards;
555559
}
556560

557-
body:not(#trash):not(#essays):has(.footer__link--playlists:hover) .crumple-video--playlists {
561+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple {
562+
z-index: 2;
563+
}
564+
565+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple-video--playlists {
558566
opacity: 1;
559567
-webkit-animation: c 1s .25s linear reverse forwards;
560568
animation: c 1s .25s linear reverse forwards;
561569
}
562570

563-
body:not(#trash):not(#essays):has(.footer__link--instagram:hover) .crumple-video--instagram {
571+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple {
572+
z-index: 2;
573+
}
574+
575+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple-video--instagram {
564576
opacity: 1;
565577
-webkit-animation: f 1s .25s linear reverse forwards;
566578
animation: f 1s .25s linear reverse forwards;
567579
}
568580

569-
body:not(#trash):not(#essays):has(.footer__link--alhambra:hover) .crumple-video--alhambra {
581+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
582+
z-index: 2;
583+
}
584+
585+
body:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra {
570586
opacity: 1;
571587
-webkit-animation: d 1s .25s linear reverse forwards;
572588
animation: d 1s .25s linear reverse forwards;
573589
}
574590

575-
/* Colors for other pages (trash, writings) */
576-
body#trash:has(.footer__link--github:hover) .crumple:after,
577-
body#essays:has(.footer__link--github:hover) .crumple:after {
578-
background-color: #012118;
579-
-webkit-animation: b 1s .25s linear reverse forwards;
580-
animation: b 1s .25s linear reverse forwards;
591+
/* Colors for other pages (trash, writings, poems) */
592+
/* First link (blue) - using nth-child(3n+1) */
593+
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple,
594+
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple,
595+
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple {
596+
z-index: 2;
581597
}
582598

583-
body#trash:has(.footer__link--playlists:hover) .crumple:after,
584-
body#essays:has(.footer__link--playlists:hover) .crumple:after {
585-
background-color: #210120;
586-
-webkit-animation: c 1s .25s linear reverse forwards;
587-
animation: c 1s .25s linear reverse forwards;
599+
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
600+
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
601+
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple:after {
602+
background-color: #020121;
603+
opacity: 1;
604+
-webkit-animation: e 1s 0s linear reverse forwards;
605+
animation: e 1s 0s linear reverse forwards;
588606
}
589607

590-
body#trash:has(.footer__link--instagram:hover) .crumple:after,
591-
body#essays:has(.footer__link--instagram:hover) .crumple:after {
592-
background-color: #210120;
593-
-webkit-animation: f 1s .25s linear reverse forwards;
594-
animation: f 1s .25s linear reverse forwards;
608+
/* Second link (green) - using nth-child(3n+2) */
609+
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple,
610+
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple,
611+
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple {
612+
z-index: 2;
595613
}
596614

597-
body#trash:has(.footer__link--alhambra:hover) .crumple:after,
598-
body#essays:has(.footer__link--alhambra:hover) .crumple:after {
599-
background-color: #020121;
600-
-webkit-animation: d 1s .25s linear reverse forwards;
601-
animation: d 1s .25s linear reverse forwards;
615+
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
616+
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
617+
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple:after {
618+
background-color: #012118;
619+
opacity: 1;
620+
-webkit-animation: b 1s 0s linear reverse forwards;
621+
animation: b 1s 0s linear reverse forwards;
602622
}
603623

604-
body#trash:has(.footer__link--home:hover) .crumple:after,
605-
body#essays:has(.footer__link--home:hover) .crumple:after {
606-
background-color: #020121;
607-
-webkit-animation: a 1s .25s linear reverse forwards;
608-
animation: a 1s .25s linear reverse forwards;
624+
/* Third link (purple) - using nth-child(3n) */
625+
body#trash:has(.footer > a:nth-child(3n):hover) .crumple,
626+
body#essays:has(.footer > a:nth-child(3n):hover) .crumple,
627+
body#poems:has(.footer > a:nth-child(3n):hover) .crumple {
628+
z-index: 2;
609629
}
610630

611-
/* Z-index for non-home pages */
612-
body#trash:has(.footer > a:hover) .crumple,
613-
body#essays:has(.footer > a:hover) .crumple {
614-
z-index: 2;
631+
body#trash:has(.footer > a:nth-child(3n):hover) .crumple:after,
632+
body#essays:has(.footer > a:nth-child(3n):hover) .crumple:after,
633+
body#poems:has(.footer > a:nth-child(3n):hover) .crumple:after {
634+
background-color: #210120;
635+
opacity: 1;
636+
-webkit-animation: c 1s 0s linear reverse forwards;
637+
animation: c 1s 0s linear reverse forwards;
615638
}
616639
}
617640

‎css/main.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@ body {
1818
/* Fallback background for pages without video background */
1919
body#trash,
2020
body#essays,
21+
body#poems,
2122
body:not(:has(.video-background)):not(:has(.image-background)):not(:has(.background-images)) {
2223
background-color: #111;
2324
}
2425

2526
/* Or more simply, target specific page IDs */
2627
body#trash,
27-
body#essays {
28+
body#essays,
29+
body#poems {
2830
background-color: #111;
2931
}
3032

‎index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,14 @@ <h1 class="header">
8181
<source src="./assets/videos/IMG_4943.MOV" type="video/mp4">
8282
</video>
8383
<video class="crumple-video crumple-video--playlists" autoplay muted loop playsinline>
84-
<source src="./assets/videos/IMG_7555.mov" type="video/mp4">
84+
<!-- <source src="./assets/videos/IMG_7555.mov" type="video/mp4"> -->
85+
<source src="./assets/videos/20180226_180744.mp4" type="video/mp4">
8586
</video>
8687
<video class="crumple-video crumple-video--instagram" autoplay muted loop playsinline>
8788
<source src="./assets/videos/IMG_1624.MOV" type="video/mp4">
8889
</video>
8990
<video class="crumple-video crumple-video--github" autoplay muted loop playsinline>
90-
<source src="./assets/videos/IMG_4017.MOV" type="video/mp4">
91+
<source src="./assets/videos/IMG_7555.MOV" type="video/mp4">
9192
</video>
9293
</body>
9394
</html>

‎poems.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ <h1 class="header">
110110
</footer>
111111
</div>
112112

113+
<div class="crumple" aria-hidden=""></div>
113114

114115
</body>
115116
</html>

‎writings.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,5 +134,6 @@ <h1 class="header">
134134
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
135135
</footer>
136136
</div>
137+
<div class="crumple" aria-hidden=""></div>
137138
</body>
138139
</html>

0 commit comments

Comments
 (0)