wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

fix: media meta grid on mobile

Browse source
This commit is contained in:
Devin Haska 2025-01-25 22:28:41 -08:00
parent b5ce1f7c77
commit 2b364b1e5e
5 changed files with 15 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/layouts/book.html
View file

@ -24,7 +24,7 @@ layout: "layouts/base"
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %} {% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %} {% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5"> <ul class="list-none p-0 mb-0 media-meta gap-0.5">
{% if author %} {% if author %}
<li class="flex-col"> <li class="flex-col">
<strong>Author</strong><span>{{ author }}</span> <strong>Author</strong><span>{{ author }}</span>

2
src/_includes/layouts/game.html
View file

@ -27,7 +27,7 @@ layout: "layouts/base"
</div> </div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %} {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %} {% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5"> <ul class="list-none p-0 mb-0 media-meta gap-0.5">
{% if year %} {% if year %}
<li class="flex-col"> <li class="flex-col">
<strong>Released</strong><span>{{ year }}</span> <strong>Released</strong><span>{{ year }}</span>

2
src/_includes/layouts/movie.html
View file

@ -38,7 +38,7 @@ layout: "layouts/base"
</div> </div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %} {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %} {% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5"> <ul class="list-none p-0 mb-0 media-meta gap-0.5">
{% if year %} {% if year %}
<li class="flex-col"> <li class="flex-col">
<strong>Released</strong><span>{{ year }}</span> <strong>Released</strong><span>{{ year }}</span>

7
src/_includes/layouts/show.html
View file

@ -38,7 +38,7 @@ layout: "layouts/base"
{% endif %} {% endif %}
{% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %} {% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %} {% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5"> <ul class="list-none p-0 mb-0 media-meta gap-0.5">
{% if year %} {% if year %}
<li class="flex-col"> <li class="flex-col">
<strong>Released</strong><span>{{ year }}</span> <strong>Released</strong><span>{{ year }}</span>
@ -49,11 +49,6 @@ layout: "layouts/base"
<strong>Runtime</strong><span>{{ runtime }} mins</span> <strong>Runtime</strong><span>{{ runtime }} mins</span>
</li> </li>
{% endif %} {% endif %}
{% if tags %}
<li class="flex-col meta-grid--full">
<strong>Genres</strong><span>{{ tags | filter("tv") | join(", ") }}</span>
</li>
{% endif %}
</ul> </ul>
</div> </div>
</footer> </footer>

11
src/css/blocks/media-display.css
View file

@ -25,3 +25,14 @@
.meta-grid--full { .meta-grid--full {
grid-column: 1/3; grid-column: 1/3;
} }
.media-meta {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 36rem) {
.media-meta-grid {
grid-template-columns: 1fr;
}
}