website: improve heading typography for mobile

4 years ago · 035dca5e3d
parent db3c6ea727
commit 035dca5e3d
1 changed files with 18 additions and 0 deletions
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@ -19,3 +19,21 @@ html[data-theme='dark'] {
  --ifm-color-primary-lighter: rgb(165, 165, 245);
  --ifm-color-primary-lightest: rgb(191, 191, 248);
 }
+
+@media screen and (max-width: 767px) {
+  :root {
+    --ifm-font-size-base: 16px;
+  }
+
+  .markdown h1 {
+    --ifm-h1-font-size: 1.5rem;
+  }
+
+  .markdown h2 {
+    --ifm-h2-font-size: 1.375rem;
+  }
+
+  .markdown h3 {
+    --ifm-h3-font-size: 1.25rem;
+  }
+}