Style fixes

src/components/Discours/Banner.module.scss

@@ -29,13 +29,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-left: 0;
   padding-top: 1em;
 
-  @include media-breakpoint-up(sm) {
-    padding-left: $grid-gutter-width;
-  }
-
   a {
     display: inline-block;
     margin: 0 1em 1em 0;

src/components/Discours/Banner.tsx

@@ -6,7 +6,8 @@ import { clsx } from 'clsx'
 export default () => {
   return (
     <div class={styles.discoursBanner}>
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
             <h3>{t('Discours is created with our common effort')}</h3>
             <p>
@@ -22,5 +23,6 @@ export default () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/components/Discours/Footer.module.scss

@@ -34,12 +34,6 @@
     margin-top: 0.8rem;
   }
 
-  .wideContainer {
-    @include media-breakpoint-down(sm) {
-      padding: 0 $container-padding-x;
-    }
-  }
-
   ::selection {
     background: #fff;
     color: #000;

src/components/Discours/Footer.tsx

@@ -109,7 +109,7 @@ export const Footer = () => {
   ]
   return (
     <footer class={styles.discoursFooter}>
-      <div class={clsx('wide-container', styles.wideContainer)}>
+      <div class="wide-container">
         <div class="row">
           <For each={links()}>
             {({ header, items }) => (

src/components/Discours/Hero.scss

@@ -16,10 +16,6 @@
     font-weight: inherit;
   }
 
-  .wide-container {
-    padding: 0;
-  }
-
   ::selection {
     background: #fff;
     color: #000;

src/components/Discours/Hero.tsx

@@ -5,7 +5,8 @@ import { showModal } from '../../stores/ui'
 export default () => {
   return (
     <div class="about-discours">
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
             <h4>{t('Horizontal collaborative journalistic platform')}</h4>
             <p>
@@ -38,5 +39,6 @@ export default () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/components/Discours/Subscribe.module.scss

@@ -2,6 +2,10 @@
   display: flex;
   width: 100%;
 
+  @include media-breakpoint-down(md) {
+    margin-bottom: 2.4rem;
+  }
+
   @include media-breakpoint-between(md, xl) {
     flex-direction: column;
   }

src/components/Feed/Beside.tsx

@@ -26,7 +26,8 @@ export const Beside = (props: BesideProps) => {
   return (
     <Show when={!!props.beside?.slug && props.values?.length > 0}>
       <div class="floor floor--9">
-        <div class="wide-container row">
+        <div class="wide-container">
+          <div class="row">
             <Show when={!!props.values}>
               <div class="col-md-4">
                 <Show when={!!props.title}>
@@ -90,6 +91,7 @@ export const Beside = (props: BesideProps) => {
             </div>
           </div>
         </div>
+      </div>
     </Show>
   )
 }

src/components/Feed/Group.tsx

@@ -14,7 +14,8 @@ export default (props: GroupProps) => {
   return (
     <div class="floor floor--important floor--group">
       <Show when={props.articles.length > 4}>
-        <div class="wide-container row">
+        <div class="wide-container">
+          <div class="row">
             <div class="group__header col-12">{props.header}</div>
 
             <div class="col-lg-6">
@@ -77,6 +78,7 @@ export default (props: GroupProps) => {
               </div>
             </div>
           </div>
+        </div>
       </Show>
     </div>
   )

src/components/Feed/Row1.tsx

@@ -5,11 +5,13 @@ import { ArticleCard } from './Card'
 export const Row1 = (props: { article: Shout }) => (
   <Show when={!!props.article}>
     <div class="floor floor--one-article">
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <div class="col-12">
             <ArticleCard article={props.article} settings={{ isSingle: true }} />
           </div>
         </div>
       </div>
+    </div>
   </Show>
 )

src/components/Feed/Row2.tsx

@@ -15,7 +15,8 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
 
   return (
     <div class="floor">
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <For each={props.articles}>
             {(a, i) => {
               return (
@@ -23,7 +24,10 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
                   <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
                     <ArticleCard
                       article={a}
-                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8', nodate: props.isEqual }}
+                      settings={{
+                        isWithCover: props.isEqual || x[y()][i()] === '8',
+                        nodate: props.isEqual
+                      }}
                     />
                   </div>
                 </Show>
@@ -32,5 +36,6 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
           </For>
         </div>
       </div>
+    </div>
   )
 }

src/components/Feed/Row3.tsx

@@ -6,7 +6,8 @@ import { ArticleCard } from './Card'
 export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
   return (
     <div class="floor">
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <div class="floor-header">{props.header}</div>
           <For each={props.articles}>
             {(a) => (
@@ -17,5 +18,6 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
           </For>
         </div>
       </div>
+    </div>
   )
 }

src/components/Feed/Row5.tsx

@@ -4,7 +4,8 @@ import { ArticleCard } from './Card'
 export const Row5 = (props: { articles: Shout[] }) => {
   return (
     <div class="floor floor--1">
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <div class="col-md-3">
             <ArticleCard article={props.articles[0]} />
             <ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
@@ -18,5 +19,6 @@ export const Row5 = (props: { articles: Shout[] }) => {
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/components/Feed/RowShort.tsx

@@ -4,7 +4,8 @@ import { ArticleCard } from './Card'
 
 export default (props: { articles: Shout[] }) => (
   <div class="floor floor--7">
-    <div class="wide-container row">
+    <div class="wide-container">
+      <div class="row">
         <For each={props.articles}>
           {(a) => (
             <div class="col-md-6 col-lg-3">
@@ -22,4 +23,5 @@ export default (props: { articles: Shout[] }) => (
         </For>
       </div>
     </div>
+  </div>
 )

src/components/Feed/Slider.tsx

@@ -61,7 +61,8 @@ export default (props: SliderProps) => {
 
   return (
     <div class="floor floor--important">
-      <div class="wide-container row">
+      <div class="wide-container">
+        <div class="row">
           <h2 class="col-12">{props.title}</h2>
           <Show when={!!articles()}>
             <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
@@ -91,5 +92,6 @@ export default (props: SliderProps) => {
           </Show>
         </div>
       </div>
+    </div>
   )
 }

src/components/Views/AllAuthors.tsx

@@ -151,7 +151,7 @@ export const AllAuthorsView = (props: Props) => {
                               <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
                                 <div class="topic-title">
                                   <a href={`/author/${author.slug}`}>{author.name}</a>
-                                  <sup>{author.stat.shouts}</sup>
+                                  <span class={styles.articlesCounter}>{author.stat.shouts}</span>
                                 </div>
                               </div>
                             )}
@@ -165,7 +165,6 @@ export const AllAuthorsView = (props: Props) => {
             </For>
           </Show>
 
-          <div class={styles.stats}>
           <Show when={searchResults().length > 0}>
             <For each={searchResults().slice(0, limit())}>
               {(author) => (
@@ -212,7 +211,6 @@ export const AllAuthorsView = (props: Props) => {
             </div>
           </Show>
         </div>
-        </div>
       </Show>
     </div>
   )

src/components/Views/AllTopics.tsx

@@ -92,6 +92,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   }
 
   const AllTopicsHead = () => (
+    <div class="row">
       <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
         <h1>{t('Topics')}</h1>
         <p>{t('Subscribe what you like to tune your personal feed')}</p>
@@ -111,6 +112,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
           </li>
         </ul>
       </div>
+    </div>
   )
 
   return (

src/styles/app.scss

@@ -550,10 +550,6 @@ figcaption {
     margin-bottom: 6.4rem;
   }
 
-  .wide-container {
-    padding: 0;
-  }
-
   .container {
     padding-left: $container-padding-x;
     padding-right: $container-padding-x;
@@ -617,14 +613,14 @@ figcaption {
   }
 }
 
-.row > * {
+.row {
   @include media-breakpoint-down(sm) {
-    padding-left: divide($container-padding-x, 2);
-    padding-right: divide($container-padding-x, 2);
-
-    > .row {
     margin-left: divide(-$container-padding-x, 2);
     margin-right: divide(-$container-padding-x, 2);
+
+    > * {
+      padding-left: divide($container-padding-x, 2);
+      padding-right: divide($container-padding-x, 2);
     }
   }
 }
@@ -789,6 +785,7 @@ details {
 .text-truncate {
   display: -webkit-box !important;
   overflow: hidden;
+  position: relative;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   white-space: normal;