디자인: 메인 홈 디자인 수정, 모바일 대응

D0Dam · Feb 11, 2024 · 78989c9 · 78989c9
1 parent 6c4033e
commit 78989c9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/components/HomepageFeatures/index.module.css b/src/components/HomepageFeatures/index.module.css
@@ -17,6 +17,10 @@ h3 {
   }
 }
 
+a {
+  color: #2e8555;
+}
+
 .container {
   margin: 0 auto;
   width: 720px;
@@ -39,33 +43,29 @@ h3 {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
-  & > li {
-    font-size: 18px;
-    margin: 8px 0;
+}
 
-    @media only screen and (max-width: 780px) {
-      font-size: 16px;
-    }
+.post {
+  font-size: 18px;
+  margin: 8px 0;
 
-    & > a {
-      color: #2e8555;
-    }
+  @media only screen and (max-width: 780px) {
+    font-size: 16px;
   }
 }
-
 .more {
   width: 100%;
   display: flex;
   flex-direction: row-reverse;
   margin-bottom: 32px;
+}
 
-  & > a {
-    width: fit-content;
-    padding-right: 12px;
+.more > a {
+  width: fit-content;
+  padding-right: 12px;
 
-    @media only screen and (max-width: 780px) {
-      font-size: 16px;
-    }
+  @media only screen and (max-width: 780px) {
+    font-size: 16px;
   }
 }
 

diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
@@ -20,7 +20,7 @@ export default function HomepageFeatures(): JSX.Element {
         <div className={styles.line} />
         <ul className={styles.posts}>
           {recentPosts.map((item) => (
-            <li key={item.permalink}>
+            <li key={item.permalink} className={styles.post}>
               <a href={`${item.permalink}`}>{item.title}</a>
             </li>
           ))}