diff --git a/src/components/Filters.svelte b/src/components/Filters.svelte index 39072cf7..ce8e7c4e 100644 --- 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} - {/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 index 43c1745d..49d12478 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -135,12 +135,23 @@ } 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; } @@ -148,11 +159,6 @@ 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 index de4a60ab..2dfe123e 100644 --- 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;