cleans up tilting - all top nav right, all filter nav left, same amou…

…nt regardless of tilt
the-pudding · Dec 4, 2024 · a98cfe6 · a98cfe6
1 parent 449c9c0
commit a98cfe6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/src/components/Filters.svelte b/src/components/Filters.svelte
@@ -18,8 +18,8 @@
   {#each filters as filter, i}
     {@const slug = filter?.toLowerCase()?.replace(/[^a-z]/g, "_")}
     {@const active = override ? slug === override : slug === activeFilter || !activeFilter}
-    <button class:active onclick={() => (activeFilter = slug === activeFilter ? undefined : slug)}>
-      <img class="icon {i % 2 === 0 ? 'icon-even': ''}" src="{base}/assets/stickers/{slug}@2x.png" alt="{slug} sticker" />
+    <button class="{i % 2 === 0 ? 'button-even': ''}" class:active onclick={() => (activeFilter = slug === activeFilter ? undefined : slug)}>
+      <img class="icon" src="{base}/assets/stickers/{slug}@2x.png" alt="{slug} sticker" />
       <span class="name">{filter}</span>
     </button>
   {/each}
@@ -76,12 +76,12 @@
     transform: rotate(var(--right-tilt));
   }
 
-  .filters--desktop .icon-even{
+  .filters--desktop .button-even .icon {
     transform: rotate(var(--left-tilt));
   }
 
-  .filters--desktop .icon:hover {
-    transform: rotate(var(--left-tilt-double)) scale(1.05);
+  .filters--desktop .button-even:hover .icon {
+    transform: rotate(-6deg) scale(1.05);
   }
 
   .filters--mobile {

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -135,24 +135,30 @@
   }
 
   li:nth-of-type(1) {
-    transform: rotate(0deg);
+    transform: rotate(var(--left-tilt));
+  }
+
+  li:nth-of-type(3) {
+    transform: rotate(var(--right-tilt));
+  }
+
+  li:nth-of-type(3):hover {
+    transform: rotate(var(--right-tilt-double)) scale(1.05);
+  }
+
+  li:nth-of-type(1):hover {
+    transform: rotate(0deg) scale(1.05);
   }
 
   li:nth-of-type(2) {
     width: 40%;
-    transform: rotate(-2deg);
     display: none;
   }
 
   li:nth-of-type(1) {
     display: none;
   }
 
-  li:nth-of-type(1):hover,
-  li:nth-of-type(2):hover {
-    transform: rotate(0deg) scale(1.05);
-  }
-
   .stories {
     display: none;
   }

diff --git a/src/components/Home.svelte b/src/components/Home.svelte
@@ -165,8 +165,9 @@
 
   .more {
     display: none;
-    height: 100vh;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%);
+    height: 50vh;
+    max-height: 600px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 50%);
     position: absolute;
     width: 100%;
     bottom: 0;