background color changes + further changes to the start page

hkviz · Jan 31, 2025 · 4a76602 · 4a76602
1 parent 438fdf3
commit 4a76602
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 24 deletions.
diff --git a/src/components/content-wrapper.tsx b/src/components/content-wrapper.tsx
@@ -24,7 +24,7 @@ export const ContentWrapper: Component<ContentWrapperProps> = (props) => {
 		>
 			<div
 				class={cn(
-					'absolute inset-0 -z-10 bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-[#6245bc94]/60 to-[#c3cdd8]/60 bg-fixed dark:from-[#6245bc94]/60 dark:to-[#06111d]/60',
+					'absolute inset-0 -z-10 bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-[#6245bc94]/60 to-[#c3cdd8]/60 bg-fixed dark:from-[#5d3da9]/60 dark:to-[#040c15]/60',
 					props.backgroundClass,
 				)}
 			/>

diff --git a/src/routes/(home).tsx b/src/routes/(home).tsx
@@ -22,10 +22,16 @@ export default function HomePage() {
 			<Title>HKViz for Hollow Knight</Title>
 			<div class="container flex flex-col items-center justify-center gap-12 px-4 py-16 text-foreground">
 				<div class={`max-w-[70ch] text-center`}>
-					<h1 class={`title-text-glow -mb-6 font-serif text-[5rem] font-bold tracking-tight sm:text-[6rem]`}>
-						<HKVizText />
-					</h1>
-					<h2 class="title-text-glow font-serif text-2xl sm:text-3xl">Visual Analytics for Hollow Knight</h2>
+					<div class="start-page-header">
+						<h1
+							class={`title-text-glow -mb-6 font-serif text-[5rem] font-bold tracking-tight sm:text-[6rem]`}
+						>
+							<HKVizText />
+						</h1>
+						<h2 class="title-text-glow font-serif text-2xl sm:text-3xl">
+							Visual Analytics for Hollow Knight
+						</h2>
+					</div>
 					<p class="text-pretty pt-4">
 						With <HKVizText /> you can record gameplay analytics of your Hollow Knight gameplays, and share
 						them with others.

diff --git a/src/style/fancy-button.css b/src/style/fancy-button.css
@@ -30,6 +30,12 @@
 	position: relative;
 	transform: translate(0);
 	transform-style: preserve-3d;
+
+	transform-origin: center;
+	transition: transform 0.4s ease-out;
+}
+.fancy-button:hover {
+	transform: scale(1.025);
 }
 .fancy-button-shadow {
 	--overflow: 150px;
@@ -46,7 +52,6 @@
 	-webkit-mask-composite: xor;
 	mask-composite: exclude;
 
-	mix-blend-mode: screen;
 	opacity: 0.25;
 	transition: opacity 1s ease-in-out;
 }
@@ -63,7 +68,13 @@
 	position: absolute;
 	inset: -5px;
 	transform: translate(0, 0);
-	background: conic-gradient(in oklab from var(--fancy-button-shadow-rotation), #8b0000, #d4af37, #2e4f4f, #8b0000);
+	background: conic-gradient(
+		in oklab from var(--fancy-button-shadow-rotation),
+		#b752ff50,
+		#ffd754b0,
+		#8bffff34,
+		#b752ff50
+	);
 	filter: blur(10px);
 	border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
 	transition: filter 0.2s ease-in-out;

diff --git a/src/style/main.css b/src/style/main.css
@@ -63,21 +63,7 @@ html {
 .prose {
 	--tw-prose-bullets: #b6b9be;
 }
-/* 
-.fancy-button {
-	position: relative;
-	transform-style: preserve-3d;
-}
-.fancy-button::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	border-radius: inherit;
-	filter: blur(10px);
-	background: conic-gradient(in oklab, #6154b4, orange, yellow, #6154b4);
-	transform: translate3d(10px, 8px, -1px);
+
+.start-page-header {
+	text-shadow: 0 0 150px rgba(255, 177, 21, 0.5);
 }
- */