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

Reorganize duplicated tailwind code and formatting

Browse Source
This commit is contained in:
prototypa
2022-08-27 01:52:23 -04:00
parent ca01eecc24
commit 212331215b
28 changed files with 424 additions and 950 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/widgets/Hero.astro
View File

@ -1,23 +1,19 @@
---
import Picture from "~/components/core/Picture.astro";
const {} = Astro.props;
const { } = Astro.props;
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="text-center pb-12 md:pb-16">
<h1
class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4"
>
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4">
Your website with
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
>Astro
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro
</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
>Tailwind CSS
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap">Tailwind
CSS
</span>
</h1>
<div class="max-w-3xl mx-auto">
@ -29,19 +25,13 @@ const {} = Astro.props;
</p>
<div class="max-w-none flex justify-center">
<div>
<a
class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>Get template
<a class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">Get template
</a>
</div>
<div>
<a
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
href="#features"
>Learn more
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
href="#features">Learn more
</a>
</div>
</div>
@ -50,17 +40,12 @@ const {} = Astro.props;
<div>
<div class="relative flex justify-center mb-8">
<div class="flex flex-col justify-center">
<Picture
src={import("~/assets/images/hero.jpg")}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px"
alt="Hero Image"
aspectRatio="16:9"
/>
<Picture src={import("~/assets/images/hero.jpg")}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px" alt="Hero Image" aspectRatio="16:9" />
</div>
</div>
</div>
</div>
</div>
</section>
</section>