Better Back To Top link layout

6 files changed, 55 insertions, 33 deletions

diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
index b4bc240..0b90b98 100644
--- a/public/css/layout/grid.css
+++ b/public/css/layout/grid.css
@@ -16,6 +16,10 @@
   width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
 }
 
+.grid-span-3 {
+  width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
+}
+
 .grid-span-6 {
   width: calc(
     var(--grid-column-width) * min(6, var(--grid-column-count)) +
@@ -30,7 +34,26 @@
   )
 }
 
-.grid-end-end {
-  margin-inline-start: auto;
+.grid-span-1.grid-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-column-count) - 1) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-2.grid-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-column-count) - 2) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 2)
+  );
+  margin-inline-end: 0;
+}
+
+.grid-span-3.grid-end {
+  margin-inline-start: calc(
+    var(--grid-column-width) * (var(--grid-column-count) - 3) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 3)
+  );
   margin-inline-end: 0;
 }
\ No newline at end of file
diff --git a/public/css/modules/back-to-top.css b/public/css/modules/back-to-top.css
deleted file mode 100644
index 038f67b..0000000
--- a/public/css/modules/back-to-top.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.back-to-top {
-  width: fit-content;
-  margin-inline-start: auto;
-}
\ No newline at end of file
diff --git a/public/css/modules/btn.css b/public/css/modules/btn.css
index 1df9f5a..a928efe 100644
--- a/public/css/modules/btn.css
+++ b/public/css/modules/btn.css
@@ -1,22 +1,24 @@
 .btn {
-    color: var(--text-color);
-    border: solid 2px var(--text-color);
-    font-weight: 500;
-    text-decoration: underline;
-    padding-inline: 0.5rem;
-    padding-block: 0.25rem;
-    background-color: transparent;
-    transition:
-      background-color 300ms,
-      text-decoration-color 300ms,
-      transform 50ms;
-  }
-  
-  .btn:hover {
-    background-color: var(--background-highlight-color);
-    text-decoration-color: transparent;
-  }
-  
-  .btn:active {
-    transform: scale(1.1, 1.1);
-  }
\ No newline at end of file
+  display: block;
+  box-sizing: border-box;
+  color: var(--text-color);
+  border: solid 2px var(--text-color);
+  font-weight: 500;
+  text-align: center;
+  padding-inline: var(--padding-inline-md);
+  padding-block: var(--padding-block-sm);
+  background-color: transparent;
+  transition:
+    background-color 300ms,
+    text-decoration-color 300ms,
+    transform 50ms;
+}
+
+.btn:hover {
+  background-color: var(--background-highlight-color);
+  text-decoration-color: transparent;
+}
+
+.btn:active {
+  transform: scale(1.1, 1.1);
+}
\ No newline at end of file
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index 48d3cae..f57c86c 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -9,7 +9,7 @@
   --padding-inline-sm: 0.5rem;
   --padding-block-lg: 2.5rem;
   --padding-block-md: 1.5rem;
-  --padding-block-sm: 0.25rem;
+  --padding-block-sm: 0.5rem;
 
   --grid-padding-start: 2.25rem;
   --grid-column-width: 6rem;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f1ee19c..2a5307e 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,13 +2,14 @@
 import translate from '$i18n/translate';
 import tSite from '$i18n/translations/site';
 import getLocaleFromPath from '$lib/getLocaleFromPath';
+import Button from './Button.astro';
 
 const locale = getLocaleFromPath(Astro.url.pathname);
 const t = translate(locale);
 ---
 
 <footer>
-  <p class="back-to-top">
-    <a class="btn" href="#top">▴ {t(tSite, { key: 'back-to-top' })}</a>
-  </p>
+  <Button layoutClasses="grid-span-3 grid-end" href="#top">
+    ▴ {t(tSite, { key: 'back-to-top' })}
+  </Button>
 </footer>
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 82cafd4..11188a0 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -19,9 +19,9 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
 
 <Page title={t(tPage, { key: 'title' })}>
   <section>
-    <h2 set:html={t(tPage, { key: 'news' })} />
+    <h2 class="grid-span-6" set:html={t(tPage, { key: 'news' })} />
     {mostRecentNewsItem && <NewsPreviewLink headingLevel="h3" newsItem={mostRecentNewsItem} />}
-    <div class="align-end margin-block-start-sm">
+    <div class="grid-end margin-block-start-sm">
       <a href={`/${locale}/news`} class="btn">
         {t(tPage, { key: 'aw-news' })} ▷
       </a>