diff --git a/client/blocks/conversations/list.scss b/client/blocks/conversations/list.scss index b971790771474..830a1a5db272a 100644 --- a/client/blocks/conversations/list.scss +++ b/client/blocks/conversations/list.scss @@ -1,5 +1,9 @@ .conversations__comment-list { cursor: initial; // override style from .card.is-clickable + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } } .conversations__comment-list-ul { diff --git a/client/blocks/reader-feed-header/style.scss b/client/blocks/reader-feed-header/style.scss index 2c01950285a52..33e8f139fee06 100644 --- a/client/blocks/reader-feed-header/style.scss +++ b/client/blocks/reader-feed-header/style.scss @@ -2,6 +2,10 @@ display: flex; margin-bottom: 16px; z-index: z-index(".reader-feed-header", ".reader-feed-header__site"); + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px 16px; + } } .reader-feed-header.is-wide-display .reader-feed-header__site { diff --git a/client/blocks/reader-post-card/style.scss b/client/blocks/reader-post-card/style.scss index d0b24e5af76c9..5fa37e50da608 100644 --- a/client/blocks/reader-post-card/style.scss +++ b/client/blocks/reader-post-card/style.scss @@ -29,7 +29,7 @@ } .reader-post-card.card { - border-bottom: 5px solid var(--color-neutral-0); + border-bottom: 5px solid var(--color-neutral-5); border-radius: 6px; /* stylelint-disable-line scales/radii */ box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset; margin: 0; @@ -156,6 +156,10 @@ .reader-post-card__post { display: inherit; margin: 0; + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } } .reader-post-card__post-heading { @@ -253,6 +257,10 @@ .comments__form { margin-top: 0; } + + @include breakpoint-deprecated( "<660px" ) { + margin: 24px 16px 0 16px; + } } } @@ -289,6 +297,11 @@ border-top: none; margin: 20px 0 0 10px; padding-top: 0; + + @include breakpoint-deprecated( "<660px" ) { + margin: 20px 0 0 16px; + width: calc(100% - 32px); + } } } @@ -358,6 +371,10 @@ .reader-post-card__byline { display: flex; font-size: $font-body-small; + + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } } .reader-post-card__author::after { @@ -531,7 +548,7 @@ @include breakpoint-deprecated( "<660px" ) { .reader-post-card__post { - margin-left: 0; + margin: 0 16px; } } diff --git a/client/reader/discover/discover-navigation.scss b/client/reader/discover/discover-navigation.scss index 77f672d9bf6b3..1cf17bd45b692 100644 --- a/client/reader/discover/discover-navigation.scss +++ b/client/reader/discover/discover-navigation.scss @@ -4,9 +4,6 @@ &.reader-dual-column { max-width: 968px; // Max width of dual column reader stream. } - @media only screen and (max-width: 660px) { - padding: 30px 0 0 30px; - } } .discover-stream-navigation { @@ -21,7 +18,7 @@ margin-bottom: 0; } @media only screen and (max-width: 660px) { - margin: 0 30px -24px; + margin: 0 16px -24px; } .discover-stream-navigation__left-button-wrapper, diff --git a/client/reader/following/style.scss b/client/reader/following/style.scss index 68b4297e320fe..525ae270d56e3 100644 --- a/client/reader/following/style.scss +++ b/client/reader/following/style.scss @@ -11,6 +11,7 @@ } @media (max-width: 660px) { + margin: 0 16px; .navigation-header__main { min-height: auto; } diff --git a/client/reader/list-stream/style.scss b/client/reader/list-stream/style.scss index f8a7e32d0e9a3..3073bc85d0f03 100644 --- a/client/reader/list-stream/style.scss +++ b/client/reader/list-stream/style.scss @@ -20,6 +20,10 @@ .navigation-header { margin: 0 auto; padding: 0 0 16px 0; + + @include breakpoint-deprecated( "<660px" ) { + padding: 0 16px 16px; + } } } diff --git a/client/reader/search-stream/index.jsx b/client/reader/search-stream/index.jsx index d9147b955fc75..97535cf072c3d 100644 --- a/client/reader/search-stream/index.jsx +++ b/client/reader/search-stream/index.jsx @@ -173,11 +173,7 @@ class SearchStream extends React.Component { return (
-
+
660px" ) { padding-top: 30px; } diff --git a/client/reader/stream/style.scss b/client/reader/stream/style.scss index b6fac8d11ad58..42bb5c26a39a6 100644 --- a/client/reader/stream/style.scss +++ b/client/reader/stream/style.scss @@ -263,6 +263,10 @@ padding: 16px 0 32px; border-bottom: 1px solid #e9e9ea; + @include breakpoint-deprecated( "<660px" ) { + padding: 16px 16px 32px; + } + + .reader-post-card { margin-top: 16px; } @@ -631,6 +635,10 @@ font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif; } + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + } + @include break-medium { .app-promo__qr-code { margin: -20px 0 0; @@ -878,6 +886,11 @@ margin-top: 60px; padding-bottom: 0; + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; + width: calc(100% - 32px); + } + @include breakpoint-deprecated( ">480px" ) { height: 58px; } diff --git a/client/reader/style.scss b/client/reader/style.scss index cc10a903b1990..d3b6c2f0b60e5 100644 --- a/client/reader/style.scss +++ b/client/reader/style.scss @@ -17,7 +17,7 @@ .is-reader-page .search-stream__with-sites.main { margin: 0 auto; @include breakpoint-deprecated( "<660px" ) { - margin: 16px; + margin: 16px 0; } } @@ -95,6 +95,7 @@ .is-reader-page .is-site-stream .reader-feed-header.has-back-button .reader-feed-header__follow { @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; right: 0; } @@ -364,6 +365,12 @@ margin-top: 0; } +.search-stream__single-column-results .reader-tag-sidebar-recommended-sites { + @include breakpoint-deprecated( "<660px" ) { + margin-top: 36px; + } +} + .layout.has-header-section.is-section-reader { .layout__header-section { color: var(--studio-white); diff --git a/client/reader/tag-stream/style.scss b/client/reader/tag-stream/style.scss index bc83f73ca3717..3163a698ef200 100644 --- a/client/reader/tag-stream/style.scss +++ b/client/reader/tag-stream/style.scss @@ -15,6 +15,10 @@ .navigation-header { margin: 0 auto; padding: 0 0 16px 0; + + @include breakpoint-deprecated( "<660px" ) { + padding: 0 16px 16px; + } } } @@ -61,9 +65,8 @@ justify-content: space-between; align-items: flex-start; - @include break-small { - padding-top: 20px; - padding-bottom: 20px; + @include breakpoint-deprecated( "<660px" ) { + margin: 0 16px; } } @@ -92,6 +95,10 @@ .button.header-cake__back { padding: 0; } + + @include breakpoint-deprecated( "<660px" ) { + margin: 16px; + } } .is-reader-page .main .tag-stream__empty-content {