More legible statuses on mobile

This commit is contained in:
Mouse Reeve 2020-11-05 08:21:00 -08:00
parent 738db165e5
commit 1c442f0dfe
3 changed files with 20 additions and 7 deletions

View file

@ -62,13 +62,26 @@ input.toggle-control:checked ~ .toggle-content {
.cover-container.is-medium {
height: 150px;
}
.cover-container.is-small {
height: 100px;
}
@media only screen and (max-width: 768px) {
.cover-container {
height: 200px;
width: max-content;
}
.cover-container.is-medium {
height: 100px;
}
.cover-container.is-small {
height: 70px;
}
}
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
}
.cover-container.is-small {
height: 100px;
}
.cover-container.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;

View file

@ -1,11 +1,11 @@
<div class="media">
<div class="media-left">
<div class="columns">
<div class="column is-narrow">
<div>
<a href="/book/{{ book.id }}">{% include 'snippets/book_cover.html' with book=book %}</a>
{% include 'snippets/shelve_button.html' with book=book %}
</div>
</div>
<div class="media-content">
<div class="column">
<h3 class="title is-6">{% include 'snippets/book_titleby.html' with book=book %}</h3>
{% include 'snippets/book_description.html' with book=book %}
</div>

View file

@ -17,7 +17,7 @@
{% include 'snippets/status_header.html' with status=status %}
{% endif %}
</p>
</div>
</div>
</header>
<div class="card-content">