Update responsive <Card> styles

ekaterinburgdev · Aug 27, 2024 · d330fa9 · d330fa9 · ekbdev · Aug 27, 2024
1 parent 08af36c
commit d330fa9
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 32 deletions.
diff --git a/client/components/Articles/Article/Article.module.css b/client/components/Articles/Article/Article.module.css
@@ -12,6 +12,7 @@
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
+    margin-bottom: 24px;
 }
 
 .ArticleControls {
@@ -157,13 +158,15 @@
 }
 
 .ArticleAside {
-    flex-shrink: 0;
-    flex-basis: 25%;
-    margin-top: 56px;
-    padding: 24px 0;
+    margin-top: 40px;
+    padding-top: 24px;
     border-top: 2px solid #eee;
 }
 
+.ArticleAsideFeedback {
+    display: none;
+}
+
 .ArticleText {
     flex-grow: 1;
 }
@@ -222,7 +225,7 @@
 @media screen and (min-width: 1200px) {
     .ArticleContent {
         display: flex;
-        gap: 16px;
+        gap: 48px;
     }
 
     .ArticleBack {
@@ -231,13 +234,26 @@
     }
 
     .ArticleAside {
+        flex-shrink: 0;
+        flex-basis: 25%;
         margin: 0;
         padding: 0;
         border: 0;
     }
+
+    .ArticleAsideFeedback {
+        display: flex;
+        flex-direction: column;
+        margin-top: 8px;
+        margin-bottom: 48px;
+    }
 }
 
 @media screen and (min-width: 1440px) {
+    .ArticleContent {
+        gap: 96px;
+    }
+
     .ArticleBack {
         font-size: 26px;
         margin-left: -16px;

diff --git a/client/components/Articles/Article/Article.tsx b/client/components/Articles/Article/Article.tsx
@@ -29,8 +29,13 @@ export function Article({ title, description, sidebar, external }: ArticleProps)
                     {title && <h1 className={cn(styles.ArticleTitle)}>{title}</h1>}
                     {description && <div dangerouslySetInnerHTML={{ __html: getContent(description) }} />}
                 </div>
-                {sidebar && <aside className={cn(styles.ArticleAside)}>
-                    <div dangerouslySetInnerHTML={{ __html: getContent(sidebar) }} />
+                {sidebar !== undefined && <aside className={cn(styles.ArticleAside)}>
+                    {external && (
+                        <div className={cn(styles.ArticleAsideFeedback)}>
+                            <Feedback size="l" />
+                        </div>
+                    )}
+                    {sidebar && <div dangerouslySetInnerHTML={{ __html: getContent(sidebar) }} />}
                 </aside>}
             </article>
         </div>

diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -93,7 +93,7 @@
     align-items: flex-start;
     width: 100%;
     position: relative;
-    font-size: 16px;
+    font-size: 12px;
     font-weight: 500;
     line-height: 1.05;
     margin-bottom: 8px;
@@ -127,14 +127,17 @@
 }
 
 .CardHeaderCaption {
-    margin-top: 15px;
-    font-size: 13px;
+    margin-top: 4px;
+    font-size: clamp(10px, 2.5vw, 20px);
     line-height: 1.35;
 }
 
 .CardExternalLink {
     flex-shrink: 0;
-    margin-left: 16px;
+    margin-top: 2px;
+    margin-left: 8px;
+    width: 1em;
+    height: 1em;
 }
 
 @media (hover: hover) {
@@ -177,6 +180,7 @@
     }
 
     .CardHeaderCaption {
+        margin-top: .775em;
         font-size: clamp(12px, 3vw, 20px);
     }
 
@@ -185,13 +189,13 @@
     }
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 768px) {
     .CardInner {
         padding: 32px;
     }
 
     .CardTitle {
-        font-size: max(24px, 4vw);
+        font-size: clamp(18px, 3vw, 24px);
     }
 
     .CardHeaderCaption {
@@ -203,22 +207,22 @@
     }
 
     .CardFooterCaption_NoSubtitle {
-        font-size: max(8vw, 48px);
+        font-size: clamp(12px, 4vw, 40px);
     }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 991px) {
     .Card {
         padding: 32px;
         border-radius: 24px;
     }
 
     .CardFooterCaption_NoSubtitle {
-        font-size: 48px;
+        font-size: 40px;
     }
 
     .CardTitle {
-        font-size: 32px;
+        font-size: 28px;
     }
 
     .CardHeaderCaption {

diff --git a/client/components/MainPage/Card/icon-external-link.svg b/client/components/MainPage/Card/icon-external-link.svg
diff --git a/client/components/MainPage/MainPage.module.css b/client/components/MainPage/MainPage.module.css
@@ -10,7 +10,7 @@
     width: 100%;
     max-width: 1100px;
     margin: auto;
-    padding: 32px 24px 64px;
+    padding: 32px 12px 16px;
 }
 
 .MainPageLogo {
@@ -43,13 +43,27 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     grid-auto-flow: row dense;
     align-items: stretch;
-    gap: 24px;
+    gap: 12px;
     margin-bottom: 24px;
 }
 
+@media screen and (min-width: 375px) {
+    .MainPageCardGrid {
+        gap: 24px;
+    }
+
+    .MainPageInner {
+        padding: 32px 24px 24px;
+    }
+}
+
 @media screen and (min-width: 576px) {
+    .MainPageCardGrid {
+        gap: 16px;
+    }
+
     .MainPageInner {
-        padding: 3em 1.5em ;
+        padding: 3em 1.5em;
     }
 
     .MainPageTitle {
@@ -66,7 +80,8 @@
 
 @media screen and (min-width: 768px) {
     .MainPageCardGrid {
-        gap: 40px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 20px;
         margin-bottom: 40px;
     }
 
@@ -102,6 +117,7 @@
 
 @media screen and (min-width: 1200px) {
     .MainPageCardGrid {
+        gap: 40px;
         grid-template-columns: repeat(3,1fr);
     }
 
@@ -126,7 +142,11 @@
     }
 }
 
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 1400px) {
+    .MainPageCardGrid {
+        grid-template-columns: repeat(4,1fr);
+    }
+
     .MainPage {
         background-size: 100% 10px;
     }
@@ -139,10 +159,6 @@
     .MainPageLogo {
         margin: 0 auto 0.7em 0;
     }
-
-    .MainPageCardGrid {
-        grid-template-columns: repeat(4,1fr);
-    }
 }
 
 

diff --git a/client/components/UI/Modal/Modal.module.css b/client/components/UI/Modal/Modal.module.css
@@ -115,14 +115,13 @@ html:has(.Modal) {
 @media screen and (min-width: 768px) {
     .Modal {
         width: calc(100% - 120px);
-        max-height: calc(100% - 80px);
         background: none;
     }
 
     .Modal_Align-top {
-        margin-top: 80px;
+        margin-top: 70px;
         margin-bottom: 0;
-        height: calc(100% - 80px);
+        height: calc(100% - 70px);
     }
 
     .Modal_Align-top .ModalInner {
@@ -185,10 +184,15 @@ html:has(.Modal) {
 
 @media screen and (min-width: 991px) {
     .Modal {
-        width: calc(100% - 150px);
-        max-width: 1360px;
+        width: calc(100% - 140px);
+        max-width: 1200px;
     }
 
+    .Modal_Align-top .ModalInner {
+        border-radius: 32px 32px 0 0;
+    }
+
+
     .ModalTitle {
         padding: 60px 64px 0;
         font-size: 32px;