Update moreDropdown

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index faac2f7f394fcd160d5b284bc4fb926eebc8fe71..d8558c6c03a382d4d6bc85e7fdb8204e4e513431 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/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>
-              <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>

diff --git a/docs/_sass/header.sass b/docs/_sass/header.sass
index a0ea2ed98583f136c0ea29cdd9b0cb197c92065c..b77c2af23bcced456c37f1590650ec49f74a92ae 100644 (file)
--- a/docs/_sass/header.sass
+++ b/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

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index bc09b9252f40cb842abf057ae5edd267822d2c8a..2b43458a136694a9302eb77d568402fbe8af65a3 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;

diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html
index 8e9372ef26d034d8d9eeebb6339c73c13a13e85d..a5a03d78f5d95176c0ebfe0b269b3b65cd1a90b3 100644 (file)
--- a/docs/documentation/overview/start.html
+++ b/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>
-        {% 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>

diff --git a/docs/extensions.html b/docs/extensions.html
index f2df40e598ea1d9440560a6149b2a9fbccea04de..d38dc1fe731236516887d3d21ece21a3977fb8b8 100644 (file)
--- a/docs/extensions.html
+++ b/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">