design/ max-width 수정 (#39)

Nubblee · Sep 21, 2024 · a4f1f52 · a4f1f52
1 parent fd212a1
commit a4f1f52
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -65,6 +65,7 @@ const SwiperContainer = styled.div`
 	background-color: ${colors.mainGray};
 	border-radius: 10px;
 	box-shadow: 0px 5px 5px -3px rgba(255, 255, 255, 0.5);
+	padding-top: 16px;
 
 	.swiper-pagination {
 		bottom: 10px !important;

diff --git a/src/components/BestContents.tsx b/src/components/BestContents.tsx
@@ -50,8 +50,8 @@ const BestContents = () => {
 }
 
 const Container = styled.div`
-	width: 344px;
-	height: 181px;
+	width: 280px;
+	height: 160px;
 	background-color: ${colors.mainGray};
 	border-radius: 10px;
 	box-shadow: 0px 5px 5px -3px rgba(255, 255, 255, 0.5);
@@ -60,7 +60,7 @@ const Container = styled.div`
 
 	.title {
 		color: ${colors.primaryBlue};
-		font-size: ${fontSize.xl};
+		font-size: ${fontSize.lg};
 		font-weight: ${fontWeight.semiBold};
 		margin-bottom: 22px;
 	}
@@ -69,7 +69,7 @@ const Ranking = styled.div`
 	.list-container {
 		display: flex;
 		justify-content: space-between;
-		font-size: ${fontSize.lg};
+		font-size: ${fontSize.sm};
 		font-weight: ${fontWeight.semiBold};
 		margin-bottom: 18px;
 

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -123,7 +123,7 @@ const Container = styled.div`
 	width: 100%;
 	height: 100%;
 	background-color: ${colors.bgBlack};
-	max-width: 1280px;
+	max-width: 1080px;
 	margin: 20px auto;
 `
 const ContentContainer = styled.div`
@@ -137,8 +137,9 @@ const PostContainer = styled.div`
 	border-right: 1px solid ${colors.white};
 
 	.newest-posts {
-		max-height: 800px;
-		overflow-y: scroll;
+		padding-right: 60px;
+		max-height: 80%;
+		overflow-y: auto;
 	}
 
 	.menu {

diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx
@@ -196,6 +196,7 @@ const GlobalStyles = () => (
 				height: 100%;
 				width: 100%;
 				overflow-y: auto;
+				background-color: ${colors.bgBlack};
 			}
 		`}
 	/>