Fix grid size for smaller devices

9 files changed, 23 insertions, 23 deletions

diff --git a/assets/css/lighttheme.css b/assets/css/lighttheme.css
index b28ef0ee..73706bb7 100644
--- a/assets/css/lighttheme.css
+++ b/assets/css/lighttheme.css
@@ -10,7 +10,7 @@ a {
 
 /* All links that do not fit with the default color goes here */
 a:not([data-id]) > .icon,
-.pure-u-md-1-5 > .h-box > a[href^="/watch?"],
+.pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
 .playlist-restricted > ol > li > a {
   color: #303030;
 }
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 746ffcde..d52c01ca 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -67,15 +67,15 @@
 </div>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/channel/<%= ucid %>?page=<%= page - 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right" class="pure-u-1 pure-u-lg-1-5">
     <% if count == 60 %>
         <a href="/channel/<%= ucid %>?page=<%= page + 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">
             <%= translate(locale, "Next page") %>
diff --git a/src/invidious/views/history.ecr b/src/invidious/views/history.ecr
index 017f5eae..9be40a0d 100644
--- a/src/invidious/views/history.ecr
+++ b/src/invidious/views/history.ecr
@@ -72,15 +72,15 @@ function mark_unwatched(target) {
 </script>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/feed/history?page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if watched.size >= limit %>
         <a href="/feed/history?page=<%= page + 1 %>">
             <%= translate(locale, "Next page") %>
diff --git a/src/invidious/views/login.ecr b/src/invidious/views/login.ecr
index 82e9396c..b26aa373 100644
--- a/src/invidious/views/login.ecr
+++ b/src/invidious/views/login.ecr
@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="pure-g">
-    <div class="pure-u-1 pure-u-md-1-5"></div>
-    <div class="pure-u-1 pure-u-md-3-5">
+    <div class="pure-u-1 pure-u-lg-1-5"></div>
+    <div class="pure-u-1 pure-u-lg-3-5">
         <div class="h-box">
             <div class="pure-g">
                 <div class="pure-u-1-2">
@@ -112,5 +112,5 @@
             <% end %>
         </div>
     </div>
-    <div class="pure-u-1 pure-u-md-1-5"></div>
+    <div class="pure-u-1 pure-u-lg-1-5"></div>
 </div>
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr
index 98da42dc..6bd0dc9e 100644
--- a/src/invidious/views/playlist.ecr
+++ b/src/invidious/views/playlist.ecr
@@ -34,15 +34,15 @@
 </div>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if videos.size == 100 %>
         <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
             <%= translate(locale, "Next page") %>
diff --git a/src/invidious/views/playlists.ecr b/src/invidious/views/playlists.ecr
index 3f661494..ee7918e7 100644
--- a/src/invidious/views/playlists.ecr
+++ b/src/invidious/views/playlists.ecr
@@ -65,7 +65,7 @@
 
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-md-4-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if items.size >= 28 %>
         <a href="/channel/<%= ucid %>/playlists?continuation=<%= continuation %><% if sort_by != "last" %>&sort_by=<%= sort_by %><% end %>">
             <%= translate(locale, "Next page") %>
diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr
index a0d3bb7b..4d943127 100644
--- a/src/invidious/views/search.ecr
+++ b/src/invidious/views/search.ecr
@@ -11,15 +11,15 @@
 </div>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if count >= 20 %>
         <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page + 1 %>">
             <%= translate(locale, "Next page") %>
diff --git a/src/invidious/views/subscriptions.ecr b/src/invidious/views/subscriptions.ecr
index 744f77a0..88f0f6c4 100644
--- a/src/invidious/views/subscriptions.ecr
+++ b/src/invidious/views/subscriptions.ecr
@@ -74,15 +74,15 @@ function mark_watched(target) {
 </script>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/feed/subscriptions?max_results=<%= max_results %>&page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
         <% if (videos.size + notifications.size) == max_results %>
             <a href="/feed/subscriptions?max_results=<%= max_results %>&page=<%= page + 1 %>">
                 <%= translate(locale, "Next page") %>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 954b724f..912fa8d1 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -53,7 +53,7 @@
 </div>
 
 <div class="pure-g">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
         <div class="h-box">
             <p><a href="https://www.youtube.com/watch?v=<%= video.id %>"><%= translate(locale, "Watch video on Youtube") %></a></p>
 
@@ -122,7 +122,7 @@
         </div>
     </div>
 
-    <div class="pure-u-1 <% if params[:related_videos] || plid %>pure-u-md-3-5<% else %>pure-u-md-4-5<% end %>">
+    <div class="pure-u-1 <% if params[:related_videos] || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>">
         <div class="h-box">
             <p>
                 <a href="/channel/<%= video.ucid %>">
@@ -154,7 +154,7 @@
         </div>
     </div>
     <% if params[:related_videos] || plid %>
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
         <% if plid %>
         <div id="playlist" class="h-box">
         </div>