Optimize main page for mobile devices

This commit is contained in:
Ivan R. 2023-10-18 22:05:51 +05:00
parent 99ad86bd7c
commit adec305bc5
No known key found for this signature in database
GPG key ID: 56C7BAAE859B302C

View file

@ -9,13 +9,30 @@ const { date, title, href } = Astro.props
---
<div class="note">
<div>{ date }</div> — <a href={href}>{ title }</a>
<div class="date">{ date }</div>
<div class="dash">—</div>
<a href={href}>{ title }</a>
</div>
<style>
.note {
margin-bottom: 15px;
}
.dash {
display: none;
}
@media screen and (min-width: 600px) {
.note {
display: flex;
gap: 6px;
margin-bottom: 5px;
}
.date {
min-width: 121px;
}
.dash {
display: block;
}
}
</style>