fix: Footer type color, sticky tabs

carbon-design-system · May 23, 2019 · b02b8ac · b02b8ac
1 parent 266b614
commit b02b8ac
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 37 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/Footer.js b/packages/gatsby-theme-carbon/src/components/Footer.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { Row, Grid, Column } from './Grid';
 import mq from '../util/media-queries';
 
-const footerStyles = ({ colors, layout }) => ({
+const footerStyles = ({ layout }) => ({
   width: '100%',
   display: 'flex',
   margin: 0,
   paddingBottom: layout[2],
-  color: colors.active01,
+  color: '#bebebe',
   backgroundColor: '#000',
 });
 
@@ -20,10 +20,7 @@ const gridStyles = () => ({
   padding: '2rem 0',
   paddingLeft: '1rem',
   width: '100%',
-  [mq.lg]: {
-    maxWidth: '100rem',
-    width: '100%',
-  },
+  maxWidth: '99rem !important',
 });
 
 const listStyles = ({ colors, typeStyles }) => ({
@@ -48,6 +45,9 @@ const contentStyles = ({ colors, typeStyles }) => ({
   maxWidth: '33ch',
   paddingBottom: '1.5rem',
   marginBottom: '2.5rem',
+  color: '#bebebe',
+  padding: 0,
+  paddingLeft: '1rem',
   ...typeStyles.bodyLong01,
   a: {
     color: colors.ui02,
@@ -56,10 +56,15 @@ const contentStyles = ({ colors, typeStyles }) => ({
   'a:hover': {
     textDecoration: 'underline',
   },
+  [mq.md]: {
+    paddingLeft: 0,
+  },
+  [mq.lg]: {
+    paddingLeft: '0.5rem',
+  },
 });
 
 const rowStyles = () => ({
-  width: '100%',
   [mq.md]: {
     paddingLeft: '1rem',
   },
@@ -98,7 +103,7 @@ const Footer = ({ Content, links, Logo }) => {
                 ))}
             </ul>
           </Column>
-          <Column css={contentStyles} colLg={4} colMd={4}>
+          <Column css={contentStyles} colLg={4} colMd={4} offsetLg={2}>
             <Content />
           </Column>
         </Row>

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss b/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss
@@ -2,16 +2,6 @@
   background: $carbon--gray-100;
   color: $carbon--white-0;
 
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  li {
-    color: $carbon--white-0;
-  }
-
   a {
     color: $carbon--blue-40;
   }

diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js
@@ -6,8 +6,6 @@ import {
   text,
   pageHeaderSticky,
   pageHeaderShifted,
-  textContainer,
-  textContainerTabs,
 } from './PageHeader.module.scss';
 
 const PageHeader = ({ children, title, tabs = [], shouldHideHeader }) => (
@@ -20,11 +18,7 @@ const PageHeader = ({ children, title, tabs = [], shouldHideHeader }) => (
   >
     <div className="bx--grid">
       <div className="bx--row">
-        <div
-          className={cx('bx--col-lg-12', textContainer, {
-            [textContainerTabs]: tabs.length,
-          })}
-        >
+        <div className="bx--col-lg-12">
           <h2 id="page-title" className={text}>
             {title}
           </h2>

diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss
@@ -9,6 +9,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: 20rem;
   transition: top $duration--fast-02;
 }
 
@@ -18,22 +19,12 @@
   margin-top: auto;
 }
 
-.text-container {
-  height: 20rem;
-  display: flex;
-  align-items: flex-end;
-}
-
-.text-container--tabs {
-  height: 17rem;
-}
-
 .page-header--sticky {
   position: sticky;
   z-index: z('header');
-  top: -9rem;
+  top: -14rem;
 }
 
 .page-header--sticky.page-header--shifted {
-  top: -12rem;
+  top: -17rem;
 }