klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Restore toolbar background to bg-nebula; add toolbar backdrop blur

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-15 09:24:43 +01:00
parent 79192345e3
commit 9dbe848412
28 changed files with 736 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/artworks/show.blade.php
View File

@@ -34,7 +34,7 @@
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">

30
resources/views/blank.blade.php
View File

@@ -6,7 +6,7 @@
<div class="mx-auto w-full">
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
@@ -69,7 +69,7 @@
<section class="mt-5 bg-white/5 border border-white/10 rounded-2xl shadow-lg">
<div class="p-5 md:p-6">
<div class="text-lg font-semibold text-white/90">Fantasy</div>
<p class="mt-2 text-sm leading-6 text-neutral-400">A small preview of the Nebula layout, server-rendered for SEO and progressive enhancement.</p>
<p class="mt-2 text-sm leading-6 text-neutral-400">A small preview of the Nova layout, server-rendered for SEO and progressive enhancement.</p>
</div>
</section>
</div>
@@ -114,21 +114,21 @@
</div>
</section>
<!-- Nebula color scale examples -->
<!-- Nova color scale examples -->
<section class="px-6 pb-10 md:px-10 mt-8">
<h2 class="text-lg font-semibold mb-4">Nebula color scale</h2>
<h2 class="text-lg font-semibold mb-4">Nova color scale</h2>
<div class="grid grid-cols-2 sm:grid-cols-5 md:grid-cols-10 gap-3">
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-50 text-black">nebula-50</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-100 text-black">nebula-100</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-200 text-black">nebula-200</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-300 text-black">nebula-300</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-400 text-black">nebula-400</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-500 text-white">nebula-500</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-600 text-white">nebula-600</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-700 text-white">nebula-700</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-800 text-white">nebula-800</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-900 text-white">nebula-900</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-50 text-black">nova-50</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-100 text-black">nova-100</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-200 text-black">nova-200</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-300 text-black">nova-300</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-400 text-black">nova-400</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-500 text-white">nova-500</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-600 text-white">nova-600</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-700 text-white">nova-700</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-800 text-white">nova-800</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nova-900 text-white">nova-900</div>
</div>
</section>

4
resources/views/layouts/app.blade.php
View File

@@ -14,8 +14,8 @@
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<body class="font-sans antialiased bg-nova-800">
<div class="min-h-screen">
@include('layouts.navigation')
<!-- Page Heading -->

6
resources/views/layouts/nova.blade.php
View File

@@ -15,12 +15,12 @@
@vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/nova.js'])
@stack('head')
</head>
<body class="bg-nebula-900 text-white min-h-screen">
<body class="bg-nova-800 text-white min-h-screen flex flex-col">
<!-- React Topbar mount point -->
<div id="topbar-root"></div>
@include('layouts.nova.toolbar')
<main class="pt-16">
<main class="flex-1 pt-16">
@yield('content')
</main>
@@ -35,7 +35,7 @@
@if($toastMessage)
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4000)" x-cloak
class="fixed right-4 bottom-6 z-50">
<div class="max-w-sm w-full rounded-lg shadow-lg overflow-hidden bg-nebula-600 border {{ $toastBorder }}">
<div class="max-w-sm w-full rounded-lg shadow-lg overflow-hidden bg-nova-600 border {{ $toastBorder }}">
<div class="px-4 py-3 flex items-start gap-3">
<div class="flex-shrink-0">
@if(session('error'))

4
resources/views/layouts/nova/footer.blade.php
View File

@@ -1,5 +1,5 @@
<!-- Footer -->
<footer class="border-t border-neutral-800 bg-nebula">
<footer class="border-t border-neutral-800 bg-nova">
<div class="px-6 md:px-10 py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
<div class="text-xl font-semibold tracking-wide flex items-center gap-1">
<img src="/gfx/skinbase_logo.png" alt="Skinbase" class="h-16 w-auto object-contain">
@@ -17,4 +17,4 @@
<div class="text-xs text-neutral-400">© 2026 Skinbase.org</div>
</div>
</footer>
</footer>

4
resources/views/layouts/nova/toolbar.blade.php
View File

@@ -1,4 +1,4 @@
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-nebula border-b border-panel">
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-nova border-b border-panel">
<div class="mx-auto w-full h-full px-4 flex items-center gap-3">
<!-- Mobile hamburger -->
<button id="btnSidebar" class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5">
@@ -210,4 +210,4 @@
<a class="block py-2 border-b border-neutral-900" href="/profile">Profile</a>
<a class="block py-2" href="/settings">Settings</a>
</div>
</div>
</div>

2
resources/views/legacy/category-slug.blade.php
View File

@@ -13,7 +13,7 @@
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">

2
resources/views/legacy/content-type.blade.php
View File

@@ -13,7 +13,7 @@
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">

24
resources/views/legacy/photography.blade.php
View File

@@ -21,7 +21,7 @@
<div class="mx-auto w-full">
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
@@ -72,7 +72,7 @@
<!-- MAIN -->
<main class="flex-1">
<div class="nebula-gallery grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<div class="nova-gallery grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
@foreach($artworks as $art)
@include('legacy._artwork_card', ['art' => $art])
@endforeach
@@ -90,30 +90,30 @@
@push('styles')
<style>
/* Nebula-like gallery tweaks: fixed-height thumbnails, tighter spacing, refined typography */
.nebula-gallery {
/* Nova-like gallery tweaks: fixed-height thumbnails, tighter spacing, refined typography */
.nova-gallery {
margin-top: 1.25rem;
}
.nebula-gallery .artwork a { display: block; }
.nova-gallery .artwork a { display: block; }
/* Ensure consistent gap and card sizing across breakpoints */
@media (min-width: 1024px) {
.nebula-gallery { gap: 1rem; }
.nova-gallery { gap: 1rem; }
}
/* Typography refinements to match Nebula */
.nebula-gallery .artwork h3 { font-size: 0.95rem; line-height: 1.15; }
.nebula-gallery .artwork .text-xs { font-size: 0.72rem; }
/* Typography refinements to match Nova */
.nova-gallery .artwork h3 { font-size: 0.95rem; line-height: 1.15; }
.nova-gallery .artwork .text-xs { font-size: 0.72rem; }
/* Improve image loading artifact handling */
.nebula-gallery img { background: linear-gradient(180deg,#0b0b0b,#0f0f10); }
.nova-gallery img { background: linear-gradient(180deg,#0b0b0b,#0f0f10); }
/* Remove any default margins on article cards that can create vertical gaps */
.nebula-gallery .artwork { margin: 0; }
.nova-gallery .artwork { margin: 0; }
/* Ensure grid items don't collapse when overlay hidden */
.nebula-gallery .artwork a { min-height: 0; }
.nova-gallery .artwork a { min-height: 0; }
</style>
@endpush

45
resources/views/upload.blade.php
View File

@@ -1,15 +1,8 @@
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ $page_title ?? 'Upload Artwork' }}</title>
@extends('layouts.nova')
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@push('head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="shortcut icon" href="/favicon.ico">
<script>
window.SKINBASE_FLAGS = Object.assign({}, window.SKINBASE_FLAGS || {}, {
uploads_v2: @json((bool) config('features.uploads_v2', false)),
@@ -19,16 +12,28 @@
});
</script>
@vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/entry-topbar.jsx','resources/js/upload.jsx'])
</head>
<body class="bg-nebula-900 text-white min-h-screen">
<div id="topbar-root"></div>
@include('layouts.nova.toolbar')
@vite(['resources/js/entry-topbar.jsx','resources/js/upload.jsx'])
<style>
/* Upload page spacing: extra top padding and bottom space so sticky action bar won't overlap content */
body.page-upload main {
padding-top: 6rem; /* slightly larger top padding on upload */
padding-bottom: 6.5rem; /* room for sticky action bar */
}
<main class="pt-16">
@inertia
</main>
/* Ensure the footer is visually separated on short pages */
body.page-upload footer {
margin-top: 1rem;
}
</style>
@include('layouts.nova.footer')
</body>
</html>
<script>
// Mark document to apply upload-specific spacing
document.addEventListener('DOMContentLoaded', function () {
document.body.classList.add('page-upload')
})
</script>
@endpush
@section('content')
@inertia
@endsection