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

Make dark mode work

Browse Source
This commit is contained in:
PrototypeArea
2022-06-26 23:30:16 -04:00
parent 82fe2a0ce7
commit 72b929f38e
10 changed files with 7154 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -17,6 +17,4 @@ pnpm-debug.log*
.env.production .env.production
# macOS-specific files # macOS-specific files
.DS_Store .DS_Store
package-lock.json

6
astro.config.mjs
View File

@ -1,5 +1,4 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
@ -7,10 +6,11 @@ import sitemap from "@astrojs/sitemap";
export default defineConfig({ export default defineConfig({
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build // Astro uses this full URL to generate your sitemap and canonical URLs in your final build
site: "https://tailwind-astro.vercel.app", site: "https://tailwind-astro.vercel.app",
integrations: [ integrations: [
tailwind({ tailwind({
config: { applyBaseStyles: false }, config: {
applyBaseStyles: false,
},
}), }),
sitemap({}), sitemap({}),
], ],

6989
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
src/components/astro/ctas/BasicCTA.astro
View File

@ -1,4 +1,5 @@
--- ---
const { } = Astro.props;
--- ---
<section class="relative"> <section class="relative">
@ -6,7 +7,7 @@
<div class="py-12 md:py-20"> <div class="py-12 md:py-20">
<div class="max-w-3xl mx-auto text-center pb-12"> <div class="max-w-3xl mx-auto text-center pb-12">
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Astro + Tailwind CSS</h2> <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Astro + Tailwind CSS</h2>
<p class="text-xl text-gray-600 ">Arcu cursus vitae congue mauris <p class="text-xl text-gray-600 dark:text-slate-400">Arcu cursus vitae congue mauris
rhoncus viverra nibh cras pulvinar mattis blandit libero cursus mattis.</p> rhoncus viverra nibh cras pulvinar mattis blandit libero cursus mattis.</p>
</div> </div>
</div> </div>

27
src/components/astro/features/BasicFeatures.astro
View File

@ -1,4 +1,5 @@
--- ---
const { } = Astro.props;
--- ---
<section class="relative"> <section class="relative">
@ -11,12 +12,12 @@
</p> </p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"> <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
Most used Sections Most used Sections
</h2><p class="max-w-3xl mx-auto text-center text-xl text-gray-600">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </h2><p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p> dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p>
</div> </div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"> <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
<div class="flex items-center mb-6"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
@ -31,12 +32,12 @@
Headers Headers
</div> </div>
</div> </div>
<p class="text-gray-500 dark:text-gray-200 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p> </p>
</div> </div>
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
<div class="flex items-center mb-6"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
@ -52,12 +53,12 @@
Footers Footers
</div> </div>
</div> </div>
<p class="text-gray-500 dark:text-gray-200 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p> </p>
</div> </div>
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
<div class="flex items-center mb-6"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
@ -72,12 +73,12 @@
Features Features
</div> </div>
</div> </div>
<p class="text-gray-500 dark:text-gray-200 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p> </p>
</div> </div>
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
<div class="flex items-center mb-6"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
@ -93,12 +94,12 @@
Call-to-Action Call-to-Action
</div> </div>
</div> </div>
<p class="text-gray-500 dark:text-gray-200 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p> </p>
</div> </div>
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
<div class="flex items-center mb-6"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
@ -113,12 +114,12 @@
Pricing Pricing
</div> </div>
</div> </div>
<p class="text-gray-500 dark:text-gray-200 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p> </p>
</div> </div>
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
<div class="flex items-center mb-6"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
@ -133,7 +134,7 @@
Testimonial Testimonial
</div> </div>
</div> </div>
<p class="text-gray-500 dark:text-gray-200 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p> </p>
</div> </div>

17
src/components/astro/features/StepsFeatures.astro
View File

@ -1,4 +1,5 @@
--- ---
const { } = Astro.props;
--- ---
<section> <section>
@ -9,10 +10,10 @@
<div class="flex flex-wrap -mx-8"> <div class="flex flex-wrap -mx-8">
<div class="w-full lg:w-1/2 px-8"> <div class="w-full lg:w-1/2 px-8">
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0"> <div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading dark:text-white"> <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst. Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
</h2> </h2>
<p class="mb-8 text-xl text-gray-600 dark:text-gray-300"> <p class="mb-8 text-xl text-gray-600 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi 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. risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
Fusce sit amet dui tellus. Fusce sit amet dui tellus.
@ -33,10 +34,10 @@
</span> </span>
</div> </div>
<div class="px-4"> <div class="px-4">
<h3 class="my-4 text-xl font-semibold dark:text-white"> <h3 class="my-4 text-xl font-semibold">
Responsive Elements Responsive Elements
</h3> </h3>
<p class="text-gray-500 dark:text-gray-300 "> <p class="text-gray-500 dark:text-gray-400 ">
All elements are responsive and provide the best display in all screen size. It's magic ! All elements are responsive and provide the best display in all screen size. It's magic !
</p> </p>
</div> </div>
@ -48,10 +49,10 @@
</span> </span>
</div> </div>
<div class="px-4"> <div class="px-4">
<h3 class="my-4 text-xl font-semibold dark:text-white"> <h3 class="my-4 text-xl font-semibold">
Flexible Team Flexible Team
</h3> </h3>
<p class="text-gray-500 dark:text-gray-300"> <p class="text-gray-500 dark:text-gray-400">
Flexibility is the key. All team is available 24/24 and joinable every day on our hotline. Flexibility is the key. All team is available 24/24 and joinable every day on our hotline.
</p> </p>
</div> </div>
@ -63,10 +64,10 @@
</span> </span>
</div> </div>
<div class="px-4"> <div class="px-4">
<h3 class="my-4 text-xl font-semibold dark:text-white"> <h3 class="my-4 text-xl font-semibold">
Ecologic Software Ecologic Software
</h3> </h3>
<p class="text-gray-500 dark:text-gray-300"> <p class="text-gray-500 dark:text-gray-400">
Our Software are ecologic and responsable. Green is not just a color, it's a way of life. Our Software are ecologic and responsable. Green is not just a color, it's a way of life.
</p> </p>
</div> </div>

134
src/components/astro/footers/BasicFooter.astro
View File

@ -4,62 +4,82 @@
<footer> <footer>
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200"> <div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
<div class="sm:col-span-12 lg:col-span-3"> <div class="sm:col-span-12 lg:col-span-3">
<div class="mb-2"><a class="inline-block font-bold" aria-label="Tailwind Astro" href="/">AstroWind</a></div> <div class="mb-2"><a class="inline-block font-bold" aria-label="Tailwind Astro" href="/">AstroWind</a></div>
<div class="text-sm text-gray-600"><a <div class="text-sm text-gray-600">
class="text-gray-600 hover:text-gray-900 hover:underline transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 hover:underline transition duration-150 ease-in-out"
href="/">Terms</a> · <a href="/">Terms</a> ·
class="text-gray-600 hover:text-gray-900 hover:underline transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 hover:underline transition duration-150 ease-in-out"
href="/">Privacy Policy</a></div> href="/">Privacy Policy</a>
</div>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-gray-800 font-medium mb-2">Products</h6> <h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Products</h6>
<ul class="text-sm"> <ul class="text-sm">
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" href="/">Web <li class="mb-2">
Studio</a></li> <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Web
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" Studio</a>
href="/">DynamicBox Flex</a></li> </li>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <li class="mb-2">
href="/">Programming Forms</a></li> <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">DynamicBox
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" Flex</a>
href="/">Integrations</a></li> </li>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <li class="mb-2">
href="/">Command-line</a></li> <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Programming
Forms</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Integrations</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Command-line</a>
</li>
</ul> </ul>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-gray-800 font-medium mb-2">Resources</h6> <h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Resources</h6>
<ul class="text-sm"> <ul class="text-sm">
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <li class="mb-2">
href="/">Documentation</a></li> <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Documentation</a>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" </li>
href="/">Tutorials &amp; Guides</a></li> <li class="mb-2">
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Tutorials &amp;
href="/">Blog</a></li> Guides</a>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" </li>
href="/">Support Center</a></li> <li class="mb-2">
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Blog</a>
href="/">Partners</a></li> </li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Support Center</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Partners</a>
</li>
</ul> </ul>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-gray-800 font-medium mb-2">Company</h6> <h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Company</h6>
<ul class="text-sm"> <ul class="text-sm">
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <li class="mb-2">
href="/">Home</a></li> <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Home</a>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" </li>
href="/">About us</a></li> <li class="mb-2">
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">About us</a>
href="/">Company values</a></li> </li>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" <li class="mb-2">
href="/">Pricing</a></li> <a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Company values</a>
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" </li>
href="/">Privacy Policy</a></li> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Pricing</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Privacy Policy</a>
</li>
</ul> </ul>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-3"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
<h6 class="text-gray-800 font-medium mb-2">Subscribe</h6> <h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Subscribe</h6>
<p class="text-sm text-gray-600 mb-4">Get the latest news and articles to your inbox every month.</p> <p class="text-sm text-gray-600 mb-4">Get the latest news and articles to your inbox every month.</p>
<form> <form>
<div class="flex flex-wrap mb-4"> <div class="flex flex-wrap mb-4">
@ -67,10 +87,11 @@
<label class="block text-sm sr-only" for="newsletter">Email</label> <label class="block text-sm sr-only" for="newsletter">Email</label>
<div class="relative flex items-center max-w-xs"> <div class="relative flex items-center max-w-xs">
<input id="newsletter" type="email" <input id="newsletter" type="email"
class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-slate-900" class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-slate-900 dark:border-slate-600"
placeholder="Your email"> placeholder="Your email">
<button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe"> <button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe">
<span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300" aria-hidden="true"></span> <span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
aria-hidden="true"></span>
<svg class="w-3 h-3 fill-current text-blue-600 mx-3 flex-shrink-0" viewBox="0 0 12 12" <svg class="w-3 h-3 fill-current text-blue-600 mx-3 flex-shrink-0" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
@ -85,33 +106,40 @@
</div> </div>
<div class="md:flex md:items-center md:justify-between py-4 md:py-8"> <div class="md:flex md:items-center md:justify-between py-4 md:py-8">
<ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0"> <ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0">
<li><a <li>
class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out" <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
aria-label="Twitter" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" aria-label="Twitter" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
d="M24 11.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H8c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z"> d="M24 11.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H8c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z">
</path> </path>
</svg></a></li> </svg>
<li class="ml-4"><a </a>
class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out" </li>
<li class="ml-4">
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
aria-label="Github" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" aria-label="Github" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"> d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z">
</path> </path>
</svg></a></li> </svg>
<li class="ml-4"><a </a>
class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out" </li>
<li class="ml-4">
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
aria-label="Facebook" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" aria-label="Facebook" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
d="M14.023 24L14 17h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V14H21l-1 3h-2.72v7h-3.257z"> d="M14.023 24L14 17h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V14H21l-1 3h-2.72v7h-3.257z">
</path> </path>
</svg></a></li> </svg>
</a>
</li>
</ul> </ul>
<div class="text-sm text-gray-600 mr-4">Made by <a class="text-blue-600 hover:underline" <div class="text-sm text-gray-600 mr-4 dark:text-slate-500">
href="https://onwidget.com/">onWidget</a>. All rights reserved.</div> Made by <a class="text-blue-600 hover:underline" href="https://onwidget.com/">onWidget</a>. All rights reserved.
</div>
</div> </div>
</div> </div>
</footer> </footer>

45
src/components/astro/headers/BasicHeader.astro
View File

@ -2,20 +2,27 @@
const { } = Astro.props; const { } = Astro.props;
--- ---
<header class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-gray-900 backdrop-blur-sm border-b dark:border-b-0"> <header
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-gray-900 backdrop-blur-sm border-b dark:border-b-0">
<div class="py-3 px-3 mx-auto w-full lg:flex lg:justify-between max-w-6xl lg:px-4"> <div class="py-3 px-3 mx-auto w-full lg:flex lg:justify-between max-w-6xl lg:px-4">
<div class="flex justify-between"> <div class="flex justify-between">
<a class="flex items-center" href="/"> <a class="flex items-center" href="/">
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind</span> <span
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind</span>
</a> </a>
<div class="flex items-center lg:hidden"> <div class="flex items-center lg:hidden">
<button type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"> <button type="button"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5"> class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg> </svg>
</button> </button>
<button class="ml-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="w-6 h-6"> <button
class="ml-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"><svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
aria-hidden="true" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> </svg>
</button> </button>
@ -24,28 +31,38 @@
<div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200"> <div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200">
<ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed"> <ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed">
<li> <li>
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" href="#">Products</a> <a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="#">Products</a>
</li> </li>
<li> <li>
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" href="#">Docs</a> <a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="#">Docs</a>
</li> </li>
<li> <li>
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" href="#">Resources</a> <a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="#">Resources</a>
</li> </li>
</ul> </ul>
<div class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed"> <div class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed">
<div class="hidden items-center mr-3 lg:flex"> <div class="hidden items-center mr-3 lg:flex">
<button type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5"> <button type="button"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
onclick="window.toggleDarkMode()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg> </svg>
</button> </button>
<a href="https://github.com/onwidget/astrowind" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"> <a href="https://github.com/onwidget/astrowind"
<svg class="w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"> class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1">
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"> <svg class="w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
</path> </path>
</svg> </svg>
</a> </a>
<!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center ml-3 btn-sm" href="/login/">Get started <!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center ml-3 btn-sm" href="/login/">Get started
</a> --> </a> -->
</div> </div>

31
src/components/astro/hero/HeroWithImage.astro
View File

@ -1,31 +1,38 @@
--- ---
const { } = Astro.props;
--- ---
<section class="relative"> <section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="pt-32 pb-12 md:pt-40 md:pb-20"> <div class="pt-32 pb-12 md:pt-40 md:pb-20">
<div class="text-center pb-12 md:pb-16"> <div class="text-center pb-12 md:pb-16">
<h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 ">Your <h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 ">
website with <span Your website with
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> + <span <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">Tailwind</span> <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Tailwind</span>
</h1> </h1>
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 ">Lorem ipsum dolor sit amet, consectetur <p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center "> <div class="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center ">
<div><a class="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Get <div>
started</a></div> <a class="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Get
<div><a class="btn text-white bg-gray-900 hover:bg-gray-800 w-full sm:w-auto sm:ml-4" href="#0">Learn started</a>
more</a></div> </div>
<div>
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 w-full sm:w-auto sm:ml-4"
href="#0">Learn more</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="relative flex justify-center mb-8 "> <div class="relative flex justify-center mb-8 ">
<div class="flex flex-col justify-center"><img class="mx-auto rounded-md" src="/images/hero-astro.jpg" <div class="flex flex-col justify-center">
width="768" height="432" alt="Hero"> <img class="mx-auto rounded-md" src="/images/hero-astro.jpg" width="768" height="432" alt="Hero">
</div> </div>
</div> </div>
</div> </div>

41
src/layouts/Layout.astro
View File

@ -21,7 +21,7 @@
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">
</head> </head>
<body class="antialiased text-gray-900 dark:text-slate-400 tracking-tight bg-white dark:bg-slate-900"> <body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
<Header /> <Header />
<slot /> <slot />
<Footer /> <Footer />
@ -30,33 +30,12 @@
</html> </html>
<style> <style>
:root { :root {}
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-text: hsl(12, 5%, 4%);
--color-bg: #fff;
--color-border: hsl(17, 24%, 90%);
--astro-gradient: linear-gradient(0deg, #4F39FA, #DA62C4);
}
:global(body) { :global(body) {
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
} }
:global(.text-gradient) {
font-weight: 900;
background-image: var(--astro-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
animation: pulse 4s ease-in-out infinite;
}
:global(.btn, .btn-sm) { :global(.btn, .btn-sm) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -76,4 +55,18 @@
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
</style> </style>
<script is:inline>
function toggleDarkMode() {
document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
}
window.toggleDarkMode = toggleDarkMode
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>