lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance styling and layout for improved user experience

Browse Source 
- Added custom fonts 'Blade Knight' and 'Coligra' for a unique aesthetic
- Updated background color and styling for body and app components
- Improved content card design with glass morphism effects and hover states
- Enhanced mobile navigation with a floating glass effect and updated button styles
- Adjusted header layout for better responsiveness and visual appeal

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-02 23:18:35 +00:00
parent ea03167da8
commit 90c55883f2
14 changed files with 289 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/MobileNav.vue
View File

@@ -1,13 +1,13 @@
<template>
<nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden">
<div class="glass-card rounded-t-3xl border-t">
<div class="grid grid-cols-5 gap-1 px-2 py-3">
<nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden pb-4 px-6">
<div class="floating-glass-nav px-4 py-3 rounded-2xl">
<div class="flex items-center justify-around">
<button
v-for="item in navItems"
:key="item.name"
@click="navigate(item.path)"
class="flex flex-col items-center gap-1 p-2 rounded-lg transition-colors"
:class="{ 'text-netflix-red': isActive(item.path), 'text-white/60': !isActive(item.path) }"
class="flex flex-col items-center gap-1 nav-tab"
:class="{ 'nav-tab-active': isActive(item.path) }"
>
<component :is="item.icon" class="w-6 h-6" />
<span class="text-xs font-medium">{{ item.name }}</span>
@@ -74,6 +74,42 @@ const isActive = (path: string) => {
<style scoped>
.mobile-nav {
/* Safe area for iPhone notch/home indicator */
padding-bottom: env(safe-area-inset-bottom, 0);
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}
.floating-glass-nav {
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-tab {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 12px;
background: transparent;
border: none;
cursor: pointer;
}
.nav-tab:active {
background: rgba(255, 255, 255, 0.1);
}
.nav-tab-active {
color: rgba(255, 255, 255, 1);
text-decoration: none;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
font-weight: 600;
}
</style>