fix: cover size for articles (#270)

Co-authored-by: Dedelweiss <[email protected]>

Author: Dedelweiss

README.md

@@ -34,3 +34,11 @@ export default {
 
 - npm install
 - npm run dev
+
+# Branch Promotion Workflow
+
+- Step 1: `branch` to `main` : PR
+
+- Step 2: `main` to `acceptance` : switch `acceptance` -> rebase `main` -> push to `acceptance`
+
+- Step 3: `acceptance` to `production` : switch `production` -> rebase `acceptance` -> push to `production`

src/components/Articles/Articles.scss

@@ -15,14 +15,18 @@
                 padding-bottom: 32px;
             }
         }
-        &__img {
-            height: 100%;
-            background-size: cover;
-            border-radius: 10px;
-            grid-column: span 6;
-            @include tablet {grid-column: span 12;}
-            @include phone-portrait {
-                grid-column: span 12;
+        &__cover {
+            height: 320px;
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 10px;
+                grid-column: span 6;
+                @include tablet {grid-column: span 12;}
+                @include phone-portrait {
+                    grid-column: span 12;
+                }
             }
         }
     }

src/components/Articles/Articles.tsx

@@ -65,7 +65,9 @@ const Articles = () => {
                                     <Text size="medium" className="mgb24">{truncateText(article.excerpt, 25)}</Text>
                                     <ButtonSecondary iconUrl={arrowRight} newPage={true} size="large" to={"https://blog.lunatech.com" + article.slug}><Trans i18nKey="buttonReadMore" /></ButtonSecondary>
                                 </div>
-                                <img className="blog__img" src={article.image_url} alt={article.title} />
+                                <div className='blog__cover'>
+                                    <img src={article.image_url} alt={article.title} />
+                                </div>
                             </div>
                         </li>
                     </SpotlightCard>