New breadcrumb style.

assets/less/classes/forum/header.less

@@ -0,0 +1,32 @@
+.forum__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 10px 15px;
+
+    &__title {
+        font-size: 2em;
+        line-height: 1.5em;
+    }
+
+    &__breadcrumbs {
+        display: flex;
+        font-size: 1.1em;
+        line-height: 1.5em;
+    }
+
+    &__breadcrumb {
+        color: var(--accent-colour);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &__separator {
+            color: var(--accent-colour);
+            margin: 0 8px;
+            font-size: .9em;
+        }
+    }
+}

assets/less/main.less

@@ -156,6 +156,7 @@ body {
 @import "classes/forum/topic";
 @import "classes/forum/topics";
 @import "classes/forum/status";
+@import "classes/forum/header";
 
 // User stuff
 @import "classes/usercard";

templates/forum/forum.twig

@@ -1,6 +1,6 @@
 {% extends 'forum/master.twig' %}
 {% from 'macros.twig' import navigation, pagination %}
-{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons %}
+{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons, forum_header %}
 
 {% set title = forum_info.forum_name %}
 {% set canonical_url = '/forum/forum.php'|url_construct({
@@ -9,7 +9,7 @@
 }) %}
 
 {% block content %}
-    {{ navigation(forum_breadcrumbs, forum_breadcrumbs|last, true, null, 'left') }}
+    {{ forum_header(forum_info.forum_name, forum_breadcrumbs, true) }}
 
     {% if forum_info.forum_subforums|length > 0 or forum_info.forum_type == 1 %}
         {{ forum_category_listing(forum_info.forum_subforums, 'Forums') }}

templates/forum/macros.twig

@@ -18,6 +18,32 @@
     </div>
 {% endmacro %}
 
+{% macro forum_header(title, breadcrumbs, omit_last_breadcrumb) %}
+    <div class="container container--new forum__header">
+        {% if breadcrumbs is iterable and breadcrumbs|length > 0 %}
+            <div class="forum__header__breadcrumbs">
+                {% for name, url in breadcrumbs %}
+                    {% if url != breadcrumbs|first %}
+                        <div class="forum__header__breadcrumb__separator">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    {% endif %}
+
+                    {% if not (omit_last_breadcrumb|default(false) and url == breadcrumbs|last) %}
+                        <a href="{{ url }}" class="forum__header__breadcrumb">{{ name }}</a>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        {% endif %}
+
+        {% if title|length > 0 %}
+            <div class="forum__header__title">
+                {{ title }}
+            </div>
+        {% endif %}
+    </div>
+{% endmacro %}
+
 {% macro forum_category_buttons(forum, perms) %}
     <div class="forum__actions forum__actions__content">
         {% if perms|perms_check(constant('MSZ_FORUM_PERM_CREATE_TOPIC')) %}

templates/forum/topic.twig

@@ -6,7 +6,8 @@
         forum_post_listing,
         forum_topic_buttons,
         forum_topic_locked,
-        forum_posting_form
+        forum_posting_form,
+        forum_header
 %}
 
 {% set title = topic_info.topic_title %}
@@ -26,13 +27,7 @@
 ) %}
 
 {% block content %}
-    {{ navigation(topic_breadcrumbs, topic_breadcrumbs|last, true, null, 'left') }}
+    {{ forum_header(topic_info.topic_title, topic_breadcrumbs) }}
-
-    <div class="container">
-        <div class="container__title">
-            {{ topic_info.topic_title }}
-        </div>
-    </div>
 
     {{ forum_topic_locked(topic_info.topic_locked, topic_info.topic_archived) }}
 

yarn.lock

@@ -3,16 +3,16 @@
 
 
 "@fortawesome/fontawesome-free@^5.3.1":
-  version "5.3.1"
+  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.3.1.tgz#5466b8f31c1f493a96754c1426c25796d0633dd9"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.4.1.tgz#6194786c1a705ab84253e06429834466670e3c3f"
 
 "@types/jquery@^2.0.40":
-  version "2.0.49"
+  version "2.0.51"
-  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.49.tgz#95bd7064caebf65bde10429dff491a1aea05b67d"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.51.tgz#d0c728663de8905457a26c8891ac08ad2b3539c9"
 
 highlightjs@^9.10.0:
-  version "9.10.0"
+  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.10.0.tgz#fca9b78ddaa3b1abca89d6c3ee105ad270a80190"
+  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.12.0.tgz#9b84eb42a7aa8488eb69ac79fec44cf495bf72a1"
 
 timeago.js@^3.0.2:
   version "3.0.2"