Update moreDropdown

docs/_includes/navbar.html

@@ -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>
+            <div class="media">
-              <strong>Bulma start</strong>
+              <div class="media-left">
-              <br>
+                <span class="icon is-large has-text-success">
-              <small>A tiny npm package to get started</small>
+                  <i class="fas fa-rocket fa-2x"></i>
-            </p>
+                </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>
+            <div class="media">
-              <strong>Made with Bulma</strong>
+              <div class="media-left">
-              <br>
+                <span class="icon is-large has-text-primary">
-              <small>The official community badge</small>
+                  <i class="fas fa-certificate fa-2x"></i>
-            </p>
+                </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>
+            <div class="media">
-              <strong>Extensions</strong>
+              <div class="media-left">
-              <br>
+                <span class="icon is-large has-text-danger">
-              <small>Side projects to enhance Bulma</small>
+                  <i class="fas fa-plug fa-2x"></i>
-            </p>
+                </span>
+              </div>
+              <div class="media-content">
+                <p>
+                  <strong>Extensions</strong>
+                  <br>
+                  <small>Side projects to enhance Bulma</small>
+                </p>
+              </div>
+            </div>
           </a>
         </div>
       </div>

docs/_sass/header.sass

@@ -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

docs/css/bulma-docs.css

@@ -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;

docs/documentation/overview/start.html

@@ -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>
+        <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 %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
+        {% 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>

docs/extensions.html

@@ -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">