parallax scrolling + improve button padding

HJfod · Mar 4, 2024 · 434ef16 · 434ef16
1 parent 62a68bb
commit 434ef16
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/components/Background.astro b/src/components/Background.astro
@@ -6,9 +6,20 @@ import wallpaper from '../images/wallpaper.png';
 <div class="fixed w-full h-full overflow-hidden -z-10">
     <Image
         src={wallpaper} alt="Background wallpaper"
+        class="parallax"
     />
 </div>
 
+<script>
+    function update() {
+        document.querySelectorAll('.parallax').forEach(p => {
+            (p as HTMLElement).style.objectPosition = `0px -${window.scrollY * 0.1}px`;
+        });
+    }
+    document.addEventListener('scroll', () => update());
+    update();
+</script>
+
 <style>
     img {
         mask-image: linear-gradient(theme(colors.wallpaper.darkest), 10%, transparent);

diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -1,11 +1,12 @@
 ---
 const { link, style } = Astro.props;
 const url = link.startsWith('https') || link.startsWith('#') ? link : `${import.meta.env.BASE_URL}${link}`;
+const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : ''}`;
 ---
 
-<a href={url} class={style}>
-    <slot name="pre-icon"><span></span></slot>
-    <slot />
+<a href={url} class={classList}>
+    <slot name="pre-icon"></slot>
+    <span class="content"><slot /></span>
     <slot name="post-icon" />
 </a>
 
@@ -17,11 +18,17 @@ const url = link.startsWith('https') || link.startsWith('#') ? link : `${import.
             border-accent-lightest border-opacity-50 border-solid border-2 rounded-full
             sm:text-xl max-sm:text-lg
             sm:p-4 max-sm:p-3
-            sm:min-w-52 max-sm:min-w-44
-            gap-8
+            min-w-44
             transition-colors;
 
-        grid-template-columns: 1.75rem 1fr 1.75rem;
+        grid-template-columns: 1.75rem 1fr;
+    }
+    a > .content {
+        @apply
+            px-4;
+    }
+    a.has-post-icon {
+        grid-template-columns: 1fr 1.75rem;
     }
     a:hover {
         @apply

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -47,7 +47,6 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
                 <ArrowDownIcon slot="pre-icon" />
                 About
             </Button>
-
             <Button link="/install" style="alt">
                 <ArrowRightIcon slot="post-icon" />
                 Install