diff --git a/README.md b/README.md index b6a478a..5b47470 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@

- CSS Box-model Visualizer - CSS Box-model Visualizer + CSS Box Model Visualizer + CSS Box Model Visualizer

-A quick, easy tool to visualize and share CSS box-model examples. Customize margin, padding, border and element sizes and colors. +A quick way to visualize and share CSS box model examples. Adjust the inputs in the control panel to customize margin, padding, border, element dimensions and colors. CSS Box-model Visualizer diff --git a/gatsby-config.js b/gatsby-config.js index 5f57709..fdca11b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,7 +1,7 @@ module.exports = { siteMetadata: { - title: `CSS Box-model Visualizer`, - description: `A quick, easy tool to visualize and share CSS box-model examples. Customize margin, padding, border and element sizes and colors.`, + title: `CSS Box Model Visualizer`, + description: `A quick way to visualize and share CSS box model examples. Adjust the inputs in the control panel to customize margin, padding, border, element dimensions and colors.`, author: `Martin Hofmann `, }, plugins: [ diff --git a/src/components/layout.js b/src/components/layout.js index 545986d..95fc20a 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -67,7 +67,7 @@ const Layout = ({ children }) => ( fontSize: tokens.font.size.md, lineHeight: 1.25, margin: `0 auto ${tokens.space.lg}px`, - maxWidth: '500px', + maxWidth: '550px', '@media (min-width: 480px)': { fontSize: tokens.font.size.lg, lineHeight: 1.5,