mirror of
https://github.com/LukeHagar/Sveltey.git
synced 2025-12-06 04:21:38 +00:00
adjusting style and formatting
This commit is contained in:
@@ -38,7 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
{#each featuredPosts as post}
|
{#each featuredPosts as post}
|
||||||
<article class="card preset-outlined-surface-200-800 p-6 md:p-8 space-y-4 hover:scale-105 transition-all duration-300 group">
|
<a href="/blog/{post.slug}" class="card preset-outlined-primary-500 p-6 md:p-8 space-y-4 hover:scale-105 transition-all duration-300 group">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<span class="badge preset-filled-primary-500 flex items-center gap-1">
|
<span class="badge preset-filled-primary-500 flex items-center gap-1">
|
||||||
<Star class="size-3" />
|
<Star class="size-3" />
|
||||||
@@ -51,9 +51,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="h3 group-hover:text-primary-500 transition-colors">
|
<h3 class="h3 group-hover:text-primary-500 transition-colors">
|
||||||
<a href="/blog/{post.slug}" class="block">
|
<div class="block">
|
||||||
{post.title}
|
{post.title}
|
||||||
</a>
|
</div>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="opacity-75">{post.excerpt}</p>
|
<p class="opacity-75">{post.excerpt}</p>
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -87,16 +87,16 @@
|
|||||||
<h2 class="h2 text-center">Recent Posts</h2>
|
<h2 class="h2 text-center">Recent Posts</h2>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{#each regularPosts as post}
|
{#each regularPosts as post}
|
||||||
<article class="card preset-outlined-surface-200-800 p-4 md:p-6 space-y-4 hover:scale-105 transition-all duration-300 group">
|
<a href="/blog/{post.slug}" class="card preset-outlined-primary-500 p-4 md:p-6 space-y-4 hover:scale-105 transition-all duration-300 group">
|
||||||
<div class="flex items-center gap-1 text-sm opacity-75">
|
<div class="flex items-center gap-1 text-sm opacity-75">
|
||||||
<Calendar class="size-4" />
|
<Calendar class="size-4" />
|
||||||
{formatDate(post.publishedAt)}
|
{formatDate(post.publishedAt)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="h4 group-hover:text-primary-500 transition-colors">
|
<h3 class="h4 group-hover:text-primary-500 transition-colors">
|
||||||
<a href="/blog/{post.slug}" class="block">
|
<div class="block">
|
||||||
{post.title}
|
{post.title}
|
||||||
</a>
|
</div>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="opacity-75 text-sm">{post.excerpt}</p>
|
<p class="opacity-75 text-sm">{post.excerpt}</p>
|
||||||
@@ -117,7 +117,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -55,7 +55,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Author and Tags -->
|
<!-- Author and Tags -->
|
||||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
<div class="card preset-outlined-primary-500 p-6 space-y-4">
|
||||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<User class="size-5 text-primary-500" />
|
<User class="size-5 text-primary-500" />
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
href="https://twitter.com/intent/tweet?text={encodeURIComponent(post.title)}&url={encodeURIComponent(typeof window !== 'undefined' ? window.location.href : '')}"
|
href="https://twitter.com/intent/tweet?text={encodeURIComponent(post.title)}&url={encodeURIComponent(typeof window !== 'undefined' ? window.location.href : '')}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="btn btn-sm preset-outlined-surface-200-800"
|
class="btn btn-sm preset-outlined-secondary-500"
|
||||||
title="Share on Twitter"
|
title="Share on Twitter"
|
||||||
>
|
>
|
||||||
<Twitter class="size-4" />
|
<Twitter class="size-4" />
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
href="https://www.linkedin.com/sharing/share-offsite/?url={encodeURIComponent(typeof window !== 'undefined' ? window.location.href : '')}"
|
href="https://www.linkedin.com/sharing/share-offsite/?url={encodeURIComponent(typeof window !== 'undefined' ? window.location.href : '')}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="btn btn-sm preset-outlined-surface-200-800"
|
class="btn btn-sm preset-outlined-secondary-500"
|
||||||
title="Share on LinkedIn"
|
title="Share on LinkedIn"
|
||||||
>
|
>
|
||||||
<Linkedin class="size-4" />
|
<Linkedin class="size-4" />
|
||||||
@@ -92,7 +92,7 @@
|
|||||||
<Tag class="size-4 text-primary-500" />
|
<Tag class="size-4 text-primary-500" />
|
||||||
<span class="text-sm font-medium">Tags:</span>
|
<span class="text-sm font-medium">Tags:</span>
|
||||||
{#each post.tags as tag}
|
{#each post.tags as tag}
|
||||||
<span class="badge preset-outlined-surface-200-800 text-xs flex items-center gap-1">
|
<span class="badge preset-outlined-tertiary-500 text-xs flex items-center gap-1">
|
||||||
{tag}
|
{tag}
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
@@ -101,7 +101,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<hr class="hr" />
|
<hr class="hr bg-primary-500" />
|
||||||
|
|
||||||
<!-- Article Content -->
|
<!-- Article Content -->
|
||||||
<article class="prose dark:prose-invert prose-lg max-w-none">
|
<article class="prose dark:prose-invert prose-lg max-w-none">
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
],
|
],
|
||||||
popular: false,
|
popular: false,
|
||||||
buttonText: data.session ? 'Current Plan' : 'Get Started',
|
buttonText: data.session ? 'Current Plan' : 'Get Started',
|
||||||
buttonClass: 'preset-outlined-surface-200-800'
|
buttonClass: 'preset-outlined-primary-500'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Pro',
|
name: 'Pro',
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
<!-- Pricing Cards -->
|
<!-- Pricing Cards -->
|
||||||
<section class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
<section class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||||
{#each plans as plan}
|
{#each plans as plan}
|
||||||
<div class="card {plan.popular ? 'preset-outlined-primary-500 relative' : 'preset-outlined-secondary-500'} p-6 md:p-8 space-y-6 {plan.popular ? 'scale-105 shadow-2xl' : 'hover:scale-105'} transition-all duration-300">
|
<div class="card {plan.popular ? 'preset-outlined-primary-500 relative' : 'preset-outlined-secondary-500'} p-6 md:p-8 space-y-6 {plan.popular ? 'scale-105 shadow-2xl' : 'hover:scale-105'} transition-all duration-300 flex flex-col">
|
||||||
|
|
||||||
{#if plan.popular}
|
{#if plan.popular}
|
||||||
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||||||
@@ -117,7 +117,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Features -->
|
||||||
<ul class="space-y-3">
|
<ul class="space-y-3 grow">
|
||||||
{#each plan.features as feature}
|
{#each plan.features as feature}
|
||||||
<li class="flex items-center gap-3">
|
<li class="flex items-center gap-3">
|
||||||
{#if feature.included}
|
{#if feature.included}
|
||||||
|
|||||||
@@ -67,7 +67,7 @@
|
|||||||
<Modal />
|
<Modal />
|
||||||
|
|
||||||
<!-- Navigation Header -->
|
<!-- Navigation Header -->
|
||||||
<header class="bg-surface-50-950-token border-surface-200-700-token border-b sticky top-0 z-50 backdrop-blur-xl">
|
<header class="bg-surface-50-950-token border-surface-200-700-token border-b sticky top-0 z-50 backdrop-blur-2xl">
|
||||||
<nav class="container mx-auto px-6 py-4">
|
<nav class="container mx-auto px-6 py-4">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<!-- Left side - Brand and Main navigation -->
|
<!-- Left side - Brand and Main navigation -->
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Hero Image/Graphic -->
|
<!-- Hero Image/Graphic -->
|
||||||
<div class="order-1 lg:order-2 flex justify-center">
|
<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">
|
<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">
|
||||||
<Rocket class="size-32 lg:size-64 text-primary-500" />
|
<Rocket class="size-32 lg:size-64 text-primary-500" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user