Fixed article cards style

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;
 }

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}>
+            <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>

src/components/Author/Userpic.module.scss

@@ -55,6 +55,7 @@
   .userpic {
     font-size: 2em;
     line-height: 168px;
+    max-width: 100%;
     width: 100%;
   }
 }

src/components/Feed/ArticleCard.module.scss

@@ -396,10 +396,15 @@
     @include font-size(3.2rem);
   }
 
-  .shoutTopic a:hover {
+  .shoutTopic a {
+    &,
+    &:visited {
+      &:hover {
         background: #fff !important;
         color: #000 !important;
       }
+    }
+  }
 }
 
 .shoutCardContentTop {

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);
+    @include font-size(1.4rem);
-    font-weight: 500;
+    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;
 }

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}>