-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: style the articles section (#109)
* Styling the blog articles * Align buttons and change bg colors
- Loading branch information
Showing
2 changed files
with
21 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,22 @@ | ||
--- | ||
const { creator, title, link, pubDate, categories } = Astro.props; | ||
import Button from './Button.astro'; | ||
const { creator, title, link } = Astro.props; | ||
const snippet = Astro.props['content:encodedSnippet']; | ||
--- | ||
|
||
<div | ||
class="overflow-hidden shadow-lg transition duration-500 ease-in-out transform hover:shadow-2xl rounded-lg rounded-[40px] p-7 bg-[#FAE0C6]" | ||
class="transition duration-500 ease-in-out transform shadow-2xl border-4 border-baccent hover:border-accent hover:shadow-none hover:bg-white hover:bg-opacity-50 rounded-3xl p-7" | ||
> | ||
<div class="w-full p-4 h-full"> | ||
<a href={link} class="text-accent text-3xl font-bold">{title}</a> | ||
<div class="w-full p-4 h-full flex flex-col justify-between"> | ||
<a href={link} class="text-3xl font-bold font-sans no-underline">{title}</a> | ||
<div class="py-4"> | ||
by <span class="font-bold">{creator}</span> | ||
by <span class="font-medium">{creator}</span> | ||
</div> | ||
|
||
<div | ||
class="flex flex-wrap justify-starts items-center py-3 border-b-2 border-accent text-xs text-white font-medium" | ||
> | ||
{categories.map((category) => <span class="bg-accent px-2 py-1 rounded-full mr-2 mb-2">{category}</span>)} | ||
</div> | ||
<div class="flex items-center mt-2"> | ||
<div class="pl-2"> | ||
<p class="text-gray-800 text-sm font-medium mb-2"> | ||
Published on {pubDate}. | ||
</p> | ||
</div> | ||
</div> | ||
<p class="text-gray-800 text-sm font-medium mb-2 text-clip overflow-hidden max-h-20"> | ||
{snippet} | ||
</p> | ||
<Button href={link} text="Read on Medium.com" inverted={true} cls="mt-4 text-base no-underline" /> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters