Optimize academy
This commit is contained in:
@@ -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 ?? '' }}">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user