fix: latest news

nr2f1 · Dec 10, 2024 · 2d9ddb8 · 2d9ddb8
1 parent 9dac52d
commit 2d9ddb8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/website/src/components/banner/index.module.scss b/website/src/components/banner/index.module.scss
@@ -88,6 +88,10 @@
     @include breakpoints.medium-screen {
       @include text-styles.header-1--mobile;
     }
+
+    @include breakpoints.small-screen {
+      @include text-styles.header-1--mobile;
+    }
   }
 
   p {

diff --git a/website/src/components/homepage-hero/index.module.scss b/website/src/components/homepage-hero/index.module.scss
@@ -9,6 +9,9 @@
     @include text-styles.header-1;
     margin: 0;
     margin-block-end: var(--spacing-6);
+    @include breakpoints.from-small-to-medium-screen {
+      @include text-styles.header-1--mobile;
+    }
   }
   h3 {
     @include text-styles.header-2;

diff --git a/website/src/components/latest-news/index.module.scss b/website/src/components/latest-news/index.module.scss
@@ -23,6 +23,9 @@
     @include breakpoints.medium-screen {
       @include text-styles.header-1--mobile;
     }
+    @include breakpoints.small-screen {
+      @include text-styles.header-1--mobile;
+    }
   }
 
   &__articles {
@@ -36,6 +39,11 @@
     margin: 0;
     padding: 0;
     margin-block-end: var(--spacing-12);
+    @include breakpoints.small-screen {
+      flex-wrap: unset;
+      align-items: center;
+      flex-direction: column;
+    }
 
     /* Last two */
     & li:nth-last-of-type(-n + 2) {
@@ -63,14 +71,17 @@
   border: 1px solid var(--grey-300);
   min-width: 300px;
   flex: 1 0 0;
+  overflow: hidden;
+
+  @include breakpoints.small-screen {
+    min-width: 100%;
+  }
 
   & a {
     text-decoration: none;
   }
 
   &__img {
-    border-top-left-radius: var(--border-radius-xl);
-    border-top-right-radius: var(--border-radius-xl);
     height: var(--spacing-56);
     background-size: cover;
     background-repeat: no-repeat;
@@ -81,7 +92,7 @@
     }
   }
 
-  & > div {
+  & div {
     padding: var(--spacing-4);
   }
 

diff --git a/website/src/components/latest-news/index.tsx b/website/src/components/latest-news/index.tsx
@@ -32,7 +32,7 @@ const Card: React.FC<CardProps> = ({ title, date, imageUrl, lang, slug }) => {
   return (
     <li className={styles.article}>
       <Link href={`/blog/${slug}`}>
-        <article className={styles.article}>
+        <article>
           <div
             className={styles.article__img}
             style={{