tweak font size down on small screens

1 files changed, 12 insertions, 4 deletions

diff --git a/http/src/css/base.uppcss b/http/src/css/base.uppcss
index 06ad52f..ae3d660 100644
--- a/http/src/css/base.uppcss
+++ b/http/src/css/base.uppcss
@@ -72,10 +72,10 @@
   --colour-warn-bg: var(--colour-warn-80);
 
   --font-size-sm: 1rem;
-  --font-size-base: 1.25rem;
-  --font-size-md: 1.55rem;
-  --font-size-lg: 1.9rem;
-  --font-size-xl: 2.3rem;
+  --font-size-base: 1.125rem;
+  --font-size-md: 1.3rem;
+  --font-size-lg: 1.6rem;
+  --font-size-xl: 2rem;
 
   --spacing-block-xs: 0.5rem;
   --spacing-block-sm: 1.75rem;
@@ -89,6 +89,14 @@
   --spacing-inline-xl: 6rem;
 }
 
+@media (min-width: 60rem) {
+  --font-size-sm: 1rem;
+  --font-size-base: 1.25rem;
+  --font-size-md: 1.55rem;
+  --font-size-lg: 1.9rem;
+  --font-size-xl: 2.3rem;
+}
+
 /** Light theme */
 @media (prefers-color-scheme: light) {
   :root {