4 files changed, 125 insertions, 110 deletions
diff --git a/pydis_site/templates/wiki/includes/article_menu.html b/pydis_site/templates/wiki/includes/article_menu.html
index 7cf23a71..1d9d2a12 100644
--- a/pydis_site/templates/wiki/includes/article_menu.html
+++ b/pydis_site/templates/wiki/includes/article_menu.html
@@ -3,78 +3,86 @@
 {% with selected_tab as selected %}
   <nav class="navbar is-light" role="navigation" aria-label="wiki navigation">
     <div class="container">
-      <a role="button" class="navbar-burger" data-target="wiki-menu" aria-label="menu" aria-expanded="false">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-      </a>
+      <div class="navbar-brand">
+        {% block wiki_breadcrumbs %}
+          {% include "wiki/includes/breadcrumbs.html" %}
+        {% endblock %}
+
+        <a role="button" class="navbar-burger" data-target="wiki-menu" aria-label="menu" aria-expanded="false">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
 
       <div class="navbar-menu" id="wiki-menu">
-        {% if not user.is_anonymous %}
-          <a class="navbar-item{% if selected == "settings" %} is-active{% endif %}"
-             href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}"
-          >
-            <span class="icon">
-              <i class="fas fa-wrench"></i>
-            </span>
+        <div class="navbar-end">
+          {% if not user.is_anonymous %}
+            <a class="navbar-item{% if selected == "settings" %} is-active{% endif %}"
+               href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}"
+            >
+              <span class="icon">
+                <i class="fas fa-wrench"></i>
+              </span>
 
-            <span>&nbsp;Settings</span>
-          </a>
-        {% endif %}
+              <span>&nbsp;Settings</span>
+            </a>
+          {% endif %}
+
+          {% for plugin in article_tabs %}
+            <a class="navbar-item{% if selected == plugin.slug %} is-active{% endif %}"
+               href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}"
+            >
+              <span class="icon">
+                <i class="{{ plugin.article_tab.1 }}"></i>
+              </span>
+
+              <span>&nbsp;{{ plugin.article_tab.0 }}</span>
+            </a>
+          {% endfor %}
 
-        {% for plugin in article_tabs %}
-          <a class="navbar-item{% if selected == plugin.slug %} is-active{% endif %}"
-             href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}"
+          <a class="navbar-item{% if selected == "history" %} is-active{% endif %}"
+             href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}"
           >
             <span class="icon">
-              <i class="{{ plugin.article_tab.1 }}"></i>
+              <i class="fas fa-clock"></i>
             </span>
 
-            <span>&nbsp;{{ plugin.article_tab.0 }}</span>
+            <span>&nbsp;Changes</span>
           </a>
-        {% endfor %}
 
-        <a class="navbar-item{% if selected == "history" %} is-active{% endif %}"
-           href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}"
-        >
-          <span class="icon">
-            <i class="fas fa-clock"></i>
-          </span>
+          {% if article|can_write:user and not article.current_revision.locked %}
+            <a class="navbar-item{% if selected == "edit" %} is-active{% endif %}"
+               href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}"
+            >
+              <span class="icon">
+                <i class="fas fa-edit"></i>
+              </span>
 
-          <span>&nbsp;Changes</span>
-        </a>
+              <span>&nbsp;Edit</span>
+            </a>
+          {% else %}
+            <a class="navbar-item{% if selected == "source" %} is-active{% endif %}"
+               href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}"
+            >
+              <span class="icon">
+                <i class="fas fa-lock"></i>
+              </span>
 
-        {% if article|can_write:user and not article.current_revision.locked %}
-          <a class="navbar-item{% if selected == "edit" %} is-active{% endif %}"
-             href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}"
-          >
-            <span class="icon">
-              <i class="fas fa-edit"></i>
-            </span>
+              <span>&nbsp;View Source</span>
+            </a>
+          {% endif %}
 
-            <span>&nbsp;Edit</span>
-          </a>
-        {% else %}
-          <a class="navbar-item{% if selected == "source" %} is-active{% endif %}"
-             href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}"
+          <a class="navbar-item{% if selected == "view" %} is-active{% endif %}"
+             href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}"
           >
             <span class="icon">
-              <i class="fas fa-lock"></i>
+              <i class="fas fa-home"></i>
             </span>
 
-            <span>&nbsp;View Source</span>
+            <span>&nbsp;View</span>
           </a>
-        {% endif %}
-
-        <a class="navbar-item{% if selected == "view" %} is-active{% endif %}"
-           href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}"
-        >
-          <span class="icon">
-            <i class="fas fa-home"></i>
-          </span>
-
-          <span>&nbsp;View</span>
-        </a>
+        </div>
       </div>
     </div>
   </nav>
diff --git a/pydis_site/templates/wiki/includes/breadcrumbs.html b/pydis_site/templates/wiki/includes/breadcrumbs.html
index b7a8aeae..16060236 100644
--- a/pydis_site/templates/wiki/includes/breadcrumbs.html
+++ b/pydis_site/templates/wiki/includes/breadcrumbs.html
@@ -1,61 +1,61 @@
 {% load i18n %}
 {% if urlpath %}
-<div id="article-breadcrumbs">
-
-<ul class="breadcrumb pull-left">
-  {% for ancestor in urlpath.cached_ancestors %}
-    <li><a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a></li>
-  {% endfor %}
-  <li class="active">{{ article.current_revision.title|truncatechars:25 }}</li>
-</ul>
-<div class="pull-left" style="margin-left: 10px;">
-  <div class="btn-group">
-    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#" style="padding: 7px;" title="{% trans "Sub-articles for" %} {{ article.current_revision.title }}">
-      <span class="fa fa-sitemap"></span>
-      <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
-      {% for child in children_slice %}
+
+  <div class="navbar-item">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      {% for ancestor in urlpath.cached_ancestors %}
         <li>
-          <a href="{% url 'wiki:get' path=child.path %}">
-            {{ child.article.current_revision.title }}
-          </a>
+          <a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a>
         </li>
-        {% empty %}
-        <li><a href="#"><em>{% trans "No sub-articles" %}</em></a></li>
       {% endfor %}
-      {% if children_slice_more %}
-      <li><a href="#"><em>{% trans "...and more" %}</em></a></li>
-      {% endif %}
-      <li class="divider"></li>
-      <li>
-        <a href="{% url 'wiki:dir' path=urlpath.path %}">{% trans "Browse articles in this level" %} &raquo;</a>
+
+      <li class="active">
+        <a href="{% url 'wiki:get' path=article.path %}">{{ article.current_revision.title|truncatechars:25 }}</a>
       </li>
-    </ul>
+    </nav>
   </div>
-</div>
-<div class="pull-left" style="margin-left: 10px;">
-  <div class="btn-group">
-    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#" style="padding: 7px;" title="{% trans "Sub-articles for" %} {{ article.current_revision.title }}">
-      <span class="fa fa-file"></span>
-      <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
-      <li>
-        {% if urlpath.parent %}
-        <a href="{% url 'wiki:create' path=urlpath.parent.path %}" style="padding: 7px;">
-          <span class="fa fa-arrow-right"></span>
-          {% blocktrans with article.current_revision.title as title %}New article next to {{ title }}{% endblocktrans %}
-        </a>
+
+  <hr class="navbar-divider">
+
+  <div class="navbar-item has-dropdown is-hoverable">
+    <a class="navbar-link">Sub-Articles</a>
+
+    <div class="navbar-dropdown">
+      {% if children_slice %}
+        {% for child in children_slice %}
+          <a class="navbar-item" href="{% url 'wiki:get' path=child.path %}">
+            {{ child.article.current_revision.title }}
+          </a>
+        {% endfor %}
+
+        {% if children_slice_more %}
+          <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}">
+            ...and more.
+          </a>
         {% endif %}
-        <a href="{% url 'wiki:create' path=urlpath.path %}" style="padding: 7px;">
-          <span class="fa fa-arrow-down"></span>
-          {% blocktrans with article.current_revision.title as title %}New article below {{ title }}{% endblocktrans %}
+
+        <hr class="navbar-divider">
+      {% endif %}
+
+      <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}">
+        Browse other articles
+      </a>
+    </div>
+  </div>
+
+  <div class="navbar-item has-dropdown is-hoverable">
+    <a class="navbar-link">Create Article</a>
+
+    <div class="navbar-dropdown">
+      {% if urlpath.parent %}
+        <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.parent.path %}">
+          At current level
         </a>
-      </li>
-    </ul>
+      {% endif %}
+
+      <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.path %}">
+        Below current level
+      </a>
+    </div>
   </div>
-</div>
-<div style="clear: both"></div>
-</div>
 {% endif %}
diff --git a/pydis_site/templates/wiki/includes/editor_sidebar.html b/pydis_site/templates/wiki/includes/editor_sidebar.html
index 87efed4d..5dd2f18b 100644
--- a/pydis_site/templates/wiki/includes/editor_sidebar.html
+++ b/pydis_site/templates/wiki/includes/editor_sidebar.html
@@ -15,7 +15,7 @@
     <div id="collapse_{{ plugin.slug }}" class="panel-collapse collapse{% if plugin_form.errors %} in{% endif %}">
       <div class="panel-body form-vertical">
         {% if plugin.sidebar.template %}
-          {% with plugin_form as form and plugin as plugin %}
+          {% with plugin_form as form %}
             <form method="POST" class="form-horizontal sidebar-form" action="?f={{ plugin_form.form_id }}" enctype="multipart/form-data">
               {% csrf_token %}
               {% include plugin.sidebar.template %}
diff --git a/pydis_site/templates/wiki/includes/formerrors.html b/pydis_site/templates/wiki/includes/formerrors.html
index 72d3c539..c6df2637 100644
--- a/pydis_site/templates/wiki/includes/formerrors.html
+++ b/pydis_site/templates/wiki/includes/formerrors.html
@@ -1,8 +1,15 @@
 {% if form.non_field_errors %}
-  {% if form_error_title %}<h4 class="alert-heading">{{ form_error_title }}</h4>{% endif %}
-  {% for error_message in form.non_field_errors %}
-    <div class="alert alert-block alert-danger">
-      {{ error_message }}
+  <article class="message is-danger">
+    {% if form_error_title %}
+      <div class="message-header">
+        <p>{{ form_error_title }}</p>
+      </div>
+    {% endif %}
+
+    <div class="message-body">
+      {% for error_message in form.non_field_errors %}
+        <p>{{ error_message }}</p>
+      {% endfor %}
     </div>
-  {% endfor %}
+  </article>
 {% endif %}