add custom tailwind colors and searchbox

ulf-frostypaw · Feb 27, 2023 · cc1d50e · cc1d50e
1 parent d6827ea
commit cc1d50e
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 31 deletions.
diff --git a/website/components/TheBaseNavbar.vue b/website/components/TheBaseNavbar.vue
@@ -1,57 +1,81 @@
 <script setup lang="ts">
 const isScrolled = ref(false)
+const navLeftRef = ref<DefNullable<HTMLElement>>()
+const searchValue = ref("")
+const searchWrapperRef = ref<DefNullable<HTMLDivElement>>()
+const isSuggestionsFocused = ref(false)
 
-function handleScroll() {
+const handleScroll = () => {
 	isScrolled.value = window.scrollY < 10 ? false : true
 }
 
 onBeforeMount(() => window.addEventListener("scroll", handleScroll))
 onMounted(() => window.addEventListener("scroll", handleScroll))
 onUnmounted(() => window.removeEventListener("scroll", handleScroll))
+
+onMounted(() => {
+	window.onmousedown = ({ target: targetedElement }) => {
+		const containerSiblings = searchWrapperRef.value?.nextSibling
+
+		containerSiblings?.childNodes.forEach((childElements) => {
+			if (
+				targetedElement === searchWrapperRef.value ||
+				targetedElement === containerSiblings ||
+				targetedElement === childElements
+			) {
+				isSuggestionsFocused.value = true
+			} else {
+				isSuggestionsFocused.value = false
+			}
+		})
+	}
+})
 </script>
 
 <template>
 	<header :class="['navbar-sticky', isScrolled ? 'scrolled' : '']">
 		<nav class="flex items-center justify-between px-8 py-4">
-			<div class="flex items-center left-side">
-				<NuxtLink to="/" class="logo">
-					<div
-						role="img"
-						aria-label="MyFursona"
-						class="flex items-center gap-x-2.5"
-					>
+			<div ref="navLeftRef" class="left-side">
+				<NuxtLink to="/" class="logo" title="MyFursona Home" role="img">
+					<div aria-label="MyFursona" class="flex items-center gap-x-2.5">
 						<IconMono class="w-[3.25rem] h-[3.25rem] text-white" />
 						<span>MyFursona</span>
 					</div>
 				</NuxtLink>
 				<span
-					class="px-1.5 py-1 ml-2 text-xs font-semibold bg-red-500 rounded-sm font-inter select-none"
+					class="px-1.5 py-1 ml-2 text-xs font-semibold bg-red-400 rounded-sm font-inter select-none"
 					>ALPHA</span
 				>
+				<div class="search-input" :data-focused="isSuggestionsFocused">
+					<input
+						ref="searchWrapperRef"
+						type="search"
+						aria-label="Search"
+						placeholder="Search"
+						title="Search"
+						autocorrect="off"
+						spellcheck="false"
+						v-model="searchValue"
+					/>
+					<div class="search-suggestions" :aria-hidden="!isSuggestionsFocused">
+						<span v-if="searchValue !== ''">
+							Search results for <strong>{{ searchValue }}</strong>
+						</span>
+						<span v-else>Start typing</span>
+					</div>
+				</div>
 			</div>
 			<ul class="actions">
-        <button>
-        </button>
-				<li>
-					<NuxtLink to="/upload">Upload</NuxtLink>
-				</li>
-				<li>
-					<NuxtLink to="/about">About</NuxtLink>
-				</li>
+				<button class="hidden"></button>
 				<li class="font-inter">
-					<NuxtLink
-						to="/login"
-						class="px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-base-200 border font-bold"
-					>
-						Sign In
-					</NuxtLink>
+					<NuxtLink to="/login" class="login-btn">Sign In</NuxtLink>
 				</li>
 			</ul>
 		</nav>
 	</header>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .navbar-sticky {
 	@apply fixed top-0 left-0 right-0 z-[9999] border-0 border-b border-transparent;
 	transition-property: backdrop-filter, background, border;
@@ -74,4 +98,28 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 .logo {
 	@apply text-3xl font-bold text-white select-none font-inter;
 }
+
+.search-input {
+	@apply ml-5 w-[18.5vw] relative text-sm;
+
+	input {
+		@apply relative z-[1] px-4 py-2.5 rounded-md bg-opacity-75 bg-base-800 focus:outline-base-600 w-full transition-colors;
+	}
+
+	&[data-focused="true"] input {
+		@apply bg-opacity-100;
+	}
+}
+
+.search-suggestions {
+	@apply absolute -left-2 -right-2 -top-2 py-3 pt-14 px-4 bg-base-600 transition-all pointer-events-none opacity-0 rounded-md;
+
+	&[aria-hidden="false"] {
+		@apply opacity-100 pointer-events-auto;
+	}
+}
+
+.login-btn {
+	@apply px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-base-200 border font-bold transition-colors;
+}
 </style>
diff --git a/website/layouts/default.vue b/website/layouts/default.vue
@@ -1,7 +1,5 @@
 <template>
-	<div>
-		<TheBaseNavbar />
-		<slot />
-		<TheBaseFooter />
-	</div>
+	<TheBaseNavbar />
+	<slot />
+	<TheBaseFooter />
 </template>
diff --git a/website/nuxt.config.ts b/website/nuxt.config.ts
@@ -31,9 +31,12 @@ export default defineNuxtConfig({
 				{
 					rel: "manifest",
 					href: "./manifest.json",
-					crossorigin: "use-credentials",
 				},
 			],
+			meta: [
+				{ "http-equiv": "X-UA-Compatible", content: "IE=edge" },
+				{ property: "og:site:name", content: "MyFursona" },
+			],
 		},
 	},
 	build: {

diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
 		"./app.vue",
 	],
 	plugins: [
+		require("@tailwindcss/typography"),
 		pluginBaseStyles(({ addBase, theme }) => {
 			addBase({
 				html: {
@@ -37,7 +38,7 @@ module.exports = {
 				"open-sans": ["Open Sans", ...defaultTheme.fontFamily.sans],
 			},
 			colors: {
-				"base": {
+				base: {
 					DEFAULT: "#634E97",
 					50: "#FCFBFD",
 					100: "#EBE7F3",
@@ -50,6 +51,58 @@ module.exports = {
 					800: "#201A32",
 					900: "#0B0911",
 				},
+				red: {
+					DEFAULT: "#E94E4E",
+					50: "#FFFDFD",
+					100: "#FCE4E4",
+					200: "#F5B2B2",
+					300: "#EF8080",
+					400: "#E94E4E",
+					500: "#E42121",
+					600: "#BA1718",
+					700: "#8D1113",
+					800: "#5F0C0D",
+					900: "#320607",
+				},
+				orange: {
+					DEFAULT: "#E5740B",
+					50: "#FCE2C9",
+					100: "#FBD2AC",
+					200: "#F8B272",
+					300: "#F69337",
+					400: "#E5740B",
+					500: "#BE6109",
+					600: "#974E07",
+					700: "#703A05",
+					800: "#492603",
+					900: "#221202",
+				},
+				lime: {
+					DEFAULT: "#E0BC0B",
+					50: "#FCF2C5",
+					100: "#FBEBA7",
+					200: "#F8DF6D",
+					300: "#F5D432",
+					400: "#E0BC0B",
+					500: "#B99D09",
+					600: "#927D07",
+					700: "#6B5C05",
+					800: "#443B03",
+					900: "#1D1A01",
+				},
+				pink: {
+					DEFAULT: "#E36DA6",
+					50: "#FAE5F0",
+					100: "#F7D4E6",
+					200: "#F0B2D2",
+					300: "#EA90BC",
+					400: "#E36DA6",
+					500: "#DA3E88",
+					600: "#BC246A",
+					700: "#8D1B4E",
+					800: "#5E1233",
+					900: "#2F0919",
+				},
 			},
 		},
 	},

diff --git a/website/types/index.ts b/website/types/index.ts
@@ -0,0 +1 @@
+type DefNullable<T = HTMLElement> = T | null