Responsive design up to very large screens

11 files changed, 49 insertions, 29 deletions

diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
index fc7ccee..cf0e9f9 100644
--- a/public/css/layout/grid.css
+++ b/public/css/layout/grid.css
@@ -30,7 +30,7 @@
   width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
 }
 
-.grid-span-6 {
+.grid-span-prose {
   width: calc(
     var(--grid-column-width) * min(6, var(--grid-column-count)) +
     var(--grid-gutter-width) * min(5, (var(--grid-column-count) - 1))
diff --git a/public/css/layout/grid.xl.css b/public/css/layout/grid.xl.css
new file mode 100644
index 0000000..587fb2f
--- /dev/null
+++ b/public/css/layout/grid.xl.css
@@ -0,0 +1,6 @@
+.grid-span-prose {
+    width: calc(
+      var(--grid-column-width) * min(8, var(--grid-column-count)) +
+      var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1))
+    );
+  }
\ No newline at end of file
diff --git a/public/css/layout/index.css b/public/css/layout/index.css
index 0d378e0..a5af1d1 100644
--- a/public/css/layout/index.css
+++ b/public/css/layout/index.css
@@ -1,3 +1,4 @@
 @import './grid.css';
 @import './grid.md.css' (min-width: 48rem);
+@import './grid.xl.css' (min-width: 120rem);
 @import './section-margins.css';
\ No newline at end of file
diff --git a/public/css/variables/index copy.css b/public/css/variables/index copy.css
new file mode 100644
index 0000000..101552d
--- /dev/null
+++ b/public/css/variables/index copy.css
@@ -0,0 +1,8 @@
+@import 'colours.css';
+@import 'spacing.css';
+@import 'spacing.md.css' (min-width: 48rem);
+@import 'spacing.lg.css' (min-width: 64rem);
+@import 'spacing.xl.css' (min-width: 96rem);
+@import 'spacing.xxl.css' (min-width: 120rem);
+@import 'typography.css';
+@import 'layout.css';
\ No newline at end of file
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
index 44c8760..101552d 100644
--- a/public/css/variables/index.css
+++ b/public/css/variables/index.css
@@ -2,5 +2,7 @@
 @import 'spacing.css';
 @import 'spacing.md.css' (min-width: 48rem);
 @import 'spacing.lg.css' (min-width: 64rem);
+@import 'spacing.xl.css' (min-width: 96rem);
+@import 'spacing.xxl.css' (min-width: 120rem);
 @import 'typography.css';
 @import 'layout.css';
\ No newline at end of file
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index c9dc726..9a683e0 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -1,26 +1,26 @@
 :root {
-  --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));
+  --margin-inline-md: calc(8 * var(--relative-eighth-rem));
+  --margin-block-lg: calc(16 * var(--relative-eighth-rem));
+  --margin-block-md: calc(10 * var(--relative-eighth-rem));
+  --margin-block-sm: calc(5 * var(--relative-eighth-rem));
 
-  --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));
+  --padding-inline-lg: calc(22 * var(--relative-eighth-rem));
+  --padding-inline-md: calc(12 * var(--relative-eighth-rem));
+  --padding-inline-sm: calc(3 * var(--relative-eighth-rem));
+  --padding-block-lg: calc(12 * var(--relative-eighth-rem));
+  --padding-block-md: calc(8 * var(--relative-eighth-rem));
+  --padding-block-sm: calc(5 * var(--relative-eighth-rem));
 
-  --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-padding-start: calc(var(--grid-padding-start-relative-eighth-rem) * var(--relative-eighth-rem));
+  --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem));
+  --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--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(
+  --relative-eighth-rem: calc(
     var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
   );
 
diff --git a/public/css/variables/spacing.xl.css b/public/css/variables/spacing.xl.css
new file mode 100644
index 0000000..a726962
--- /dev/null
+++ b/public/css/variables/spacing.xl.css
@@ -0,0 +1,5 @@
+:root {
+  --grid-total-width: 80rem;
+  --grid-padding-start-relative-eighth-rem: 26;
+  --grid-column-count: 12;
+}
\ No newline at end of file
diff --git a/public/css/variables/spacing.xxl.css b/public/css/variables/spacing.xxl.css
new file mode 100644
index 0000000..24812ff
--- /dev/null
+++ b/public/css/variables/spacing.xxl.css
@@ -0,0 +1,5 @@
+:root {
+  --grid-total-width: 100rem;
+  --grid-padding-start-relative-eighth-rem: 32;
+  --grid-column-count: 12;
+}
\ No newline at end of file
diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css
index 10e3126..38384ce 100644
--- a/public/css/variables/typography.css
+++ b/public/css/variables/typography.css
@@ -1,12 +1,11 @@
 :root {
-  --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-size-0: calc(7 * var(--relative-eighth-rem));
+  --font-size-1: calc(9 * var(--relative-eighth-rem));
+  --font-size-2: calc(12 * var(--relative-eighth-rem));
+  --font-size-3: calc(16 * var(--relative-eighth-rem));
+  --font-size-4: calc(20 * var(--relative-eighth-rem));
+  --font-size-5: calc(26 * var(--relative-eighth-rem));
+  --font-size-6: calc(32 * var(--relative-eighth-rem));
 
   --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
deleted file mode 100644
index 6d1dfec..0000000
--- a/public/css/variables/typography.lg.css
+++ /dev/null
@@ -1,3 +0,0 @@
-: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
deleted file mode 100644
index ac94095..0000000
--- a/public/css/variables/typography.md.css
+++ /dev/null
@@ -1,3 +0,0 @@
-:root {
-  --font-size-relative-px: 0.08333rem;
-}
\ No newline at end of file