fix: stagger meteor delays for full-width appearance, move SidebarTrigger to AppHeader after logo
Docker Build / Build and Push Docker Image (push) Successful in 3m34s

This commit is contained in:
2026-06-15 03:48:41 +08:00
parent ae380a5a81
commit ff407c4607
5 changed files with 25 additions and 25 deletions
@@ -23,6 +23,7 @@ import { LanguageSwitcher } from '@/components/language-switcher'
import { NotificationPopover } from '@/components/notification-popover'
import { ProfileDropdown } from '@/components/profile-dropdown'
import { Search } from '@/components/search'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { defaultTopNavLinks } from '../config/top-nav.config'
import { type TopNavLink } from '../types'
import { Header } from './header'
@@ -113,6 +114,7 @@ export function AppHeader({
<>
<Header>
<SystemBrand variant='inline' />
<SidebarTrigger variant='ghost' className='size-8' />
{leftContent ? (
<div className='ms-2 flex items-center'>{leftContent}</div>
@@ -17,7 +17,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact admin@modelstoken.com
*/
import { cn } from '@/lib/utils'
import { SidebarTrigger } from '@/components/ui/sidebar'
type HeaderProps = React.HTMLAttributes<HTMLElement>
@@ -32,7 +31,6 @@ export function Header({ className, children, ...props }: HeaderProps) {
>
<div className='flex h-full items-center gap-1.5 px-2 sm:gap-2 sm:px-3'>
{children}
<SidebarTrigger variant='ghost' className='size-8' />
</div>
</header>
)
+7 -7
View File
@@ -509,14 +509,14 @@ export function Docs() {
.dark .meteor::after {
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
}
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 1s; }
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 5s; }
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 9s; }
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 13s; }
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 17s; }
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 21s; }
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 25s; }
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 29s; }
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 2s; }
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 8s; }
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 3s; }
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 10s; }
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 1s; }
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 6s; }
@keyframes meteor-fall {
0% { opacity: 0; transform: translateY(-150px) translateX(0) rotate(220deg); }
5% { opacity: 1; }
+9 -9
View File
@@ -474,15 +474,15 @@ export function Hero(props: HeroProps) {
);
}
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
.meteor-2 { left: 15%; top: -2%; animation-duration: 1.7s; animation-delay: 3s; }
.meteor-3 { left: 25%; top: -2%; animation-duration: 2.2s; animation-delay: 6s; }
.meteor-4 { left: 35%; top: -2%; animation-duration: 1.8s; animation-delay: 9s; }
.meteor-5 { left: 48%; top: -2%; animation-duration: 2.1s; animation-delay: 12s; }
.meteor-6 { left: 58%; top: -2%; animation-duration: 1.6s; animation-delay: 15s; }
.meteor-7 { left: 68%; top: -2%; animation-duration: 1.9s; animation-delay: 18s; }
.meteor-8 { left: 78%; top: -2%; animation-duration: 2.3s; animation-delay: 21s; }
.meteor-9 { left: 88%; top: -2%; animation-duration: 1.7s; animation-delay: 24s; }
.meteor-10 { left: 95%; top: -2%; animation-duration: 2.0s; animation-delay: 27s; }
.meteor-2 { left: 15%; top: -2%; animation-duration: 1.7s; animation-delay: 7s; }
.meteor-3 { left: 25%; top: -2%; animation-duration: 2.2s; animation-delay: 3s; }
.meteor-4 { left: 35%; top: -2%; animation-duration: 1.8s; animation-delay: 11s; }
.meteor-5 { left: 48%; top: -2%; animation-duration: 2.1s; animation-delay: 1s; }
.meteor-6 { left: 58%; top: -2%; animation-duration: 1.6s; animation-delay: 9s; }
.meteor-7 { left: 68%; top: -2%; animation-duration: 1.9s; animation-delay: 5s; }
.meteor-8 { left: 78%; top: -2%; animation-duration: 2.3s; animation-delay: 13s; }
.meteor-9 { left: 88%; top: -2%; animation-duration: 1.7s; animation-delay: 2s; }
.meteor-10 { left: 95%; top: -2%; animation-duration: 2.0s; animation-delay: 8s; }
@keyframes meteor-fall {
0% {
opacity: 0;
+7 -7
View File
@@ -394,13 +394,13 @@ export function Pricing() {
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
}
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 4s; }
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 8s; }
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 12s; }
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 16s; }
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 20s; }
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 24s; }
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 28s; }
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 6s; }
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 2s; }
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 9s; }
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 4s; }
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 11s; }
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 1s; }
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 7s; }
@keyframes meteor-fall {
0% { opacity: 0; transform: translateY(-150px) translateX(0) rotate(220deg); }
5% { opacity: 1; }