{% set page_title = title|string + ' - Page ' + parameters_dictionary.get('page', '1') %} {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} main > * { max-width: 800px; margin:auto; } .playlist-metadata{ display:grid; grid-template-columns: 0fr 1fr; grid-template-areas: "thumbnail title" "thumbnail author" "thumbnail stats" "thumbnail description"; } .playlist-thumbnail{ grid-area: thumbnail; width:250px; margin-right: 10px; } .playlist-title{ grid-area: title } .playlist-author{ grid-area: author } .playlist-stats{ grid-area: stats } .playlist-description{ grid-area: description; min-width:0px; white-space: pre-line; } #results{ margin-top:10px; display: grid; grid-auto-rows: 0fr; grid-row-gap: 10px; } .thumbnail-box{ /* overides rule in shared.css */ height: 90px !important; width: 120px !important; } @media (max-width:600px){ .playlist-metadata{ grid-template-columns: 1fr; grid-template-areas: "thumbnail" "title" "author" "stats" "description"; justify-items: center; } } {% endblock style %} {% block main %}