From a75b8399872ffdb725dba2c7d155e4de19e29a67 Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Wed, 24 Jan 2024 15:19:22 +0000
Subject: [PATCH] docs/tree: restyled the page

---
 src/templates/docs/tree.html | 48 ++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/templates/docs/tree.html b/src/templates/docs/tree.html
index a2d1bb20..e64977a0 100644
--- a/src/templates/docs/tree.html
+++ b/src/templates/docs/tree.html
@@ -2,37 +2,49 @@
 
 {% block title %}{{ _("Tree") }}{% end block %}
 
-{% block main %}
-	<section>
-		<div class="container">
-			<div class="row">
-				<div class="col col-lg-6">
-					<h1>{{ _("Tree") }}</h1>
-				</div>
+{% block container %}
+	<section class="hero is-light">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="/">{{ _("Home") }}</a>
+						</li>
+						<li>
+							<a href="/docs">{{ _("Documentation") }}</a>
+						</li>
+						<li class="is-active">
+							<a href="#" aria-current="page">{{ _("Tree") }}</a>
+						</li>
+					</ul>
+				</nav>
+
+				<h1 class="title">{{ _("Tree") }}</h1>
 			</div>
 		</div>
 	</section>
 
-	<div class="card">
-		<div class="list-group list-group-flush">
+	<section class="section">
+		<div class="container">
 			{% for page in pages %}
 				{% if page.check_acl(current_user) %}
-					<div class="list-group-item d-flex flex-column">
-						<p class="mb-0">
+					<div class="block">
+						<p class="is-size-6">
 							{% for p, title in backend.wiki.make_breadcrumbs(page.page) %}
-								<a href="{{ p }}">{{ title }}</a> /
+								<a href="{{ p }}">{{ title }}</a> /
 							{% end %}
 
-							<a href="{{ page.url }}">{{ page.title or _("- No Title -") }}</a>
+							<a href="{{ page.url }}">{{ page.title or _("- No Title -") }}</a>
 						</p>
 
-						<small class="text-muted">
-							{{ page.page }} &dash;
-							{{ _("Last edited %s") % locale.format_date(page.timestamp, shorter=True) }}
-						</small>
+						<p class="is-size-7">
+							{{ page.page }} &dash;
+							{{ _("Last edited %s") % locale.format_date(page.timestamp, shorter=True) }}
+						</p>
 					</div>
 				{% end %}
 			{% end %}
 		</div>
-	</div>
+	</section>
 {% end block %}
-- 
2.47.2