5 files changed, 38 insertions, 15 deletions
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
index db7d45f..20b9126 100644
--- a/public/css/variables/index.css
+++ b/public/css/variables/index.css
@@ -1,5 +1,6 @@
 @import 'colours.css';
 @import 'spacing.css';
+@import 'spacing.xs.css' (min-width: 16rem);
 @import 'spacing.sm.css' (min-width: 30rem);
 @import 'spacing.md.css' (min-width: 48rem);
 @import 'spacing.lg.css' (min-width: 64rem);
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index c384783..a4d1d91 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -1,12 +1,12 @@
 :root {
-  --margin-inline-md: calc(8 * var(--relative-eighth-rem));
+  --margin-inline-md: calc(2 * 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(--relative-eighth-rem));
-  --padding-inline-md: calc(12 * var(--relative-eighth-rem));
-  --padding-inline-sm: calc(3 * var(--relative-eighth-rem));
+  --padding-inline-lg: calc(4 * var(--relative-eighth-rem));
+  --padding-inline-md: calc(2 * var(--relative-eighth-rem));
+  --padding-inline-sm: calc(1 * 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));
@@ -31,10 +31,17 @@
   --grid-column-width-relative-eighth-rem: 32;
   --grid-gutter-width-relative-eighth-rem: 4;
 
-  /* small screens */
+  /***********************************************************
+   * Generally, we will use columns to keep things laid out  *
+   * nicely. However, on screens narrower than xs, this gets *
+   * pretty much impossible. So for those screens, we use a  *
+   * single-column layout taking up 100vw. In effect, this   *
+   * is just default CSS layout plus a wee bit padding. From *
+   * xs widewards, we use multiple columns on a fixed width. *
+   ***********************************************************/
 
-  --grid-total-width: 15rem;
+  --grid-total-width: 100vw;
   --grid-padding-relative-eighth-rem: 8;
-  --grid-column-count: 4;
-  --grid-prose-column-count: 4;
+  --grid-column-count: 1;
+  --grid-prose-column-count: 1;
 }
diff --git a/public/css/variables/spacing.xs.css b/public/css/variables/spacing.xs.css
new file mode 100644
index 0000000..fb7c01a
--- /dev/null
+++ b/public/css/variables/spacing.xs.css
@@ -0,0 +1,6 @@
+:root {
+  --grid-total-width: 15rem;
+  --grid-padding-relative-eighth-rem: 8;
+  --grid-column-count: 4;
+  --grid-prose-column-count: 4;
+}
diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css
index e0b0a18..e59703a 100644
--- a/public/css/variables/typography.css
+++ b/public/css/variables/typography.css
@@ -1,11 +1,11 @@
 :root {
-  --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-size-0: calc(8 * var(--relative-eighth-rem));
+  --font-size-1: calc(8 * var(--relative-eighth-rem));
+  --font-size-2: calc(8 * var(--relative-eighth-rem));
+  --font-size-3: calc(8 * var(--relative-eighth-rem));
+  --font-size-4: calc(8 * var(--relative-eighth-rem));
+  --font-size-5: calc(8 * var(--relative-eighth-rem));
+  --font-size-6: calc(8 * var(--relative-eighth-rem));
 
   --font-serif: Alegreya, -apple-system-ui-serif, 'Goudy Old Style', Garamond, serif;
   --font-sans-serif: 'Alegreya Sans', -apple-system-ui-sans, Lato, Calibri, 'sans-serif';
diff --git a/public/css/variables/typography.xs.css b/public/css/variables/typography.xs.css
new file mode 100644
index 0000000..2c36d1d
--- /dev/null
+++ b/public/css/variables/typography.xs.css
@@ -0,0 +1,9 @@
+:root {
+  --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));
+}
+\ No newline at end of file