Added Custom Fonts

hunterbryant · Dec 12, 2023 · 0dc8b1f · 0dc8b1f
1 parent 6bf9c65
commit 0dc8b1f
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 9 deletions.
diff --git a/src/app.css b/src/app.css
@@ -2,3 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+	font-family: 'Favorit';
+	src: url('../src/lib/assets/fonts/FavoritStd-Regular.otf');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Favorit';
+	src: url('../src/lib/assets/fonts/FavoritStd-Medium.otf');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Favorit';
+	src: url('../src/lib/assets/fonts/FavoritStd-Bold.otf');
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Garamond';
+	src: url('../src/lib/assets/fonts/EBGaramond-BoldItalic.ttf');
+	font-weight: bold;
+	font-style: italic;
+}
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="h-full w-full bg-white p-0 sm:p-2">
+	<body data-sveltekit-preload-data="hover" class="h-full w-full bg-stone-100">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/ChatBox/ChatBox.svelte b/src/lib/ChatBox/ChatBox.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <div
-	class="flex-col-rev absolute bottom-2 left-2 right-2 flex max-h-[calc(100vh-1rem)] w-[calc(full-4rem)] flex-col flex-nowrap overflow-hidden rounded-3xl bg-white shadow-md sm:left-auto sm:max-h-[calc(100vh-2rem)] sm:w-[calc(27.5rem)]"
+	class="flex-col-rev flex max-h-[calc(100vh-1rem)] w-[calc(full-4rem)] flex-col flex-nowrap overflow-hidden rounded-3xl bg-white shadow-md sm:left-auto sm:max-h-[calc(100vh-2rem)] sm:w-[calc(27.5rem)]"
 >
 	<!-- This initial "message" acts as the header and original kickoff button -->
 	{#if $messages.length == 0 || !minimized}

diff --git a/src/lib/ChatBox/TextInput.svelte b/src/lib/ChatBox/TextInput.svelte
@@ -129,5 +129,5 @@
 			class="h-12 flex-none basis-12 rounded-2xl outline outline-1 outline-slate-200"
 		/>
 	{/if}
-	<hr class="absolute bottom-16 left-4 right-4 bg-slate-200 peer-focus:hidden" />
+	<!-- <hr class="absolute bottom-16 left-4 right-4 bg-slate-200 peer-focus:hidden" /> -->
 </form>
diff --git a/src/lib/assets/fonts/EBGaramond-BoldItalic.ttf b/src/lib/assets/fonts/EBGaramond-BoldItalic.ttf
diff --git a/src/lib/assets/fonts/FavoritStd-Bold.otf b/src/lib/assets/fonts/FavoritStd-Bold.otf
diff --git a/src/lib/assets/fonts/FavoritStd-Medium.otf b/src/lib/assets/fonts/FavoritStd-Medium.otf
diff --git a/src/lib/assets/fonts/FavoritStd-Regular.otf b/src/lib/assets/fonts/FavoritStd-Regular.otf
diff --git a/src/lib/assets/lettermark.svg b/src/lib/assets/lettermark.svg
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,12 +1,17 @@
-<script>
+<script lang="ts">
 	import '../app.css';
-	import studiobg from '$lib/assets/studiobg.webp';
 	import ChatBox from '$lib/ChatBox/ChatBox.svelte';
+	import lettermark from '$lib/assets/lettermark.svg';
 </script>
 
-<div
-	class="relative h-full overflow-hidden rounded-none bg-slate-300 bg-[url('lib/assets/studiobg.webp')] bg-cover bg-center bg-no-repeat shadow-inner sm:rounded-[2rem]"
->
+<div class="grid grid-cols-5 gap-4 px-2 sm:grid-cols-9 sm:px-16">
+	<div class="col-span-3">
+		<img src={lettermark} alt="Hunters lettermark logo" class="mt-16" />
+		<div class="inline-flex w-full justify-between gap-4">
+			<h3>How?</h3>
+			<button class="h-12 rounded bg-blue-600 px-3 text-stone-50">Ask HuntBot</button>
+		</div>
+		<!-- <ChatBox /> -->
+	</div>
 	<slot />
-	<ChatBox />
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,14 @@
 /** @type {import('tailwindcss').Config} */
+import defaultTheme from 'tailwindcss/defaultTheme';
+
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
+		fontFamily: {
+			sans: ['Favorit', ...defaultTheme.fontFamily.sans],
+			serif: ['Garamond', ...defaultTheme.fontFamily.serif],
+			mono: [...defaultTheme.fontFamily.mono]
+		},
 		extend: {}
 	},
 	plugins: []