Optimize academy

This commit is contained in:
2026-06-09 13:16:01 +02:00
parent f89ee937c0
commit 5af95f6533
109 changed files with 6862 additions and 719 deletions

View File

@@ -16,7 +16,7 @@
<div class="flex gap-4 overflow-x-auto nb-scrollbar-none pb-2">
@foreach($spotlight as $item)
<a href="{{ !empty($item->id) ? route('art.show', ['id' => $item->id, 'slug' => $item->slug ?? null]) : '#' }}"
class="group relative flex-none w-44 md:w-52 rounded-xl overflow-hidden
class="explore-spotlight-card group relative flex-none w-44 md:w-52 rounded-xl overflow-hidden
bg-neutral-800 border border-white/10 hover:border-amber-400/40
hover:shadow-lg hover:shadow-amber-500/10 transition-all duration-200"
title="{{ $item->name ?? '' }}">

View File

@@ -5,7 +5,7 @@
@endphp
@if (!$heroArtwork)
<section class="relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
<section class="skinbase-dark-surface relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/60 to-transparent"></div>
<div class="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
<p class="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
@@ -23,7 +23,7 @@
</div>
</section>
@else
<section class="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
<section class="skinbase-dark-surface group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
<x-artwork.featured-picture
:image="$heroFeaturedImage ?? [
'alt' => $heroArtwork['title'] ?? 'Featured artwork',
@@ -72,4 +72,4 @@
</div>
</div>
</section>
@endif
@endif

View File

@@ -40,7 +40,7 @@
@endif
</div>
@if (!empty(data_get($collection, 'owner.username')))
<span class="shrink-0 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100/80">@{{ data_get($collection, 'owner.username') }}</span>
<span class="shrink-0 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100/80">{{ '@'.data_get($collection, 'owner.username') }}</span>
@endif
</div>

View File

@@ -15,7 +15,7 @@
<a
href="{{ $creator['url'] ?? '#' }}"
aria-label="View {{ $creator['name'] ?? 'Creator' }} profile"
class="group relative flex min-h-[16rem] flex-col items-center overflow-hidden rounded-xl bg-panel p-5 text-center shadow-sm transition hover:ring-1 hover:ring-nova-500"
class="{{ !empty($creator['bg_thumb']) ? 'skinbase-dark-surface ' : '' }}group relative flex min-h-[16rem] flex-col items-center overflow-hidden rounded-xl bg-panel p-5 text-center shadow-sm transition hover:ring-1 hover:ring-nova-500"
@if (!empty($creator['bg_thumb']))
style="background-image: linear-gradient(to top, rgba(13, 19, 28, 0.96), rgba(13, 19, 28, 0.7)), url('{{ $creator['bg_thumb'] }}'); background-size: cover; background-position: center;"
@endif
@@ -39,4 +39,4 @@
@endforeach
</div>
</section>
@endif
@endif

View File

@@ -25,7 +25,7 @@
['key' => 'followers', 'label' => 'followers', 'value' => (int) data_get($group, 'counts.followers', 0)],
])->filter(fn ($item) => $item['value'] > 0)->values();
@endphp
<article class="group relative flex flex-col overflow-hidden rounded-xl bg-panel p-5 shadow-sm transition hover:ring-1 hover:ring-nova-500">
<article class="{{ !empty($group['banner_url']) ? 'skinbase-dark-surface ' : '' }}group relative flex flex-col overflow-hidden rounded-xl bg-panel p-5 shadow-sm transition hover:ring-1 hover:ring-nova-500">
@if (!empty($group['banner_url']))
<img src="{{ $group['banner_url'] }}" alt="" aria-hidden="true" class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-40 transition duration-500 group-hover:scale-105 group-hover:opacity-20" loading="lazy" decoding="async">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-panel via-panel/85 to-panel/70"></div>
@@ -71,4 +71,4 @@
@endforeach
</div>
</section>
@endif
@endif

View File

@@ -18,7 +18,7 @@
<div id="{{ $carouselId }}" class="news-carousel overflow-x-auto snap-x snap-proximity -mx-4 px-4 py-2">
<div class="flex gap-4">
@foreach ($newsItems as $item)
<article class="snap-start flex-shrink-0 w-[260px] group overflow-hidden rounded-[20px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] shadow-[0_12px_30px_rgba(0,0,0,0.18)] transition hover:-translate-y-0.5 hover:border-white/[0.12]">
<article class="skinbase-dark-surface snap-start flex-shrink-0 w-[260px] group overflow-hidden rounded-[20px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] shadow-[0_12px_30px_rgba(0,0,0,0.18)] transition hover:-translate-y-0.5 hover:border-white/[0.12]">
<a href="{{ $item['url'] ?? '#' }}" class="block">
<div class="relative aspect-[4/3] overflow-hidden bg-black/20">
@if (!empty($item['cover_url']))
@@ -131,4 +131,4 @@
display: none;
}
</style>
@endpush
@endpush

View File

@@ -22,7 +22,7 @@
<div class="mt-3 w-full text-center">
<a href="{{ $creator['url'] ?? '#' }}" class="block truncate text-sm font-semibold text-white transition hover:text-accent">{{ $creator['name'] ?? 'Creator' }}</a>
@if (!empty($creator['username']))
<p class="truncate text-xs text-nova-400">@{{ $creator['username'] }}</p>
<p class="truncate text-xs text-nova-400">{{ '@' . $creator['username'] }}</p>
@endif
<div class="mt-2 flex items-center justify-center gap-3 text-xs text-nova-500">
@if ((int) ($creator['followers_count'] ?? 0) > 0)
@@ -40,4 +40,4 @@
@endforeach
</div>
</section>
@endif
@endif

View File

@@ -43,7 +43,8 @@
</x-slot>
</x-nova-page-header>
<div class="border-b border-white/10 bg-nova-900/90 backdrop-blur-md">
<div class="stories-index-page">
<div class="stories-index-page__tabs border-b border-white/10 bg-nova-900/90 backdrop-blur-md">
<div class="px-6 md:px-10">
<nav data-stories-tabs class="flex items-center gap-0 -mb-px nb-scrollbar-none overflow-x-auto" role="tablist" aria-label="Stories sections">
@foreach($storyTabs as $index => $tab)
@@ -61,7 +62,7 @@
</div>
</div>
<div class="border-b border-white/10 bg-nova-900/70">
<div class="stories-index-page__categories border-b border-white/10 bg-nova-900/70">
<div class="px-6 md:px-10 py-6">
<div class="flex gap-3 overflow-x-auto nb-scrollbar-none pb-1">
<a href="{{ route('stories.index') }}" class="whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-semibold transition-colors {{ $currentCategory === '' ? 'bg-orange-500 text-white' : 'border border-white/10 bg-white/[0.05] text-white/70 hover:bg-white/[0.1] hover:text-white' }}">All</a>
@@ -77,7 +78,7 @@
<div class="px-6 pb-16 md:px-10">
<div class="space-y-10">
@if($featured)
<section id="featured" class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
<section id="featured" class="stories-index-page__featured overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
<a href="{{ route('stories.show', $featured->slug) }}" class="grid gap-0 lg:grid-cols-2">
<div class="aspect-video overflow-hidden bg-gray-900">
@if($featured->cover_url)
@@ -129,6 +130,7 @@
</section>
</div>
</div>
</div>
@endsection
@push('scripts')

View File

@@ -44,7 +44,24 @@
@endsection
@section('page-content')
<div class="mx-auto grid max-w-7xl gap-8 lg:grid-cols-12">
<div id="story-page" class="mx-auto grid max-w-7xl gap-8 lg:grid-cols-12">
<style>
@media (prefers-color-scheme: light) {
#story-page { color-scheme: light; }
#story-page .rounded-xl.border { background: #ffffff !important; border-color: #e6e6ef !important; }
#story-page img { background: transparent; }
#story-page h1.text-white { color: #0f172a !important; }
#story-page .text-white { color: #0f172a !important; }
#story-page .text-gray-300 { color: #6b7280 !important; }
#story-page .text-gray-400 { color: #9ca3af !important; }
#story-page .prose, #story-page .story-prose, #story-page .prose * { color: #0f172a !important; }
#story-page .prose a, #story-page a { color: #0f6fbf !important; }
#story-page .rounded-xl.border .p-6 { background: transparent !important; }
#story-page .rounded-xl.border.bg-gray-900\/50, #story-page .bg-gray-900\/50 { background: rgba(17,24,39,0.05) !important; }
#story-page textarea, #story-page button { color: inherit !important; }
#story-page button, #story-page .w-full.rounded-lg { background: #fef2f2 !important; color: #9f1239 !important; border-color: #fbcfe8 !important; }
}
</style>
<article class="lg:col-span-8">
<div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70">
@if($story->cover_url)