Improve top navbar according to the design draft

theme/static/css/funkwhale.css

@@ -6,26 +6,34 @@
   justify-content: space-between;
 }
 
-.feature button {
-  background-color: rgb(242, 113, 28);
-  color: white;
-  font-weight: bold;
+.navbar {
+	height: 64px;
 }
 
-.navbar {
-	background-color: #b1b2b5;
+.navbar .navbar-brand .navbar-item {
+	padding-left: 50px !important;
 }
 
 .navbar .navbar-brand img {
-	width: 52px;
-	height: 52px;
-	max-height: 52px;
+	height: 40px;
 }
 
 .navbar .navbar-brand .navbar-item {
 	padding: 0 25px;
 }
 
+.navbar .button {
+	margin: 15px;
+}
+
+.navbar a {
+	text-decoration: none;
+}
+
+.navbar .navbar-end {
+	margin-right: 25px;
+}
+
 @media only screen and (min-width: 1024px) {
 	#hero-content {
 		padding-top: 50px;

theme/templates/base.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Funkwhale</title>
     <link rel="stylesheet"
-          href="https://ui.funkwhale.audio/v0.1.2/css/funkwhale.css">
+					href="{{ main_siteurl }}/theme/css/bulma.min.css">
+    <link rel="stylesheet"
+          href="https://dev.funkwhale.audio/funkwhale/ui/-/jobs/92086/artifacts/raw/dist/funkwhale.css">
     <link rel="stylesheet"
           href="{{ main_siteurl }}/theme/css/fork-awesome.min.css">
     <link rel="stylesheet" href="{{ main_siteurl }}/theme/css/funkwhale.css">

theme/templates/inc/hero.html

-<section class="hero is-fullheight-with-navbar">
+<section class="hero is-medium">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-8">
@@ -14,7 +14,7 @@
               <br />
               Enjoy anywhere, share with anyone.{% endtrans %}
             </p>
-            <button class="button is-primary is-fullwidth">Get started</button>
+            <button class="funkwhale button is-primary is-fullwidth">Get started</button>
           </div>
         </div>
         <div class="column">

theme/templates/inc/menu.html

-<nav class="navbar has-shadow"
-     role="navigation"
-     aria-label="main navigation">
-  <div class="navbar-brand">
-    <a class="navbar-item" href="{{ main_siteurl }}">
-      <img src="{{ main_siteurl }}/theme/images/logo-white-bg.svg">
-    </a>
-    <a role="button"
-       class="navbar-burger"
-       aria-label="menu"
-       aria-expanded="false"
-       data-target="navbarBasicExample">
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-    </a>
-  </div>
-  <div id="navbarBasicExample" class="navbar-menu">
-    <div class="navbar-start">
-      <a class="navbar-item">Apps</a>
-      <a class="navbar-item">Community</a>
-      <a href="{{ SITEURL }}/faqs" class="navbar-item">FAQs</a>
-      <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link">Resources</a>
-        <div class="navbar-dropdown">
-          <a href="{{ SITEURL }}/collective" class="navbar-item">Collective and Statutes</a>
-          <a href="{{ SITEURL }}/code-of-conduct" class="navbar-item">Code of Conduct</a>
-          <a class="navbar-item">Forum</a>
-          <hr class="navbar-divider">
-          <a class="navbar-item">Documentation</a>
-        </div>
-      </div>
-    </div>
-    <div class="navbar-end"></div>
-    <div class="navbar-item has-dropdown is-hoverable">
-      <a class="navbar-link">{% trans %}Language{% endtrans %}</a>
-      <div class="navbar-dropdown is-right">
-        {% for lang, url in lang_siteurls.items() %}
-          <a class="navbar-item" href="{{ url }}/">{{ lang }}</a>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
+<nav class="navbar"
+		 role="navigation"
+		 aria-label="main navigation">
+	<div class="navbar-brand">
+		<a class="navbar-item" href="{{ main_siteurl }}">
+			<img src="{{ main_siteurl }}/theme/images/logo.svg">
+		</a>
+		<a role="button"
+			 class="navbar-burger"
+			 aria-label="menu"
+			 aria-expanded="false"
+			 data-target="navbarBasicExample">
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+		</a>
+	</div>
+	<div id="navbarBasicExample" class="navbar-menu">
+		<div class="navbar-end">
+			<a class="navbar-item">The project</a>
+			<a class="navbar-item">Help</a>
+			<a class="navbar-item">Contribute</a>
+			<a class="navbar-item">Support us</a>
+			<a class="navbar-item funkwhale button is-primary">Get Started</a>
+			<div class="navbar-item has-dropdown is-hoverable">
+				<a class="navbar-link"><i class="fa fa-language" aria-hidden="true"></i></a>
+				<div class="navbar-dropdown is-right">
+					{% for lang, url in lang_siteurls.items() %}
+						<a class="navbar-item" href="{{ url }}/">{{ lang }}</a>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
 </nav>