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

Minimal design updates

Browse Source
This commit is contained in:
prototypa
2022-11-23 10:33:37 -05:00
parent 4f14b16e34
commit 82ea86a2ea
10 changed files with 293 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/hero.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 KiB

After

Width:  |  Height:  |  Size: 599 KiB

8
src/assets/styles/base.css
View File

@ -4,11 +4,15 @@
@layer components {
.btn {
@apply inline-flex items-center justify-center rounded border-gray-400 border font-semibold text-center text-base text-gray-700 leading-snug transition py-3 px-6 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
@apply inline-flex items-center justify-center rounded-md shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
}
.btn-ghost {
@apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
}
.btn-primary {
@apply bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
@apply font-semibold bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
}
}

2
src/components/atoms/Logo.astro
View File

@ -1,6 +1,6 @@
---
---
<span class="self-center ml-2 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
<span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
🚀 AstroWind</span
>

4
src/components/atoms/Pagination.astro
View File

@ -10,7 +10,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
<div class="flex flex-row mx-auto container justify-between">
<a
href={getRelativeLink(prevUrl)}
class={`btn px-3 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white border-none mr-2
class={`btn btn-ghost px-3 mr-2
${!prevUrl ? 'invisible' : ''}`}
>
<div class="flex flex-row align-middle">
@ -20,7 +20,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
</a>
<a
href={getRelativeLink(nextUrl)}
class={`btn px-3 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white border-none ${
class={`btn btn-ghost px-3 ${
!nextUrl ? 'invisible' : ''
}`}
>

4
src/components/widgets/Banner.astro → src/components/widgets/Announcement.astro
View File

@ -3,12 +3,12 @@ import { getPermalink } from '~/utils/permalinks';
---
<div
class="hidden md:block bg-primary-50 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
class="hidden md:block bg-primary-100 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
>
<span class="text-xs py-0.5 px-1 bg-primary-200 dark:bg-slate-600 font-semibold">NEW</span>
<a
href={getPermalink('get-started-website-with-astro-tailwind-css', 'post')}
class="underline underline-offset-2 decoration-1 decoration-dotted"
class="hover:underline text-gray-700 dark:text-slate-400"
>Get started with AstroWind to create a website using Astro and Tailwind CSS »</a
>
<a

4
src/components/widgets/Features.astro
View File

@ -47,10 +47,10 @@ const items = [
<section class="scroll-mt-16 border-t border-gray-200 dark:border-slate-800" id="features">
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<div class="mb-10 md:mx-auto sm:text-center md:mb-12">
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
What's interesting about <span class="whitespace-nowrap">AstroWind</span>
What you get with <span class="whitespace-nowrap underline decoration-wavy decoration-2 decoration-primary-600 underline-offset-[3px]">AstroWind</span>
</h2>
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa

2
src/components/widgets/Header.astro
View File

@ -22,7 +22,7 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } fro
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-100px)] md:h-auto overflow-y-auto"
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-100px)] md:h-auto overflow-y-auto md:overflow-visible"
aria-label="Main navigation"
>
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">

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

@ -17,13 +17,13 @@ import Picture from '~/components/core/Picture.astro';
</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">AstroWind</span> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It has been
<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>
<div class="max-w-sm m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="max-w-xs sm:max-w-md 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 btn-primary sm:mb-0 w-full"
@ -47,7 +47,7 @@ import Picture from '~/components/core/Picture.astro';
<div class="relative m-auto max-w-4xl">
<Picture
src={import('~/assets/images/hero.jpg')}
class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700 w-full"
class="mx-auto rounded-md w-full"
widths={[400, 768, 1480]}
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
alt="Hero Image"

274
src/components/widgets/Pricing.astro Normal file
View File

@ -0,0 +1,274 @@
---
---
<!-- Pricing -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">
Whatever your status, our offers evolve according to your needs.
</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
<p class="mt-2 text-sm text-gray-500">Forever free</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
<p class="mb-3">
<span
class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
>Most popular</span
>
</p>
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
39
</span>
<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
89
</span>
<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
149
</span>
<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Pricing -->

4
src/layouts/PageLayout.astro
View File

@ -2,13 +2,13 @@
import Layout from '~/layouts/BaseLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Footer from '~/components/widgets/Footer.astro';
import Banner from '~/components/widgets/Banner.astro';
import Announcement from '~/components/widgets/Announcement.astro';
const { meta } = Astro.props;
---
<Layout {meta}>
<Banner />
<Announcement />
<Header />
<main>
<slot />