Style fixes

src/components/Author/AuthorCard.module.scss

@@ -295,6 +295,7 @@
   }
 
   .button {
+    min-height: 4rem;
     margin: 0 0.8rem;
     vertical-align: middle;
 

src/components/Feed/Beside.tsx

@@ -102,7 +102,7 @@ export const Beside = (props: BesideProps) => {
                 </ul>
               </div>
             </Show>
-            <div class={clsx('col-md-14', styles.shoutCardContainer)}>
+            <div class={clsx('col-md-16', styles.shoutCardContainer)}>
               <ArticleCard
                 article={props.beside}
                 settings={{ isBigTitle: true, isBeside: true, nodate: props.nodate }}

src/components/Nav/Header.module.scss

@@ -444,6 +444,16 @@
       width: 2.4rem;
     }
 
+    a:hover {
+      .icon {
+        display: block;
+
+        @include media-breakpoint-up(lg) {
+          display: none;
+        }
+      }
+    }
+
     img {
       max-width: none;
       height: 2.4rem;
@@ -469,6 +479,10 @@
     }
   }
 
+  button {
+    margin: 0 !important;
+  }
+
   a::before {
     display: none;
   }
@@ -484,8 +498,12 @@
     }
 
     .textLabel {
-      background-color: var(--link-hover-background);
+      //background-color: var(--link-hover-background);
       color: var(--link-hover-color);
     }
   }
+
+  a:hover {
+    background-color: var(--link-hover-background) !important;
+  }
 }

src/components/Nav/HeaderAuth.tsx

@@ -186,6 +186,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
                   <a href="?modal=auth&mode=login">
                     <span class={styles.textLabel}>{t('Enter')}</span>
                     <Icon name="user-default" class={styles.icon} />
+                    {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>
               }

src/components/Topic/Card.module.scss

@@ -1,6 +1,4 @@
 .topicContainer {
-  border-bottom: 1px solid #e1e1e1;
-
   li:last-child & {
     border: none;
   }
@@ -35,10 +33,13 @@
 
 .topicTitle {
   @include font-size(2.2rem);
-
   font-weight: bold;
   margin-bottom: 1.2rem;
   margin-top: 0.5rem !important;
+
+  a {
+    border: none;
+  }
 }
 
 .topicAvatar {

src/components/Views/AllTopics.tsx

@@ -154,19 +154,17 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                 {(letter) => (
                   <div class={clsx(styles.group, 'group')}>
                     <h2 id={`letter-${ALPHABET.indexOf(letter)}`}>{letter}</h2>
-                    <div class="container">
+                    <div class="row">
-                      <div class="row">
+                      <div class="col-lg-20">
-                        <div class="col-lg-20">
+                        <div class="row">
-                          <div class="row">
+                          <For each={byLetter()[letter]}>
-                            <For each={byLetter()[letter]}>
+                            {(topic) => (
-                              {(topic) => (
+                              <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
-                                <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
+                                <a href={`/topic/${topic.slug}`}>{topic.title}</a>
-                                  <a href={`/topic/${topic.slug}`}>{topic.title}</a>
+                                <span class={styles.articlesCounter}>{topic.stat.shouts}</span>
-                                  <span class={styles.articlesCounter}>{topic.stat.shouts}</span>
+                              </div>
-                                </div>
+                            )}
-                              )}
+                          </For>
-                            </For>
-                          </div>
                         </div>
                       </div>
                     </div>

src/components/_shared/SearchField.module.scss

@@ -4,7 +4,6 @@
 
   input {
     border: none;
-    border-bottom: 1px solid #ccc;
     box-shadow: 0 0 0 #ccc;
     font-family: inherit;
     font-size: inherit;

src/components/_shared/Stat.module.scss

@@ -1,6 +1,5 @@
 .statMetrics {
   @include font-size(1.7rem);
-
   color: #9fa1a7;
   display: flex;
   margin: 0 0 1em;
@@ -16,7 +15,6 @@
 
 .statMetricsItem {
   @include font-size(1.5rem);
-
   margin-right: 1.6rem;
   white-space: nowrap;
 

src/components/_shared/VideoPlayer/VideoPlayer.module.scss

@@ -6,6 +6,10 @@
   margin: 1rem 0;
   position: relative;
 
+  @include media-breakpoint-up(md) {
+    margin: 1rem -16.6666% 2rem -25%;
+  }
+
   .controls {
     display: flex;
     flex-direction: row;
@@ -28,10 +32,6 @@
     width: 100%;
     aspect-ratio: 16/9;
 
-    @include media-breakpoint-up(md) {
-      margin: 0 0 1em -16.6666%;
-    }
-
     iframe {
       height: 100%;
       width: 100%;

src/styles/AllTopics.module.scss

@@ -52,7 +52,6 @@
 
 .alphabet {
   @include font-size(1.5rem);
-
   color: rgba(0 0 0 / 20%);
   display: flex;
   flex-wrap: wrap;
@@ -62,13 +61,16 @@
   li {
     min-width: 1.5em;
     margin-right: 3%;
-    color: gray;
+    color: rgb(0 0 0 / 30%);
+  }
+
+  a {
+    border: none;
   }
 }
 
 .articlesCounter {
   @include font-size(1.2rem);
-
   margin-left: 0.5em;
   vertical-align: super;
 }