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

Fix minimal details

Browse Source
This commit is contained in:
prototypa
2022-09-04 00:56:24 -04:00
parent 570cf904c4
commit 1cf25d6b43
44 changed files with 757 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/widgets/StepsLeft.astro
View File

@ -2,89 +2,77 @@
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
const { } = Astro.props;
const {} = Astro.props;
---
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
<div class="md:pb-6 md:pr-16">
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum.
hac.
Sed ac magna sit amet risus tristique interdum. hac.
</h2>
<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-pink-500 border-2">
<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 1
</p>
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</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. Praesent placerat enim ut ex tincidunt
vehicula. Fusce sit amet dui tellus.
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.
</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-pink-500 border-2">
<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 2
</p>
<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.
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-pink-500 border-2">
<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 class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</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.
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-blue-600 border-2">
<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" />
</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="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
<p class="text-gray-700"></p>
</div>
</div>
@ -92,8 +80,12 @@ const { } = Astro.props;
<div class="relative">
<Picture
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
src={import("~/assets/images/astronaut.jpg")} widths={[400, 768]} sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut" aspectRatio="432:768" />
src={import("~/assets/images/astronaut.jpg")}
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut"
aspectRatio="432:768"
/>
</div>
</div>
</section>
</section>