pain

ulf-frostypaw · Jan 21, 2023 · b4bc827 · b4bc827
1 parent 9b923dc
commit b4bc827
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 82 deletions.
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -1,3 +1,5 @@
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/components/Container.vue b/components/Container.vue
@@ -4,7 +4,7 @@ const urlPath = `https://www.myfursona.art${route.fullPath}`
 
 const props = defineProps<{
   title: string
-  description: string
+  description?: string
   className?: string
   nowrap?: boolean
 }>()

diff --git a/components/Navbar/NavbarButton.vue b/components/Navbar/NavbarButton.vue
@@ -3,7 +3,7 @@ const props = defineProps<{ onClick?: () => void }>()
 </script>
 
 <template>
-	<button @click="props.onClick" class="border-2 px-3.5 py-2">
+	<button @click="props.onClick" class="p-2.5">
 		<slot />
 	</button>
 </template>
diff --git a/components/Navbar/NavbarSearchBox.vue b/components/Navbar/NavbarSearchBox.vue
@@ -1,51 +1,63 @@
 <script lang="ts" setup>
 import { ref } from "vue"
-const root = ref<HTMLDivElement | null>(null);
+const root = ref<HTMLDivElement | null>(null)
+const inputVal = ref("")
 
 const focusInput = () => {
-	root.value?.classList.toggle("toggled")
+  root.value?.classList.toggle("toggled")
+}
+
+const clearInput = () => {
+  //   console.log(root.value)
+  inputVal.value = ""
 }
 </script>
 
 <template>
-	<div ref="root" class="search-box-container">
-		<input type="text" @focus="focusInput" @focusout="focusInput" class="px-5 py-3 w-full focus:outline-none"
-			placeholder="Search fursonas" />
-		<div class="flex items-center gap-x-3 pr-4 absolute top-0 right-0 bottom-0">
-			<button class="clear-btn">
-				<i class="fa-solid fa-times fa-lg fa-fw"></i>
-			</button>
-			<button class="search-btn">
-				<i class="fa-solid fa-magnifying-glass fa-fw"></i>
-			</button>
-		</div>
-	</div>
+  <div ref="root" class="search-box-container">
+    <input
+      type="text"
+      :value="inputVal"
+      @focus="focusInput"
+      placeholder="Search"
+    />
+    <div class="absolute top-0 bottom-0 right-0 flex items-center pr-4 gap-x-3">
+      <button class="clear-btn" @click="clearInput">
+        <i class="fa-solid fa-times fa-lg fa-fw"></i>
+      </button>
+      <button class="search-btn">
+        <i class="fa-solid fa-magnifying-glass fa-fw"></i>
+      </button>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
 .search-box-container {
-	@apply relative flex items-center gap-x-3 border-2 rounded-md transition-all duration-300 w-[20%];
+  @apply relative flex items-center gap-x-3 overflow-hidden rounded-md transition-all duration-300 w-[18rem];
 
-	input {
-		@apply cursor-pointer;
-	}
+  input[type="text"] {
+    @apply cursor-pointer bg-slate-200 w-full px-4 py-2 focus:outline-none;
 
-	.clear-btn {
-		@apply pointer-events-none opacity-0;
-	}
+    &::placeholder {
+      @apply text-slate-800;
+    }
 
-	&.toggled {
-		.clear-btn {
-			@apply pointer-events-auto opacity-100;
-		}
+    &:focus-within {
+      @apply cursor-text;
 
-		input {
-			@apply cursor-text;
-		}
-	}
-}
+      .clear-btn {
+        @apply pointer-events-auto opacity-100;
+      }
+
+      input {
+        @apply cursor-text;
+      }
+    }
+  }
 
-.toggled {
-	@apply w-[25%] border-red-200 cursor-text;
+  .clear-btn {
+    @apply pointer-events-none opacity-0;
+  }
 }
 </style>
diff --git a/components/Navbar/UserLoggedIn.vue b/components/Navbar/UserLoggedIn.vue
@@ -1,21 +1,24 @@
-<script setup>
-</script>
+<script setup></script>
 
 <template>
-	<div class="flex gap-x-3 items-center">
-		<NavbarButton class="aspect-square rounded-full">
-			<span class="sr-only">Options</span>
-			<i class="fas fa-ellipsis-vertical fa-fw fa-lg"></i>
-		</NavbarButton>
-		<NavbarButton class="aspect-square rounded-full">
-			<span class="sr-only">Notifications</span>
-			<i class="far fa-bell fa-fw fa-lg"></i>
-		</NavbarButton>
-		<button aria-label="Profile"
-			class="aspect-square rounded-full border w-14 h-14 overflow-hidden grid place-items-center">
-			<span class="sr-only">Profile</span>
-			<img src="https://res.cloudinary.com/skepfusky-dookie/image/upload/q_75/projects/ozzychill/ozzyuwu.png"
-				alt="Profile">
-		</button>
-	</div>
-</template>
+  <div class="flex items-center gap-x-3">
+    <NavbarButton class="aspect-square">
+      <span class="sr-only">Options</span>
+      <i class="fas fa-ellipsis-vertical fa-fw fa-lg"></i>
+    </NavbarButton>
+    <NavbarButton class="aspect-square">
+      <span class="sr-only">Notifications</span>
+      <i class="far fa-bell fa-fw fa-lg"></i>
+    </NavbarButton>
+    <button
+      aria-label="Profile"
+      class="grid w-12 h-12 overflow-hidden border rounded-full aspect-square place-items-center"
+    >
+      <span class="sr-only">Profile</span>
+      <img
+        src="https://res.cloudinary.com/skepfusky-dookie/image/upload/q_75/projects/misc/ozzy-fp-banner.png"
+        alt="Profile"
+      />
+    </button>
+  </div>
+</template>
diff --git a/components/TheBaseNavbar.vue b/components/TheBaseNavbar.vue
@@ -1,18 +1,20 @@
 <script setup></script>
 
 <template>
-	<header>
-		<div class="flex items-center justify-between px-12 py-6">
-			<NuxtLink to="/" class="logo-wordmark">MyFursona</NuxtLink>
-			<NavbarSearchBox />
-			<UserLoggedIn />
-		</div>
-	</header>
+  <header>
+    <div class="flex items-center justify-between px-12 py-6">
+      <div class="flex items-center gap-x-6">
+        <NuxtLink to="/" class="logo-wordmark">MyFursona</NuxtLink>
+        <NavbarSearchBox />
+      </div>
+      <NavbarUserLoggedIn />
+    </div>
+  </header>
 </template>
 
 <style lang="scss">
 .logo-wordmark {
-	@apply text-3xl font-bold font-inter select-none
+  @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>
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -9,7 +9,20 @@ export default defineNuxtConfig({
       },
     ],
   ],
-  css: ["~/assets/css/main.scss"],
+  css: [
+    "@fontsource/inter/400.css",
+    "@fontsource/inter/600.css",
+    "@fontsource/inter/700.css",
+    "@fontsource/inter/800.css",
+    "@fontsource/inter/900.css",
+    "@fontsource/open-sans/400.css",
+    "@fontsource/open-sans/400-italic.css",
+    "@fontsource/open-sans/600.css",
+    "@fontsource/open-sans/600-italic.css",
+    "@fontsource/open-sans/800.css",
+    "@fontsource/open-sans/800-italic.css",
+    "~/assets/css/main.scss",
+  ],
   postcss: {
     plugins: {
       tailwindcss: {},
@@ -23,18 +36,6 @@ export default defineNuxtConfig({
   app: {
     head: {
       link: [
-        {
-          rel: "preconnect",
-          href: "https://fonts.googleapis.com",
-        },
-        {
-          rel: "preconnect",
-          href: "https://fonts.gstatic.com",
-        },
-        {
-          rel: "stylesheet",
-          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",

diff --git a/stores/index.ts b/stores/index.ts
@@ -1,17 +1,19 @@
 import { defineStore } from "pinia"
 
 interface UserSettingsStore {
-	theme: "light" | "dark" | "system"
-	colorProfile: string
-	nsfwEnabled: boolean
+  theme: "light" | "dark" | "system"
+  colorProfile: string
+  nsfwEnabled: boolean
+  status: string
 }
 
 export const useUserSettingsStore = defineStore("settings", () => {
   state: (): UserSettingsStore => {
     return {
       theme: "system",
       colorProfile: "#fff",
-			nsfwEnabled: true,
+      nsfwEnabled: false,
+      status: "",
     }
   }
 })
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,4 @@
 /** @type {import('tailwindcss').Config} */
-const defaultTheme = require("tailwindcss/defaultTheme");
 const pluginBaseStyles = require("tailwindcss/plugin");
 
 module.exports = {
@@ -30,8 +29,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        inter: ["Inter", ...defaultTheme.fontFamily.sans],
-        "open-sans": ["Open Sans", ...defaultTheme.fontFamily.sans],
+        inter: ["Inter"],
+        "open-sans": ["Open Sans"],
       },
     },
   },