SMaller font sizes on sm viewport

2 files changed, 22 insertions, 1 deletions

diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
index 4a9513c..e81f410 100644
--- a/assets/css/_declare-vars.scss
+++ b/assets/css/_declare-vars.scss
@@ -29,3 +29,24 @@
         ),
     )
 ), 'dims');
+
+@include iro.props-store((
+    --dims: (
+        --font-size: (
+            --50:   iro.fn-px-to-rem(11px),
+            --75:   iro.fn-px-to-rem(13px),
+            --100:  iro.fn-px-to-rem(14px),
+            --150:  iro.fn-px-to-rem(16px),
+            --200:  iro.fn-px-to-rem(18px),
+            --300:  iro.fn-px-to-rem(20px),
+            --400:  iro.fn-px-to-rem(24px),
+            --500:  iro.fn-px-to-rem(28px),
+            --600:  iro.fn-px-to-rem(32px),
+            --700:  iro.fn-px-to-rem(36px),
+            --800:  iro.fn-px-to-rem(40px),
+            --900:  iro.fn-px-to-rem(45px),
+            --1000: iro.fn-px-to-rem(50px),
+            --1100: iro.fn-px-to-rem(60px),
+        ),
+    )
+), 'sm');
diff --git a/content/notebook/fediverse/in-depth-image-descriptions.md b/content/notebook/fediverse/in-depth-image-descriptions.md
index 9fe7e48..8af09ff 100644
--- a/content/notebook/fediverse/in-depth-image-descriptions.md
+++ b/content/notebook/fediverse/in-depth-image-descriptions.md
@@ -18,7 +18,7 @@ Imagine you're using an online shop.
 What you'll typically see is a list of products where each list item has a small preview image, a product name and some other metadata.\
 Now imagine that the shop displays a long textual description for each product instead.
 This is what the timeline appears like to screen reader users if long image descriptions are used.
-And unlike people seeing the text, they don't have the luxury of skimming to grasp vital information quickly -- they can only skip the rest of the description at any point, or wait for the screen reader to read all of it.
+And unlike people seeing the text, they don't have the luxury of skimming to grasp vital information quickly -- they can only wait for the screen reader to read all of it or until they decide to skip the rest.
 
 Detailed descriptions are only helpful when the user has decided the content is interesting to them.
 Currently, most fedi frontends put them in the attachment's `alt` attribute, which is fine if the user is currently viewing a single post instead of the timeline.