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

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

@ -9,24 +9,24 @@ import Picture from '~/components/core/Picture.astro';
<div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
Your website with
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
<span>Astro</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
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">
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
<span class="font-semibold">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>
<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="max-w-sm m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="flex w-full sm:w-auto">
<a
class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
class="btn btn-primary sm:mb-0 w-full"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
@ -36,7 +36,7 @@ import Picture from '~/components/core/Picture.astro';
</div>
<div class="flex w-full sm:w-auto">
<a
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
class="btn w-full"
href="#features">Learn more</a
>
</div>
@ -44,12 +44,12 @@ import Picture from '~/components/core/Picture.astro';
</div>
</div>
<div>
<div class="relative mb-8 m-auto max-w-3xl">
<div class="relative m-auto max-w-4xl">
<Picture
src={import('~/assets/images/hero.jpg')}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700 w-full"
widths={[400, 768, 1480]}
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
alt="Hero Image"
aspectRatio="16:9"
loading="eager"