Optimize main page for mobile devices
This commit is contained in:
parent
99ad86bd7c
commit
adec305bc5
|
@ -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 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.dash {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 600px) {
|
||||||
.note {
|
.note {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
.date {
|
||||||
|
min-width: 121px;
|
||||||
|
}
|
||||||
|
.dash {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue