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

14
src/components/widgets/Content.astro
View File

@@ -31,14 +31,14 @@ const {
} = Astro.props;
---
<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
<section class={`bg-blue-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
{
(title || subtitle || highlight) && (
<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@@ -50,7 +50,7 @@ const {
)}
{subtitle && (
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@@ -59,7 +59,7 @@ const {
<div class="mx-auto max-w-screen-xl p-4 md:px-8">
<div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
<div class="md:basis-1/2 self-center">
{content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
{content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
{
items && (
@@ -67,13 +67,13 @@ const {
{items.map(({ title: title2, description, icon }) => (
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-800 text-gray-50">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-gray-50">
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
</div>
</div>
<div class="ml-4">
{title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
{title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
</div>
</div>
))}