fix(*): Normalize CSS in themes & examples (#422)

LekoArts · Jun 11, 2020 · 9a2600c · 9a2600c
1 parent 93e7a69
commit 9a2600c
Show file tree

Hide file tree

Showing 17 changed files with 98 additions and 12 deletions.
diff --git a/...imal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx b/...imal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
@@ -16,12 +16,18 @@ Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with
 
 Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall. Nearly-Headless Nick now string them together, and answer me this, which creature would you be unwilling to kiss? Poltergeist sticking charm, troll umbrella stand flying cars golden locket Lily Potter. Pumpkin juice Trevor wave your wand out glass orbs, a Grim knitted hats. Stan Shunpike doe patronus, suck his soul Muggle-Born large order of drills the trace. Bred in captivity fell through the veil, quaffle blue flame ickle diddykins Aragog. Yer a wizard, Harry Doxycide the woes of Mrs. Weasley Goblet of Fire.
 
+## This is a secondary heading
+
 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.
 
+## Another secondary heading
+
+### Third heading level
+
 Legilimens colloportus aparecium aresto aparecium leviosa unctuous inflamarae. Quietus mobilarbus incarcerous stupefy confundus leviosa. Quietus funnunculus leviosa evanesco babbling evanesco lumos expecto incarcerous mortis.
 
 Reparo reparo alohomora vow. Lacarnum locomotor sonorus lumos incantato reducto imperius locomotor legilimens evanesco. Locomotor patronum stupefy lumos scourgify lacarnum. Portus charm inflamarae leviosa stupefy. Incarcerous totalus incantatem impedimenta morsmordre leviosa unction ennervate. Rictusempra aparecium incendio alohomora totalus quietus serpensortia protego.

diff --git a/examples/specimens/src/components/layout.js b/examples/specimens/src/components/layout.js
@@ -48,6 +48,10 @@ const Layout = ({ children }) => {
             color: #fff;
             background-color: #3490dc;
           }
+          html {
+            font-size: 16px;
+            -webkit-text-size-adjust: 100%;
+          }
           body {
             border: 0;
             margin: 0;

diff --git a/examples/specimens/src/pages/index.mdx b/examples/specimens/src/pages/index.mdx
@@ -59,7 +59,7 @@ View the [**theme's README**](https://github.com/LekoArts/gatsby-themes/tree/mas
 
 ### Alert
 
-Variants: `alerts.success`, `alerts.hint`, `alerts.warning`, `alerts.info`, `alerts.danger`,
+Variants: `alerts.success`, `alerts.hint`, `alerts.warning`, `alerts.info`, `alerts.danger`
 
 Available props:
 

diff --git a/examples/status-dashboard/src/pages/index.jsx b/examples/status-dashboard/src/pages/index.jsx
@@ -29,6 +29,9 @@ const Index = ({
             color: #fff;
             background-color: #3490dc;
           }
+          html {
+            -webkit-text-size-adjust: 100%;
+          }
           body {
             border: 0;
             margin: 0;
@@ -81,6 +84,7 @@ const Index = ({
         {siteDescription}
       </p>
       <Info />
+      <div css={css({ marginTop: `1rem` })} />
       <Grid />
       <footer
         css={css({
@@ -93,7 +97,7 @@ const Index = ({
       >
         Copyright &copy; {new Date().getFullYear()}. All rights reserved.
         <br />
-        <div css={css({ display: `flex`, justifyContent: `center`, alignItems: `center`, marginTop: `1.5rem` })}>
+        <div css={css({ display: `flex`, justifyContent: `center`, alignItems: `center`, marginTop: `1rem` })}>
           <img width="30" height="30" src="https://img.lekoarts.de/gatsby/logo_w30.png" alt="LekoArts Logo" />
           {` `}
           <a

diff --git a/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx b/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx
@@ -12,6 +12,9 @@ const Layout = ({ children }) => (
         *::after {
           box-sizing: border-box;
         }
+        html {
+          -webkit-text-size-adjust: 100%;
+        }
         body {
           border: 0;
           margin: 0;

diff --git a/themes/gatsby-theme-cara/src/components/layout.tsx b/themes/gatsby-theme-cara/src/components/layout.tsx
@@ -21,6 +21,17 @@ const Layout = ({ children, className }: LayoutProps) => (
         },
         html: {
           fontSize: `18px`,
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
         },
         "::selection": {
           backgroundColor: theme.colors.primary,

diff --git a/themes/gatsby-theme-emilia/src/components/layout.tsx b/themes/gatsby-theme-emilia/src/components/layout.tsx
@@ -14,6 +14,17 @@ const Layout = ({ children }: LayoutProps) => (
         },
         html: {
           fontSize: `18px`,
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
         },
         "::selection": {
           background: theme.colors.text,

diff --git a/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js
@@ -64,6 +64,8 @@ export default merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     a: {
       color: `primary`,

diff --git a/themes/gatsby-theme-emma/src/components/layout.tsx b/themes/gatsby-theme-emma/src/components/layout.tsx
@@ -20,6 +20,19 @@ const Layout = ({ children, className }: LayoutProps) => {
           "*": {
             boxSizing: `inherit`,
           },
+          html: {
+            WebkitTextSizeAdjust: `100%`,
+          },
+          img: {
+            borderStyle: `none`,
+          },
+          pre: {
+            fontFamily: `monospace`,
+            fontSize: `1em`,
+          },
+          "[hidden]": {
+            display: `none`,
+          },
           "::selection": {
             backgroundColor: theme.colors.text,
             color: theme.colors.background,

diff --git a/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js
@@ -48,6 +48,8 @@ export default merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     p: {
       fontSize: [1, 2],

diff --git a/themes/gatsby-theme-graphql-playground/src/components/layout.tsx b/themes/gatsby-theme-graphql-playground/src/components/layout.tsx
@@ -17,6 +17,19 @@ const Layout = ({ children, title }: LayoutProps) => (
         "*": {
           boxSizing: `inherit`,
         },
+        html: {
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
+        },
         a: {
           transition: `all 0.3s ease-in-out`,
         },

diff --git a/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js
@@ -56,6 +56,8 @@ const theme = merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     pre: {
       ...nightOwl,

diff --git a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
@@ -19,7 +19,17 @@ const Layout = ({ children, className }: LayoutProps) => (
           boxSizing: `inherit`,
         },
         html: {
-          "-webkit-text-size-adjust": `100%`,
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
         },
         "::selection": {
           backgroundColor: theme.colors.text,

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
@@ -34,6 +34,8 @@ const theme = merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     p: {
       fontSize: [1, 1, 2],
@@ -63,25 +65,27 @@ const theme = merge(tailwind, {
     h1: {
       variant: `text.heading`,
       fontSize: [5, 6, 7],
-      mt: 2,
+      mt: 4,
     },
     h2: {
       variant: `text.heading`,
       fontSize: [4, 5, 6],
-      mt: 2,
+      mt: 4,
     },
     h3: {
       variant: `text.heading`,
       fontSize: [3, 4, 5],
-      mt: 3,
+      mt: 4,
     },
     h4: {
       variant: `text.heading`,
       fontSize: [2, 3, 4],
+      mt: 3,
     },
     h5: {
       variant: `text.heading`,
       fontSize: [1, 2, 3],
+      mt: 3,
     },
     h6: {
       variant: `text.heading`,

diff --git a/themes/gatsby-theme-minimal-blog/src/styles/code.ts b/themes/gatsby-theme-minimal-blog/src/styles/code.ts
@@ -12,7 +12,7 @@ const code = {
     backgroundColor: tint(`primary`, 0.7),
   },
   ".prism-code": {
-    fontSize: 1,
+    fontSize: [1, 1, 2],
     padding: 3,
     webkitOverflowScrolling: `touch`,
     backgroundColor: `transparent`,
@@ -30,14 +30,14 @@ const code = {
     display: `inline-block`,
   },
   "p > code, li > code": {
-    bg: `rgb(1, 22, 39)`,
-    color: `rgb(214, 222, 235)`,
+    bg: `gray.2`,
+    color: `gray.8`,
     px: 2,
     py: 1,
     borderRadius: `2px`,
   },
   ".gatsby-highlight": {
-    fontSize: 1,
+    fontSize: [1, 1, 2],
     position: `relative`,
     webkitOverflowScrolling: `touch`,
     bg: `rgb(1, 22, 39)`,
@@ -174,6 +174,7 @@ const code = {
   },
   "[data-name='live-preview'], [data-name='live-editor']": {
     mx: [0, 0, 0, -3],
+    fontSize: [1, 1, 2],
   },
   ".token-line": {
     pr: 3,

diff --git a/themes/gatsby-theme-status-dashboard/src/components/info.tsx b/themes/gatsby-theme-status-dashboard/src/components/info.tsx
@@ -7,7 +7,7 @@ import useNetlify from "../hooks/use-netlify"
 import useCircleCi from "../hooks/use-circle-ci"
 
 const Item = ({ input, icon }: { input: string; icon: React.ReactNode }) => (
-  <Flex sx={{ mr: 4, mb: 4, alignItems: `center` }}>
+  <Flex sx={{ mr: [3, 3, 4], mb: [3, 3, 4], alignItems: `center` }}>
     {icon}
     <div
       sx={{

diff --git a/themes/gatsby-theme-status-dashboard/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-status-dashboard/src/gatsby-plugin-theme-ui/index.js
@@ -38,7 +38,7 @@ export default merge(tailwind, {
     },
     icon: {
       svg: {
-        width: [6, 6, 8],
+        width: 8,
         borderRadius: `full`,
         p: 2,
         background: `white`,