CSS: expand #contents width on small screens (#4405)

The #contents div now takes the full width on small screens (< 1280px). All page elements have a little more room, especially the video titles.
2024-02-18 23:56:53 +01:00 · 2024-02-18 23:56:53 +01:00 · c5a3112e49
--- a/assets/css/default.css
+++ b/assets/css/default.css
@ -13,6 +13,7 @@ body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
+  margin: auto;
 }

 .h-box {
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@ -27,8 +27,7 @@
 <body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
    <span style="display:none" id="dark_mode_pref"><%= dark_mode %></span>
    <div class="pure-g">
-        <div class="pure-u-1 pure-u-md-2-24"></div>
-        <div class="pure-u-1 pure-u-md-20-24" id="contents">
+        <div class="pure-u-1 pure-u-xl-20-24" id="contents">
            <div class="pure-g navbar h-box">
                <% if navbar_search %>
                    <div class="pure-u-1 pure-u-md-4-24">
@ -155,7 +154,6 @@
            </footer>

        </div>
-        <div class="pure-u-1 pure-u-md-2-24"></div>
    </div>
    <script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
    <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>