Update moreDropdown

This commit is contained in:
Jeremy Thomas 2018-01-18 15:43:10 +00:00
parent f9001f68b7
commit 9a3dad689b
5 changed files with 110 additions and 28 deletions

View File

@ -117,36 +117,89 @@
More
</div>
<div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
<a class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
<p>
<strong>Patreon backers</strong>
<br>
<small>Everyone who is supporting Bulma</small>
</p>
</a>
<hr class="navbar-divider">
<a class="navbar-item {% if page.route == 'bulma-start' %}is-active{% endif %}" href="{{ site.url }}/bulma-start/">
<p>
<strong>Bulma start</strong>
<br>
<small>A tiny npm package to get started</small>
</p>
<div class="media">
<div class="media-left">
<span class="icon is-large has-text-success">
<i class="fas fa-rocket fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>Bulma start</strong>
<br>
<small>A tiny npm package to get started</small>
</p>
</div>
</div>
</a>
<hr class="navbar-divider">
<a class="navbar-item {% if page.route == 'made-with-bulma' %}is-active{% endif %}" href="{{ site.url }}/made-with-bulma/">
<p>
<strong>Made with Bulma</strong>
<br>
<small>The official community badge</small>
</p>
<div class="media">
<div class="media-left">
<span class="icon is-large has-text-primary">
<i class="fas fa-certificate fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>Made with Bulma</strong>
<br>
<small>The official community badge</small>
</p>
</div>
</div>
</a>
<hr class="navbar-divider">
<a id="moreDropdownBootstrap" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/alternative-to-bootstrap/">
<div class="media">
<div class="media-left">
<span class="icon is-large">
<i class="fas fa-exchange-alt fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>Coming from Bootstrap</strong>
<br>
<small>See how Bulma is an alternative to Bootstrap</small>
</p>
</div>
</div>
</a>
<hr class="navbar-divider">
<a id="moreDropdownPatreon" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
<div class="media">
<div class="media-left">
<span class="icon is-large">
<i class="fab fa-patreon fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>Patreon backers</strong>
<br>
<small>Everyone who is supporting Bulma</small>
</p>
</div>
</div>
</a>
<hr class="navbar-divider">
<a class="navbar-item {% if page.route == 'extensions' %}is-active{% endif %}" href="{{ site.url }}/extensions/">
<p>
<strong>Extensions</strong>
<br>
<small>Side projects to enhance Bulma</small>
</p>
<div class="media">
<div class="media-left">
<span class="icon is-large has-text-danger">
<i class="fas fa-plug fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>Extensions</strong>
<br>
<small>Side projects to enhance Bulma</small>
</p>
</div>
</div>
</a>
</div>
</div>

View File

@ -18,14 +18,23 @@
background-color: darken($twitter, 5%)
color: $white
#moreDropdownBootstrap
.icon
color: $bootstrap
#moreDropdownPatreon
.icon
color: $patreon
+desktop
#blogDropdown
width: 17rem
.navbar-item
white-space: normal
#moreDropdown
width: 16rem
width: 18rem
.navbar-item
padding-right: 1rem
white-space: normal
.level
flex-grow: 1

View File

@ -11446,6 +11446,14 @@ svg {
color: white;
}
#moreDropdownBootstrap .icon {
color: #6f5499;
}
#moreDropdownPatreon .icon {
color: #f96854;
}
@media screen and (min-width: 1024px) {
#blogDropdown {
width: 17rem;
@ -11454,10 +11462,11 @@ svg {
white-space: normal;
}
#moreDropdown {
width: 16rem;
width: 18rem;
}
#moreDropdown .navbar-item {
padding-right: 1rem;
white-space: normal;
}
#moreDropdown .navbar-item .level {
-webkit-box-flex: 1;

View File

@ -76,8 +76,8 @@ doc-subtab: start
Font Awesome icons
</div>
<div class="message-body">
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
{% highlight html %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
</div>
</div>
@ -125,5 +125,16 @@ doc-subtab: start
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
</div>
{% include anchor.html name="bulma-start" %}
<div class="content">
<p>
<code><a href="/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
</p>
<p>
<a class="button is-link" href="/bulma-start/">Check it out</a>
</p>
</div>
</div>
</section>

View File

@ -112,7 +112,7 @@ extensions:
{% include navbar.html id="Extensions" %}
<section class="hero is-primary">
<section class="hero is-danger">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">