Daisuke
62aa324e16
- Introduce CSS variables for theming in `global.css` - Add `ThemeIcon` component for toggling light/dark modes - Integrate theme initialization script in `BaseLayout` to prevent FOUC - Update navigation, buttons, and tag styles for dark mode compatibility - Configure Shiki for dual-theme syntax highlighting in `astro.config.mjs` - Adjust link colors to accessible blue shades for both themes
32 lines
775 B
Text
32 lines
775 B
Text
---
|
|
const { title, url, datetime } = Astro.props;
|
|
---
|
|
|
|
<style>
|
|
.new-article {
|
|
border-top: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
padding: 10px 0;
|
|
}
|
|
.new-article-date {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
:global(.dark) .new-article-date {
|
|
color: #94a3b8;
|
|
}
|
|
.new-article-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
.new-article-title:hover {
|
|
text-decoration: underline;
|
|
}
|
|
/* Removed specific dark mode color to inherit var(--text-color) */
|
|
</style>
|
|
<div class="new-article">
|
|
<div class="new-article-date">{datetime}</div>
|
|
<a class="new-article-title" href={url}>{title}</a>
|
|
</div>
|