fix the main buttons on mobile

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

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -1,11 +1,11 @@
 ---
-const { link, style } = Astro.props;
+const { link, style, solidWidth } = 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' : ''}`;
+const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : ''} ${solidWidth === 'true' ? 'is-solid-width' : ''}`;
 ---
 
 <a href={url} class={classList}>
-    <slot name="pre-icon"></slot>
+    <slot name="pre-icon">{solidWidth === 'true' ? <span></span> : ''}</slot>
     <span class="content"><slot /></span>
     <slot name="post-icon" />
 </a>
@@ -30,6 +30,9 @@ const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : '
     a.has-post-icon {
         grid-template-columns: 1fr 1.75rem;
     }
+    a.is-solid-width {
+        grid-template-columns: 1.75rem 7rem 1.75rem;
+    }
     a:hover {
         @apply
             bg-tertiary-light

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -43,11 +43,11 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
         <div class="h-8" />
 
         <ButtonRow reverseOnMobile="true">
-            <Button link="#content">
+            <Button link="#content" solidWidth="true">
                 <ArrowDownIcon slot="pre-icon" />
                 About
             </Button>
-            <Button link="/install" style="alt">
+            <Button link="/install" style="alt" solidWidth="true">
                 <ArrowRightIcon slot="post-icon" />
                 Install
             </Button>