PatAlcala9/articles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-02-23 19:17:42 +08:00
parent 0b4c7b2d93
commit 5e12675bd0
4 changed files with 105 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/Article.astro
View file

@ -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

78
src/pages/index.astro
View file

@ -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>

3
src/pages/read.astro Normal file
View file

@ -0,0 +1,3 @@
---
---

27
src/styles/fonts.sass
View file

@ -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