Minor style fixes

src/components/Article/CommentDate.module.scss

@@ -1,16 +1,17 @@
 .commentDates {
-  @include font-size(1.2rem);
-
-  flex: 1;
-  display: flex;
-  gap: 1rem;
+  color: #9fa1a7;
   align-items: center;
-  justify-content: flex-start;
+  display: flex;
+  flex: 1;
+  @include font-size(1.2rem);
   font-size: 1.2rem;
+  gap: 1rem;
+  justify-content: flex-start;
   margin: 0 1em 4px 0;
-  color: rgb(0 0 0 / 30%);
 
   .date {
+    font-weight: 500;
+
     .icon {
       line-height: 1;
       width: 1rem;

src/components/Article/FullArticle.tsx

@@ -33,6 +33,7 @@ import { Icon } from '../_shared/Icon'
 import { SolidSwiper } from '../_shared/SolidSwiper'
 
 import styles from './Article.module.scss'
+import { CardTopic } from '../Feed/CardTopic'
 
 interface Props {
   article: Shout
@@ -137,14 +138,7 @@ export const FullArticle = (props: Props) => {
             <Show when={props.article.layout !== 'audio'}>
               <div class={styles.shoutHeader}>
                 <Show when={mainTopic()}>
-                  <div class={styles.shoutTopic}>
-                    <a
-                      href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
-                      class={styles.mainTopicLink}
-                    >
-                      {mainTopic().title}
-                    </a>
-                  </div>
+                  <CardTopic title={mainTopic().title} slug={props.article.mainTopic} />
                 </Show>
 
                 <h1>{props.article.title}</h1>

src/components/Feed/ArticleCard.module.scss

@@ -93,6 +93,7 @@
 }
 
 .shoutCardCover {
+  background: rgb(0 0 0 / 30%);
   height: 0;
   margin-bottom: 1.6rem;
   overflow: hidden;
@@ -136,7 +137,8 @@
 }
 
 .shoutDate {
-  color: rgb(0 0 0 / 50%);
+  color: #9fa1a7;
+  font-weight: 500;
 }
 
 .shoutDetails {
@@ -401,6 +403,10 @@
     }
   }
 
+  &.shoutCardNoImage {
+    background: rgb(0 0 0 / 50%);
+  }
+
   &,
   a,
   .shoutCardTitle,
@@ -775,7 +781,3 @@
 .shoutTopicTop {
   margin-bottom: 0.4rem !important;
 }
-
-.shoutCardNoImage:not(.shoutCardFeed) {
-  background: rgb(0 0 0 / 50%);
-}

src/components/Feed/ArticleCard.tsx

@@ -109,10 +109,12 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [styles.shoutCardNoImage]: !cover
       }}
     >
-      <Show when={!props.settings?.noimage && cover && !props.settings?.isFeedMode}>
+      <Show when={!props.settings?.noimage && !props.settings?.isFeedMode}>
         <div class={styles.shoutCardCoverContainer}>
           <div class={styles.shoutCardCover}>
-            <img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
+            <Show when={cover}>
+              <img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
+            </Show>
           </div>
         </div>
       </Show>

src/components/Feed/Beside.module.scss

@@ -14,6 +14,10 @@
   li {
     margin-bottom: 1.6rem;
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     &.top {
       border-bottom: 1px solid #e1e1e1;
       display: flex;

src/components/Views/Feed.tsx

@@ -150,29 +150,31 @@ export const FeedView = () => {
                   {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
                 </For>
 
-                <div class={stylesBeside.besideColumnTitle}>
-                  <h4>{t('Popular authors')}</h4>
-                  <a href="/authors">
-                    {t('All authors')}
-                    <Icon name="arrow-right" class={stylesBeside.icon} />
-                  </a>
-                </div>
+                <div class={styles.asideSection}>
+                  <div class={stylesBeside.besideColumnTitle}>
+                    <h4>{t('Popular authors')}</h4>
+                    <a href="/authors">
+                      {t('All authors')}
+                      <Icon name="arrow-right" class={stylesBeside.icon} />
+                    </a>
+                  </div>
 
-                <ul class={stylesBeside.besideColumn}>
-                  <For each={topAuthors().slice(0, 5)}>
-                    {(author) => (
-                      <li>
-                        <AuthorCard
-                          author={author}
-                          hideWriteButton={true}
-                          hasLink={true}
-                          truncateBio={true}
-                          isTextButton={true}
-                        />
-                      </li>
-                    )}
-                  </For>
-                </ul>
+                  <ul class={stylesBeside.besideColumn}>
+                    <For each={topAuthors().slice(0, 5)}>
+                      {(author) => (
+                        <li>
+                          <AuthorCard
+                            author={author}
+                            hideWriteButton={true}
+                            hasLink={true}
+                            truncateBio={true}
+                            isTextButton={true}
+                          />
+                        </li>
+                      )}
+                    </For>
+                  </ul>
+                </div>
 
                 <For each={sortedArticles().slice(4)}>
                   {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}