Design fix on the news page (#75)

* Design fix on the news page * Delete package-lock.json
kixlab · Dec 7, 2024 · 909043b · 909043b
1 parent e9cc88c
commit 909043b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/NewsCard.tsx b/src/components/NewsCard.tsx
@@ -76,14 +76,18 @@ export const ReadMoreButton = styled.button`
 `
 
 const TimelineDot = styled.div<{ labelsOnLeft?: boolean }>`
-  width: 16px;
+  width: 6.4%;
   height: 2px;
   background-color: ${Color.orange900};
   position: absolute;
-  left: ${props => (props.labelsOnLeft ? '-20px' : 'calc(100% + 22px)')};
+  left: ${props => (props.labelsOnLeft ? 'calc(-3.2%)' : 'calc(100% + 3.2%)')};
   top: 28px;
   transform: translate(-50%, -50%);
   z-index: -1;
+
+  @media (max-width: ${ScreenSize.md}) {
+    display: none;
+  }
 `
 
 interface Props {

diff --git a/src/components/NewsModal.tsx b/src/components/NewsModal.tsx
@@ -21,6 +21,7 @@ const ModalContainer = styled.div`
 
 const ModalCard = styled.div`
   width: 70%;
+  max-width: ${ScreenSize.max};
   background-color: ${Color.white};
   padding: 48px;
   border-radius: 5px;
@@ -30,6 +31,8 @@ const ModalCard = styled.div`
 
   @media (max-width: ${ScreenSize.lg}) {
     width: 90%;
+    max-height: 90%;
+    padding: 24px 16px;
   }
 `