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

Smooth scroll behavior

Browse Source
This commit is contained in:
prototypa
2022-08-26 18:16:36 -04:00
parent b67eca0cc9
commit 44a0607d4d
3 changed files with 262 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,7 @@ const {} = Astro.props;
<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="#"
href="#features"
>Learn more
</a>
</div>

218
src/components/widgets/TwoColsFeatures.astro
View File

@ -2,31 +2,59 @@
const {} = Astro.props;
---
<section class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800">
<section class="scroll-mt-16" id="features">
<div
class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800"
>
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Features</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
<p
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
>
Features
</p>
<h2
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
>
What's interesting about <span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
>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
quae.
<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 quae.
</p>
</div>
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
<div class="space-y-8 sm:px-8">
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -34,22 +62,41 @@ const {} = Astro.props;
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">Integration with Tailwind CSS</h3>
<h3 class="mb-3 text-xl font-bold">
Integration with Tailwind CSS
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -59,20 +106,37 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -82,8 +146,8 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Best Practices</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
@ -91,13 +155,30 @@ const {} = Astro.props;
<div class="space-y-8 sm:px-8">
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -107,20 +188,37 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -130,20 +228,37 @@ const {} = Astro.props;
<div>
<h3 class="mb-3 text-xl font-bold">Frequently updated</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<div
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
>
<svg
class="w-12 h-12 p-0.5"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path
class="stroke-current text-white"
d="M20.571 20.571h13.714v17.143H20.571z"
>
</path>
<path
class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
>
</path>
</g>
</g>
@ -151,13 +266,16 @@ const {} = Astro.props;
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">Open to new ideas and contributions</h3>
<h3 class="mb-3 text-xl font-bold">
Open to new ideas and contributions
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
</p>
</div>
</div>
</div>
</div>
</div>
</section>

2
src/layouts/BaseLayout.astro
View File

@ -8,7 +8,7 @@ const { meta = {} } = Astro.props;
---
<!DOCTYPE html>
<html lang="en" class="2xl:text-[24px]">
<html lang="en" class="motion-safe:scroll-smooth 2xl:text-[24px]">
<head>
<MetaTags {...meta} />
</head>