From ab65ecceaabefc0f2f77c6f9602280a7214c34d1 Mon Sep 17 00:00:00 2001
From: Lennart <lekoarts@gmail.com>
Date: Thu, 11 Jun 2020 12:10:18 +0200
Subject: [PATCH] fix(gatsby-theme-minimal-blog): font-size on mobile iOS
 (#421)

---
 .../index.mdx                                 | 35 +++++++++++++++++++
 .../index.mdx                                 |  2 ++
 .../src/components/layout.tsx                 |  3 ++
 .../src/gatsby-plugin-theme-ui/index.js       |  3 ++
 4 files changed, 43 insertions(+)

diff --git a/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx
index 68a969d6f..2d7cf28ca 100644
--- a/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx
+++ b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx
@@ -49,6 +49,41 @@ var treePromise = new Promise(function(resolve) {
 });
 ```
 
+A code block with a JSDoc comment, short, and long comment:
+
+```js
+/**
+ * Get value out of string (e.g. rem => px)
+ * If value is px strip the px part
+ * If the input is already a number only return that value
+ * @param {string | number} input
+ * @param {number} [rootFontSize]
+ * @return {number} Number without last three characters
+ * @example removeLastThree('6rem') => 6
+ */
+const getValue = (input, rootFontSize = 16) => {
+  if (typeof input === `number`) {
+    return input / rootFontSize;
+  }
+
+  const isPxValue = input.slice(-2) === `px`;
+
+  if (isPxValue) {
+    return parseFloat(input.slice(0, -2));
+  }
+
+  return parseFloat(input.slice(0, -3));
+};
+
+// This is a little helper function
+const helper = (a, b) => a + b;
+
+// This is also a little helper function but this time with a really long one-line comment that should show some more details
+const morehelper = (a, b) => a * b;
+
+export { getValue, helper, morehelper };
+```
+
 Normal block without language:
 
 ```
diff --git a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
index 13c6580f5..0539265dd 100644
--- a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
+++ b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
@@ -18,6 +18,8 @@ Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall.
 
 Exume lumos protego leviosa. Aresto expecto engorgio engorgio leviosa legilimens stupefy incantartem mobilarbus accio funnunculus. Serpensortia locomotor incarcerous aguamenti colloportus. Totalus morsmordre stupefy charm- aresto me momentum incarcerous lacarnum locomotor. Revelio relashio veritaserum impedimenta expecto quietus. Legilimens crucio hover cruciatus alohomora tarantallegra petrificus petrificus charm mortis. Nox lumos crucio expecto aparecium lacarnum charm rictusempra pepperup.
 
+---
+
 Sectumsempra aresto exume reducio momentum tarantallegra patronum. Totalus amortentia momentum mortis quietus evanesco. Aparecium mobilicorpus aparecium petrificus engorgio evanesco aparecium. Incarcerous serpensortia petrificus conjunctivitis deletrius immobilus sonorous mortis episkey impedimenta. Immobilus lacarnum totalus protean. Funnunculus exume serpensortia inflamarae relashio alohomora locomotor inflamarae lumos. Skele-gro totalus.
 
 Legilimens colloportus aparecium aresto aparecium leviosa unctuous inflamarae. Quietus mobilarbus incarcerous stupefy confundus leviosa. Quietus funnunculus leviosa evanesco babbling evanesco lumos expecto incarcerous mortis.
diff --git a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
index ac50a2ad9..16eb0bd8d 100644
--- a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
+++ b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
@@ -18,6 +18,9 @@ const Layout = ({ children, className }: LayoutProps) => (
         "*": {
           boxSizing: `inherit`,
         },
+        html: {
+          "-webkit-text-size-adjust": `100%`,
+        },
         "::selection": {
           backgroundColor: theme.colors.text,
           color: theme.colors.background,
diff --git a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
index 19cfc2b95..c178e1720 100644
--- a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
+++ b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
@@ -121,6 +121,9 @@ const theme = merge(tailwind, {
       verticalAlign: `top`,
       borderBottomWidth: `1px`,
     },
+    hr: {
+      mx: 0,
+    },
   },
   layout: {
     container: {