7 files changed, 51 insertions, 27 deletions
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);
     <NewsIndex newsItems={mostRecentNewsItem ? [mostRecentNewsItem] : []} headingLevel="h3" />
     {
       mostRecentNewsItem && (
-        <div class="grid-span-2 grid-end margin-block-start-sm">
+        <div class="grid-span-3 grid-end margin-block-start-sm">
           <a href={`/${locale}/news`} class="btn">
             {t(tPage, { key: 'aw-news' })} ▷
           </a>