Updated

@dasig/components/Row.tsx

@@ -5,19 +5,20 @@ interface Props {
   children: JSXElement
   content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
   gap?: number
+  wrap?: boolean
 }
 
 export default (props: Props) => {
   return (
     <>
       <Show when={props.gap}>
-        <section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        <section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem; flex-wrap: ${props.wrap ? 'wrap' : 'nowrap'}`}>
           {props.children}
         </section>
       </Show>
 
       <Show when={!props.gap}>
-        <section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
+        <section class={`dasig-row-${props.content || 'center'}`} style={`flex-wrap: ${props.wrap ? 'wrap' : 'nowrap'}`}>{props.children}</section>
       </Show>
     </>
   )

@dasig/styles/Row.sass

@@ -1,7 +1,7 @@
 .dasig-row-left
   display: flex
   flex-direction: row
-  flex-wrap: wrap
+  // flex-wrap: wrap
   justify-content: flex-start
   align-items: center
   align-content: center
@@ -9,7 +9,7 @@
 .dasig-row-center
   display: flex
   flex-direction: row
-  flex-wrap: wrap
+  // flex-wrap: wrap
   justify-content: center
   align-items: center
   align-content: center
@@ -17,7 +17,7 @@
 .dasig-row-right
   display: flex
   flex-direction: row
-  flex-wrap: wrap
+  // flex-wrap: wrap
   justify-content: flex-end
   align-items: center
   align-content: center
@@ -25,7 +25,7 @@
 .dasig-row-split
   display: flex
   flex-direction: row
-  flex-wrap: wrap
+  // flex-wrap: wrap
   justify-content: space-between
   align-items: center
   align-content: center
@@ -33,7 +33,7 @@
 .dasig-row-spaced
   display: flex
   flex-direction: row
-  flex-wrap: wrap
+  // flex-wrap: wrap
   justify-content: space-around
   align-items: center
   align-content: center
@@ -41,7 +41,7 @@
 .dasig-row-even
   display: flex
   flex-direction: row
-  flex-wrap: wrap
+  // flex-wrap: wrap
   justify-content: space-evenly
   align-items: center
   align-content: center

configs/design/site.sass

@@ -1,2 +1,4 @@
-$light-background: #adafb4
+@use './colors' as colors
-$dark-background: #08192c
+
+$light-background: colors.$white
+$dark-background: colors.$black

src/components/Article.astro

@@ -14,38 +14,72 @@ interface Props {
 const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
 ---
 
-<section class="article">
+<section class='article'>
-  <Column gap={1} content="top">
+  <Row
+    wrap
+    gap={1}
+    content='left'>
     <Row gap={1}>
       <picture>
-        <source srcset={imageA} type="image/avif" />
+        <source
-        <source srcset={imageW} type="image/webp" />
+          srcset={imageA}
-        <img style={`border-radius: 0.5rem`} width="200" height="auto" decoding="async" loading="lazy" alt={alt} />
+          type='image/avif'
+        />
+        <source
+          srcset={imageW}
+          type='image/webp'
+        />
+        <img
+          style={`border-radius: 0.5rem`}
+          width='200'
+          height='auto'
+          decoding='async'
+          loading='lazy'
+          alt={alt}
+        />
       </picture>
       <div>
-        <span class="article__title">{title}</span>
+        <span class='article__title'>{title}</span>
-        <h2 class="article__subtitle">{subtitle}</h2>
+        <h2 class='article__subtitle'>{subtitle}</h2>
       </div>
     </Row>
-    <Row gap={1} content="left">
+    <div
-      <span>{date}</span>
+      class='dateandtime'
-      <span>:</span>
+      style='width: 100%'>
-      <span>{minutes} min read</span>
+      <Row
-    </Row>
+        gap={1}
-  </Column>
+        content='right'>
+        <span>{date}</span>
+        <span>:</span>
+        <span>{minutes} min read</span>
+      </Row>
+    </div>
+  </Row>
 </section>
 
-<style lang="sass">
+<style lang='sass'>
+  // @use '../../configs/design/colors' as colors
+  @use 'sass:color'
+
   .article
+    width: 25rem
+    height: auto
     font-size: 1rem
-    border: 1px solid white
+    background-color: color.adjust(#0A0A0A, $lightness: 9%)
+    padding: 1.25rem
+    border-radius: 1rem
+    cursor: pointer
 
     &__title
-      font-size: 2rem
+      font-size: 1.5rem
       font-weight: 700
 
     &__subtitle
-      font-size: 1.25rem
+      font-size: 1rem
       font-weight: 500
       opacity: 0.8
+
+  .dateandtime
+    font-size: 0.75rem
+    opacity: 0.6
 </style>

src/components/Input/Input.tsx

@@ -1,12 +0,0 @@
-import Input from '../../../@dasig/components/Input'
-import { createSignal } from 'solid-js'
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Input onChange={(val) => setSample(val)}></Input>
-    </>
-  )
-}

src/pages/index.astro

@@ -7,13 +7,39 @@ import AA from '../../@dasig/images/sample.avif'
 import AW from '../../@dasig/images/sample.webp'
 ---
 
-<Layout title="Articles - Pat Alcala">
+<Layout title='Articles - Pat Alcala'>
-  <Page alignment="column">
+  <Page alignment='column'>
-    <Article title="How to sample" subtitle="This is just a sample" date="Feb 10, 2026" imageA={AA.src} imageW={AW.src} alt="aaa" minutes={5} />
+    <Row
+      wrap
+      gap={0}
+      content='center'>
+      <div style='width: 500px'>
+        <Article
+          title='How to sample'
+          subtitle='This is just a sample'
+          date='Feb 10, 2026'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aaa'
+          minutes={5}
+        />
+      </div>
+      <div style='width: 500px'>
+        <Article
+          title='How to sample'
+          subtitle='This is just a sample'
+          date='Feb 10, 2026'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aaa'
+          minutes={5}
+        />
+      </div>
+    </Row>
   </Page>
-</Layout>
 
-<style lang="sass">
+  <style lang='sass'>
-  h1
+    h1
-    color: #3377AC
+      color: #3377AC
-</style>
+  </style>
+</Layout>