From ac3666f65bd81f48c8d88099310070eeff46fbd7 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Sat, 19 Aug 2023 21:56:32 +0100
Subject: Better Back To Top link layout
---
public/css/layout/grid.css | 27 +++++++++++++++++++++--
public/css/modules/back-to-top.css | 4 ----
public/css/modules/btn.css | 44 ++++++++++++++++++++------------------
public/css/variables/spacing.css | 2 +-
src/components/Footer.astro | 7 +++---
src/pages/[locale]/index.astro | 4 ++--
6 files changed, 55 insertions(+), 33 deletions(-)
delete mode 100644 public/css/modules/back-to-top.css
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);
---
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);
-
+
{mostRecentNewsItem && }
-