From 5e12675bd09e142bd991d5a6bf57c69447c8be9e Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Mon, 23 Feb 2026 19:17:42 +0800
Subject: [PATCH] Updated

---
 src/components/Article.astro | 51 ++++++++++++-----------
 src/pages/index.astro        | 78 +++++++++++++++++++++++-------------
 src/pages/read.astro         |  3 ++
 src/styles/fonts.sass        | 27 +++++++++++++
 4 files changed, 105 insertions(+), 54 deletions(-)
 create mode 100644 src/pages/read.astro

diff --git a/src/components/Article.astro b/src/components/Article.astro
index bc61f57..e12023d 100644
--- a/src/components/Article.astro
+++ b/src/components/Article.astro
@@ -15,29 +15,28 @@ const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
 ---
 
 <section class='article'>
-  <Row
-    wrap
+  <Column
     gap={1}
-    content='left'>
+    content='top'>
+    <picture>
+      <source
+        srcset={imageA}
+        type='image/avif'
+      />
+      <source
+        srcset={imageW}
+        type='image/webp'
+      />
+      <img
+        style={`border-radius: 0.75rem`}
+        width='100%'
+        height='auto'
+        decoding='async'
+        loading='lazy'
+        alt={alt}
+      />
+    </picture>
     <Row gap={1}>
-      <picture>
-        <source
-          srcset={imageA}
-          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>
         <h2 class='article__subtitle'>{subtitle}</h2>
@@ -54,25 +53,25 @@ const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
         <span>{minutes} min read</span>
       </Row>
     </div>
-  </Row>
+  </Column>
 </section>
 
 <style lang='sass'>
-  // @use '../../configs/design/colors' as colors
+  @use '../styles/fonts' as fonts
   @use 'sass:color'
 
   .article
-    width: 25rem
+    width: 20rem
     height: auto
-    font-size: 1rem
     background-color: color.adjust(#0A0A0A, $lightness: 9%)
     padding: 1.25rem
     border-radius: 1rem
     cursor: pointer
 
     &__title
-      font-size: 1.5rem
+      font-size: 1.25rem
       font-weight: 700
+      font-family: fonts.$Literata
 
     &__subtitle
       font-size: 1rem
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a880b65..2879ec7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,34 +12,56 @@ import AW from '../../@dasig/images/sample.webp'
     <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>
+      content='left'>
+      <h1 class='title'>Pat's Articles</h1>
     </Row>
-  </Page>
 
-  <style lang='sass'>
-    h1
-      color: #3377AC
-  </style>
+    <div class='articles'>
+      <Row
+        wrap
+        gap={1}>
+        <Article
+          title='The quick brown fox'
+          subtitle='Ang pasko ay sumapit'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aa'
+          minutes={2}
+          date='aa'
+        />
+        <Article
+          title='AA'
+          subtitle='aa'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aa'
+          minutes={2}
+          date='aa'
+        />
+        <Article
+          title='AA'
+          subtitle='aa'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aa'
+          minutes={2}
+          date='aa'
+        />
+      </Row>
+    </div>
+  </Page>
 </Layout>
+
+<style lang='sass'>
+  @use '../../configs/design/colors.sass' as colors
+  @use '../styles/fonts.sass' as fonts
+
+  h1
+    color: colors.$white
+    margin: 0
+    font-family: fonts.$Literata
+    font-weight: bold
+
+  .articles
+    padding: 2rem 0 0 0
+</style>
diff --git a/src/pages/read.astro b/src/pages/read.astro
new file mode 100644
index 0000000..853d812
--- /dev/null
+++ b/src/pages/read.astro
@@ -0,0 +1,3 @@
+---
+
+---
diff --git a/src/styles/fonts.sass b/src/styles/fonts.sass
index 4fa1b67..57cc9d5 100644
--- a/src/styles/fonts.sass
+++ b/src/styles/fonts.sass
@@ -3,6 +3,9 @@ $Inter: Inter, sans-serif
 $Montserrat: Montserrat, sans-serif
 $OpenSans: 'Open Sans', sans-serif
 $PublicSans: 'Public Sans', sans-serif
+$Literata: Literata, serif
+$Baskervville: Baskervville, serif
+$Alice: Alice, serif
 
 @font-face
   font-family: 'Roboto'
@@ -43,3 +46,27 @@ $PublicSans: 'Public Sans', sans-serif
   font-weight: 100 900
   src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Literata'
+  font-style: normal
+  font-display: swap
+  font-weight: 200 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/literata:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Baskervville'
+  font-style: normal
+  font-display: swap
+  font-weight: 400 700
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/baskervville:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Alice'
+  font-style: normal
+  font-display: swap
+  font-weight: 400
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/alice@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/alice@latest/latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD