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 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> </div>
<style> <style>
.note { .note {
display: flex; margin-bottom: 15px;
gap: 6px; }
margin-bottom: 5px; .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> </style>