From b4e1ed2835336a799054612dcfd50b59ca2ca792 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 29 May 2023 22:27:25 +0300
Subject: [PATCH] Fixed article cards style

---
 src/components/Feed/ArticleCard.module.scss | 63 +++++++++------------
 src/components/Feed/CardTopic.module.scss   |  4 +-
 2 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 470a7be3..4c323463 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -118,10 +118,13 @@
 
 .shoutCardTitle {
   @include font-size(2.2rem);
-
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 0.8rem;
+
+  :global(.col-md-12) & {
+    @include font-size(2.6rem);
+  }
 }
 
 .shoutCardTitle,
@@ -129,7 +132,6 @@
   &,
   .shoutCardLinkContainer {
     box-decoration-break: clone;
-
     /* stylelint-disable-next-line */
     -webkit-box-decoration-break: clone;
   }
@@ -267,7 +269,6 @@
     .shoutCardTitle,
     .shoutCardSubtitle {
       @include font-size(2.6rem);
-
       display: inline;
       line-height: 1.2;
     }
@@ -288,20 +289,24 @@
   .shoutAuthor {
     margin-top: 0.8rem;
 
-    a {
+    a:link,
+    a:visited {
       color: rgb(255 255 255 / 50%);
     }
+
+    a:hover {
+      background-color: #fff !important;
+    }
   }
 
-  .shoutCardTitle {
-    a {
-      color: #fff;
-    }
+  a:link,
+  a:visited {
+    color: #fff;
   }
 
   a:hover {
     background: #fff;
-    color: #000 !important;
+    color: #000;
   }
 
   .shoutCardTitlesContainer {
@@ -508,27 +513,22 @@
     padding: 0;
   }
 
-  .shoutCardTitle {
-    font-size: 2.6rem !important;
+  .shoutCardTitle,
+  .shoutCardSubtitle {
+    font-size: 2.2rem !important;
 
     @include media-breakpoint-between(lg, xl) {
-      font-size: 2.4rem !important;
+      font-size: 1.8rem !important;
     }
   }
 
   .shoutCardContent {
     justify-content: start;
     position: relative;
+  }
 
-    .shoutCardSubtitle {
-      @include media-breakpoint-up(lg) {
-        @include font-size(2rem);
-      }
-
-      @include media-breakpoint-between(lg, xl) {
-        @include font-size(1.8rem);
-      }
-    }
+  .shoutDate {
+    color: rgb(255 255 255 / 0.5);
   }
 }
 
@@ -562,8 +562,7 @@
 
 .shoutCardBigTitle {
   .shoutCardTitle {
-    @include font-size(3.2rem);
-
+    @include font-size(2.6rem);
     display: block;
     padding-right: 0;
   }
@@ -577,8 +576,7 @@
 .shoutCardCompact {
   .shoutCardTitle,
   .shoutCardSubtitle {
-    @include font-size(2.6rem);
-
+    @include font-size(2.2rem);
     display: inline;
     line-height: 1.2;
   }
@@ -586,19 +584,15 @@
   .shoutCardSubtitle {
     padding-left: 0.3em;
     box-decoration-break: slice;
-
     /* stylelint-disable-next-line */
     -webkit-box-decoration-break: slice;
   }
 
-  a {
-    color: #fff;
+  a:link {
+    background: none !important;
 
-    &:hover {
-      .shoutCardSubtitle {
-        background-color: #fff;
-        color: #000;
-      }
+    .shoutCardSubtitle {
+      color: #696969;
     }
   }
 }
@@ -610,7 +604,6 @@
   .shoutCardTitle,
   .shoutCardSubtitle {
     display: inline;
-
     @include font-size(1.4rem);
   }
 
@@ -671,14 +664,12 @@
 
   .shoutCardTitle {
     @include font-size(4rem);
-
     font-weight: 900;
     line-height: 1.1;
   }
 
   .shoutCardSubtitle {
     @include font-size(2.4rem);
-
     color: #696969;
     flex: 1;
   }
diff --git a/src/components/Feed/CardTopic.module.scss b/src/components/Feed/CardTopic.module.scss
index 1efa7d97..46657d54 100644
--- a/src/components/Feed/CardTopic.module.scss
+++ b/src/components/Feed/CardTopic.module.scss
@@ -22,7 +22,7 @@
 }
 
 .shoutTopicFloorImportant {
-  a {
-    color: rgb(255 255 255 / 50%);
+  a:hover {
+    background: $link-color !important;
   }
 }