fix: homepage grid alignment and expressive type

carbon-design-system · Jun 3, 2019 · a9e16e4 · a9e16e4
1 parent 2703332
commit a9e16e4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js b/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js
@@ -18,7 +18,7 @@ const StyledGrid = styled(Grid)`
 const StyledRow = styled(Row)`
   height: 100%;
   h1 {
-    padding: 2rem 1rem;
+    padding: 2rem 0;
   }
 `;
 

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
@@ -30,27 +30,35 @@ const StyledRow = styled.section`
 `;
 
 const firstColumn = ({ typeStyles, layout }) => [
-  typeStyles.expressiveParagraph01,
+  typeStyles.expressiveHeading03,
   {
     padding: '0 1rem',
+    paddingLeft: 0,
     paddingBottom: layout[2],
     width: '100%',
-    fontSize: '1.5rem',
+    fontSize: 'calc(1.25rem + 0*(100vw - 20rem)/62)',
     [mq.md]: {
       width: '33%',
     },
+    [mq.max]: {
+      fontSize: '1.5rem',
+    },
   },
 ];
 
 const secondColumn = ({ typeStyles }) => [
   typeStyles.expressiveParagraph01,
   {
     padding: '0 1rem',
-    fontSize: '1.75rem',
+    fontSize: 'calc(1.75rem + 0.25*(100vw - 66rem)/33)',
     width: '100%',
+    paddingLeft: 0,
     [mq.md]: {
       width: '66%',
     },
+    [mq.max]: {
+      fontSize: '2rem',
+    },
   },
 ];