wip

apps/base/assets/css/animations.css

@@ -159,6 +159,24 @@
   }
 }
 
+/* Blur effect */
+.blur-enter-active,
+.blur-leave-active {
+  transition: opacity 0.5s ease, filter 0.5s ease;
+}
+
+.blur-enter-from,
+.blur-leave-to {
+  opacity: 0;
+  filter: blur(10px);
+}
+
+.blur-enter-to,
+.blur-leave-from {
+  opacity: 1;
+  filter: blur(0px);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .slide-enter-active,
   .slide-leave-active,

apps/base/components/Logo.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
-type LogoProps = {
+const { size = 'size-5', text = true } = defineProps<{
   size?: string
   text?: boolean
-}
-
-const { size = 'size-5', text = true } = defineProps<LogoProps>()
+}>()
 </script>
 
 <template>
   <div class="flex items-center gap-2">
     <UIcon name="custom:shelve" :size />
-    <NuxtLink v-if="text" to="/" class="font-semibold" aria-label="Shelve">
+    <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold">
       Shelve
     </NuxtLink>
   </div>
 </template>
-
-<style scoped>
-
-</style>

apps/base/nuxt.config.ts

@@ -35,6 +35,7 @@ export default defineNuxtConfig({
 
   icon: {
     mode: 'svg',
+    class: 'fill-current',
     customCollections: [
       {
         prefix: 'custom',

apps/shelve/app/components/setting/ThemeToggle.vue

@@ -7,6 +7,9 @@ defineProps({
 })
 
 const colorMode = useColorMode()
+const reduceMotion = useCookie<boolean>('reduceMotion', {
+  watch: true,
+})
 
 const switchTheme = () => {
   colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
@@ -15,6 +18,10 @@ const switchTheme = () => {
 
 const startViewTransition = (theme) => {
   if (theme === colorMode.value) return
+  if (reduceMotion.value) {
+    switchTheme()
+    return
+  }
   if (!document.startViewTransition) {
     switchTheme()
     return
@@ -94,5 +101,4 @@ const startViewTransition = (theme) => {
     clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
   }
 }
-
 </style>

apps/shelve/app/pages/login.vue

@@ -7,6 +7,9 @@ definePageMeta({
 })
 
 const route = useRoute()
+const otp = ref(false)
+const focus = ref(false)
+const email = ref('')
 
 if (route.query.error === 'github' || route.query.error === 'google') {
   toast.error(`An error occurred while logging in with ${route.query.error}.`, {
@@ -21,8 +24,8 @@ if (route.query.error === 'github' || route.query.error === 'google') {
 </script>
 
 <template>
-  <div class="flex overflow-hidden h-full w-full flex-col items-center justify-center">
-    <div class="bg-white rounded-full w-40 h-70 blur-[400px] absolute -top-20 select-none" />
+  <div class="flex overflow-hidden size-full flex-col items-center justify-center">
+    <div class="bg-white rounded-full w-50 h-96 blur-[250px] absolute -top-40 select-none" />
     <div class="mx-auto w-full flex flex-col items-center justify-center gap-2 text-center">
       <UIcon name="custom:shelve" class="size-10" />
       <div class="flex flex-col items-center gap-1">
@@ -35,22 +38,27 @@ if (route.query.error === 'github' || route.query.error === 'google') {
       </div>
     </div>
     <div class="relative mt-6">
-      <CrossedDiv line>
-        <div class="px-8 py-6 flex flex-col items-center justify-center gap-4">
+      <CrossedDiv line @mouseover="focus = true" @mouseleave="focus = false">
+        <div
+          class="px-8 py-6 flex flex-col items-center justify-center gap-4 overflow-hidden transition-all delay-200 duration-300 ease-in-out"
+          :style="{
+            height: focus ? '140px' : '120px',
+            width: focus ? '300px' : '250px',
+          }"
+        >
           <a href="/auth/github">
-            <UButton
-              icon="simple-icons:github"
-              label="Sign in with GitHub"
-              color="neutral"
-            />
+            <UButton icon="simple-icons:github" label="Sign in with GitHub" color="neutral" />
           </a>
           <a href="/auth/google">
-            <UButton
-              icon="simple-icons:google"
-              label="Sign in with Google"
-              color="neutral"
-            />
+            <UButton icon="simple-icons:google" label="Sign in with Google" color="neutral" />
           </a>
+          <!--          <UButton icon="lucide:mail" label="Sign in with Email" variant="soft" color="neutral" @click="otp = !otp" />
+          <Transition name="blur" mode="out-in">
+            <div v-show="otp" class="flex items-center gap-2">
+              <UInput v-model="email" label="Email" placeholder="Email" type="email" />
+              <UButton icon="lucide:mail" label="Send OTP" color="neutral" />
+            </div>
+          </Transition>-->
         </div>
       </CrossedDiv>
     </div>