diff --git a/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx b/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx index 281839e92..ca353e553 100644 --- a/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx +++ b/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx @@ -78,7 +78,7 @@ export class Hero extends React.PureComponent { {heroRec.context ? (
{truncateText(heroRec.context, 22)}
) : ( -{truncateText(heroRec.domain, 22)}
+{truncateText(heroRec.domain, 22)}
)} diff --git a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss index 5c4d54568..1ad113176 100644 --- a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss +++ b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss @@ -49,14 +49,16 @@ $card-header-in-hero-line-height: 20; // "1/3 width layout" (aka "Mobile First") .wrapper { color: $grey-50; - margin: 18px 0; - padding: 20px 0; + display: block; + margin: 16px 0 24px; + padding: 24px 0; border-top: $border-secondary; border-bottom: $border-secondary; @at-root .ds-hero-no-border .wrapper { border-top: 0; border-bottom: 0; + padding: 0; } &:hover .meta header { @@ -89,6 +91,10 @@ $card-header-in-hero-line-height: 20; color: $teal-70; } } + + .source { + margin-bottom: 0; + } } } diff --git a/content-src/components/DiscoveryStreamComponents/List/_List.scss b/content-src/components/DiscoveryStreamComponents/List/_List.scss index 4d04048e3..8d8de6dd3 100644 --- a/content-src/components/DiscoveryStreamComponents/List/_List.scss +++ b/content-src/components/DiscoveryStreamComponents/List/_List.scss @@ -1,4 +1,5 @@ // Type sizes +$bordered-spacing: 16px; $item-font-size: 13; $item-image-size: 72px; $item-line-height: 20; @@ -11,8 +12,7 @@ $item-line-height: 20; .ds-list-item:not(:nth-last-child(-n+#{$columns})) { border-bottom: $border-secondary; margin-bottom: -1px; // cancel out the pixel we used for the border - - padding-bottom: 2px; + padding-bottom: $bordered-spacing; } } @@ -67,7 +67,6 @@ $item-line-height: 20; .ds-column-11 &, .ds-column-12 & { grid-template-columns: repeat(3, 1fr); - grid-row-gap: 18px; } .ds-list-item-excerpt { @@ -126,7 +125,8 @@ $item-line-height: 20; .ds-list-borders { border-top: $border-secondary; - padding-top: $item-line-height * 1px; + grid-row-gap: $bordered-spacing; + padding-top: $bordered-spacing; &.ds-list-full-width, .ds-column-1 &, @@ -168,8 +168,6 @@ $item-line-height: 20; .ds-list-item-link { mix-blend-mode: normal; - padding-bottom: 16px; - display: flex; justify-content: space-between; }