From 20b7851aca47525955f151fb39ab485abe5bb140 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:06:27 +0100
Subject: Relativises stuff to relative rem
---
public/css/variables/spacing.css | 43 ++++++++++++++++++++++++----------
public/css/variables/spacing.lg.css | 6 ++---
public/css/variables/spacing.md.css | 6 ++---
public/css/variables/typography.css | 15 ++++++------
public/css/variables/typography.lg.css | 3 +++
public/css/variables/typography.md.css | 3 +++
src/pages/[locale]/index.astro | 2 +-
7 files changed, 51 insertions(+), 27 deletions(-)
create mode 100644 public/css/variables/typography.lg.css
create mode 100644 public/css/variables/typography.md.css
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index f57c86c..c9dc726 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -1,18 +1,35 @@
:root {
- --margin-inline-md: 1.5rem;
- --margin-block-lg: 3rem;
- --margin-block-md: 2rem;
- --margin-block-sm: 1rem;
+ --margin-inline-md: calc(8 * var(--spacing-relative-eighth-rem));
+ --margin-block-lg: calc(16 * var(--spacing-relative-eighth-rem));
+ --margin-block-md: calc(10 * var(--spacing-relative-eighth-rem));
+ --margin-block-sm: calc(5 * var(--spacing-relative-eighth-rem));
- --padding-inline-lg: 4.25rem;
- --padding-inline-md: 2.25rem;
- --padding-inline-sm: 0.5rem;
- --padding-block-lg: 2.5rem;
- --padding-block-md: 1.5rem;
- --padding-block-sm: 0.5rem;
+ --padding-inline-lg: calc(22 * var(--spacing-relative-eighth-rem));
+ --padding-inline-md: calc(12 * var(--spacing-relative-eighth-rem));
+ --padding-inline-sm: calc(3 * var(--spacing-relative-eighth-rem));
+ --padding-block-lg: calc(12 * var(--spacing-relative-eighth-rem));
+ --padding-block-md: calc(8 * var(--spacing-relative-eighth-rem));
+ --padding-block-sm: calc(5 * var(--spacing-relative-eighth-rem));
- --grid-padding-start: 2.25rem;
- --grid-column-width: 6rem;
- --grid-gutter-width: 0.5rem;
+ --grid-padding-start: calc(var(--grid-padding-start-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+ --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+ --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+
+ --grid-total-relative-eighth-rem-width: calc(
+ var(--grid-padding-start-relative-eighth-rem) * 2 +
+ var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) +
+ var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1)
+ );
+ --spacing-relative-eighth-rem: calc(
+ var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
+ );
+
+ --grid-column-width-relative-eighth-rem: 32;
+ --grid-gutter-width-relative-eighth-rem: 4;
+
+ /* small screens */
+
+ --grid-total-width: 30rem;
+ --grid-padding-start-relative-eighth-rem: 12;
--grid-column-count: 4;
}
diff --git a/public/css/variables/spacing.lg.css b/public/css/variables/spacing.lg.css
index 36b5023..f7a3cea 100644
--- a/public/css/variables/spacing.lg.css
+++ b/public/css/variables/spacing.lg.css
@@ -1,5 +1,5 @@
:root {
- --grid-column-count: 9;
- --grid-column-width: 5.5rem;
- --grid-padding-start: 5.25rem;
+ --grid-total-width: 64rem;
+ --grid-padding-start-relative-eighth-rem: 20;
+ --grid-column-count: 12;
}
\ No newline at end of file
diff --git a/public/css/variables/spacing.md.css b/public/css/variables/spacing.md.css
index 74b1328..814b662 100644
--- a/public/css/variables/spacing.md.css
+++ b/public/css/variables/spacing.md.css
@@ -1,5 +1,5 @@
:root {
- --grid-column-count: 7;
- --grid-column-width: 5.5rem;
- --grid-padding-start: 3.25rem;
+ --grid-total-width: 48rem;
+ --grid-padding-start-relative-eighth-rem: 16;
+ --grid-column-count: 8;
}
\ No newline at end of file
diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css
index 04802e8..10e3126 100644
--- a/public/css/variables/typography.css
+++ b/public/css/variables/typography.css
@@ -1,11 +1,12 @@
:root {
- --font-size-0: 0.875rem;
- --font-size-1: 1.125rem;
- --font-size-2: 1.500rem;
- --font-size-3: 2.000rem;
- --font-size-4: 2.667rem;
- --font-size-5: 3.375rem;
- --font-size-6: 4.000rem;
+ --font-size-relative-px: 0.067rem;
+ --font-size-0: calc(14 * var(--font-size-relative-px));
+ --font-size-1: calc(18 * var(--font-size-relative-px));
+ --font-size-2: calc(24 * var(--font-size-relative-px));
+ --font-size-3: calc(32 * var(--font-size-relative-px));
+ --font-size-4: calc(40 * var(--font-size-relative-px));
+ --font-size-5: calc(52 * var(--font-size-relative-px));
+ --font-size-6: calc(64 * var(--font-size-relative-px));
--font-serif: Alegreya, 'Goudy Old Style', Garamond, serif;
--font-sans-serif: 'Alegreya Sans', Lato, Calibri, 'sans-serif';
diff --git a/public/css/variables/typography.lg.css b/public/css/variables/typography.lg.css
new file mode 100644
index 0000000..6d1dfec
--- /dev/null
+++ b/public/css/variables/typography.lg.css
@@ -0,0 +1,3 @@
+:root {
+ --font-size-relative-px: 0.09375rem;
+}
\ No newline at end of file
diff --git a/public/css/variables/typography.md.css b/public/css/variables/typography.md.css
new file mode 100644
index 0000000..ac94095
--- /dev/null
+++ b/public/css/variables/typography.md.css
@@ -0,0 +1,3 @@
+:root {
+ --font-size-relative-px: 0.08333rem;
+}
\ No newline at end of file
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index e5e6040..f6d7cdb 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -23,7 +23,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
{
mostRecentNewsItem && (
-