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

21
src/components/Article.astro
View file

@ -15,11 +15,9 @@ const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
--- ---
<section class='article'> <section class='article'>
<Row <Column
wrap
gap={1} gap={1}
content='left'> content='top'>
<Row gap={1}>
<picture> <picture>
<source <source
srcset={imageA} srcset={imageA}
@ -30,14 +28,15 @@ const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
type='image/webp' type='image/webp'
/> />
<img <img
style={`border-radius: 0.5rem`} style={`border-radius: 0.75rem`}
width='200' width='100%'
height='auto' height='auto'
decoding='async' decoding='async'
loading='lazy' loading='lazy'
alt={alt} alt={alt}
/> />
</picture> </picture>
<Row gap={1}>
<div> <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>
@ -54,25 +53,25 @@ const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
<span>{minutes} min read</span> <span>{minutes} min read</span>
</Row> </Row>
</div> </div>
</Row> </Column>
</section> </section>
<style lang='sass'> <style lang='sass'>
// @use '../../configs/design/colors' as colors @use '../styles/fonts' as fonts
@use 'sass:color' @use 'sass:color'
.article .article
width: 25rem width: 20rem
height: auto height: auto
font-size: 1rem
background-color: color.adjust(#0A0A0A, $lightness: 9%) background-color: color.adjust(#0A0A0A, $lightness: 9%)
padding: 1.25rem padding: 1.25rem
border-radius: 1rem border-radius: 1rem
cursor: pointer cursor: pointer
&__title &__title
font-size: 1.5rem font-size: 1.25rem
font-weight: 700 font-weight: 700
font-family: fonts.$Literata
&__subtitle &__subtitle
font-size: 1rem font-size: 1rem

72
src/pages/index.astro
View file

@ -12,34 +12,56 @@ import AW from '../../@dasig/images/sample.webp'
<Row <Row
wrap wrap
gap={0} gap={0}
content='center'> content='left'>
<div style='width: 500px'> <h1 class='title'>Pat's Articles</h1>
<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> </Row>
<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> </Page>
</Layout>
<style lang='sass'> <style lang='sass'>
@use '../../configs/design/colors.sass' as colors
@use '../styles/fonts.sass' as fonts
h1 h1
color: #3377AC color: colors.$white
margin: 0
font-family: fonts.$Literata
font-weight: bold
.articles
padding: 2rem 0 0 0
</style> </style>
</Layout>

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 $Montserrat: Montserrat, sans-serif
$OpenSans: 'Open Sans', sans-serif $OpenSans: 'Open Sans', sans-serif
$PublicSans: 'Public Sans', sans-serif $PublicSans: 'Public Sans', sans-serif
$Literata: Literata, serif
$Baskervville: Baskervville, serif
$Alice: Alice, serif
@font-face @font-face
font-family: 'Roboto' font-family: 'Roboto'
@ -43,3 +46,27 @@ $PublicSans: 'Public Sans', sans-serif
font-weight: 100 900 font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); 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 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