mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic design refacctorization

Browse Source
This commit is contained in:
prototypa
2022-11-22 12:49:42 -05:00
parent d546f9dbaa
commit 97fe6b119c
15 changed files with 218 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/widgets/Steps.astro
View File

@ -12,15 +12,15 @@ import Picture from '~/components/core/Picture.astro';
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
<p>
<p class="text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
sit amet dui tellus.
@ -30,32 +30,15 @@ import Picture from '~/components/core/Picture.astro';
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
<p>
<p class="text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla.
</p>
@ -65,13 +48,30 @@ import Picture from '~/components/core/Picture.astro';
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
<Icon name="tabler:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
<p class="text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
</div>
</div>
</div>
<div class="pt-1">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
<p class="text-gray-700"></p>
<p class="text-gray-600 dark:text-slate-400"></p>
</div>
</div>
</div>