From eac5704063c6c3f8ced29795f6dc7f227ab7c3d5 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Sat, 3 Jun 2023 01:01:34 +0300
Subject: [PATCH] Fixed article cards style

---
 src/components/Author/AuthorCard.module.scss | 16 ++++++++++++-
 src/components/Author/AuthorCard.tsx         | 11 +++++----
 src/components/Author/Userpic.module.scss    |  1 +
 src/components/Feed/ArticleCard.module.scss  | 11 ++++++---
 src/components/Feed/Beside.module.scss       | 24 ++++++++++++++++----
 src/components/Feed/Beside.tsx               | 11 ++++++++-
 6 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/components/Author/AuthorCard.module.scss b/src/components/Author/AuthorCard.module.scss
index a34840ed..8e4be847 100644
--- a/src/components/Author/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard.module.scss
@@ -14,12 +14,17 @@
 }
 
 .authorDetails {
+  align-items: baseline;
   display: flex;
   flex: 1;
 
   @include media-breakpoint-down(sm) {
     flex-wrap: wrap;
   }
+
+  @include media-breakpoint-between(md, lg) {
+    flex-wrap: wrap;
+  }
 }
 
 .authorDetailsWrapper {
@@ -30,14 +35,23 @@
     flex: 1;
   }
 
+  @include media-breakpoint-between(md, lg) {
+    flex: 1 0 100%;
+    margin-bottom: 0.8rem;
+  }
+
   @include media-breakpoint-up(md) {
     padding-right: 1.2rem;
   }
 }
 
+.authorNameContainer {
+  line-height: 1.1;
+}
+
 .authorName {
   border: none !important;
-  font-size: 1.7rem;
+  font-size: 1.6rem;
   font-weight: 500;
   margin-bottom: 0.8rem;
 }
diff --git a/src/components/Author/AuthorCard.tsx b/src/components/Author/AuthorCard.tsx
index 1384282c..5bc802bd 100644
--- a/src/components/Author/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard.tsx
@@ -31,6 +31,7 @@ interface AuthorCardProps {
   isComments?: boolean
   isFeedMode?: boolean
   isNowrap?: boolean
+  class?: string
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -81,7 +82,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
   }
   return (
     <div
-      class={clsx(styles.author)}
+      class={clsx(styles.author, props.class)}
       classList={{
         [styles.authorPage]: props.isAuthorPage,
         [styles.authorComments]: props.isComments,
@@ -101,9 +102,11 @@ export const AuthorCard = (props: AuthorCardProps) => {
       <div class={styles.authorDetails}>
         <div class={styles.authorDetailsWrapper}>
           <Show when={props.hasLink}>
-            <a class={styles.authorName} href={`/author/${props.author.slug}`}>
-              {name()}
-            </a>
+            <div class={styles.authorNameContainer}>
+              <a class={styles.authorName} href={`/author/${props.author.slug}`}>
+                {name()}
+              </a>
+            </div>
           </Show>
           <Show when={!props.hasLink}>
             <div class={styles.authorName}>{name()}</div>
diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss
index e974842f..2702c340 100644
--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@@ -55,6 +55,7 @@
   .userpic {
     font-size: 2em;
     line-height: 168px;
+    max-width: 100%;
     width: 100%;
   }
 }
diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 57ee7921..88ea5fff 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -396,9 +396,14 @@
     @include font-size(3.2rem);
   }
 
-  .shoutTopic a:hover {
-    background: #fff !important;
-    color: #000 !important;
+  .shoutTopic a {
+    &,
+    &:visited {
+      &:hover {
+        background: #fff !important;
+        color: #000 !important;
+      }
+    }
   }
 }
 
diff --git a/src/components/Feed/Beside.module.scss b/src/components/Feed/Beside.module.scss
index 386f8c72..6ac150e9 100644
--- a/src/components/Feed/Beside.module.scss
+++ b/src/components/Feed/Beside.module.scss
@@ -12,7 +12,7 @@
   }
 
   li {
-    margin-bottom: 1em;
+    margin-bottom: 1.6rem;
 
     &.top {
       border-bottom: 1px solid #e1e1e1;
@@ -67,13 +67,13 @@
 
   a:link {
     border: none;
-    @include font-size(1.5rem);
-    font-weight: 500;
+    @include font-size(1.4rem);
+    font-weight: bold;
     padding-right: 0.3em;
     white-space: nowrap;
 
     img {
-      margin-left: 0.3em;
+      margin-left: 0.8rem;
     }
 
     &:hover {
@@ -84,10 +84,21 @@
   }
 
   h4 {
+    @include font-size(2.6rem);
+    font-weight: bold;
     padding-right: 1em;
   }
 }
 
+.author {
+  border-bottom: 1px solid #e1e1e1;
+  padding-bottom: 1.6rem;
+
+  li:last-child & {
+    border-bottom: none;
+  }
+}
+
 .besideColumnTopic {
   font-size: 1.2rem;
   letter-spacing: 0.08em;
@@ -111,4 +122,9 @@ button.follow {
 
 .shoutCardContainer {
   display: flex;
+  order: 1;
+}
+
+.besideRatingColumnAuthor {
+  order: 2;
 }
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index 5460c4b7..4ea39b6a 100644
--- a/src/components/Feed/Beside.tsx
+++ b/src/components/Feed/Beside.tsx
@@ -32,7 +32,14 @@ export const Beside = (props: BesideProps) => {
         <div class="wide-container">
           <div class="row">
             <Show when={!!props.values}>
-              <div class="col-md-8">
+              <div
+                class={clsx(
+                  'col-md-8',
+                  styles[
+                    `besideRatingColumn${props.wrapper.charAt(0).toUpperCase() + props.wrapper.slice(1)}`
+                  ]
+                )}
+              >
                 <Show when={!!props.title}>
                   <div class={styles.besideColumnTitle}>
                     <h4>{props.title}</h4>
@@ -72,6 +79,8 @@ export const Beside = (props: BesideProps) => {
                             hideWriteButton={true}
                             hasLink={true}
                             truncateBio={true}
+                            isTextButton={true}
+                            class={styles.author}
                           />
                         </Show>
                         <Show when={props.wrapper === 'article' && value?.slug}>