Updated

src/components/Article.astro

@@ -1,5 +1,5 @@
 ---
-import { Padding, Column } from '../../@dasig'
+import { Padding, Column, Page } from '../../@dasig'
 
 interface Props {
   title: string
@@ -13,15 +13,17 @@ interface Props {
 const { title, subtitle, category, date, minutes, content } = Astro.props
 ---
 
-<section class="article">
-  <span>{category}</span>
-  <h1>{title}</h1>
-  <h3>{subtitle}</h3>
+<Page>
+  <div class="article__titles">
+    <span class="article__titles__category">{category}</span>
+    <h1 class="article__titles__title">{title}</h1>
+    <h3 class="article__titles__subtitle">{subtitle}</h3>
+  </div>
 
   <div class="content">
     <p set:html={content} />
   </div>
-</section>
+</Page>
 
 <style lang="sass">
   .article
@@ -30,6 +32,33 @@ const { title, subtitle, category, date, minutes, content } = Astro.props
     flex-direction: column
     flex-wrap: wrap
     justify-content: start
-    align-items: center
-    text-align: center
+    align-items: start
+    text-align: left
+
+    &__titles
+      width: 100%
+      display: flex
+      gap: 1rem
+      flex-direction: column
+      flex-wrap: wrap
+      align-items: start
+      padding: 0 9rem 2rem 9rem
+
+      &__category
+        border: 1px solid red
+        border-radius: 1.5rem
+        padding: 0.5rem 0.75rem
+        font-size: 1rem
+
+      &__title
+        font-size: 2.625rem
+        margin: 0
+
+      &__subtitle
+        font-size: 1.375rem
+        opacity: 0.8
+        margin: 0
+
+  .content
+    padding: 0 15rem
 </style>

src/components/ArticleCard.astro

@@ -1,12 +1,12 @@
 ---
-import { Row, Column, Padding } from '../../@dasig'
+import { Row, Column, Padding, Image } from '../../@dasig'
 
 interface Props {
   title: string
   subtitle: string
   date: string
-  imageA: string
-  imageW: string
+  imageA: any
+  imageW: any
   alt: string
   minutes: number
   url: string
@@ -20,6 +20,7 @@ const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, u
 <section class="article">
   <a href={url}>
     <Column gap={1} content="top">
+      <!-- <Image avif={imageA} webp={imageW} alt={alt} /> -->
       <picture>
         <source srcset={imageA} type="image/avif" />
         <source srcset={imageW} type="image/webp" />
@@ -69,12 +70,12 @@ const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, u
       height: auto
 
     &__title
-      font-size: 0.8rem
+      font-size: 1rem
       font-weight: 700
-      font-family: fonts.$Literata
+      font-family: fonts.$Inter
 
     &__subtitle
-      font-size: 0.65rem
+      font-size: 0.75rem
       font-weight: 500
       opacity: 0.8
 
@@ -82,7 +83,7 @@ const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, u
     font-family: fonts.$Inter
     width: 100%
     padding: 0.5rem 0 0 0
-    font-size: 0.5rem
+    font-size: 0.75rem
     font-weight: 500
     opacity: 0.6
 

src/content/articles/5-tech-icons-and-their-meaning.md

@@ -10,18 +10,20 @@ category: Technology
 <style>
 p {
   text-align: left;
-  padding: 0 10rem
+  /*padding: 0 10rem*/
 }
 
 h2 {
   text-align: left;
+  /*padding: 0 10rem*/
 }
+  
 </style>
 
 <picture>
   <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.avif" type="image/avif">
   <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.webp" type="image/webp">
-  <img alt="5 Tech Icons And Their Meaning">
+  <img class="image" alt="5 Tech Icons And Their Meaning">
 </picture>
 
 An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more.

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import { Page, Row, Logo } from '../../@dasig'
+import { Logo, Page, Row } from '../../@dasig'
 import ArticleCard from '../components/ArticleCard.astro'
+import Layout from '../layouts/Layout.astro'
 
 const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))