Fix reads header

src/components/ArticlePreview/ArticlePreview.module.scss

@@ -69,13 +69,25 @@
           font-size: 24px;
           font-weight: 800;
           line-height: 32px;
+
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          line-clamp: 3;
+          -webkit-box-orient: vertical;
         }
 
         .summary {
-          color: var(--text-secondary);
+          color: var(--brand-text);
           font-size: 15px;
           font-weight: 400;
           line-height: 22px;
+
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 5;
+          line-clamp: 5;
+          -webkit-box-orient: vertical;
         }
       }
 
@@ -93,26 +105,35 @@
           border-radius: 12px;
           width: fit-content;
           margin-block: 4px;
-          margin-right: 6px;
+          margin-inline: 3px;
         }
         .estimate {
           display: inline-block;
           color: var(--text-secondary);
           font-size: 12px;
-          font-weight: 400;
+          font-weight: 600;
           line-height: 12px;
+          padding: 6px 10px;
+          border: 1px solid var(--subtile-devider );
+          border-radius: 12px;
+          margin-right: 3px;
         }
       }
     }
 
     .image {
       min-width: 164px;
+      min-height: 70px;
+      max-height: 240px;
       height: fit-content;
       border: 1px solid var(--devider);
       border-radius: 8px;
       overflow: hidden;
+      text-align: center;
+
       img {
-        width: 164px;
+        max-width: 162px;
+        max-height: 238px;
         object-fit: scale-down;
       }
 

src/components/ArticlePreview/ArticlePreview.tsx

@@ -236,16 +236,21 @@ const ArticlePreview: Component<{
             </div>
           </div>
           <div class={styles.tags}>
-            <For each={props.article.tags}>
+            <div class={styles.estimate}>
+              {Math.ceil(props.article.wordCount / 238)} minute read
+            </div>
+            <For each={props.article.tags.slice(0, 3)}>
               {tag => (
                 <div class={styles.tag}>
                   {tag}
                 </div>
               )}
             </For>
-            <div class={styles.estimate}>
+            <Show when={props.article.tags.length > 3}>
-              {Math.ceil(props.article.wordCount / 238)} minute read
+              <div class={styles.tag}>
-            </div>
+                + {props.article.tags.length - 3}
+              </div>
+            </Show>
           </div>
         </div>
         <div class={styles.image}>

src/components/HomeHeader/HomeHeader.module.scss

@@ -123,6 +123,13 @@
   border-bottom: 1px solid var(--devider);
   z-index: var(--z-index-header);
 
+  &.readsFeed {
+    position: relative;
+    border-bottom: none;
+    padding-inline: 0;
+    z-index: var(--z-index-header);
+  }
+
 
   .newContentItem {
     color: var(--accent-links);

src/components/HomeHeader/ReadsHeader.tsx

@@ -26,8 +26,8 @@ const ReadsHeader: Component< {
 } > = (props) => {
 
   return (
-    <div id={props.id} class={styles.fullHeader}>
+    <div id={props.id}>
-      <div class={styles.bigFeedSelect}>
+      <div class={`${styles.bigFeedSelect} ${styles.readsFeed}`}>
         <ReedSelect big={true} />
       </div>
     </div>

src/pages/Home.module.scss

@@ -4,6 +4,13 @@
   min-height: 100vh;
 }
 
+.readsFeed {
+  position: relative;
+  border: none;
+  min-height: 100vh;
+  border-top: 1px solid var(--devider);
+}
+
 .paginate {
   color: var(--text-tertiary-2);
   position: absolute;

src/pages/Reads.tsx

@@ -154,33 +154,35 @@ const Home: Component = () => {
         <ReadsSidebar />
       </StickySidebar>
 
-      <Show
+      <div class={styles.readsFeed}>
-        when={context?.notes && context.notes.length > 0}
+        <Show
-      >
+          when={context?.notes && context.notes.length > 0}
-        <div class={styles.feed}>
+        >
-          <For each={context?.notes} >
+          <div class={styles.feed}>
-            {note => <ArticlePreview article={note} />}
+            <For each={context?.notes} >
-          </For>
+              {note => <ArticlePreview article={note} />}
-        </div>
+            </For>
-      </Show>
+          </div>
+        </Show>
 
-      <Switch>
+        <Switch>
-        <Match
+          <Match
-          when={!isPageLoading() && context?.notes && context?.notes.length === 0}
+            when={!isPageLoading() && context?.notes && context?.notes.length === 0}
-        >
+          >
-          <div class={styles.noContent}>
+            <div class={styles.noContent}>
-            <Loader />
+              <Loader />
-          </div>
+            </div>
-        </Match>
+          </Match>
-        <Match
+          <Match
-          when={isPageLoading()}
+            when={isPageLoading()}
-        >
+          >
-          <div class={styles.noContent}>
+            <div class={styles.noContent}>
-            <Loader />
+              <Loader />
-          </div>
+            </div>
-        </Match>
+          </Match>
-      </Switch>
+        </Switch>
-      <Paginator loadNextPage={context?.actions.fetchNextPage}/>
+        <Paginator loadNextPage={context?.actions.fetchNextPage}/>
+      </div>
     </div>
   )
 }