Improve titles on mobile devices

nesk · Feb 8, 2024 · 378dac8 · 378dac8
1 parent c8cd36d
commit 378dac8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/pages/blog.js b/src/pages/blog.js
@@ -13,6 +13,13 @@ const Post = styled.article`
   h2 {
     font-size: 2rem;
     letter-spacing: 0.02rem;
+    line-height: 1.3;
+  }
+
+  @media (min-width: 768px) {
+    h2 {
+      line-height: 1.5;
+    }
   }
 
   &:not(:last-child) {

diff --git a/src/templates/post.js b/src/templates/post.js
@@ -28,8 +28,15 @@ const Header = styled.header`
   h1 {
     font-size: 2.5rem;
     letter-spacing: 0.015rem;
-    line-height: 3.5rem;
+    line-height: 1.3;
     margin: 0.5rem 0 2.5rem;
+    text-wrap: pretty;
+  }
+
+  @media (min-width: 768px) {
+    h1 {
+      line-height: 1.4;
+    }
   }
 `