Skip to content

Commit 2342392

Browse files
zesamerizesameri
committed
set art page crumple colors
1 parent 842286a commit 2342392

2 files changed

Lines changed: 47 additions & 38 deletions

File tree

‎art.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
3636

3737
</head>
38-
<body id="essays">
38+
<body id="art">
3939
<div class="content-wrapper">
4040
<section class="writing">
4141
<div class="top-bar">

‎css/crumple.css‎

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -596,54 +596,63 @@
596596
display: none;
597597
}
598598

599-
/* Colors for other pages (trash, writings, poems) */
600-
/* First link (blue) - using nth-child(3n+1) */
601-
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple,
602-
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple,
603-
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple {
599+
/* Per-page nav colors — set --c1 through --c5 per body id */
600+
body#essays { --c1: #ab2439; --c2: #5a82b3; --c3: #a36aa5; --c4: #d8a37b; --c5: #e0b3b6; }
601+
body#art { --c1: #c7d14f; --c2: #00b49b; --c3: #96d1aa; --c4: #78cdd0; --c5: #97acc8; }
602+
body#trash { --c1: #020121; --c2: #012118; --c3: #210120; --c4: #020121; --c5: #012118; }
603+
body#poems { --c1: #020121; --c2: #012118; --c3: #210120; --c4: #020121; --c5: #012118; }
604+
605+
body#essays:has(.footer > a:hover) .crumple,
606+
body#art:has(.footer > a:hover) .crumple,
607+
body#trash:has(.footer > a:hover) .crumple,
608+
body#poems:has(.footer > a:hover) .crumple {
604609
z-index: 2;
605610
}
606-
607-
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
608-
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
609-
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple:after {
610-
background-color: #020121;
611-
opacity: 1;
611+
612+
body#essays:has(.footer > a:nth-child(1):hover) .crumple:after,
613+
body#art:has(.footer > a:nth-child(1):hover) .crumple:after,
614+
body#trash:has(.footer > a:nth-child(1):hover) .crumple:after,
615+
body#poems:has(.footer > a:nth-child(1):hover) .crumple:after {
616+
background-color: var(--c1); opacity: 1;
612617
-webkit-animation: e 1s 0s linear reverse forwards;
613618
animation: e 1s 0s linear reverse forwards;
614619
}
615-
616-
/* Second link (green) - using nth-child(3n+2) */
617-
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple,
618-
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple,
619-
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple {
620-
z-index: 2;
621-
}
622-
623-
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
624-
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
625-
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple:after {
626-
background-color: #012118;
627-
opacity: 1;
620+
621+
body#essays:has(.footer > a:nth-child(2):hover) .crumple:after,
622+
body#art:has(.footer > a:nth-child(2):hover) .crumple:after,
623+
body#trash:has(.footer > a:nth-child(2):hover) .crumple:after,
624+
body#poems:has(.footer > a:nth-child(2):hover) .crumple:after {
625+
background-color: var(--c2); opacity: 1;
628626
-webkit-animation: b 1s 0s linear reverse forwards;
629627
animation: b 1s 0s linear reverse forwards;
630628
}
631-
632-
/* Third link (purple) - using nth-child(3n) */
633-
body#trash:has(.footer > a:nth-child(3n):hover) .crumple,
634-
body#essays:has(.footer > a:nth-child(3n):hover) .crumple,
635-
body#poems:has(.footer > a:nth-child(3n):hover) .crumple {
636-
z-index: 2;
637-
}
638-
639-
body#trash:has(.footer > a:nth-child(3n):hover) .crumple:after,
640-
body#essays:has(.footer > a:nth-child(3n):hover) .crumple:after,
641-
body#poems:has(.footer > a:nth-child(3n):hover) .crumple:after {
642-
background-color: #210120;
643-
opacity: 1;
629+
630+
body#essays:has(.footer > a:nth-child(3):hover) .crumple:after,
631+
body#art:has(.footer > a:nth-child(3):hover) .crumple:after,
632+
body#trash:has(.footer > a:nth-child(3):hover) .crumple:after,
633+
body#poems:has(.footer > a:nth-child(3):hover) .crumple:after {
634+
background-color: var(--c3); opacity: 1;
644635
-webkit-animation: c 1s 0s linear reverse forwards;
645636
animation: c 1s 0s linear reverse forwards;
646637
}
638+
639+
body#essays:has(.footer > a:nth-child(4):hover) .crumple:after,
640+
body#art:has(.footer > a:nth-child(4):hover) .crumple:after,
641+
body#trash:has(.footer > a:nth-child(4):hover) .crumple:after,
642+
body#poems:has(.footer > a:nth-child(4):hover) .crumple:after {
643+
background-color: var(--c4); opacity: 1;
644+
-webkit-animation: e 1s 0s linear reverse forwards;
645+
animation: e 1s 0s linear reverse forwards;
646+
}
647+
648+
body#essays:has(.footer > a:nth-child(5):hover) .crumple:after,
649+
body#art:has(.footer > a:nth-child(5):hover) .crumple:after,
650+
body#trash:has(.footer > a:nth-child(5):hover) .crumple:after,
651+
body#poems:has(.footer > a:nth-child(5):hover) .crumple:after {
652+
background-color: var(--c5); opacity: 1;
653+
-webkit-animation: b 1s 0s linear reverse forwards;
654+
animation: b 1s 0s linear reverse forwards;
655+
}
647656

648657
/* Mobile home page: use colors instead of videos */
649658
/* First link (blue) - writing */

0 commit comments

Comments
 (0)