Update card sizing and typography

ekaterinburgdev · May 18, 2023 · 62d008c · 62d008c
1 parent 9684950
commit 62d008c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 43 deletions.
diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -16,7 +16,7 @@
     flex-direction: column;
     align-items: flex-start;
     padding: 16px;
-    border-radius: 8px;
+    border-radius: 16px;
     text-decoration: none;
     background-size: 100% auto;
     background-repeat: no-repeat;
@@ -33,7 +33,7 @@
 }
 
 .CardTitle {
-    font-size: 18px;
+    font-size: 20px;
     font-weight: 500;
     line-height: 1.05;
     margin-bottom: 8px;
@@ -51,7 +51,7 @@
 
 @media screen and (min-width: 768px) {
     .CardTitle {
-        font-size: 28px;
+        font-size: 32px;
         border-radius: 8px;
     }
 }
@@ -75,11 +75,11 @@
 
 .CardButton {
     display: inline-block;
-    border-radius: 4px;
-    font-size: 12px;
+    border-radius: 8px;
+    font-size: 14px;
     line-height: 1.35;
     font-weight: 400;
-    padding: 8px;
+    padding: .55em 1.2em;
     margin-top: auto;
     color: var(--CardButtonColor);
     background-color: var(--CardButtonBgrColor);

diff --git a/client/components/MainPage/MainPage.module.css b/client/components/MainPage/MainPage.module.css
@@ -1,59 +1,65 @@
 .MainPage {
     display: flex;
     justify-content: center;
-    background: #f2f2f2;
     overflow: hidden;
+    background: #f2f2f2;
 }
 
 .MainPageInner {
-    max-width: 1800px;
     width: 100%;
     margin: auto;
-    padding: 0 5vw;
+    padding: 0 20px;
 }
 
-.MainPageTitle {
-    font-size: 10vw;
-}
-
-@media screen and (min-width: 1200px) {
-    .MainPageTitle {
-        font-size: min(10vw, 160px);
+@media screen and (min-width: 768px) {
+    .MainPageInner {
+        max-width: 1800px;
+        padding: 0 2vmax;
     }
 }
 
 .MainPageLogo {
     display: flex;
     align-items: center;
-    font-size: 3.75vw;
-    line-height: 1;
-    margin-top: 0.15em;
+    margin-top: 0.5em;
+    margin-bottom: 1.1em;
     color: #123;
     font-weight: 500;
-    margin-bottom: 0.8em;
+    font-size: min(9.8vw, 176px);
+    line-height: 1;
+}
+
+
+@media screen and (min-width: 768px) {
+    .MainPageLogo {
+        margin-bottom: .8em;
+    }
 }
 
 .MainPageLogo svg {
     flex-shrink: 0;
-    width: 19.5vw;
-    height: 19.5vw;
-    margin-right: 5vw;
+    width: 2.3em;
+    height: 2.3em;
+    margin-right: .26em;
 }
 
-@media screen and (min-width: 768px) {
-    .MainPageLogo svg {
-        flex-shrink: 0;
-        width: 16vw;
-        height: 16vw;
-        margin-right: 3vw;
-    }
+.MainPageTitle {
+    font-size: 1em;
+    font-weight: 500;
+    margin: 0;
 }
 
 .MainPageCardGrid {
     display: grid;
-    grid-auto-flow: row dense;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: .9vw;
+    grid-auto-flow: row dense;
+    gap: 24px;
+}
+
+@media screen and (min-width: 768px) {
+    .MainPageCardGrid {
+        gap: 32px;
+    }
 }
 
 .MainPageCardGrid > * {
@@ -63,8 +69,8 @@
 /* TODO: control grid size via CMS */
 .MainPageCardGrid > *:nth-child(1),
 .MainPageCardGrid > *:nth-child(8) {
-    aspect-ratio: 2 / 1;
     grid-area: span 1 / span 2;
+    aspect-ratio: 2 / 1;
 }
 
 @media screen and (min-width: 768px) {

diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
@@ -52,15 +52,7 @@ export function MainPage({ cards, marqueeItems, notifications }: MainPageTypes)
                         ))}
                 </div>
 
-                <br />
                 <Marquee items={marqueeItems.map(({ attributes: { message } }) => message)} />
-
-                <footer
-                    className={cn(styles.MainPageFooter)}
-                    style={{ color: '#2e2e2e', margin: '80px 0 50px' }}
-                >
-                    Транспортная экосистема Екатеринбурга &copy; 2023
-                </footer>
             </div>
         </div>
     );

diff --git a/client/components/MainPage/Marquee/Marquee.module.css b/client/components/MainPage/Marquee/Marquee.module.css
@@ -1,13 +1,24 @@
 .Marquee {
+    padding: 16px;
+    margin-top: 48px;
+    margin-bottom: 64px;
     font-family: 'Press Start 2P';
-    padding: 8px;
     background: #000000;
-    border-radius: 8px;
+    border-radius: 24px;
     overflow: hidden;
     color: rgb(230, 50, 35);
     text-shadow: 0px 0px 16px #E63223;
 }
 
+@media screen and (min-width: 768px) {
+    .Marquee {
+        margin-top: 94px;
+        margin-bottom: 94px;
+        padding: 24px;
+        border-radius: 77px;
+    }
+}
+
 @media screen and (min-width: 1440px) {
     .Marquee {
         display: block;