New splash (#798)

* start on new splash * tweak spacing * add framework links * add grid and cta * pull out code sample and block into separate components * responsive * add logo and links * mention jsdocs * better disabled state * add discord link * add logos * new favicon * grammar * dynamic processing url * blue-ify docs template * remove og:image
HoudiniGraphql · Dec 29, 2022 · aeff948 · aeff948 · vercel · Dec 29, 2022
1 parent 7bef76e
commit aeff948
Show file tree

Hide file tree

Showing 23 changed files with 866 additions and 505 deletions.
diff --git a/site/src/app.html b/site/src/app.html
@@ -3,7 +3,16 @@
 	<head>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover" />
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link
+			rel="icon"
+			href="%sveltekit.assets%/images/logo.png"
+			media="(prefers-color-scheme: dark)"
+		/>
+		<link
+			rel="icon"
+			href="%sveltekit.assets%/images/logo-dark.png"
+			media="(prefers-color-scheme: light)"
+		/>
 		<link rel="stylesheet" href="%sveltekit.assets%/styles/reset.css" />
 		<link rel="stylesheet" href="%sveltekit.assets%/styles/code.css" />
 		<link rel="stylesheet" href="%sveltekit.assets%/styles/md.css" />
@@ -14,7 +23,7 @@
 			rel="stylesheet"
 		/>
 		<link
-			href="https://fonts.googleapis.com/css2?family=Crete+Round&family=Hind:wght@300;400;500;700&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Crete+Round&family=Fira+Sans:wght@400&family=Hind:wght@300;400;500;700&display=swap"
 			rel="stylesheet"
 		/>
 		%sveltekit.head%

diff --git a/site/src/components/SEO.svelte b/site/src/components/SEO.svelte
@@ -11,9 +11,7 @@
 	<meta property="og:url" content={url} />
 	<meta property="og:title" content={title} />
 	<meta property="og:description" content={description} />
-	<meta property="og:image" content="https://www.houdinigraphql.com/images/houdini-v5.png" />
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="twitter:title" content={title} />
 	<meta name="twitter:description" content={description} />
-	<meta name="twitter:image" content="https://www.houdinigraphql.com/images/houdini-v5.png" />
 </svelte:head>
diff --git a/site/src/components/ThemeSwitcher.svelte b/site/src/components/ThemeSwitcher.svelte
@@ -43,11 +43,11 @@
 		<!-- dark mode -->
 		<style>
 			:root {
-				--hue: #161b22;
+				--hue: #191c26;
 				--contrast: #f9fbff;
-				--discreet: #303a48;
-				--discreet2: #475465;
-				--scrollbar-slider: #101318;
+				--discreet: #232938;
+				--discreet2: #323b53;
+				--scrollbar-slider: rgba(20, 21, 25, 1);
 				--scrollbar-track: #272e38;
 				--saturated: #ff3e00;
 				--deep-dive: #17346d;
@@ -61,6 +61,11 @@
 			}
 		</style>
 	{/if}
+	<style>
+		body {
+			background: var(--hue);
+		}
+	</style>
 </svelte:head>
 
 <div class="theme-switcher">

diff --git a/site/src/layouts/_page.svelte b/site/src/layouts/_page.svelte
@@ -17,6 +17,8 @@
 		? parseInt(document.cookie.match('(^|;)\\s*' + 'ui_theme' + '\\s*=\\s*([^;]+)')?.pop() || '0')
 		: data?.ui_theme
 
+	$: logo_src = ui_theme === 0 ? '/images/logo.svg' : '/images/logo-dark.svg'
+
 	// the list of files we can render
 	// @ts-ignore
 	const categories = REPLACE_WITH_OUTLINE
@@ -122,7 +124,10 @@
 						<Icon name="menu" width="20px" />
 					{/if}
 				</buton>
-				<a href="/">Houdini</a>
+				<a href="/">
+					<img class="logo" src={logo_src} style="margin-top: -4px" />
+					<span class="logo-text">Houdini</span></a
+				>
 				<SearchInput id="nav-search-input" />
 				<ThemeSwitcher bind:ui_theme />
 			</h1>
@@ -466,6 +471,10 @@
 		width: 80%;
 	}
 
+	.logo {
+		margin-bottom: -4px;
+	}
+
 	@media (max-width: 1000px) {
 		article,
 		footer {
@@ -548,6 +557,10 @@
 		:global(#nav-search-input) {
 			display: flex;
 		}
+
+		.logo-text {
+			display: none;
+		}
 	}
 
 	@media (max-width: 450px) {