Fix a number of light mode issues and get rid of scrollbar jumping on menus (#4760)

* Fix DEV-466, Fixes #4692 as well as a bunch of other poor contrast and inconsistency issues in light mode. Adds shadows to buttons and makes scrollbar gutter stable.

* lintttt & only do scrollbar gutter on website

* try to fix following hydration issue

* try another clientonly approach

* fix home page link animation

* lint

* remove dropdown style from checkbox & improve shadow consistency

* liiiint

apps/frontend/src/layouts/default.vue

@@ -220,8 +220,15 @@
 			class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
 		>
 			<div>
-				<NuxtLink to="/" :aria-label="formatMessage(messages.modrinthHomePage)">
-					<TextLogo aria-hidden="true" class="h-7 w-auto text-contrast" />
+				<NuxtLink
+					to="/"
+					:aria-label="formatMessage(messages.modrinthHomePage)"
+					class="group hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness]"
+				>
+					<TextLogo
+						aria-hidden="true"
+						class="h-7 w-auto text-contrast transition-transform group-active:scale-[0.98]"
+					/>
 				</NuxtLink>
 			</div>
 			<div
@@ -369,7 +376,7 @@
 								formatMessage(navMenuMessages.discoverContent)
 							}}</span>
 							<span class="contents md:hidden">{{ formatMessage(navMenuMessages.discover) }}</span>
-							<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+							<DropdownIcon aria-hidden="true" class="h-5 w-5" />
 
 							<template #mods>
 								<BoxIcon aria-hidden="true" />