365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve design using custom variables

Browse Source
This commit is contained in:
prototypa
2023-01-22 00:40:14 -05:00
parent a3d0855f92
commit a01fd3880f
25 changed files with 80 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/blog/GridItem.astro
View File

@@ -39,12 +39,12 @@ const image = await findImage(post.image);
) : (
<a
href={getPermalink(post.slug, 'post')}
class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200"
class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
>
{post.title}
</a>
)
}
</h3>
<p class="text-gray-500 dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
<p class="text-muted dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
</article>

4
src/components/blog/HighlightedPosts.astro
View File

@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
{
allPostsText && allPostsLink && (
<a
class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 md:mb-0"
href={allPostsLink}
>
{allPostsText} »
@@ -46,7 +46,7 @@ const posts = await findPostsByIds(postIds);
}
</div>
{information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
{information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
</div>
<Grid posts={posts} />

4
src/components/blog/LatestPosts.astro
View File

@@ -37,7 +37,7 @@ const posts = await findLatestPosts({ count });
{
allPostsText && allPostsLink && (
<a
class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
href={allPostsLink}
>
{allPostsText} »
@@ -46,7 +46,7 @@ const posts = await findLatestPosts({ count });
}
</div>
{information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
{information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
</div>
<Grid posts={posts} />

8
src/components/blog/ListItem.astro
View File

@@ -43,15 +43,15 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
<header>
<div class="mb-1">
<span class="text-sm">
<Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 text-gray-500 dark:text-gray-400" />
<Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
{Math.ceil(post.readingTime)} min read
</span>
</div>
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading text-gray-700 dark:text-slate-300">
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
{
link ? (
<a class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200" href={link}>
<a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
{post.title}
</a>
) : (
@@ -61,7 +61,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
</h2>
</header>
{post.excerpt && <p class="flex-grow text-gray-500 dark:text-slate-400 text-lg">{post.excerpt}</p>}
{post.excerpt && <p class="flex-grow text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>}
<footer class="mt-5">
<PostTags tags={post.tags} />
</footer>

12
src/components/blog/SinglePost.astro
View File

@@ -22,10 +22,10 @@ const { post, url } = Astro.props;
<header class={post.image ? '' : ''}>
<div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
<p>
<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 text-gray-500 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
Math.ceil(post.readingTime)
} min read
<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
Math.ceil(post.readingTime)
} min read
</p>
</div>
<h1
@@ -34,7 +34,7 @@ const { post, url } = Astro.props;
{post.title}
</h1>
<p
class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-gray-500 dark:text-slate-400 font-medium text-justify"
class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-slate-400 text-justify"
>
{post.excerpt}
</p>
@@ -60,7 +60,7 @@ const { post, url } = Astro.props;
}
</header>
<div
class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-800 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
>
{
post.Content ? (

2
src/components/blog/Tags.astro
View File

@@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
) : (
<a
href={getPermalink(tag, 'tag')}
class="text-gray-600 dark:text-slate-300 hover:text-primary-800 dark:hover:text-gray-200"
class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
>
{tag}
</a>