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

Migrate to typescript

Browse Source
This commit is contained in:
prototypa
2023-01-02 10:51:51 -05:00
parent ba0e67b55f
commit f158d32181
28 changed files with 172 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
---
import { Icon } from 'astro-icon';
import { Picture } from '@astrojs/image/components'
import { Picture } from '@astrojs/image/components';
---
<section>
@ -10,16 +10,15 @@ import { Picture } from '@astrojs/image/components'
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
Your website with
<span>Astro</span> +
<span
class="sm:whitespace-nowrap"
>Tailwind CSS</span
>
<span class="sm:whitespace-nowrap">Tailwind CSS</span>
</h1>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2">AstroWind</span> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It has been
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
class="hidden sm:inline"
<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
>AstroWind</span
> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It
has been designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span
><span class="hidden sm:inline"
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
>
</p>
@ -35,10 +34,7 @@ import { Picture } from '@astrojs/image/components'
</a>
</div>
<div class="flex w-full sm:w-auto">
<a
class="btn w-full"
href="#features">Learn more</a
>
<a class="btn w-full" href="#features">Learn more</a>
</div>
</div>
</div>
@ -51,7 +47,7 @@ import { Picture } from '@astrojs/image/components'
widths={[400, 768, 1480]}
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
alt="Hero Image"
aspectRatio={1480/833}
aspectRatio={1480 / 833}
loading="eager"
width={1480}
height={833}