From d07050dff5358dd4691f2b35897540135bb5c694 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 14 Oct 2022 21:33:06 +0300
Subject: [PATCH] Rewrite several components style to css-modules

---
 public/icons/instagram-white.svg              |   4 +
 .../Author/{Card.scss => Card.module.scss}    |  92 +++++-
 src/components/Author/Card.tsx                |  42 ++-
 src/components/Author/Full.scss               |  61 ----
 src/components/Author/Full.tsx                |   2 +-
 .../{Userpic.scss => Userpic.module.scss}     |  14 +
 src/components/Author/Userpic.tsx             |   9 +-
 .../Feed/{Beside.scss => Beside.module.scss}  |  19 +-
 src/components/Feed/Beside.tsx                |  16 +-
 .../Feed/{Card.scss => Card.module.scss}      | 310 +++++++++---------
 src/components/Feed/Card.tsx                  |  85 +++--
 src/components/Feed/CardTopic.module.scss     |  26 ++
 src/components/Feed/CardTopic.tsx             |  20 ++
 src/components/Feed/Group.tsx                 |  36 +-
 src/components/Feed/Row2.tsx                  |   7 +-
 src/components/Feed/Row5.tsx                  |   6 +-
 src/components/Feed/RowShort.tsx              |   7 +-
 src/components/Feed/Slider.scss               |  14 -
 src/components/Feed/Slider.tsx                |   7 +-
 src/components/Nav/Private.tsx                |   5 -
 .../Topic/{Card.scss => Card.module.scss}     |  30 +-
 src/components/Topic/Card.tsx                 |  39 ++-
 src/components/Views/Author.tsx               |  36 +-
 src/components/Views/Topic.tsx                |   5 +-
 src/styles/app.scss                           |  58 ++--
 25 files changed, 557 insertions(+), 393 deletions(-)
 create mode 100644 public/icons/instagram-white.svg
 rename src/components/Author/{Card.scss => Card.module.scss} (59%)
 rename src/components/Author/{Userpic.scss => Userpic.module.scss} (72%)
 rename src/components/Feed/{Beside.scss => Beside.module.scss} (81%)
 rename src/components/Feed/{Card.scss => Card.module.scss} (66%)
 create mode 100644 src/components/Feed/CardTopic.module.scss
 create mode 100644 src/components/Feed/CardTopic.tsx
 rename src/components/Topic/{Card.scss => Card.module.scss} (77%)

diff --git a/public/icons/instagram-white.svg b/public/icons/instagram-white.svg
new file mode 100644
index 00000000..baf59f63
--- /dev/null
+++ b/public/icons/instagram-white.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M7.92 6C7.92 6.37974 7.80739 6.75095 7.59642 7.06669C7.38545 7.38244 7.08559 7.62853 6.73475 7.77385C6.38392 7.91917 5.99787 7.95719 5.62543 7.88311C5.25298 7.80902 4.91087 7.62616 4.64235 7.35764C4.37384 7.08913 4.19098 6.74702 4.11689 6.37457C4.04281 6.00213 4.08083 5.61608 4.22615 5.26525C4.37147 4.91441 4.61756 4.61455 4.93331 4.40358C5.24905 4.19261 5.62026 4.08 6 4.08C6.50904 4.08058 6.99706 4.28305 7.357 4.643C7.71695 5.00294 7.91942 5.49096 7.92 6ZM12 3.36V8.64C11.999 9.53082 11.6447 10.3849 11.0148 11.0148C10.3849 11.6447 9.53082 11.999 8.64 12H3.36C2.46918 11.999 1.61514 11.6447 0.985236 11.0148C0.355332 10.3849 0.00100889 9.53082 0 8.64V3.36C0.00100889 2.46918 0.355332 1.61514 0.985236 0.985236C1.61514 0.355332 2.46918 0.00100889 3.36 0H8.64C9.53082 0.00100889 10.3849 0.355332 11.0148 0.985236C11.6447 1.61514 11.999 2.46918 12 3.36ZM8.88 6C8.88 5.43039 8.71109 4.87357 8.39463 4.39996C8.07817 3.92634 7.62838 3.55721 7.10213 3.33923C6.57588 3.12125 5.99681 3.06421 5.43814 3.17534C4.87947 3.28646 4.36631 3.56076 3.96353 3.96353C3.56076 4.36631 3.28646 4.87947 3.17534 5.43814C3.06421 5.99681 3.12125 6.57588 3.33923 7.10213C3.55721 7.62838 3.92634 8.07817 4.39996 8.39463C4.87357 8.71109 5.43039 8.88 6 8.88C6.76356 8.87914 7.4956 8.57543 8.03551 8.03551C8.57543 7.4956 8.87914 6.76356 8.88 6ZM9.84 2.88C9.84 2.7376 9.79777 2.59839 9.71866 2.47999C9.63954 2.36159 9.52709 2.2693 9.39553 2.21481C9.26397 2.16031 9.1192 2.14605 8.97954 2.17383C8.83987 2.20162 8.71158 2.27019 8.61088 2.37088C8.51019 2.47158 8.44162 2.59987 8.41383 2.73953C8.38605 2.8792 8.40031 3.02397 8.45481 3.15553C8.5093 3.28709 8.60159 3.39954 8.71999 3.47866C8.83839 3.55777 8.9776 3.6 9.12 3.6C9.31096 3.6 9.49409 3.52414 9.62912 3.38912C9.76414 3.25409 9.84 3.07096 9.84 2.88Z" fill="#fff"/>
+</svg>
diff --git a/src/components/Author/Card.scss b/src/components/Author/Card.module.scss
similarity index 59%
rename from src/components/Author/Card.scss
rename to src/components/Author/Card.module.scss
index ef1dfa4c..8400502f 100644
--- a/src/components/Author/Card.scss
+++ b/src/components/Author/Card.module.scss
@@ -8,30 +8,30 @@
   }
 }
 
-.author__details {
+.authorDetails {
   display: flex;
   flex: 1;
   padding-right: 1.2rem;
   width: max-content;
 }
 
-.author__details-wrapper {
+.authorDetailsWrapper {
   flex: 1;
 }
 
-.author__name {
+.authorName {
   border: none !important;
   font-size: 1.7rem;
   font-weight: 500;
   margin-bottom: 0.8rem;
 }
 
-.author__about {
+.authorAbout {
   font-size: 1.5rem;
   color: rgb(0 0 0 / 60%);
 }
 
-.author__subscribe {
+.authorSubscribe {
   @include media-breakpoint-down(lg) {
     padding: 0 0 0 42px;
   }
@@ -43,6 +43,7 @@
     height: 32px;
     margin-right: 0.4rem;
     position: relative;
+    transition: background-color 0.2s;
     vertical-align: middle;
     width: 32px;
 
@@ -57,8 +58,17 @@
       position: absolute;
       top: 50%;
       transform: translate(-50%, -50%);
+      transition: filter 0.2s;
       width: 18px;
     }
+
+    &:hover {
+      background: #000;
+
+      &::before {
+        filter: invert(0);
+      }
+    }
   }
 
   a[href*='facebook.com/'] {
@@ -90,9 +100,15 @@
       background-image: url(/icons/tumblr-white.svg);
     }
   }
+
+  a[href*='instagram.com/'] {
+    &::before {
+      background-image: url(/icons/instagram-white.svg);
+    }
+  }
 }
 
-.button--subscribe {
+.buttonSubscribe {
   align-items: center;
   aspect-ratio: 1/1;
   background: #f6f6f6;
@@ -105,14 +121,15 @@
   }
 }
 
-.button__label {
+.buttonLabel {
   display: none;
 }
 
-.button--write {
+.buttonWrite {
   background: #f7f7f7;
   color: #000;
   display: inline-flex;
+
   @include font-size(1.5rem);
 
   .icon {
@@ -123,3 +140,62 @@
     height: 15px;
   }
 }
+
+.authorPage {
+  .authorName {
+    @include font-size(3.4rem);
+
+    font-weight: 500;
+    margin-bottom: 0.2em;
+  }
+
+  .authorAbout {
+    color: #696969;
+    @include font-size(1.7rem);
+  }
+
+  .authorSubscribe {
+    display: flex;
+    margin-top: 2rem;
+  }
+
+  .authorDetails {
+    display: block;
+  }
+
+  .buttonLabel {
+    display: block;
+  }
+
+  .buttonSubscribe {
+    aspect-ratio: auto;
+    background-color: #000;
+    border-radius: 2px;
+    float: none;
+    padding-bottom: 0.6rem;
+    padding-top: 0.6rem;
+
+    .icon {
+      margin-right: 0.5em;
+
+      img {
+        filter: invert(1);
+      }
+    }
+
+    &:hover {
+      .icon img {
+        filter: invert(0.7);
+      }
+    }
+  }
+
+  .buttonSubscribe img {
+    vertical-align: text-top;
+  }
+
+  .button {
+    margin-right: 1.6rem;
+    vertical-align: middle;
+  }
+}
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index 60f2275e..4931f4b3 100644
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@@ -2,13 +2,14 @@ import { For, Show } from 'solid-js/web'
 import type { Author } from '../../graphql/types.gen'
 import Userpic from './Userpic'
 import { Icon } from '../Nav/Icon'
-import './Card.scss'
+import style from './Card.module.scss'
 import { createMemo } from 'solid-js'
 import { translit } from '../../utils/ru2en'
 import { t } from '../../utils/intl'
 import { useAuthStore } from '../../stores/auth'
 import { locale } from '../../stores/ui'
 import { follow, unfollow } from '../../stores/zine/common'
+import { clsx } from 'clsx'
 
 interface AuthorCardProps {
   compact?: boolean
@@ -17,6 +18,7 @@ interface AuthorCardProps {
   hasLink?: boolean
   subscribed?: boolean
   author: Author
+  isAuthorPage?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -34,45 +36,51 @@ export const AuthorCard = (props: AuthorCardProps) => {
   }
   // TODO: reimplement AuthorCard
   return (
-    <div class="author">
-      <Userpic user={props.author} hasLink={props.hasLink} />
+    <div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}>
+      <Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} />
 
-      <div class="author__details">
-        <div class="author__details-wrapper">
+      <div class={style.authorDetails}>
+        <div class={style.authorDetailsWrapper}>
           <Show when={props.hasLink}>
-            <a class="author__name text-3xl text-2xl" href={`/author/${props.author.slug}`}>
+            <a class={style.authorName} href={`/author/${props.author.slug}`}>
               {name()}
             </a>
           </Show>
           <Show when={!props.hasLink}>
-            <div class="author__name text-3xl text-2xl">{name()}</div>
+            <div class={style.authorName}>{name()}</div>
           </Show>
 
           <Show when={!props.hideDescription}>
-            <div class="author__about">{bio()}</div>
+            <div class={style.authorAbout}>{bio()}</div>
           </Show>
         </div>
 
         <Show when={canFollow()}>
-          <div class="author__subscribe">
+          <div class={style.authorSubscribe}>
             <Show
               when={subscribed()}
               fallback={
-                <button onClick={() => follow} class="button button--subscribe">
-                  <Icon name="author-subscribe" />
-                  <span class="button__label">+&nbsp;{t('Follow')}</span>
+                <button
+                  onClick={() => follow}
+                  class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                >
+                  <Icon name="author-subscribe" class={style.icon} />
+                  <span class={style.buttonLabel}>&nbsp;{t('Follow')}</span>
                 </button>
               }
             >
-              <button onClick={() => unfollow} class="button button--subscribe">
-                <Icon name="author-unsubscribe" />
-                <span class="button__label">-&nbsp;{t('Unfollow')}</span>
+              <button
+                onClick={() => unfollow}
+                class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+              >
+                <Icon name="author-unsubscribe" class={style.icon} />
+                <span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span>
               </button>
             </Show>
 
             <Show when={!props.compact}>
-              <button class="button button--write">
-                <Icon name="edit" />
+              <button class={clsx(style.buttonWrite, style.button, 'button')}>
+                <Icon name="edit" class={style.icon} />
                 {t('Write')}
               </button>
 
diff --git a/src/components/Author/Full.scss b/src/components/Author/Full.scss
index fcd0954e..4b505f0d 100644
--- a/src/components/Author/Full.scss
+++ b/src/components/Author/Full.scss
@@ -1,67 +1,6 @@
 .user-details {
   margin-bottom: 4.4rem;
   padding: 0;
-
-  .author__name {
-    @include font-size(3.4rem);
-
-    font-weight: 500;
-    margin-bottom: 0.2em;
-  }
-
-  .author__about {
-    color: #696969;
-    @include font-size(1.7rem);
-  }
-
-  .circlewrap {
-    margin-right: 4.8rem;
-    max-width: 168px;
-    min-width: 168px;
-    height: 168px;
-    width: 168px;
-  }
-
-  .circlewrap .userpic {
-    font-size: 2em;
-    line-height: 168px;
-    width: 100%;
-  }
-
-  .author__subscribe {
-    margin-top: 2rem;
-  }
-
-  .author__details {
-    display: block;
-  }
-
-  .button--subscribe {
-    aspect-ratio: auto;
-    background-color: #000;
-    border-radius: 2px;
-    float: none;
-    padding-bottom: 0.6rem;
-    padding-top: 0.6rem;
-  }
-
-  .button__label {
-    display: block;
-  }
-
-  .button--subscribe .icon {
-    filter: invert(1);
-    margin-right: 0.5em;
-  }
-
-  .button--subscribe img {
-    vertical-align: text-top;
-  }
-
-  .button {
-    margin-right: 1.6rem;
-    vertical-align: middle;
-  }
 }
 
 .author-page {
diff --git a/src/components/Author/Full.tsx b/src/components/Author/Full.tsx
index cb1d2822..9f869f7e 100644
--- a/src/components/Author/Full.tsx
+++ b/src/components/Author/Full.tsx
@@ -7,7 +7,7 @@ export default (props: { author: Author }) => {
     <div class="container">
       <div class="row">
         <div class="user-details">
-          <AuthorCard author={props.author} compact={false} />
+          <AuthorCard author={props.author} compact={false} isAuthorPage={true} />
         </div>
       </div>
     </div>
diff --git a/src/components/Author/Userpic.scss b/src/components/Author/Userpic.module.scss
similarity index 72%
rename from src/components/Author/Userpic.scss
rename to src/components/Author/Userpic.module.scss
index d5f1f951..7006922a 100644
--- a/src/components/Author/Userpic.scss
+++ b/src/components/Author/Userpic.module.scss
@@ -33,3 +33,17 @@
     }
   }
 }
+
+.big.circlewrap {
+  margin-right: 4.8rem;
+  max-width: 168px;
+  min-width: 168px;
+  height: 168px;
+  width: 168px;
+
+  .userpic {
+    font-size: 2em;
+    line-height: 168px;
+    width: 100%;
+  }
+}
diff --git a/src/components/Author/Userpic.tsx b/src/components/Author/Userpic.tsx
index b1a68670..0a075738 100644
--- a/src/components/Author/Userpic.tsx
+++ b/src/components/Author/Userpic.tsx
@@ -1,10 +1,11 @@
 import { Show } from 'solid-js/web'
 import type { Author } from '../../graphql/types.gen'
-import './Userpic.scss'
+import style from './Userpic.module.scss'
 
 interface UserpicProps {
   user: Author
   hasLink?: boolean
+  isBig?: boolean
 }
 
 export default (props: UserpicProps) => {
@@ -15,7 +16,7 @@ export default (props: UserpicProps) => {
   }
 
   return (
-    <div class="circlewrap">
+    <div class={style.circlewrap} classList={{ [style.big]: props.isBig }}>
       <Show when={props.hasLink}>
         <a href={`/author/${props.user.slug}`}>
           <Show
@@ -28,7 +29,7 @@ export default (props: UserpicProps) => {
               />
             }
           >
-            <div class="userpic">{letters()}</div>
+            <div class={style.userpic}>{letters()}</div>
           </Show>
         </a>
       </Show>
@@ -44,7 +45,7 @@ export default (props: UserpicProps) => {
             />
           }
         >
-          <div class="userpic">{letters()}</div>
+          <div class={style.userpic}>{letters()}</div>
         </Show>
       </Show>
     </div>
diff --git a/src/components/Feed/Beside.scss b/src/components/Feed/Beside.module.scss
similarity index 81%
rename from src/components/Feed/Beside.scss
rename to src/components/Feed/Beside.module.scss
index f248bcfa..18cd2468 100644
--- a/src/components/Feed/Beside.scss
+++ b/src/components/Feed/Beside.module.scss
@@ -1,4 +1,4 @@
-.beside-column {
+.besideColumn {
   counter-reset: item;
   list-style-type: none;
   padding-left: 0;
@@ -29,17 +29,6 @@
         text-align: center;
         width: 2em;
       }
-
-      .shout-card--short {
-        font-size: 1.4rem;
-        margin-bottom: 0;
-
-        .shout-card__title,
-        .shout-card__subtitle {
-          display: inline;
-          @include font-size(1.4rem);
-        }
-      }
     }
   }
 
@@ -51,7 +40,7 @@
   }
 }
 
-.beside-column-title {
+.besideColumnTitle {
   align-items: baseline;
   justify-content: space-between;
   display: flex;
@@ -87,14 +76,14 @@
   }
 }
 
-.beside-column__topic {
+.besideColumnTopic {
   font-size: 1.2rem;
   letter-spacing: 0.08em;
   margin-bottom: 0.4rem;
   text-transform: uppercase;
 }
 
-.beside-column__shout {
+.besideColumnShout {
   font-size: 1.4rem;
 
   h4 {
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index e4f894f8..21b28f19 100644
--- a/src/components/Feed/Beside.tsx
+++ b/src/components/Feed/Beside.tsx
@@ -4,7 +4,7 @@ import { For, Show } from 'solid-js/web'
 import { ArticleCard } from './Card'
 import { AuthorCard } from '../Author/Card'
 import { TopicCard } from '../Topic/Card'
-import './Beside.scss'
+import style from './Beside.module.scss'
 import type { Author, Shout, Topic, User } from '../../graphql/types.gen'
 import { Icon } from '../Nav/Icon'
 import { t } from '../../utils/intl'
@@ -15,8 +15,10 @@ interface BesideProps {
   beside: Shout
   wrapper: 'topic' | 'author' | 'article' | 'top-article'
   isTopicCompact?: boolean
+  isTopicInRow?: boolean
   topicShortDescription?: boolean
   topicsBySlug?: { [slug: string]: Topic }
+  iconButton?: boolean
 }
 
 export default (props: BesideProps) => {
@@ -27,7 +29,7 @@ export default (props: BesideProps) => {
           <Show when={!!props.values}>
             <div class="col-md-4">
               <Show when={!!props.title}>
-                <div class="beside-column-title">
+                <div class={style.besideColumnTitle}>
                   <h4>{props.title}</h4>
 
                   <Show when={props.wrapper === 'author'}>
@@ -38,15 +40,17 @@ export default (props: BesideProps) => {
                   </Show>
                 </div>
               </Show>
-              <ul class="beside-column">
+              <ul class={style.besideColumn}>
                 <For each={[...props.values]}>
                   {(value: Partial<Shout | User | Topic>) => (
-                    <li classList={{ top: props.wrapper.startsWith('top-') }}>
+                    <li classList={{ [style.top]: props.wrapper.startsWith('top-') }}>
                       <Show when={props.wrapper === 'topic'}>
                         <TopicCard
                           topic={value as Topic}
                           compact={props.isTopicCompact}
                           shortDescription={props.topicShortDescription}
+                          isTopicInRow={props.isTopicInRow}
+                          iconButton={props.iconButton}
                         />
                       </Show>
                       <Show when={props.wrapper === 'author'}>
@@ -58,7 +62,7 @@ export default (props: BesideProps) => {
                       <Show when={props.wrapper === 'top-article' && value?.slug}>
                         <ArticleCard
                           article={value as Shout}
-                          settings={{ noimage: true, noauthor: true, nodate: true }}
+                          settings={{ noimage: true, noauthor: true, nodate: true, isShort: true }}
                         />
                       </Show>
                     </li>
@@ -68,7 +72,7 @@ export default (props: BesideProps) => {
             </div>
           </Show>
           <div class="col-md-8">
-            <ArticleCard article={props.beside} settings={{}} />
+            <ArticleCard article={props.beside} settings={{ isBigTitle: true }} />
           </div>
         </div>
       </div>
diff --git a/src/components/Feed/Card.scss b/src/components/Feed/Card.module.scss
similarity index 66%
rename from src/components/Feed/Card.scss
rename to src/components/Feed/Card.module.scss
index b14f38c8..863ec09d 100644
--- a/src/components/Feed/Card.scss
+++ b/src/components/Feed/Card.module.scss
@@ -1,22 +1,12 @@
-.shout-card {
+.shoutCard {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
   margin-bottom: 2.4rem;
   position: relative;
 
-  .floor--1 &:nth-child(2) {
-    border-top: 1px solid #141414;
-    margin-top: 2.4rem !important;
-    padding-top: 2.4rem;
-
-    .shout-card__cover {
-      display: none;
-    }
-  }
-
   &:hover {
-    .shout-card__cover img {
+    .shoutCardCover img {
       transform: scale(1.05);
     }
   }
@@ -26,7 +16,13 @@
   }
 }
 
-.shout-card__titles-container {
+.shoutCardWithBorder {
+  border-top: 1px solid #141414;
+  margin-top: 2.4rem !important;
+  padding-top: 2.4rem;
+}
+
+.shoutCardTitlesContainer {
   a {
     &::before {
       content: '';
@@ -39,7 +35,7 @@
     }
 
     &:hover {
-      .shout-card__title .shout-card__link-container {
+      .shoutCardTitle .shoutCardLinkContainer {
         background-color: #000;
         color: #fff;
       }
@@ -47,11 +43,11 @@
   }
 }
 
-.shout-card__cover-container {
+.shoutCardCoverContainer {
   position: relative;
 }
 
-.shout-card__cover {
+.shoutCardCover {
   height: 0;
   margin-bottom: 1.6rem;
   overflow: hidden;
@@ -73,25 +69,19 @@
   }
 }
 
-.shout__topic,
-.shout__author {
-  a {
-    position: relative;
-    z-index: 2;
-  }
-}
-
-.shout__author,
-.shout__date {
+.shoutAuthor,
+.shoutDate {
   @include font-size(1.2rem);
 }
 
-.shout__author {
+.shoutAuthor {
   margin-right: 1.6rem;
 
   a {
     border: none;
     color: rgb(0 0 0 / 70%);
+    position: relative;
+    z-index: 2;
 
     &:hover {
       color: #fff;
@@ -99,15 +89,15 @@
   }
 }
 
-.shout__date {
+.shoutDate {
   color: rgb(0 0 0 / 50%);
 }
 
-.shout__details {
+.shoutDetails {
   display: flex;
 }
 
-.shout-card__title {
+.shoutCardTitle {
   @include font-size(2.2rem);
 
   font-weight: 700;
@@ -115,29 +105,33 @@
   margin-bottom: 0.8rem;
 }
 
-.shout-card__title,
-.shout-card__subtitle {
+.shoutCardTitle,
+.shoutCardSubtitle {
   &,
-  .shout-card__link-container {
+  .shoutCardLinkContainer {
     box-decoration-break: clone;
+
+    /* stylelint-disable-next-line */
+    -webkit-box-decoration-break: clone;
   }
 }
 
-.shout-card__subtitle {
+.shoutCardSubtitle {
   color: #696969;
   @include font-size(1.7rem);
 
   font-weight: 400;
   line-height: 1.3;
   margin-bottom: 0.8rem;
+  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 
-.shout-card__link-container {
+.shoutCardLinkContainer {
   position: relative;
   transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 
-.shout-card__edit-control {
+.shoutCardEditControl {
   border-radius: 2em;
   min-height: 2.6em;
   padding: 0 1.4em;
@@ -149,17 +143,17 @@
   }
 }
 
-.shout-card.withcover {
+.shoutCard.withcover {
   padding: 2.4rem;
 
   &,
   a,
-  .shout-card__title,
-  .shout-card__subtitle {
+  .shoutCardTitle,
+  .shoutCardSubtitle {
     color: #fff;
   }
 
-  .shout-card__cover {
+  .shoutCardCover {
     height: 100%;
     left: 0;
     padding: 0;
@@ -178,7 +172,7 @@
   }
 }
 
-.shout-card__type {
+.shoutCardType {
   background: #fff;
   border-radius: 100%;
   height: 3.2rem;
@@ -213,7 +207,7 @@
   }
 }
 
-.shout-card__content {
+.shoutCardContent {
   margin-bottom: 1em;
 
   @include media-breakpoint-up(md) {
@@ -229,7 +223,7 @@
   }
 
   .col-md-6 .col-md-6 {
-    .shout-card {
+    .shoutCard {
       border-bottom: 1px solid rgb(255 255 255 / 20%);
       margin: 3.6rem 0 0;
       padding-bottom: 2rem;
@@ -244,71 +238,56 @@
       }
     }
 
-    .shout-card__cover-container {
+    .shoutCardCoverContainer {
       display: none;
     }
 
-    .shout-card__title,
-    .shout-card__subtitle {
+    .shoutCardTitle,
+    .shoutCardSubtitle {
       display: inline;
       @include font-size(2.6rem);
 
       line-height: 1.2;
     }
 
-    .shout-card__subtitle {
+    .shoutCardSubtitle {
       color: #fff;
     }
 
-    .shout__author {
+    .shoutAuthor {
       margin-top: 0.6em;
     }
   }
 }
 
-.floor--important {
-  padding-bottom: $container-padding-x;
-  padding-top: $container-padding-x;
+.shoutCardFloorImportant {
+  margin-bottom: $grid-gutter-width;
 
-  @include media-breakpoint-up(md) {
-    padding-bottom: $grid-gutter-width;
-    padding-top: $grid-gutter-width;
-  }
-
-  h2 {
-    @include font-size(4.4rem);
-
-    text-align: center;
-  }
-
-  .shout-card {
-    margin-bottom: $grid-gutter-width;
-  }
-
-  .shout__author {
+  .shoutAuthor {
     margin-top: 0.8rem;
-  }
 
-  .col-md-6 {
-    .shout-card__title,
-    .shout-card__subtitle {
-      display: inline;
-      @include font-size(2.6rem);
-
-      line-height: 1.2;
-    }
-
-    .shout-card__title {
-      margin-right: 0.3em;
+    a {
+      color: rgb(255 255 255 / 50%);
     }
   }
 
-  .shout-card__titles-container {
+  .shoutCardTitle {
+    a {
+      color: #fff;
+    }
+  }
+
+  a:hover {
+    background: #fff;
+    color: #000 !important;
+  }
+
+  .shoutCardTitlesContainer {
     a {
       color: #fff;
 
       &:hover {
-        .shout-card__title .shout-card__link-container {
+        .shoutCardTitle .shoutCardLinkContainer {
           background-color: #fff;
           color: #000;
         }
@@ -317,7 +296,7 @@
   }
 }
 
-.shout-card--with-cover {
+.shoutCardWithCover {
   padding: 56.2% 2.4rem 0;
 
   @include media-breakpoint-down(sm) {
@@ -325,7 +304,7 @@
   }
 
   &.swiper-slide {
-    .shout-card__content {
+    .shoutCardContent {
       @include media-breakpoint-down(md) {
         padding-left: 10%;
       }
@@ -334,25 +313,25 @@
 
   &,
   a,
-  .shout-card__title,
-  .shout-card__subtitle {
+  .shoutCardTitle,
+  .shoutCardSubtitle {
     color: #fff !important;
   }
 
-  .shout__author,
-  .shout-card__titles-container {
+  .shoutAuthor,
+  .shoutCardTitlesContainer {
     a:hover {
       &,
-      .shout-card__title .shout-card__link-container {
+      .shoutCardTitle .shoutCardLinkContainer {
         background-color: #fff;
         color: #000 !important;
       }
     }
   }
 
-  .shout-card__cover-container,
-  .shout-card__cover,
-  .shout-card__content {
+  .shoutCardCoverContainer,
+  .shoutCardCover,
+  .shoutCardContent {
     height: 100%;
     left: 0;
     margin: 0;
@@ -362,7 +341,7 @@
     z-index: -1;
   }
 
-  .shout-card__content {
+  .shoutCardContent {
     display: flex;
     flex-direction: column;
     justify-content: end;
@@ -370,7 +349,7 @@
     z-index: 1;
   }
 
-  .shout-card__cover {
+  .shoutCardCover {
     padding: 0;
 
     &::after {
@@ -383,43 +362,37 @@
     }
   }
 
-  .shout-card__title {
+  .shoutCardTitle {
     @include font-size(3.2rem);
   }
 }
 
-.shout-card--content-top {
-  .shout-card__content {
+.shoutCardContentTop {
+  .shoutCardContent {
     justify-content: start;
   }
 }
 
-.shout-card--short {
-  .shout-card__title {
-    @include font-size(1.7rem);
-  }
-}
-
-.shout-card--photo-bottom {
-  .shout-card__content {
+.shoutCardPhotoBottom {
+  .shoutCardContent {
     margin-bottom: 1.6rem;
   }
 
-  .shout-card__cover-container {
+  .shoutCardCoverContainer {
     order: 2;
   }
 }
 
-.shout-card--feed {
+.shoutCardFeed {
   border-bottom: 1px solid #e8e8e8;
   margin-bottom: 2em;
 
-  .shout-card__content {
+  .shoutCardContent {
     margin-bottom: 0;
   }
 }
 
-.shout-card__details {
+.shoutCardDetails {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -431,11 +404,11 @@
   z-index: 2;
 }
 
-.shout-card__details-content {
+.shoutCardDetailsContent {
   display: flex;
 }
 
-.shout-card__details-item {
+.shoutCardDetailsTtem {
   align-items: center;
   display: flex;
   margin-right: 1.7em;
@@ -454,7 +427,7 @@
   }
 }
 
-.shout-card__comments {
+.shoutCardComments {
   align-items: center;
   display: flex;
 
@@ -476,12 +449,12 @@
   display: flex;
 }
 
-.rating__value {
+.ratingValue {
   font-weight: bold;
   margin: 0 0.5em;
 }
 
-.rating__control {
+.ratingControl {
   align-items: center;
   border: 2px solid;
   border-radius: 100%;
@@ -501,32 +474,18 @@
   }
 }
 
-.floor--7 {
-  @include media-breakpoint-down(md) {
-    margin-bottom: 1em;
+.shoutCardVertical {
+  aspect-ratio: auto;
+  height: 100%;
+  margin: 1.6rem 0;
+  padding: 0 0 20%;
+
+  @include media-breakpoint-up(md) {
+    aspect-ratio: 1 / 1.6;
+    padding: 0;
   }
 
-  .col-md-6 {
-    margin-bottom: 1.6em;
-
-    @include media-breakpoint-down(md) {
-      margin-right: 0;
-    }
-  }
-
-  .shout-card {
-    aspect-ratio: auto;
-    height: 100%;
-    margin: 1.6rem 0;
-    padding: 0 0 20%;
-
-    @include media-breakpoint-up(md) {
-      aspect-ratio: 1 / 1.6;
-      padding: 0;
-    }
-  }
-
-  .shout-card__title {
+  .shoutCardTitle {
     font-size: 2.6rem !important;
 
     @include media-breakpoint-between(lg, xl) {
@@ -534,11 +493,11 @@
     }
   }
 
-  .shout-card__content {
+  .shoutCardContent {
     justify-content: start;
     position: relative;
 
-    .shout-card__subtitle {
+    .shoutCardSubtitle {
       @include media-breakpoint-up(lg) {
         @include font-size(2rem);
       }
@@ -552,44 +511,93 @@
 
 .floor--9 {
   /* TODO: refactor these styles */
-  .shout-card__title,
-  .shout-card__subtitle {
+  .shoutCardTitle,
+  .shoutCardSubtitle {
     // display: inline;
     font-size: 2.2rem;
   }
 
-  .shout-card__title {
+  .shoutCardTitle {
     padding-right: 0.25em;
   }
 
-  .shout__author,
-  .shout__date {
+  .shoutAuthor,
+  .shoutDate {
     margin-top: 0.8rem;
   }
 
-  .beside-column .shout-card__titles-container {
+  .beside-column .shoutCardTitlesContainer {
     position: relative;
 
     a:hover {
-      .shout-card__link-container {
+      .shoutCardLinkContainer {
         color: #fff;
       }
     }
   }
 }
 
-.col-md-6,
-.col-lg-6,
-.col-md-8 {
-  .shout-card__title {
+.shoutCardBigTitle {
+  .shoutCardTitle {
     display: block;
     @include font-size(3.2rem);
 
     padding-right: 0;
   }
 
-  .shout-card__subtitle {
+  .shoutCardSubtitle {
     color: #696969;
     @include font-size(2.4rem);
   }
 }
+
+.shoutCardCompact {
+  .shoutCardTitle,
+  .shoutCardSubtitle {
+    display: inline;
+    @include font-size(2.6rem);
+
+    line-height: 1.2;
+  }
+
+  .shoutCardSubtitle {
+    padding-left: 0.3em;
+    box-decoration-break: slice;
+
+    /* stylelint-disable-next-line */
+    -webkit-box-decoration-break: slice;
+  }
+
+  a {
+    color: #fff;
+
+    &:hover {
+      .shoutCardSubtitle {
+        background-color: #fff;
+        color: #000;
+      }
+    }
+  }
+}
+
+.shoutCardShort {
+  font-size: 1.4rem;
+  margin-bottom: 0;
+
+  .shoutCardTitle,
+  .shoutCardSubtitle {
+    display: inline;
+
+    @include font-size(1.4rem);
+  }
+
+  .shoutCardTitle {
+    padding-right: 0.25em;
+  }
+
+  a:hover {
+    .shoutCardLinkContainer {
+      color: #fff;
+    }
+  }
+}
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index da9e33a6..49726b00 100644
--- a/src/components/Feed/Card.tsx
+++ b/src/components/Feed/Card.tsx
@@ -5,10 +5,12 @@ import type { Shout } from '../../graphql/types.gen'
 import { capitalize } from '../../utils'
 import { translit } from '../../utils/ru2en'
 import { Icon } from '../Nav/Icon'
-import './Card.scss'
+import style from './Card.module.scss'
 import { locale } from '../../stores/ui'
 import { handleClientRouteLinkClick } from '../../stores/router'
 import { getLogger } from '../../utils/logger'
+import { clsx } from 'clsx'
+import CardTopic from './CardTopic'
 
 const log = getLogger('card component')
 
@@ -23,6 +25,13 @@ interface ArticleCardProps {
     photoBottom?: boolean
     additionalClass?: string
     isFeedMode?: boolean
+    isFloorImportant?: boolean
+    isWithCover?: boolean
+    isBigTitle?: boolean
+    isVertical?: boolean
+    isShort?: boolean
+    withBorder?: boolean
+    isCompact?: boolean
   }
   article: Shout
 }
@@ -65,56 +74,64 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   return (
     <section
-      class={`shout-card ${props.settings?.additionalClass || ''}`}
+      class={clsx(style.shoutCard, `${props.settings?.additionalClass || ''}`)}
       classList={{
-        'shout-card--short': props.settings?.noimage,
-        'shout-card--photo-bottom': props.settings?.noimage && props.settings?.photoBottom,
-        'shout-card--feed': props.settings?.isFeedMode
+        [style.shoutCardShort]: props.settings?.isShort,
+        [style.shoutCardPhotoBottom]: props.settings?.noimage && props.settings?.photoBottom,
+        [style.shoutCardFeed]: props.settings?.isFeedMode,
+        [style.shoutCardFloorImportant]: props.settings?.isFloorImportant,
+        [style.shoutCardWithCover]: props.settings?.isWithCover,
+        [style.shoutCardBigTitle]: props.settings?.isBigTitle,
+        [style.shoutCardVertical]: props.settings?.isVertical,
+        [style.shoutCardWithBorder]: props.settings?.withBorder,
+        [style.shoutCardCompact]: props.settings?.isCompact
       }}
     >
       <Show when={!props.settings?.noimage && cover}>
-        <div class="shout-card__cover-container">
-          <div class="shout-card__cover">
+        <div class={style.shoutCardCoverContainer}>
+          <div class={style.shoutCardCover}>
             <img src={cover || ''} alt={title || ''} loading="lazy" />
           </div>
         </div>
       </Show>
 
-      <div class="shout-card__content">
+      <div class={style.shoutCardContent}>
         <Show when={layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)}>
-          <div class="shout-card__type">
+          <div class={style.shoutCardType}>
             <a href={`/topic/${mainTopic.slug}`}>
-              <Icon name={layout} />
+              <Icon name={layout} class={style.icon} />
             </a>
           </div>
         </Show>
 
         <Show when={!props.settings?.isGroup}>
-          <div class="shout__topic">
-            <a href={`/topic/${mainTopic.slug}`}>
-              {locale() === 'ru' && mainTopic.title ? mainTopic.title : mainTopic.slug.replace('-', ' ')}
-            </a>
-          </div>
+          <CardTopic
+            title={
+              locale() === 'ru' && mainTopic.title ? mainTopic.title : mainTopic.slug.replace('-', ' ')
+            }
+            slug={mainTopic.slug}
+            isFloorImportant={props.settings?.isFloorImportant}
+          />
         </Show>
 
-        <div class="shout-card__titles-container">
+        <div class={style.shoutCardTitlesContainer}>
           <a href={`/${slug || ''}`} onClick={handleClientRouteLinkClick}>
-            <div class="shout-card__title">
-              <span class="shout-card__link-container">{title}</span>
+            <div class={style.shoutCardTitle}>
+              <span class={style.shoutCardLinkContainer}>{title}</span>
             </div>
 
             <Show when={!props.settings?.nosubtitle && subtitle}>
-              <div class="shout-card__subtitle">
-                <span class="shout-card__link-container">{subtitle}</span>
+              <div class={style.shoutCardSubtitle}>
+                <span class={style.shoutCardLinkContainer}>{subtitle}</span>
               </div>
             </Show>
           </a>
         </div>
 
         <Show when={!props.settings?.noauthor || !props.settings?.nodate}>
-          <div class="shout__details">
+          <div class={style.shoutDetails}>
             <Show when={!props.settings?.noauthor}>
-              <div class="shout__author">
+              <div class={style.shoutAuthor}>
                 <For each={authors}>
                   {(author, index) => {
                     const name =
@@ -134,39 +151,39 @@ export const ArticleCard = (props: ArticleCardProps) => {
             </Show>
 
             <Show when={!props.settings?.nodate}>
-              <div class="shout__date">{formattedDate()}</div>
+              <div class={style.shoutDate}>{formattedDate()}</div>
             </Show>
           </div>
         </Show>
 
         <Show when={props.settings?.isFeedMode}>
-          <section class="shout-card__details">
-            <div class="shout-card__details-content">
-              <div class="shout-card__details-item rating">
+          <section class={style.shoutCardDetails}>
+            <div class={style.shoutCardDetailsContent}>
+              <div class={clsx(style.shoutCardDetailsItem, 'rating')}>
                 <button class="rating__control">&minus;</button>
                 <span class="rating__value">{stat?.rating || ''}</span>
                 <button class="rating__control">+</button>
               </div>
-              <div class="shout-card__details-item shout-card__comments">
-                <Icon name="eye" />
+              <div class={clsx(style.shoutCardDetailsItem, style.shoutCardComments)}>
+                <Icon name="eye" class={style.icon} />
                 {stat?.viewed}
               </div>
-              <div class="shout-card__details-item shout-card__comments">
+              <div class={clsx(style.shoutCardDetailsTtem, style.shoutCardComments)}>
                 <a href={`/${slug + '#comments' || ''}`}>
-                  <Icon name="comment" />
+                  <Icon name="comment" class={style.icon} />
                   {stat?.commented || ''}
                 </a>
               </div>
 
-              <div class="shout-card__details-item">
+              <div class={style.shoutCardDetailsItem}>
                 <button>
-                  <Icon name="bookmark" />
+                  <Icon name="bookmark" class={style.icon} />
                 </button>
               </div>
 
-              <div class="shout-card__details-item">
+              <div class={style.shoutCardDetailsItem}>
                 <button>
-                  <Icon name="ellipsis" />
+                  <Icon name="ellipsis" class={style.icon} />
                 </button>
               </div>
             </div>
diff --git a/src/components/Feed/CardTopic.module.scss b/src/components/Feed/CardTopic.module.scss
new file mode 100644
index 00000000..9ac681f7
--- /dev/null
+++ b/src/components/Feed/CardTopic.module.scss
@@ -0,0 +1,26 @@
+.shoutTopic {
+  font-size: 1.2rem;
+  letter-spacing: 0.08em;
+  margin-bottom: 0.8rem;
+  text-transform: uppercase;
+  transition: background-color 0.2s;
+
+  a {
+    background: transparent;
+    border: none;
+    color: $link-color;
+    position: relative;
+    z-index: 2;
+
+    &:hover {
+      background: $link-color;
+      color: #fff !important;
+    }
+  }
+}
+
+.shoutTopicFloorImportant {
+  a {
+    color: rgb(255 255 255 / 50%);
+  }
+}
diff --git a/src/components/Feed/CardTopic.tsx b/src/components/Feed/CardTopic.tsx
new file mode 100644
index 00000000..9f85f00e
--- /dev/null
+++ b/src/components/Feed/CardTopic.tsx
@@ -0,0 +1,20 @@
+import style from './CardTopic.module.scss'
+
+interface CardTopicProps {
+  title: string
+  slug: string
+  isFloorImportant?: boolean
+}
+
+export default (props: CardTopicProps) => {
+  return (
+    <div
+      class={style.shoutTopic}
+      classList={{
+        [style.shoutTopicFloorImportant]: props.isFloorImportant
+      }}
+    >
+      <a href={`/topic/${props.slug}`}>{props.title}</a>
+    </div>
+  )
+}
diff --git a/src/components/Feed/Group.tsx b/src/components/Feed/Group.tsx
index 0e4fac5e..2e2da95f 100644
--- a/src/components/Feed/Group.tsx
+++ b/src/components/Feed/Group.tsx
@@ -17,7 +17,10 @@ export default (props: GroupProps) => {
           <div class="group__header col-12">{props.header}</div>
 
           <div class="col-lg-6">
-            <ArticleCard article={props.articles[0]} settings={{ nosubtitle: false, noicon: true }} />
+            <ArticleCard
+              article={props.articles[0]}
+              settings={{ nosubtitle: false, noicon: true, isFloorImportant: true, isBigTitle: true }}
+            />
           </div>
 
           <div class="col-lg-6">
@@ -27,7 +30,10 @@ export default (props: GroupProps) => {
                   {(a) => (
                     <div class="row">
                       <div class="col-md-8">
-                        <ArticleCard article={a} settings={{ nosubtitle: false, noicon: true }} />
+                        <ArticleCard
+                          article={a}
+                          settings={{ nosubtitle: false, noicon: true, isBigTitle: true }}
+                        />
                       </div>
                     </div>
                   )}
@@ -36,12 +42,34 @@ export default (props: GroupProps) => {
               <Show when={props.articles.length >= 4}>
                 <div class="col-md-6">
                   <For each={props.articles.slice(1, 3)}>
-                    {(a) => <ArticleCard article={a} settings={{ noicon: true, noimage: true }} />}
+                    {(a) => (
+                      <ArticleCard
+                        article={a}
+                        settings={{
+                          noicon: true,
+                          noimage: true,
+                          isBigTitle: true,
+                          isCompact: true,
+                          isFloorImportant: true
+                        }}
+                      />
+                    )}
                   </For>
                 </div>
                 <div class="col-md-6">
                   <For each={props.articles.slice(3, 5)}>
-                    {(a) => <ArticleCard article={a} settings={{ noicon: true, noimage: true }} />}
+                    {(a) => (
+                      <ArticleCard
+                        article={a}
+                        settings={{
+                          noicon: true,
+                          noimage: true,
+                          isBigTitle: true,
+                          isCompact: true,
+                          isFloorImportant: true
+                        }}
+                      />
+                    )}
                   </For>
                 </div>
               </Show>
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index 7b3cd58e..e12b22bd 100644
--- a/src/components/Feed/Row2.tsx
+++ b/src/components/Feed/Row2.tsx
@@ -21,12 +21,7 @@ export default (props: { articles: Shout[] }) => {
             return (
               <Show when={!!a}>
                 <div class={`col-md-${x[y()][i()]}`}>
-                  <ArticleCard
-                    article={a}
-                    settings={{
-                      additionalClass: x[y()][i()] === '8' ? 'shout-card--with-cover' : ''
-                    }}
-                  />
+                  <ArticleCard article={a} settings={{ isWithCover: x[y()][i()] === '8' }} />
                 </div>
               </Show>
             )
diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx
index 232176ad..ea70ec49 100644
--- a/src/components/Feed/Row5.tsx
+++ b/src/components/Feed/Row5.tsx
@@ -10,14 +10,14 @@ export const Row5 = (props: { articles: Shout[] }) => {
       <div class="wide-container row">
         <div class="col-md-3">
           <ArticleCard article={props.articles[0]} />
-          <ArticleCard article={props.articles[1]} />
+          <ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
         </div>
         <div class="col-md-6">
-          <ArticleCard article={props.articles[2]} />
+          <ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} />
         </div>
         <div class="col-md-3">
           <ArticleCard article={props.articles[3]} />
-          <ArticleCard article={props.articles[4]} />
+          <ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
         </div>
       </div>
     </div>
diff --git a/src/components/Feed/RowShort.tsx b/src/components/Feed/RowShort.tsx
index 964a0b92..94e474f0 100644
--- a/src/components/Feed/RowShort.tsx
+++ b/src/components/Feed/RowShort.tsx
@@ -10,7 +10,12 @@ export default (props: { articles: Shout[] }) => (
           <div class="col-md-6 col-lg-3">
             <ArticleCard
               article={a}
-              settings={{ additionalClass: 'shout-card--with-cover shout-card--content-top' }}
+              settings={{
+                additionalClass: 'shout-card--content-top',
+                isWithCover: true,
+                isBigTitle: true,
+                isVertical: true
+              }}
             />
           </div>
         )}
diff --git a/src/components/Feed/Slider.scss b/src/components/Feed/Slider.scss
index d6788484..b3131f12 100644
--- a/src/components/Feed/Slider.scss
+++ b/src/components/Feed/Slider.scss
@@ -1,17 +1,3 @@
-.floor--slider {
-  .shout-card {
-    .shout-card__cover-container {
-      z-index: 1;
-    }
-
-    .shout-card__cover {
-      &::after {
-        background: linear-gradient(0deg, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 0%) 75%);
-      }
-    }
-  }
-}
-
 .swiper-slide {
   height: 0 !important;
   min-height: 0 !important;
diff --git a/src/components/Feed/Slider.tsx b/src/components/Feed/Slider.tsx
index 3278e7ac..97079c24 100644
--- a/src/components/Feed/Slider.tsx
+++ b/src/components/Feed/Slider.tsx
@@ -60,7 +60,12 @@ export default (props: SliderProps) => {
                 {(a: Shout) => (
                   <ArticleCard
                     article={a}
-                    settings={{ additionalClass: 'shout-card--with-cover swiper-slide' }}
+                    settings={{
+                      additionalClass: 'swiper-slide',
+                      isFloorImportant: true,
+                      isWithCover: true,
+                      nodate: true
+                    }}
                   />
                 )}
               </For>
diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx
index eb97bf2c..42a5ceb3 100644
--- a/src/components/Nav/Private.tsx
+++ b/src/components/Nav/Private.tsx
@@ -18,11 +18,6 @@ export default () => {
           <Icon name="pencil" />
         </a>
       </div>
-      <div class={clsx(styles.userControlItem, styles.userControlItemSearch)}>
-        <a href="/search">
-          <Icon name="search" />
-        </a>
-      </div>
       <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
         <a href="/inbox">
           {/*FIXME: replace with route*/}
diff --git a/src/components/Topic/Card.scss b/src/components/Topic/Card.module.scss
similarity index 77%
rename from src/components/Topic/Card.scss
rename to src/components/Topic/Card.module.scss
index 546d3883..801f7eaa 100644
--- a/src/components/Topic/Card.scss
+++ b/src/components/Topic/Card.module.scss
@@ -7,7 +7,7 @@
       margin-left: 0;
     }
 
-    .topic-details__item {
+    .topicDetailsItem {
       margin-bottom: 1.2rem;
 
       @include media-breakpoint-up(md) {
@@ -17,14 +17,28 @@
   }
 }
 
-.topic-title {
+.topicInRow {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    margin-top: 0;
+  }
+
+  .topicTitle {
+    margin-bottom: 0;
+  }
+}
+
+.topicTitle {
   font-weight: bold;
   @include font-size(1.7rem);
 
   margin-bottom: 0.8rem;
 }
 
-.topic__avatar {
+.topicAvatar {
   border-radius: 100%;
   height: 64px;
   margin-right: 1.2rem;
@@ -41,7 +55,7 @@
   }
 }
 
-.topic-description {
+.topicDescription {
   @include font-size(1.5rem);
 
   color: #696969;
@@ -52,14 +66,14 @@
   }
 }
 
-.topic-description--short {
-  display: box;
+.topicDescriptionShort {
+  display: block;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-.topic-details {
+.topicDetails {
   @include font-size(1.7rem);
 
   color: #9fa1a7;
@@ -70,7 +84,7 @@
   }
 }
 
-.topic-details__item {
+.topicDetailsItem {
   margin-right: 1.6rem;
   white-space: nowrap;
 
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 257dad2e..19684b27 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -1,6 +1,6 @@
 import { capitalize, plural } from '../../utils'
 import { Show } from 'solid-js/web'
-import './Card.scss'
+import style from './Card.module.scss'
 import { createMemo } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
@@ -9,6 +9,7 @@ import { locale } from '../../stores/ui'
 import { useAuthStore } from '../../stores/auth'
 import { follow, unfollow } from '../../stores/zine/common'
 import { getLogger } from '../../utils/logger'
+import { Icon } from '../Nav/Icon'
 
 const log = getLogger('TopicCard')
 
@@ -18,6 +19,9 @@ interface TopicProps {
   subscribed?: boolean
   shortDescription?: boolean
   subscribeButtonBottom?: boolean
+  additionalClass?: string
+  isTopicInRow?: boolean
+  iconButton?: boolean
 }
 
 export const TopicCard = (props: TopicProps) => {
@@ -40,15 +44,21 @@ export const TopicCard = (props: TopicProps) => {
     }
   }
   return (
-    <div class="topic" classList={{ row: !props.compact && !props.subscribeButtonBottom }}>
+    <div
+      class={style.topic}
+      classList={{
+        row: !props.compact && !props.subscribeButtonBottom,
+        [style.topicInRow]: props.isTopicInRow
+      }}
+    >
       <div classList={{ 'col-md-7': !props.compact && !props.subscribeButtonBottom }}>
         <Show when={props.topic.title}>
-          <div class="topic-title">
+          <div class={style.topicTitle}>
             <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
           </div>
         </Show>
         <Show when={props.topic.pic}>
-          <div class="topic__avatar">
+          <div class={style.topicAvatar}>
             <a href={props.topic.slug}>
               <img src={props.topic.pic} alt={props.topic.title} />
             </a>
@@ -56,15 +66,18 @@ export const TopicCard = (props: TopicProps) => {
         </Show>
 
         <Show when={!props.compact && props.topic?.body}>
-          <div class="topic-description" classList={{ 'topic-description--short': props.shortDescription }}>
+          <div
+            class={style.topicDescription}
+            classList={{ 'topic-description--short': props.shortDescription }}
+          >
             {props.topic.body}
           </div>
         </Show>
 
         <Show when={props.topic?.stat}>
-          <div class="topic-details">
+          <div class={style.topicDetails}>
             <Show when={!props.compact}>
-              <span class="topic-details__item" classList={{ compact: props.compact }}>
+              <span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.shouts +
                   ' ' +
                   t('post') +
@@ -73,7 +86,7 @@ export const TopicCard = (props: TopicProps) => {
                     locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                   )}
               </span>
-              <span class="topic-details__item" classList={{ compact: props.compact }}>
+              <span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.authors +
                   ' ' +
                   t('author') +
@@ -82,7 +95,7 @@ export const TopicCard = (props: TopicProps) => {
                     locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                   )}
               </span>
-              <span class="topic-details__item" classList={{ compact: props.compact }}>
+              <span class={style.topicDetailsItem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.followers +
                   ' ' +
                   t('follower') +
@@ -121,12 +134,16 @@ export const TopicCard = (props: TopicProps) => {
           when={subscribed()}
           fallback={
             <button onClick={() => subscribe(true)} class="button--light">
-              +&nbsp;{t('Follow')}
+              <Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
+
+              <Show when={!props.iconButton}>+&nbsp;{t('Follow')}</Show>
             </button>
           }
         >
           <button onClick={() => subscribe(false)} class="button--light">
-            -&nbsp;{t('Unfollow')}
+            <Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
+
+            <Show when={!props.iconButton}>-&nbsp;{t('Unfollow')}</Show>
           </button>
         </Show>
       </div>
diff --git a/src/components/Views/Author.tsx b/src/components/Views/Author.tsx
index 9fb5fb51..93bb3268 100644
--- a/src/components/Views/Author.tsx
+++ b/src/components/Views/Author.tsx
@@ -82,23 +82,33 @@ export const AuthorView = (props: AuthorProps) => {
           </div>
         </div>
 
-        <div class="floor">
-          <h3 class="col-12">{title()}</h3>
-          <div class="row">
-            <Show when={sortedArticles().length > 0}>
-              <Beside
-                title={t('Topics which supported by author')}
-                values={topicsByAuthor()[author().slug].slice(0, 5)}
-                beside={sortedArticles()[0]}
-                wrapper={'topic'}
-                topicShortDescription={true}
-              />
-              <Row3 articles={sortedArticles().slice(1, 4)} />
+        <h3 class="col-12">{title()}</h3>
+        <div class="row">
+          <Show when={sortedArticles().length > 0}>
+            <Beside
+              title={t('Topics which supported by author')}
+              values={topicsByAuthor()[author().slug].slice(0, 5)}
+              beside={sortedArticles()[0]}
+              wrapper={'topic'}
+              topicShortDescription={true}
+              isTopicCompact={true}
+              isTopicInRow={true}
+              iconButton={true}
+            />
+            <Row3 articles={sortedArticles().slice(1, 4)} />
+
+            <Show when={sortedArticles().length > 4}>
               <Row2 articles={sortedArticles().slice(4, 6)} />
+            </Show>
+
+            <Show when={sortedArticles().length > 6}>
               <Row3 articles={sortedArticles().slice(6, 9)} />
+            </Show>
+
+            <Show when={sortedArticles().length > 9}>
               <Row3 articles={sortedArticles().slice(9, 12)} />
             </Show>
-          </div>
+          </Show>
         </div>
       </Show>
     </div>
diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index 2f270c24..40412244 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -85,7 +85,10 @@ export const TopicView = (props: TopicProps) => {
               <For each={sortedArticles().slice(0, 6)}>
                 {(article) => (
                   <div class="col-md-6">
-                    <ArticleCard article={article} />
+                    <ArticleCard
+                      article={article}
+                      settings={{ isFloorImportant: true, isBigTitle: true }}
+                    />
                   </div>
                 )}
               </For>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 9123f966..8a0ac615 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -211,7 +211,7 @@ button {
 
   font-weight: 400;
   margin-top: 0.6rem;
-  padding: 0.6rem 1.2rem 1rem 1rem;
+  padding: 0.6rem 1.2rem 0.6rem 1rem;
 }
 
 form {
@@ -461,29 +461,48 @@ figcaption {
   }
 }
 
+.floor--7 {
+  @include media-breakpoint-down(md) {
+    margin-bottom: 1em;
+  }
+
+  .col-md-6 {
+    margin-bottom: 1.6em;
+
+    @include media-breakpoint-down(md) {
+      margin-right: 0;
+    }
+  }
+}
+
 .floor--important {
   background: #000;
   color: #fff;
   padding: $grid-gutter-width 0;
+  padding-bottom: $container-padding-x;
+  padding-top: $container-padding-x;
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: $grid-gutter-width;
+    padding-top: $grid-gutter-width;
+  }
+
+  h2 {
+    @include font-size(4.4rem);
+
+    text-align: center;
+  }
 
   @include media-breakpoint-down(md) {
     margin-bottom: 5rem;
   }
 
-  .all-materials,
-  .shout-card__title {
+  .all-materials {
     a {
       color: #fff;
     }
   }
 
-  .shout__topic,
-  .shout__author {
-    a {
-      color: rgb(255 255 255 / 50%);
-    }
-  }
-
   a:hover {
     background: #fff;
     color: #000 !important;
@@ -504,25 +523,6 @@ figcaption {
   }
 }
 
-.shout__topic {
-  font-size: 1.2rem;
-  letter-spacing: 0.08em;
-  margin-bottom: 0.8rem;
-  text-transform: uppercase;
-  transition: background-color 0.2s;
-
-  a {
-    background: transparent;
-    border: none;
-    color: $link-color;
-
-    &:hover {
-      background: $link-color;
-      color: #fff !important;
-    }
-  }
-}
-
 /* stylelint-disable-next-line */
 astro-island {
   display: flex !important;