Navbar partially done

assets/css/main.scss

@@ -1,3 +1,9 @@
+@layer base  {
+	body {
+		@apply font-open-sans;
+	}
+}
+
 @tailwind base;
 @tailwind components;
-@tailwind utitlies;
+@tailwind utilities;

components/Button.vue

@@ -3,7 +3,7 @@ const props = defineProps<{ onClick?: () => void }>()
 </script>
 
 <template>
-	<button :on-click="props.onClick" class="border border-2 px-3.5 py-2">
+	<button :on-click="props.onClick" class="border-2 px-3.5 py-2 rounded-full">
 		<slot />
 	</button>
 </template>

components/Container.vue

@@ -3,40 +3,40 @@ const route = useRoute();
 const urlPath = `https://www.myfursona.art${route.fullPath}`;
 
 const props = defineProps<{
-  title: string;
-  description: string;
-  class?: string;
-  nowrap?: boolean;
+	title: string;
+	description: string;
+	class?: string;
+	nowrap?: boolean;
 }>();
 
 const detectWrap = !props.nowrap ? "wrap-contents" : "";
 const detectClass = !props.class ? detectWrap : `${detectWrap} ${props.class}`;
 
 useHead({
-  title: props.title,
-  meta: [
-    { name: "description", content: props.description },
-    { property: "og:title", content: props.title },
-    { property: "og:description", content: props.description },
-    { property: "og:type", content: "website" },
-    { property: "og:url", content: urlPath },
-    { name: "twitter:title", content: props.title },
-    { name: "twitter:description", content: props.description },
-    { name: "twitter:card", content: "summary_large_image" },
-    { name: "twitter:url", content: urlPath },
-  ],
-  link: [{ rel: "canonical", href: urlPath }],
+	title: props.title,
+	meta: [
+		{ name: "description", content: props.description },
+		{ property: "og:title", content: props.title },
+		{ property: "og:description", content: props.description },
+		{ property: "og:type", content: "website" },
+		{ property: "og:url", content: urlPath },
+		{ name: "twitter:title", content: props.title },
+		{ name: "twitter:description", content: props.description },
+		{ name: "twitter:card", content: "summary_large_image" },
+		{ name: "twitter:url", content: urlPath },
+	],
+	link: [{ rel: "canonical", href: urlPath }],
 });
 </script>
 
 <template>
-  <main id="page-container" :class="detectClass">
-    <slot />
-  </main>
+	<main id="page-container" :class="detectClass">
+		<slot />
+	</main>
 </template>
 
 <style>
 .wrap-contents {
-  @apply mx-auto max-w-screen-2xl px-6;
+	@apply mx-auto max-w-screen-2xl px-6;
 }
 </style>

components/NavbarSearchBox.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const root = ref<HTMLDivElement | null>(null);
+
+function test() {
+	console.log("focused")
+}
+
+onMounted(() => {
+	console.log(root.value?.outerHTML)
+})
+</script>
+
+<template>
+	<div ref="root" class="flex items-center gap-x-3 border-2 rounded-md">
+		<input :onfocus="test" class="px-4 py-2" type="text" placeholder="Search fursonas" />
+		<div>
+			<i class="fa-solid fa-times fa-lg fa-fw"></i>
+			<i class="fa-solid fa-magnifying-glass fa-fw"></i>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+
+</style>

components/TheBaseNavbar.vue

@@ -1,13 +1,18 @@
 <script setup></script>
 
 <template>
-  <header>
-    <nav>
-      <NuxtLink to="/">MyFursona</NuxtLink>
-      <SearchComponent />
-      <UserLoggedIn />
-    </nav>
-  </header>
+	<header>
+		<div class="flex items-center justify-between px-12 py-6">
+			<NuxtLink to="/" class="logo-wordmark">MyFursona</NuxtLink>
+			<NavbarSearchBox />
+			<UserLoggedIn />
+		</div>
+	</header>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.logo-wordmark {
+	@apply text-3xl font-bold font-inter select-none
+	bg-gradient-to-br from-orange-400 via-purple-500 to-pink-400 bg-clip-text text-transparent;
+}
+</style>

components/UserLoggedIn.vue

@@ -2,7 +2,15 @@
 </script>
 
 <template>
-	<div>
-
+	<div class="flex gap-x-3 items-center">
+		<Button class="aspect-square rounded-full">
+			<i class="fas fa-ellipsis-vertical fa-fw fa-lg"></i>
+		</Button>
+		<Button class="aspect-square rounded-full">
+			<i class="far fa-bell fa-fw fa-lg"></i>
+		</Button>
+		<button aria-label="Profile" class="aspect-square rounded-full border w-14 h-14 overflow-hidden grid place-items-center">
+			<img src="https://res.cloudinary.com/skepfusky-dookie/image/upload/q_75/projects/ozzychill/ozzyuwu.png" alt="Profile">
+		</button>
 	</div>
 </template>

nuxt.config.ts

@@ -13,18 +13,16 @@ export default defineNuxtConfig({
         },
         {
           rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap",
+          href: "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap",
         },
         {
           rel: "stylesheet",
           href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",
-          integrity:
-            "sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==",
         },
       ],
     },
   },
-  css: ['~/assets/css/main.scss'],
+  css: ["~/assets/css/main.scss"],
   postcss: {
     plugins: {
       tailwindcss: {},

pages/index.vue

@@ -1,15 +1,21 @@
 <script setup></script>
 
 <template>
-  <div>
-    <div>
-      <h1>Manage, store, and show your fursonas in one place</h1>
-      <p>
-        MyFursona is an open-source platform where you can show off your fluffy
-        characters and show them off to your friends!
-      </p>
-    </div>
-  </div>
+	<Container title="Home">
+		<div id="hero">
+			<article>
+				<h1>MyFursona</h1>
+				<p>
+					MyFursona is an open-source platform where you can show off your fluffy
+					characters and show them off to your friends!
+
+					Manage, store, and show your fursonas in one place
+				</p>
+			</article>
+		</div>
+	</Container>
 </template>
 
-<style lang=""></style>
+<style lang="scss">
+
+</style>