gatsby-theme-carbon 2.1.4 → 2.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/src/components/ArticleCard/ArticleCard.js

@@ -45,9 +45,10 @@ export default class ArticleCard extends React.Component {
       [`${prefix}--aspect-ratio--2x1`]
     );
 
-    const carbonTileclassNames = cx(
+    const cardContentClassNames = cx(
       [`${prefix}--tile`],
-      [`${prefix}--tile--clickable`]
+      [`${prefix}--tile--clickable`],
+      [`${prefix}--article-card_content`]
     );
 
     const cardContent = (
@@ -101,16 +102,18 @@ export default class ArticleCard extends React.Component {
 
     let cardContainer;
     if (disabled === true) {
-      cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
+      cardContainer = (
+        <div className={cardContentClassNames}>{cardContent}</div>
+      );
     } else if (isLink === true) {
       cardContainer = (
-        <Link to={href} className={carbonTileclassNames} {...rest}>
+        <Link to={href} className={cardContentClassNames} {...rest}>
           {cardContent}
         </Link>
       );
     } else {
       cardContainer = (
-        <a href={href} className={carbonTileclassNames} {...rest}>
+        <a href={href} className={cardContentClassNames} {...rest}>
           {cardContent}
         </a>
       );

package/src/components/ArticleCard/article-card.scss

@@ -10,7 +10,7 @@
   }
 }
 
-.#{$prefix}--article-card:hover .#{$prefix}--tile {
+.#{$prefix}--article-card:hover .#{$prefix}--article-card__tile {
   background: $hover-ui;
 }
 
@@ -43,6 +43,13 @@
   @include carbon--type-style('caption-01');
 }
 
+// At the moment, we force 16:9 for medium posts, this
+// is how we would force 16:9 for all article cards
+//
+// .#{$prefix}--article-card__img {
+//   aspect-ratio: 16 / 9;
+// }
+
 .#{$prefix}--article-card__img .gatsby-resp-image-wrapper {
   margin-bottom: 0;
 }
@@ -60,11 +67,11 @@
 }
 
 // Dark
-.#{$prefix}--article-card--dark .#{$prefix}--tile {
+.#{$prefix}--article-card--dark .#{$prefix}--article-card__tile {
   background: $carbon--gray-90; //$ui-background for gray 90 theme
 }
 
-.#{$prefix}--article-card--dark:hover .#{$prefix}--tile {
+.#{$prefix}--article-card--dark:hover .#{$prefix}--article-card__tile {
   background: $carbon--gray-80; //$hover-ui for gray 90 theme
 }
 
@@ -86,7 +93,7 @@
   cursor: not-allowed;
 }
 
-.#{$prefix}--article-card--disabled .#{$prefix}--tile:hover {
+.#{$prefix}--article-card--disabled .#{$prefix}--article-card__tile:hover {
   background: $ui-01;
   cursor: not-allowed;
 }
@@ -105,7 +112,7 @@
 
 // Disabled dark
 .#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--tile:hover {
+  .#{$prefix}--article-card__tile:hover {
   background: $carbon--gray-90; //$ui-background for gray 90 theme
 }
 

package/src/components/Code/Code.module.scss

@@ -36,7 +36,7 @@
   @include carbon--type-style('code-02');
   width: calc(100% + 2rem);
   @include carbon--breakpoint('lg') {
-    width: calc(67% + 1rem);
+    width: calc(67% + 1.15rem);
   }
 }
 

package/src/components/FeatureCard/feature-card.scss

@@ -17,10 +17,6 @@
       100% + 2rem
     ); //needed to make the row the same width as other rows with the negative margins
   }
-
-  @include carbon--breakpoint('max') {
-    width: calc(100% + 1rem);
-  }
 }
 
 .#{$prefix}--feature-card__img {

package/src/components/FourOhFour/FourOhFour.module.scss

@@ -16,6 +16,10 @@
   animation: gradient 2s ease infinite;
 }
 
+:global(.container--dark) .link {
+  color: $carbon--gray-10;
+}
+
 .list .link {
   @include carbon--type-style('body-short-02');
   margin-bottom: $spacing-03;
@@ -43,10 +47,6 @@
   }
 }
 
-:global(.container--dark) .link {
-  color: $carbon--gray-10;
-}
-
 .paragraph {
   @include carbon--type-style('body-long-01');
   font-size: 1.25rem;
@@ -75,7 +75,7 @@
   }
 
   @include carbon--breakpoint('max') {
-    padding-left: 400px;
+    padding-left: 424px;
   }
 }
 

package/src/components/Homepage/Banner.js

@@ -6,6 +6,7 @@ const HomepageBanner = ({ image, position, renderText }) => (
   <Grid
     style={{
       maxWidth: '100%',
+      overflow: 'hidden',
       backgroundImage: `url(${image})`,
       backgroundPosition: position || 'center',
     }}

package/src/components/Homepage/Callout.module.scss

@@ -11,7 +11,7 @@
 .row {
   padding-top: $layout-05;
   padding-bottom: $layout-05;
-  max-width: 74.25rem;
+  max-width: 1152px;
 }
 
 .row code {

package/src/components/Homepage/homepage.scss

@@ -72,13 +72,12 @@
   margin: 0;
 
   @include carbon--breakpoint('lg') {
-    padding-left: calc(
-      25% + 2rem
-    ); //2rem to account for 2rem left padding default on grid
+    padding-left: calc(25% + 1.5rem);
   }
 
   @include carbon--breakpoint('max') {
-    padding-left: 400px;
+    padding-left: 424px;
+    padding-right: 0;
   }
 }
 

package/src/components/MediumPosts/MediumPosts.module.scss

@@ -1,11 +1,7 @@
 // Fixes the gutter of the article cards on the homepage
 .card-container {
-  padding-right: 0;
-  padding-left: 0;
-  @include carbon--breakpoint('md') {
-    padding-right: 1rem;
-    padding-left: 1rem;
-  }
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 
 // Fixs the breaking type
@@ -40,18 +36,5 @@
 
 .image {
   object-fit: cover;
-  width: 100%;
-
-  @include carbon--breakpoint('sm') {
-    height: 315px;
-  }
-  @include carbon--breakpoint('md') {
-    height: 290px;
-  }
-  @include carbon--breakpoint('lg') {
-    height: 165px;
-  }
-  @include carbon--breakpoint('xlg') {
-    height: 215px;
-  }
+  aspect-ratio: 16 / 9;
 }

package/src/styles/internal/_page.scss

@@ -19,8 +19,9 @@
   }
 
   @include carbon--breakpoint('max') {
-    padding-left: 400px;
-    padding-right: 2rem;
+    max-width: rem(1544px);
+    padding-left: 424px;
+    padding-right: 0;
   }
 }
 
@@ -28,11 +29,6 @@
   padding: 0;
 }
 
-// Grids on the homepage should be full width
-.container:not(.container--homepage) .#{$prefix}--grid {
-  max-width: rem(1584px);
-}
-
 //---------------------------------------
 // Header styles
 //---------------------------------------