LukeParke/Sveltey
1
0
Fork 0
mirror of https://github.com/LukeHagar/Sveltey.git synced 2025-12-06 12:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

better mobile styling

Browse Source
This commit is contained in:
Luke Hagar
2025-06-02 21:22:35 -05:00
parent e07e26bedd
commit d3678aa41a
5 changed files with 172 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.css
View File

@@ -7,7 +7,6 @@
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
/* Skeleton UI Themes */
@import '@skeletonlabs/skeleton/themes/catppuccin';
@import '@skeletonlabs/skeleton/themes/cerberus';
@@ -35,10 +34,10 @@
@custom-variant dark (&:where(.dark, .dark *));
div.prose a {
@apply anchor
@apply anchor;
}
a.disabled {
@apply pointer-events-none opacity-50;
}

6
src/lib/components/Header.svelte
View File

@@ -60,7 +60,7 @@
</div>
<!-- Right side - User actions and theme switcher -->
<div class="flex gap-3">
<div class="flex gap-1 sm:gap-3">
<ThemeSwitch />
{#if session}
@@ -91,10 +91,10 @@
</div>
{:else}
<!-- Authentication Buttons -->
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 sm:gap-3">
<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
<User class="size-4" aria-hidden="true" />
<span>Sign In / Register</span>
<span class="hidden sm:inline">Sign In / Register</span>
</a>
</div>
{/if}

4
src/lib/components/ThemeSwitch.svelte
View File

@@ -124,13 +124,13 @@
aria-expanded={showDropdown}
>
<Palette class="size-4" aria-hidden="true" />
<span class="capitalize">{currentColorTheme}</span>
<span class="capitalize hidden sm:block">{currentColorTheme}</span>
<ChevronDown class={`size-4 transition-transform ${showDropdown === true ? 'rotate-180' : ''}`} aria-hidden="true" />
</button>
{#if showDropdown}
<div
class="card preset-outlined-primary-500 bg-surface-50-950 absolute left-0 z-50 mt-2 w-48 overflow-hidden rounded-lg shadow-lg"
class="card preset-outlined-primary-500 bg-surface-50-950 absolute right-0 sm:left-0 z-50 mt-2 w-24 sm:w-48 overflow-hidden rounded-lg shadow-lg"
>
{#each colorThemes as theme}
<button

2
src/routes/+layout.svelte
View File

@@ -67,7 +67,7 @@
<Header {data} />
<!-- Main Content -->
<main class="min-h-screen">
<main class="min-h-screen p-4">
{@render children()}
<!-- Pass session to child pages -->
</main>

72
src/routes/+page.svelte
View File

@@ -2,21 +2,21 @@
// Icons
import { Rocket, Database, Zap, Star, Users, GitBranch } from '@lucide/svelte';
import Skeleton from '$lib/assets/skeleton.svelte'
import Skeleton from '$lib/assets/skeleton.svelte';
let { data } = $props();
</script>
<div class="container mx-auto py-20 space-y-20">
<div class="container mx-auto space-y-20 py-20 p-4">
<!-- Hero Section -->
<header class="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 items-center">
<div class="order-2 lg:order-1 max-w-3xl space-y-8">
<header class="grid grid-cols-1 items-center gap-8 lg:grid-cols-[1fr_auto]">
<div class="order-2 max-w-3xl space-y-8 lg:order-1">
<h1 class="h1">Launch Your SaaS in <span class="text-primary-500">Minutes</span></h1>
<p class="text-2xl opacity-75">
The complete SvelteKit & Supabase template with authentication, payments, and beautiful UI components.
Skip the boilerplate and focus on what matters most.
The complete SvelteKit & Supabase template with authentication, payments, and beautiful UI
components. Skip the boilerplate and focus on what matters most.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<div class="flex flex-col gap-4 sm:flex-row">
{#if data.session}
<a
href="/app/dashboard"
@@ -46,9 +46,13 @@
</div>
</div>
<!-- Hero Image/Graphic -->
<div class="order-1 lg:order-2 flex justify-center">
<div class="size-64 lg:size-96 bg-gradient-to-br from-primary-500/20 to-secondary-500/20 rounded-full flex items-center justify-center shadow-2xl animate-tilt" role="img" aria-label="SaaS launch illustration">
<Rocket class="size-32 lg:size-64 text-primary-500" aria-hidden="true" />
<div class="order-1 flex justify-center lg:order-2">
<div
class="from-primary-500/20 to-secondary-500/20 animate-tilt flex size-64 items-center justify-center rounded-full bg-gradient-to-br shadow-2xl lg:size-96"
role="img"
aria-label="SaaS launch illustration"
>
<Rocket class="text-primary-500 size-32 lg:size-64" aria-hidden="true" />
</div>
</div>
</header>
@@ -57,21 +61,21 @@
<!-- Stats Section -->
<section>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 text-center md:text-left">
<div class="flex gap-20 text-center flex-wrap font-bold justify-between justify-center">
<div class="space-y-1">
<span class="font-bold text-7xl">99%</span>
<span class="text-7xl">99%</span>
<p class="text-primary-500">Faster Development</p>
</div>
<div class="space-y-1">
<span class="font-bold text-7xl">50+</span>
<span class="text-7xl">50+</span>
<p class="text-primary-500">Components Ready</p>
</div>
<div class="space-y-1">
<span class="font-bold text-7xl">100%</span>
<span class="text-7xl">100%</span>
<p class="text-primary-500 ">Type Safe</p>
</div>
<div class="space-y-1">
<span class="font-bold text-7xl">∞</span>
<span class="text-7xl">∞</span>
<p class="text-primary-500">Possibilities</p>
</div>
</div>
@@ -80,29 +84,29 @@
<hr class="hr max-w-48" />
<!-- Features Section -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8">
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
<section class="flex flex-wrap gap-4">
<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
<Database class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Supabase Ready</h3>
<p class="opacity-75">
Authentication, real-time database, and file storage configured out of the box.
Just add your Supabase credentials and you're ready to go.
Authentication, real-time database, and file storage configured out of the box. Just add
your Supabase credentials and you're ready to go.
</p>
</div>
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
<Zap class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Lightning Fast</h3>
<p class="opacity-75">
Built with SvelteKit for maximum performance. Server-side rendering,
optimistic updates, and blazing fast navigation included.
Built with SvelteKit for maximum performance. Server-side rendering, optimistic updates, and
blazing fast navigation included.
</p>
</div>
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
<GitBranch class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Developer Experience</h3>
<p class="opacity-75">
TypeScript, ESLint, Prettier, and comprehensive documentation.
Built by developers, for developers with love and attention to detail.
TypeScript, ESLint, Prettier, and comprehensive documentation. Built by developers, for
developers with love and attention to detail.
</p>
</div>
</section>
@@ -110,24 +114,24 @@
<hr class="hr max-w-48" />
<!-- Technologies Section -->
<section class="text-center space-y-8">
<section class="space-y-8 text-center">
<h2 class="h2">Built With <span class="text-primary-500">Modern Tools</span></h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
<div class="grid grid-cols-2 items-center gap-8 md:grid-cols-4">
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16">
<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16" />
</div>
<p class="text-lg font-extrabold">SvelteKit</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16">
<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16" />
</div>
<p class="text-lg font-extrabold">Supabase</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16">
<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16" />
</div>
<p class="text-lg font-extrabold">TypeScript</p>
</div>
@@ -143,10 +147,12 @@
<hr class="hr max-w-48" />
<!-- Call to Action Section -->
<section class="grid grid-cols-1 md:grid-cols-[1fr_auto] items-center gap-4">
<div class="text-center md:text-left space-y-2">
<section class="grid grid-cols-1 items-center gap-4 md:grid-cols-[1fr_auto]">
<div class="space-y-2 text-center md:text-left">
<h3 class="h3">Ready to build your next big idea?</h3>
<p class="opacity-75">Join thousands of developers who trust our template to kickstart their SaaS projects.</p>
<p class="opacity-75">
Join thousands of developers who trust our template to kickstart their SaaS projects.
</p>
</div>
{#if !data.session}
<a