[Buildroot] [PATCH 2/8] website: rework the navigation bar

[Angelo Compagnucci <angelo.compagnucci@gmail.com>]

On desktop, the navigation bar is too thin: the Download button barely
fits in it. Its content also has the same width as the page content,
and the brand and the menu items are small.

Rework it with the Bootstrap utilities:
- use a container-xxl with a larger horizontal padding, so that the bar
  is wider than the page content
- make the brand (fs-2) and the menu items (fs-5) bigger, and add some
  space after the brand
- spread the menu items over the whole bar with flex, so that the
  spacing between them follows the width of the screen and the bar
  never wraps on two lines
- raise the height of the bar so that the Download button has 12px
  above and below it, and add the same space below it in the collapsed
  menu

Signed-off-by: Angelo Compagnucci <angelo.compagnucci@gmail.com>
---
 docs/website/css/main.css |  4 ++--
 docs/website/header.html  | 26 +++++++++++---------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/docs/website/css/main.css b/docs/website/css/main.css
index 3077c0de53..0cc7bbc262 100644
--- a/docs/website/css/main.css
+++ b/docs/website/css/main.css
@@ -25,8 +25,8 @@ a {
 
 @media (min-width: 1200px) {
 	.navbar .nav-link {
-		padding-top: 20px;
-		padding-bottom: 20px;
+		padding-top: 22px;
+		padding-bottom: 22px;
 	}
 }
 
diff --git a/docs/website/header.html b/docs/website/header.html
index 366bc8f525..b64d091a01 100644
--- a/docs/website/header.html
+++ b/docs/website/header.html
@@ -25,34 +25,30 @@
 <body class="bg-body-tertiary">
 	<!-- Fixed navbar -->
 	<nav class="navbar navbar-expand-xl bg-primary sticky-top py-0" data-bs-theme="dark">
-		<div class="container">
-		<div class="row flex-grow-1 justify-content-center g-0">
-		<div class="col-xxl-10 d-flex flex-wrap align-items-center justify-content-between">
-		<a class="navbar-brand py-2" href="/"><b>Buildroot</b></a>
+		<div class="container-xxl px-sm-4">
+		<a class="navbar-brand fs-2 me-xl-5 py-2" href="/"><b>Buildroot</b></a>
 		<button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
 			<span class="navbar-toggler-icon"></span>
 		</button>
 		<div class="collapse navbar-collapse" id="navbar-main">
-			<ul class="navbar-nav ms-auto">
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/news.html">
+			<ul class="navbar-nav flex-grow-1 justify-content-xl-between pb-1 pb-xl-0">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/news.html">
 					<span class="bi bi-star-fill"></span> News</a></li>
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/docs.html">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/docs.html">
 					<span class="bi bi-book-fill"></span> Documentation</a></li>
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/support.html">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/support.html">
 					<span class="bi bi-question-circle-fill"></span> Support</a></li>
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/contribute.html">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/contribute.html">
 					<span class="bi bi-share-fill"></span> Contribute</a></li>
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/lts.html">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/lts.html">
 					<span class="bi bi-send-fill"></span> LTS</a></li>
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/sponsors.html">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/sponsors.html">
 					<span class="bi bi-currency-dollar"></span> Sponsors</a></li>
-				<li class="nav-item"><a class="nav-link fw-light px-2" href="/association.html">
+				<li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/association.html">
 					<span class="bi bi-arrows-angle-contract"></span> Association</a></li>
-				<li class="nav-item align-self-xl-center"><a class="btn btn-success ms-xl-3 my-2 my-xl-0" href="/download.html">
+				<li class="nav-item align-self-xl-center"><a class="btn btn-success my-2 my-xl-0" href="/download.html">
 					<span class="bi bi-cloud-download-fill"></span> Download</a></li>
 			</ul>
 		</div><!--/.navbar-collapse -->
 		</div>
-		</div>
-		</div>
 	</nav>
-- 
2.34.1

_______________________________________________
buildroot mailing list
buildroot@buildroot.org
https://lists.buildroot.org/mailman/listinfo/buildroot