Unverified Commit 60bcd75a authored by Georg Krause's avatar Georg Krause
Browse files

Improve top navbar according to the design draft

parent d04834e5
...@@ -6,26 +6,34 @@ ...@@ -6,26 +6,34 @@
justify-content: space-between; justify-content: space-between;
} }
.feature button { .navbar {
background-color: rgb(242, 113, 28); height: 64px;
color: white;
font-weight: bold;
} }
.navbar { .navbar .navbar-brand .navbar-item {
background-color: #b1b2b5; padding-left: 50px !important;
} }
.navbar .navbar-brand img { .navbar .navbar-brand img {
width: 52px; height: 40px;
height: 52px;
max-height: 52px;
} }
.navbar .navbar-brand .navbar-item { .navbar .navbar-brand .navbar-item {
padding: 0 25px; 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) { @media only screen and (min-width: 1024px) {
#hero-content { #hero-content {
padding-top: 50px; padding-top: 50px;
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Funkwhale</title> <title>Funkwhale</title>
<link rel="stylesheet" <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"
<link rel="stylesheet" <link rel="stylesheet"
href="{{ main_siteurl }}/theme/css/fork-awesome.min.css"> href="{{ main_siteurl }}/theme/css/fork-awesome.min.css">
<link rel="stylesheet" href="{{ main_siteurl }}/theme/css/funkwhale.css"> <link rel="stylesheet" href="{{ main_siteurl }}/theme/css/funkwhale.css">
<section class="hero is-fullheight-with-navbar"> <section class="hero is-medium">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns is-8"> <div class="columns is-8">
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<br /> <br />
Enjoy anywhere, share with anyone.{% endtrans %} Enjoy anywhere, share with anyone.{% endtrans %}
</p> </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> </div>
<div class="column"> <div class="column">
<nav class="navbar has-shadow" <nav class="navbar"
role="navigation" role="navigation"
aria-label="main navigation"> aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{{ main_siteurl }}"> <a class="navbar-item" href="{{ main_siteurl }}">
<img src="{{ main_siteurl }}/theme/images/logo-white-bg.svg"> <img src="{{ main_siteurl }}/theme/images/logo.svg">
</a> </a>
<a role="button" <a role="button"
class="navbar-burger" class="navbar-burger"
aria-label="menu" aria-label="menu"
aria-expanded="false" aria-expanded="false"
data-target="navbarBasicExample"> data-target="navbarBasicExample">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-end">
<a class="navbar-item">Apps</a> <a class="navbar-item">The project</a>
<a class="navbar-item">Community</a> <a class="navbar-item">Help</a>
<a href="{{ SITEURL }}/faqs" class="navbar-item">FAQs</a> <a class="navbar-item">Contribute</a>
<div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-item">Support us</a>
<a class="navbar-link">Resources</a> <a class="navbar-item funkwhale button is-primary">Get Started</a>
<div class="navbar-dropdown"> <div class="navbar-item has-dropdown is-hoverable">
<a href="{{ SITEURL }}/collective" class="navbar-item">Collective and Statutes</a> <a class="navbar-link"><i class="fa fa-language" aria-hidden="true"></i></a>
<a href="{{ SITEURL }}/code-of-conduct" class="navbar-item">Code of Conduct</a> <div class="navbar-dropdown is-right">
<a class="navbar-item">Forum</a> {% for lang, url in lang_siteurls.items() %}
<hr class="navbar-divider"> <a class="navbar-item" href="{{ url }}/">{{ lang }}</a>
<a class="navbar-item">Documentation</a> {% endfor %}
</div> </div>
</div> </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 %}
</nav> </nav>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment