Merge pull request #989 from varianter/mikael/article

varianter · Dec 11, 2024 · 75e03d5 · 75e03d5
2 parents 37848fd + 1401b49
commit 75e03d5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 71 deletions.
diff --git a/src/components/richText/richText.module.css b/src/components/richText/richText.module.css
@@ -17,22 +17,12 @@
 .image {
   overflow: hidden;
   margin: auto;
-  width: 100%;
-  min-width: 150px;
-  max-width: 15rem;
 
-  @media (min-width: 640px) {
-    min-width: 240px;
-    max-width: 21.25rem;
-  }
-
-  @media (min-width: 1024px) {
-    max-width: 100%;
-    height: 25rem;
-  }
+  border-radius: var(--radius-medium);
 
   & img {
-    border-radius: 0.3125rem;
+    display: block;
+    max-width: 100%;
   }
 }
 

diff --git a/src/components/sections/article/Article.tsx b/src/components/sections/article/Article.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { SanityImage } from "src/components/image/SanityImage";
 import CustomLink from "src/components/link/CustomLink";
 import { RichText } from "src/components/richText/RichText";
@@ -11,28 +10,28 @@ interface ArticleProps {
   article: ArticleSection;
 }
 
-const Article = ({ article }: ArticleProps) => {
+export default function Article({ article }: ArticleProps) {
   return (
     <article className={styles.wrapper} id={article._key}>
-      <div
-        className={`${styles.article} ${article.imageExtended.imageAlignment == "right" ? styles.right : ""}`}
-      >
-        {article?.imageExtended && (
+      <div className={styles.article}>
+        {hasImage(article) && (
           <div className={styles.image}>
             <SanityImage image={article.imageExtended} />
           </div>
         )}
         <div className={styles.content}>
           <div>
             <Text type="labelRegular">{article.tag}</Text>
-            <Text type="h2">{article.basicTitle}</Text>
+            <Text type="h1">{article.basicTitle}</Text>
           </div>
           {article.richText && <RichText value={article.richText} />}
           {article.link && <CustomLink link={article.link} />}
         </div>
       </div>
     </article>
   );
-};
+}
 
-export default Article;
+function hasImage(article: ArticleSection) {
+  return Boolean(article?.imageExtended?.src || article?.imageExtended?.asset);
+}
diff --git a/src/components/sections/article/article.module.css b/src/components/sections/article/article.module.css
@@ -8,52 +8,11 @@
 .article {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  padding: 5rem 2rem;
   gap: 1.5rem;
-
-  @media (min-width: 640px) {
-    max-width: 50rem;
-    align-self: stretch;
-    padding: 5rem 3rem;
-  }
-
-  @media (min-width: 1024px) {
-    flex-direction: row;
-    width: 100%;
-    max-width: 87.5rem;
-    gap: 4.5rem;
-    padding: 7.5rem 8.75rem;
-  }
-}
-
-.image {
-  border-radius: 0.75rem;
-  overflow: hidden;
-
-  min-width: 150px;
-  max-width: 15rem;
-
-  @media (min-width: 640px) {
-    min-width: 240px;
-    max-width: 21.25rem;
-  }
-
-  @media (min-width: 1024px) {
-    min-width: 260px;
-    max-width: 21.25rem;
-  }
-
-  @media (min-width: 1400px) {
-    min-width: 360px;
-    max-width: 27.5rem;
-  }
-
-  @media (min-width: 1800px) {
-    min-width: 460px;
-    max-width: 33.75rem;
-  }
+  max-width: var(--max-content-width-large);
+  margin: 3rem auto;
+  padding: 1rem;
 }
 
 .content {
@@ -63,11 +22,16 @@
   justify-content: center;
   gap: 1.5rem;
   align-self: stretch;
-  max-width: 560px;
+  margin: auto;
+
+  max-width: 600px;
 }
 
-.right {
-  @media (min-width: 1024px) {
-    flex-direction: row-reverse;
-  }
+.image {
+  border-radius: var(--radius-medium);
+  overflow: hidden;
+  aspect-ratio: 16/9;
+
+  max-width: var(--max-content-width-medium);
+  margin: auto;
 }