Fix: Design & Misc (#68)

Co-authored-by: Antoine Lethimonnier <[email protected]>
EmeraldHQ · Aug 11, 2023 · 5b5446f · 5b5446f
1 parent 07dc675
commit 5b5446f
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 36 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+	"css.customData": [".vscode/tailwind.json"],
+	"tailwindCSS.classAttributes": [
+		"class",
+		"enter",
+		"enterFrom",
+		"enterTo",
+		"leave",
+		"leaveFrom",
+		"leaveTo"
+	]
+}
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
@@ -0,0 +1,55 @@
+{
+	"version": 1.1,
+	"atDirectives": [
+		{
+			"name": "@tailwind",
+			"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+				}
+			]
+		},
+		{
+			"name": "@apply",
+			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+				}
+			]
+		},
+		{
+			"name": "@responsive",
+			"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+				}
+			]
+		},
+		{
+			"name": "@screen",
+			"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+				}
+			]
+		},
+		{
+			"name": "@variants",
+			"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+				}
+			]
+		}
+	]
+}
diff --git a/src/app.css b/src/app.css
@@ -2,3 +2,18 @@
 @import "./chillax.css";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+@layer base {
+	::selection {
+		@apply bg-dominant/75 text-primary;
+	}
+
+	body {
+		@apply bg-primary text-primary;
+	}
+
+	:root {
+		/* To color scrollbars, form controls and other system colors  */
+		color-scheme: dark;
+	}
+}
diff --git a/src/app.html b/src/app.html
@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
+		<meta name="color-scheme" content="dark" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/lib/elements/Button.svelte b/src/lib/elements/Button.svelte
@@ -6,7 +6,9 @@
 	 */
 	export let type: "primary" | "secondary" | "minimal" = "primary";
 
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher<{
+		click: null;
+	}>();
 </script>
 
 {#if type === "primary"}

diff --git a/src/lib/elements/RadioButtonsGroup.svelte b/src/lib/elements/RadioButtonsGroup.svelte
@@ -21,7 +21,10 @@
 	 */
 	export let description: string;
 
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher<{
+		change: { index: number };
+		hover: { index: number };
+	}>();
 </script>
 
 <div

diff --git a/src/lib/shells/MagneticElement.svelte b/src/lib/shells/MagneticElement.svelte
@@ -5,7 +5,10 @@
 
 	// Constants
 	const elementId = `svelte-magnetic-element-${useId()}`;
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher<{
+		in_zone: { element: HTMLElement };
+		out_zone: { element: HTMLElement };
+	}>();
 
 	// Configuration
 	/**

diff --git a/src/lib/shells/SlideOver.svelte b/src/lib/shells/SlideOver.svelte
@@ -40,10 +40,10 @@
 			<div class="absolute inset-0 overflow-hidden">
 				<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full sm:pl-10">
 					<TransitionChild
-						enter="transform transition ease-in-out duration-500 sm:duration-700"
+						enter="ease-in-out duration-500 sm:duration-700"
 						enterFrom="translate-x-full"
 						enterTo="translate-x-0"
-						leave="transform transition ease-in-out duration-500 sm:duration-700"
+						leave="ease-in-out duration-500 sm:duration-700"
 						leaveFrom="translate-x-0"
 						leaveTo="translate-x-full"
 					>

diff --git a/src/locales/en/errors.json b/src/locales/en/errors.json
@@ -0,0 +1,4 @@
+{
+	"error": "Error",
+	"go-home": "Go back to a safe place"
+}
diff --git a/src/locales/fr/errors.json b/src/locales/fr/errors.json
@@ -0,0 +1,4 @@
+{
+	"error": "Erreur",
+	"go-home": "Retourner en lieu sûr"
+}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -5,10 +5,11 @@
 	import Mouse3DTilting from "$shells/Mouse3DTilting.svelte";
 	import { CodeBracket, Sparkles } from "@inqling/svelte-icons/heroicon-24-solid";
 	import { ExclamationCircle, XMark } from "@inqling/svelte-icons/heroicon-24-outline";
+	import { i } from "@inlang/sdk-js";
 </script>
 
 <svelte:head>
-	<title>Error {$page.status} | Emerald Studio</title>
+	<title>{i("errors.error")} {$page.status} | Emerald Studio</title>
 </svelte:head>
 
 <div
@@ -72,6 +73,6 @@
 			goto("/", { replaceState: true });
 		}}
 	>
-		Go back to a safe place
+		{i("errors.go-home")}
 	</Button>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -127,11 +127,14 @@
 			</div>
 			<div class="flex items-center gap-5 sm:gap-10">
 				<div
-					class="nav-items-container hidden items-center gap-10 duration-700 ease-out lg:flex"
+					class="hidden items-center gap-10 duration-700 ease-out lg:flex"
 					class:-mr-40={!showButton}
 				>
 					{#each navbarItems.filter(item => item.href.startsWith("#")) as item}
-						<button on:click={() => scrollTo(item.href)}>
+						<button
+							class="relative after:absolute after:-bottom-1.5 after:left-0 after:h-1 after:w-0 after:bg-dominant after:duration-300 after:content-[''] hover:after:w-full"
+							on:click={() => scrollTo(item.href)}
+						>
 							{item.name}
 						</button>
 					{/each}
@@ -187,10 +190,11 @@
 <SlideOver bind:show={showSlideOver}>
 	<svelte:fragment slot="content">
 		<div
-			class="nav-items-container flex h-full flex-col items-center justify-center gap-20 text-4xl font-medium child:after:!-bottom-3 child:after:!h-2"
+			class="flex h-full flex-col items-center justify-center gap-20 text-4xl font-medium child:after:!-bottom-3 child:after:!h-2"
 		>
 			{#each navbarItems.filter((_item, index) => !(index === navbarItems.length - 1 && innerWidth >= tailwindXsScreen)) as item}
 				<button
+					class="relative after:absolute after:-bottom-1.5 after:left-0 after:h-1 after:w-0 after:bg-dominant after:duration-300 after:content-[''] hover:after:w-full"
 					class:text-dominant={!item.href.startsWith("#")}
 					on:click={() => {
 						showSlideOver = false;
@@ -255,7 +259,7 @@
 		<!-- Middle -->
 		{#if innerWidth >= tailwindXsScreen}
 			<button
-				class="absolute bottom-0 left-0 right-0 text-center"
+				class="absolute bottom-0 left-0 right-0 mx-auto w-fit text-center"
 				on:click={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 				on:keypress={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 			>
@@ -293,25 +297,3 @@
 		</div>
 	</div>
 </footer>
-
-<style lang="postcss">
-	:global(::selection) {
-		@apply bg-dominant/75 text-primary;
-	}
-
-	:global(body) {
-		@apply bg-primary text-primary;
-	}
-
-	.nav-items-container > * {
-		@apply relative;
-	}
-
-	.nav-items-container > *::after {
-		@apply absolute -bottom-1.5 left-0 h-1 w-0 bg-dominant duration-300 content-[""];
-	}
-
-	.nav-items-container > *:hover::after {
-		@apply w-full;
-	}
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -221,12 +221,12 @@
 			setTimeout(() => {
 				element.style.removeProperty("transition-duration");
 			}, 500);
-			element.parentElement.style.transform = "scale(1.2)";
+			if (element.parentElement) element.parentElement.style.transform = "scale(1.2)";
 		}}
 		on:out_zone={e => {
 			const element = e.detail.element;
 			element.style.transitionDuration = "500ms";
-			element.parentElement.style.transform = "scale(1)";
+			if (element.parentElement) element.parentElement.style.transform = "scale(1)";
 		}}
 	>
 		<button
@@ -300,7 +300,7 @@
 			<div class="flex items-end justify-end">
 				<Button type="minimal" class="gap-2 text-end text-lg hover-child:translate-x-1">
 					{solutions.slice(-1)[0]?.description ?? ""}
-					<ChevronRight class="h-4 w-4 transition-transform duration-500" />
+					<ChevronRight class="h-4 w-4 min-w-max transition-transform duration-500" />
 				</Button>
 			</div>
 		</div>