Add styling to search bar on empty home page

3 files changed, 20 insertions, 9 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 2552263d..a5148f5b 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -172,7 +172,7 @@ img.thumbnail {
   flex: 1;
 }
 
-.navbar > .searchbar {
+.searchbar {
   flex-grow: 2; /* take double the space of the other items */
 }
 
@@ -185,7 +185,7 @@ img.thumbnail {
   display: inline;
 }
 
-.navbar > .searchbar .pure-form input[type="search"] {
+.searchbar .pure-form input[type="search"] {
   margin-bottom: 1px;
 
   border-top: 0;
@@ -210,12 +210,12 @@ input[type="search"]::-webkit-search-cancel-button {
   background-size: 14px;
 }
 
-.navbar > .searchbar .pure-form fieldset {
+.searchbar .pure-form fieldset {
   padding: 0;
 }
 
 /* attract focus to the searchbar by adding a subtle transition */
-.navbar > .searchbar .pure-form input[type="search"]:focus {
+.searchbar .pure-form input[type="search"]:focus {
   margin-bottom: 0px;
   border-bottom: 2px solid #aaa;
 }
@@ -586,7 +586,7 @@ body.dark-theme {
   color: #f0f0f0;
 }
 
-.dark-theme .navbar > .searchbar input {
+.dark-theme .searchbar input {
   background-color: inherit;
   color: inherit;
 }
@@ -625,7 +625,7 @@ body.dark-theme {
     color: #f0f0f0;
   }
 
-  .no-theme .navbar > .searchbar input {
+  .no-theme .searchbar input {
     background-color: inherit;
     color: inherit;
   }
diff --git a/assets/css/empty.css b/assets/css/empty.css
new file mode 100644
index 00000000..e3b02965
--- /dev/null
+++ b/assets/css/empty.css
@@ -0,0 +1,10 @@
+#search-widget {
+    text-align: center;
+    margin: 50px auto;
+}
+
+#logo > h1 {
+    font-size: 3.5em;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
diff --git a/src/invidious/views/empty.ecr b/src/invidious/views/empty.ecr
index 2ca71dcc..b36500e9 100644
--- a/src/invidious/views/empty.ecr
+++ b/src/invidious/views/empty.ecr
@@ -3,16 +3,17 @@
 <title>
     Invidious
 </title>
+<link rel="stylesheet" href="/css/empty.css?v=<%= ASSET_COMMIT %>">
 <% end %>
 
 <%= rendered "components/feed_menu" %>
 
-<div class="pure-g h-box">
-    <div class="pure-u-1">
+<div class="pure-g h-box" id="search-widget">
+    <div class="pure-u-1" id="logo">
         <h1 href="/" class="pure-menu-heading">Invidious</h1>
     </div>
     <div class="pure-u-1-4"></div>
-    <div class="pure-u-1-2 searchbar">
+    <div class="pure-u-1 pure-u-md-12-24 searchbar">
         <form class="pure-form" action="/search" method="get">
             <fieldset>
                 <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">