adjusting style and formatting

This commit is contained in:
Luke Hagar
2025-06-02 12:09:05 -05:00
parent 6d58c65b39
commit dddcb66608
5 changed files with 18 additions and 18 deletions

View File

@@ -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>

View File

@@ -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">

View File

@@ -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}

View File

@@ -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 -->

View File

@@ -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>