Refine and enable bg gradient

skeletonlabs · Sep 26, 2024 · e7ef859 · e7ef859
1 parent da097fb
commit e7ef859
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 37 deletions.
diff --git a/sites/themes.skeleton.dev/src/app.html b/sites/themes.skeleton.dev/src/app.html
@@ -7,7 +7,7 @@
 		%sveltekit.head%
 		<title>Themes - Skeleton</title>
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="cerberus">
+	<body data-sveltekit-preload-data="hover" data-theme="cerberus" class="bg-gradient-skeleton">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/sites/themes.skeleton.dev/src/app.pcss b/sites/themes.skeleton.dev/src/app.pcss
@@ -8,14 +8,14 @@ body {
 }
 
 /* Background Image */
-/* [data-theme='cerberus'] {
+.bg-gradient-skeleton {
 	background-image: radial-gradient(at 20% 100%, rgba(var(--color-secondary-500) / 0.1) 0px, transparent 40%),
 		radial-gradient(at 75% 75%, rgba(var(--color-primary-500) / 0.1) 0px, transparent 50%);
 	background-attachment: fixed;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
-} */
+}
 
 .label-text {
 	@apply opacity-60;

diff --git a/sites/themes.skeleton.dev/src/lib/components/common/AppHeader/AppHeader.svelte b/sites/themes.skeleton.dev/src/lib/components/common/AppHeader/AppHeader.svelte
@@ -18,6 +18,7 @@
 		</div>
 		<nav class="flex items-center gap-4">
 			<Lightswitch />
+			<button class="btn preset-filled">Login</button>
 		</nav>
 	</div>
 </header>
diff --git a/sites/themes.skeleton.dev/src/lib/components/generator/Preview/Preview.svelte b/sites/themes.skeleton.dev/src/lib/components/generator/Preview/Preview.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<section class="relative h-screen overflow-y-auto bg-body-color dark:bg-body-color-dark">
+<section class="relative h-screen overflow-y-auto bg-body-color dark:bg-body-color-dark bg-gradient-skeleton">
 	<!-- Content -->
 	<article class="container mx-auto">
 		{#if globals.panel === 'preview'}

diff --git a/sites/themes.skeleton.dev/src/routes/(app)/themes/import/+page.svelte b/sites/themes.skeleton.dev/src/routes/(app)/themes/import/+page.svelte
@@ -75,36 +75,3 @@
 		{/each}
 	</div>
 </div>
-
-<!-- <div class="">
-	<p>This is the import page.</p>
-
-	<h2 class="h2">Cerberus</h2>
-	<div>
-		<nav class="bg-surface-50-950 p-10">
-			<button class="btn preset-filled-primary-500">primary</button>
-			<button class="btn preset-filled-secondary-500">secondary</button>
-			<button class="btn preset-filled-tertiary-500">tertiary</button>
-		</nav>
-	</div>
-
-	<hr class="hr" />
-
-	<h2 class="h2">Pine</h2>
-	<div data-theme="pine">
-		<nav class="bg-surface-50-950 p-10">
-			<button class="btn preset-filled-primary-500">primary</button>
-			<button class="btn preset-filled-secondary-500">secondary</button>
-			<button class="btn preset-filled-tertiary-500">tertiary</button>
-		</nav>
-	</div>
-
-	<h2 class="h2">Rose</h2>
-	<div data-theme="rose">
-		<nav class="bg-surface-50-950 p-10">
-			<button class="btn preset-filled-primary-500">primary</button>
-			<button class="btn preset-filled-secondary-500">secondary</button>
-			<button class="btn preset-filled-tertiary-500">tertiary</button>
-		</nav>
-	</div>
-</div> -->