Update a11y widget styles (#70)

* Add a11y card widget

* Update responsive styles

client/components/MainPage/Card/Card.module.css

@@ -10,6 +10,8 @@
     --CardSubtitleColor: inherit;
 
     position: relative;
+    z-index: 1;
+
     display: flex;
     flex-direction: column;
 
@@ -29,13 +31,19 @@
     overflow: hidden;
 }
 
-.Card:hover {
-    filter: brightness(0.97);
+@media (hover: hover) {
+    .Card:hover {
+        filter: brightness(0.98);
+    }
+}
+
+.Card:active {
+    filter: brightness(0.95);
 }
 
 .CardTitle {
     position: relative;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 500;
     line-height: 1.05;
     margin-bottom: 8px;
@@ -53,14 +61,6 @@
     margin: 0;
 }
 
-.CardBottomCapture {
-    font-size: 24px;
-}
-
-.CardBottomCapture_NoSubtitle {
-    font-size: 50px;
-}
-
 .CardTitle_Bg {
     padding: .5em .75em;
 }
@@ -70,18 +70,33 @@
 }
 
 .CardSubtitle {
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1.35;
     margin-top: 15px;
     color: var(--CardSubtitleColor);
 }
 
+
+@media screen and (min-width: 375px) {
+    .Card {
+        padding: 16px;
+    }
+}
+
 @media screen and (min-width: 768px) {
     .Card {
         padding: 32px;
         border-radius: 24px;
     }
 
+    .CardBottomCapture {
+        font-size: 24px;
+    }
+
+    .CardBottomCapture_NoSubtitle {
+        font-size: 50px;
+    }
+
     .CardTitle {
         font-size: 32px;
         border-radius: 8px;
@@ -102,6 +117,6 @@
     }
 
     .CardSubtitle {
-        font-size: clamp(20px, 1.2vw, 24px);
+        font-size: clamp(20px, 1.3vw, 24px);
     }
 }

client/components/MainPage/Card/CardDynamic/CardTransportA11y.module.css

@@ -1,17 +1,40 @@
 .CardTransportA11y {
-    font-size: 1.25em;
+    color: #4C3F00;
+    font-size: 1.5em;
 }
 
 .CardTransportA11yList {
     display: flex;
-    gap: 1.25em;
+    gap: 1em;
+    margin: 0;
 }
 
 .CardTransportA11yItem {
     font-weight: 600;
-    text-align: left;
+}
+
+.CardTransportA11yItem {
+    display: flex;
+    align-items: center;
+    gap: .15em;
+    font-weight: 500;
+    line-height: 1;
+}
+
+.CardTransportA11yItem img {
+    width: .9em;
+}
+
+.CardTransportA11yItem dt {
+    font-size: 0;
 }
 
 .CardTransportA11yItem dd {
-    margin: 12px 0 0;
+    margin: 0;
+}
+
+@media screen and (min-width: 768px) {
+    .CardTransportA11y {
+        font-size: 3em;
+    }
 }

client/components/MainPage/Card/CardDynamic/CardTransportA11y.tsx

@@ -9,16 +9,19 @@ export function CardTransportA11y({ buses, trolls, trams }) {
         <div className={cn(styles.CardTransportA11y)}>
             <dl className={cn(styles.CardTransportA11yList)}>
                 <div className={cn(styles.CardTransportA11yItem)}>
+                    <img src="/icons/bus-dark.svg" alt="" />
                     <dt>Автобусы</dt>
                     <dd>{buses}</dd>
                 </div>
 
                 <div className={cn(styles.CardTransportA11yItem)}>
+                    <img src="/icons/trol-dark.svg" alt="" /> 
                     <dt>Троллейбусы</dt>
                     <dd>{trolls}</dd>
                 </div>
 
                 <div className={cn(styles.CardTransportA11yItem)}>
+                    <img src="/icons/tram-dark.svg" alt="" />
                     <dt>Трамваи</dt>
                     <dd>{trams}</dd>
                 </div>

client/components/MainPage/MainPage.module.css

@@ -61,7 +61,7 @@
 }
 
 .MainPageCardGrid > *:first-child,
-.MainPageCardGrid > *:last-child {
+.MainPageCardGrid > *:nth-last-child(3) {
     grid-area: span 1 / span 2;
     aspect-ratio: 2 / 1;
     align-self: stretch;
@@ -76,15 +76,6 @@
 
 
 @media screen and (min-width: 1200px) {
-    .MainPageCardGrid > *:first-child {
-        aspect-ratio: auto;
-    }
-
-    .MainPageCardGrid > *:last-child {
-        grid-area: auto;
-        aspect-ratio: 1 / 1;
-    }
-
     .MainPageCardGrid {
         grid-template-columns: repeat(3,1fr);
     }

client/components/MainPage/Marquee/Marquee.module.css

@@ -2,6 +2,8 @@
     padding: 16px;
     font-family: 'Press Start 2P';
     background: #000000;
+    font-size: 16px;
+    padding: 1em 0;
     border-radius: 24px;
     overflow: hidden;
     color: rgb(230, 50, 35);
@@ -10,7 +12,7 @@
 
 @media screen and (min-width: 768px) {
     .Marquee {
-        padding: 24px;
+        font-size: 24px;
     }
 }
 
@@ -43,7 +45,6 @@
     padding-left: 100%;
     white-space: nowrap;
     font-weight: 500;
-    font-size: 24px;
     line-height: 1.35;
 }