added record button on start page when not logged in or no runs recor…

…ded yet + split styles into multiple files

src/components/fancy-button.tsx

@@ -0,0 +1,33 @@
+import { createSignal, onMount, splitProps, ValidComponent } from 'solid-js';
+import { Button, ButtonProps } from './ui/button';
+import { PolymorphicProps } from '@kobalte/core';
+import { cn } from '~/lib/utils';
+
+export interface FancyButtonProps<T extends ValidComponent = 'button'> extends ButtonProps<T> {
+	idk?: true; // TODO
+}
+
+export const FancyButton = <T extends ValidComponent = 'button'>(props: PolymorphicProps<T, FancyButtonProps<T>>) => {
+	const [local, others] = splitProps(props, ['idk', 'class', 'children']);
+	const ButtonT = Button<T>;
+
+	const [loading, setLoading] = createSignal(true);
+
+	onMount(() => {
+		setLoading(false);
+	});
+
+	return (
+		<ButtonT
+			class={cn(
+				'fancy-button h-auto bg-primary/50 px-8 py-4 font-serif text-2xl font-semibold hover:bg-primary/80',
+				loading() ? 'fancy-button-loading' : '',
+				local.class,
+			)}
+			{...(others as any)}
+		>
+			<div class="fancy-button-shadow" />
+			{local.children}
+		</ButtonT>
+	);
+};

src/components/main-nav/main-nav.tsx

@@ -101,7 +101,13 @@ export const MainNav = () => {
 								<Show
 									when={session()}
 									fallback={
-										<MenuItem href={loginUrl()} title="Login" icon={LogIn} useNativeLink={true} />
+										<MenuItem
+											href={loginUrl()}
+											title="Login"
+											icon={LogIn}
+											useNativeLink={true}
+											target="_self"
+										/>
 									}
 								>
 									<CurrentUserNavLinks />

src/routes/(home).tsx

@@ -1,9 +1,12 @@
 import { Title } from '@solidjs/meta';
-import { createAsync, RouteDefinition } from '@solidjs/router';
+import { A, createAsync, RouteDefinition } from '@solidjs/router';
 import { ContentCenterWrapper } from '~/components/content-wrapper';
+import { FancyButton } from '~/components/fancy-button';
 import { HKVizText } from '~/components/HKVizText';
 import { OwnRuns } from '~/components/own-runs';
 import { GradientSeparator } from '~/components/ui/additions';
+import { Button } from '~/components/ui/button';
+import { cn } from '~/lib/utils';
 import { findOwnRuns } from '~/server/run/find-own-runs';
 
 export const route = {
@@ -28,13 +31,13 @@ export default function HomePage() {
 						them with others.
 					</p>
 
-					{/* {userRuns.length == 0 && (
-	                    <div class="flex flex-row items-center justify-center py-8 transition sm:gap-12">
-	                        <Button asChild class="rounded-3xl p-8 text-2xl font-semibold shadow-md hover:shadow-lg">
-	                            <Link href="/guide/install">Record gameplay analytics</Link>
-	                        </Button>
-	                    </div>
-	                )} */}
+					{runs() && runs()!.length === 0 && (
+						<div class="flex flex-row items-center justify-center py-8 transition sm:gap-12">
+							<FancyButton as={A} href="/guide/install">
+								Record Gameplay Analytics
+							</FancyButton>
+						</div>
+					)}
 				</div>
 
 				<OwnRuns runs={runs()!} />

src/style/dashboard.css

@@ -0,0 +1,134 @@
+.dashboard-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 2fr min-content min-content;
+	grid-template-areas:
+		'tab-options'
+		'tab-content'
+		'timeline'
+		'tabs';
+
+	--dashboard-height: calc(100vh - var(--main-nav-height));
+	--dashboard-height: calc(100dvh - var(--main-nav-height));
+
+	height: var(--dashboard-height);
+	max-height: var(--dashboard-height);
+	min-height: var(--dashboard-height);
+	overflow: hidden;
+}
+
+@media screen(md) {
+	.dashboard-grid {
+		grid-template-columns: 300px 1fr;
+		grid-template-rows: 1fr auto;
+		grid-template-areas:
+			'map-options map'
+			'timeline timeline'
+			'tabs tabs';
+		gap: 0.25rem;
+		padding: 0.25rem;
+	}
+}
+
+@media screen(lg) {
+	.dashboard-grid {
+		grid-template-columns: 300px 1fr 350px;
+		grid-template-rows: 1fr auto;
+		grid-template-areas:
+			'map-options map      splits-and-timecharts'
+			'map-options timeline splits-and-timecharts';
+	}
+}
+
+.dashboard-grid-map-options {
+	grid-area: tab-options;
+	flex-direction: row;
+	max-width: 100%;
+	overflow-x: auto;
+}
+
+@media screen(md) {
+	.dashboard-grid-map-options {
+		grid-area: map-options;
+		flex-direction: column;
+		gap: 0.25rem;
+		max-width: unset;
+		overflow-x: unset;
+	}
+}
+
+.dashboard-grid-map {
+	grid-area: tab-content;
+}
+
+@media screen(md) {
+	.dashboard-grid-map {
+		grid-area: map;
+	}
+}
+
+.dashboard-grid-map-big {
+	grid-row-start: tab-options;
+	grid-column-start: tab-options;
+	grid-row-end: tab-content;
+	grid-column-end: tab-options;
+}
+
+@media screen(md) {
+	.dashboard-grid-map-big {
+		grid-row-start: map-options;
+		grid-column-start: map-options;
+		grid-row-end: map;
+		grid-column-end: map;
+	}
+}
+@media screen(lg) {
+	.dashboard-grid-map-big {
+		grid-area: map;
+	}
+}
+
+.dashboard-grid-splits-and-timecharts {
+	grid-row-start: tab-options;
+	grid-column-start: tab-options;
+	grid-row-end: tab-content;
+	grid-column-end: tab-options;
+}
+
+@media screen(md) {
+	.dashboard-grid-splits-and-timecharts {
+		grid-row-start: map-options;
+		grid-column-start: map-options;
+		grid-row-end: map;
+		grid-column-end: map;
+	}
+}
+@media screen(lg) {
+	.dashboard-grid-splits-and-timecharts {
+		grid-area: splits-and-timecharts;
+	}
+}
+
+.dashboard-grid-timeline {
+	grid-area: timeline;
+}
+
+.dashboard-grid-tabs {
+	grid-area: tabs;
+	position: relative;
+	margin-top: 0;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+}
+
+@media screen(md) {
+	.dashboard-grid-tabs {
+		margin-top: -0.25rem;
+		top: 0.25rem;
+		left: -0.25rem;
+		right: -0.25rem;
+		width: calc(100% + 0.5rem);
+	}
+}

src/style/fancy-button.css

@@ -0,0 +1,76 @@
+/* modified from https://css-tricks.com/different-ways-to-get-css-gradient-shadows/ */
+
+@property --fancy-button-shadow-rotation {
+	syntax: '<angle>';
+	initial-value: 0deg;
+	inherits: true;
+}
+
+@keyframes fancy-button-rotate-shadow {
+	from {
+		--fancy-button-shadow-rotation: 0deg;
+	}
+	to {
+		--fancy-button-shadow-rotation: 360deg;
+	}
+}
+
+.fancy-button {
+	--radius: 5rem;
+	--r-top: var(--radius);
+	--r-right: var(--radius);
+	--r-bottom: var(--radius);
+	--r-left: var(--radius);
+
+	--border-width: 2px;
+
+	--fancy-button-shadow-rotation: 0deg;
+	border: var(--border-width) solid white;
+	border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
+	position: relative;
+	transform: translate(0);
+	transform-style: preserve-3d;
+}
+.fancy-button-shadow {
+	--overflow: 150px;
+	position: absolute;
+	pointer-events: none;
+	inset: calc(-1 * (var(--overflow) + var(--border-width)));
+	border: var(--overflow) solid #0000;
+	border-radius: calc(var(--overflow) + var(--r-top)) calc(var(--overflow) + var(--r-right))
+		calc(var(--overflow) + var(--r-bottom)) calc(var(--overflow) + var(--r-left));
+	transform: translateZ(-1px);
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask-composite: exclude;
+
+	mix-blend-mode: screen;
+	opacity: 0.25;
+	transition: opacity 1s ease-in-out;
+}
+.fancy-button .fancy-button-shadow,
+.fancy-button:focus-visible .fancy-button-shadow {
+	opacity: 0.5;
+	transition: opacity 0.5s ease-in-out;
+}
+.fancy-button:not(.fancy-button-loading) {
+	animation: fancy-button-rotate-shadow 10s linear infinite;
+}
+.fancy-button-shadow:before {
+	content: '';
+	position: absolute;
+	inset: -5px;
+	transform: translate(0, 0);
+	background: conic-gradient(in oklab from var(--fancy-button-shadow-rotation), #8b0000, #d4af37, #2e4f4f, #8b0000);
+	filter: blur(10px);
+	border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
+	transition: filter 0.2s ease-in-out;
+}
+
+.fancy-button:hover .fancy-button-shadow:before,
+.fancy-button:focus-visible .fancy-button-shadow:before {
+	animation-play-state: paused;
+	filter: blur(20px);
+}

src/style/main.css

@@ -0,0 +1,83 @@
+:root {
+	--main-nav-height: max(env(titlebar-area-height, 56px), 40px);
+	--footer-height: 113px;
+}
+
+.main-nav {
+	width: env(titlebar-area-width, 100%);
+	height: var(--main-nav-height);
+}
+.main-nav-inner {
+	position: fixed;
+	top: calc(-10rem + env(titlebar-area-y, 0rem));
+	width: 100%;
+	height: calc(var(--main-nav-height) + 10rem);
+	padding: 0.5rem;
+	padding-left: calc(0.5rem + env(titlebar-area-x, 0rem));
+	padding-right: calc(0.5rem + 100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0rem));
+	padding-top: 10.5rem;
+}
+
+.hash-link {
+	text-decoration: none;
+}
+
+.hash-link::before {
+	content: '#';
+	transition: color 0.2s ease-in-out;
+}
+
+:root {
+	--scroll-margin-top: calc(0.5rem + var(--main-nav-height, 0rem));
+}
+
+.hide-hash-links .hash-link {
+	display: none;
+}
+
+.area-name-shadow {
+	filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 0.2px rgba(255, 255, 255, 1))
+		drop-shadow(0px 0px 2px rgba(255, 255, 255, 1));
+}
+
+.dark .area-name-shadow {
+	filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 0.2px rgba(0, 0, 0, 1))
+		drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
+}
+
+.h-unset-important {
+	/* used to overwrite resizable height inside flex layout */
+	height: unset !important;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion) {
+	html {
+		scroll-behavior: auto;
+	}
+}
+
+.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);
+}
+ */