From 14091f59d6e076fe9d82b556f2bf58bb0db6bfd5 Mon Sep 17 00:00:00 2001
From: Johan Gunnarsson <johan.gunnarsson@gmail.com>
Date: Thu, 27 Jul 2023 13:53:17 +0200
Subject: [PATCH] docs: Bump to Bootstrap 5

---
 docs/_layouts/board.html   | 242 ++++++++++++++++++++-----------------
 docs/_layouts/default.html |  71 ++++++-----
 docs/boards.html           |   6 +-
 docs/index.html            |  18 +--
 docs/tips-and-tricks.html  |  23 ++--
 5 files changed, 190 insertions(+), 170 deletions(-)

diff --git a/docs/_layouts/board.html b/docs/_layouts/board.html
index ebb4ea8..9ec0503 100644
--- a/docs/_layouts/board.html
+++ b/docs/_layouts/board.html
@@ -1,63 +1,56 @@
 ---
 layout: default
 ---
-<main role="main">
+<main>
 	<div class="container">
 		<h2>{{ page.board_name }}</h2>
 		<p>Minimal, pure and up-to-date vanilla Debian/Ubuntu Linux SD card image for <i>{{ page.board_name }}</i>.</p>
-		<hr />
+		<hr>
 	</div>
 	<div class="container">
 		<dl class="row">
-			<dt class="col-6 text-right"><strong>Board name</strong></dt>
+			<dt class="col-6 text-end"><strong>Board name</strong></dt>
 			<dd class="col-6">{{ page.board_name }}</dd>
-			<dt class="col-6 text-right"><strong>Board maker</strong></dt>
+			<dt class="col-6 text-end"><strong>Board maker</strong></dt>
 			<dd class="col-6">{{ page.board_maker_name }}</dd>
-			<dt class="col-6 text-right"><strong>SoC</strong></dt>
+			<dt class="col-6 text-end"><strong>SoC</strong></dt>
 			<dd class="col-6">{{ page.board_soc_name }}</dd>
-			<dt class="col-6 text-right"><strong>CPU</strong></dt>
+			<dt class="col-6 text-end"><strong>CPU</strong></dt>
 			<dd class="col-6">{{ page.board_cpu_name }}</dd>
 		</dl>
-		<hr />
+		<hr>
 	</div>
-	<div class="container" style="display: none;" id="unsupported-warning">
-		<div class="alert alert-warning" role="alert">This board is not supported by any boot image</div>
-		<hr />
-	</div>
-	<div class="container" id="install-instructions">
+	<div class="container">
 		<h3>Install instructions</h3>
-		<div class="row">
-			<div class="col-4">
-				<div class="nav flex-column nav-pills" id="install-tab" role="tablist" aria-orientation="vertical">
+		<div class="alert alert-warning d-none" id="unsupported-warning" role="alert">This board is not supported by any boot image and/or Debian/Ubuntu image</div>
+		<div class="d-flex align-items-start" id="install-instructions">
+			<div class="col-3 nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
 {% assign x = site.debians | where: "arch", page.board_cpu_arch_debian | sort %}
 {% for debian in x %}
 {% capture i %}{{ debian.os }}{{ debian.dist }}{{ debian.arch }}{% endcapture %}
-					<a class="nav-link hidden" id="install-{{ i }}-tab" data-toggle="pill" href="#install-{{ i }}" role="tab" aria-controls="install-{{ i }}" aria-selected="true">{{ debian.name }}</a>
+				<button class="nav-link text-start d-none" id="v-pills-install-{{ i }}-tab" data-bs-toggle="pill" data-bs-target="#v-pills-install-{{ i }}" type="button" role="tab" aria-controls="v-pills-install-{{ i }}" aria-selected="true">{{ debian.name }}</button>
 {% endfor %}
-				</div>
 			</div>
-			<div class="col-8">
-				<div class="tab-content" id="install-tabContent">
+			<div class="col-9 tab-content" id="v-pills-tab-content">
 {% assign x = site.debians | where: "arch", page.board_cpu_arch_debian | sort %}
 {% for debian in x %}
 {% capture i %}{{ debian.os }}{{ debian.dist }}{{ debian.arch }}{% endcapture %}
-					<div class="tab-pane fade hidden" id="install-{{ i }}" role="tabpanel" aria-labelledby="install-{{ i }}-tab">
-						<p class="bg-dark py-2 px-3">
-							<code class="shell-normal text-light">wget http://dl.sd-card-images.johang.se<span class="install-boot_path">/PLACEHOLDER1.bin.gz</span></code><br />
-							<code class="shell-normal text-light">wget http://dl.sd-card-images.johang.se<span id="install-{{ i }}-debian_path">/PLACEHOLDER2.bin.gz</span></code><br />
-							<code class="shell-normal text-light">zcat <span class="install-boot_file">boot.bin.gz</span> <span id="install-{{ i }}-debian_file">debian.bin.gz</span> &gt; sd-card.img</code><br />
-							<code class="shell-root text-light">dd if=sd-card.img of=/dev/sdXXX <span class="text-info"># ...where /dev/sdXXX is your SD card</span></code><br />
-						</p>
+				<div class="tab-pane fade d-none" id="v-pills-install-{{ i }}" role="tabpanel" aria-labelledby="v-pills-install-{{ i }}-tab" tabindex="0">
+					<p class="bg-dark rounded py-2 px-3">
+						<code class="shell-normal text-light">wget http://dl.sd-card-images.johang.se<span id="install-{{ i }}-boot_path">/PLACEHOLDER1.bin.gz</span></code><br>
+						<code class="shell-normal text-light">wget http://dl.sd-card-images.johang.se<span id="install-{{ i }}-debian_path">/PLACEHOLDER2.bin.gz</span></code><br>
+						<code class="shell-normal text-light">zcat <span id="install-{{ i }}-boot_file">boot.bin.gz</span> <span id="install-{{ i }}-debian_file">debian.bin.gz</span> &gt; sd-card.img</code><br>
+						<code class="shell-root text-light">dd if=sd-card.img of=/dev/sdXXX <span class="text-info"># ...where /dev/sdXXX is your SD card</span></code><br>
+					</p>
 {% if debian.exp == true %}
-						<div class="alert alert-danger" role="alert">This image is experimental</div>
+					<div class="alert alert-danger" role="alert">This image is experimental</div>
 {% endif %}
-						<p>When the <code>dd</code> command is done, put the SD card in your board and power it on. The board will boot up and assign itself an IP address using DHCP. The last part of the Debian/Ubuntu image filename is the default root password ("<span id="install-{{ i }}-password">PLACEHOLDER</span>" for this image).</p>
-					</div>
-{% endfor %}
+					<p>When the <code>dd</code> command is done, put the SD card in your board and power it on. The board will boot up and assign itself an IP address using DHCP. The last part of the Debian/Ubuntu image filename is the default root password ("<span id="install-{{ i }}-password">PLACEHOLDER</span>" for this image).</p>
 				</div>
+{% endfor %}
 			</div>
 		</div>
-		<hr />
+		<hr>
 	</div>
 	<div class="container" id="downloads">
 		<h3>Downloads for {{ page.board_name }}</h3>
@@ -65,106 +58,33 @@ layout: default
 			<caption>Downloads relevant to {{ page.board_name }}.</caption>
 			<thead>
 				<tr>
-					<th scope="col">Name</th>
-					<th scope="col">Type</th>
+					<th scope="col">File</th>
+					<th scope="col">Description</th>
 					<th scope="col">Build date</th>
 					<th scope="col">Size</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr id="downloads-boot" class="show">
+				<tr id="downloads-boot" class="d-none">
 					<td><i class="bi-download"></i> <a href="" id="downloads-boot-link">PLACEHOLDER</a></td>
-					<td>Boot image</td>
+					<td>Boot image <a class="badge text-bg-primary text-decoration-none d-none" id="downloads-boot-u-boot" href="https://source.denx.de/u-boot/u-boot">U-Boot PLACEHOLDER</a> <a class="badge text-bg-secondary text-decoration-none d-none" id="downloads-boot-atf" href="https://github.com/ARM-software/arm-trusted-firmware">TF-A PLACEHOLDER</a> <a class="badge text-bg-secondary text-decoration-none d-none" id="downloads-boot-raspberry-pi-firmware" href="https://github.com/raspberrypi/firmware">RPi boot FW PLACEHOLDER</a> <a class="badge text-bg-secondary text-decoration-none d-none" id="downloads-boot-amlogic-boot-fip" href="https://github.com/LibreELEC/amlogic-boot-fip">AmL boot FW PLACEHOLDER</a></td>
 					<td id="downloads-boot-build">PLACEHOLDER</td>
 					<td id="downloads-boot-size">PLACEHOLDER</td>
 				</tr>
 {% assign x = site.debians | where: "arch", page.board_cpu_arch_debian | sort %}
 {% for debian in x %}
 {% capture i %}{{ debian.os }}{{ debian.dist }}{{ debian.arch }}{% endcapture %}
-				<tr id="downloads-{{ i }}" class="hidden">
-					<td><i class="bi-download"></i> <a href="" id="downloads-{{ i }}-link">PLACEHOLDER</a> {% if debian.exp == true %}<span class="badge badge-danger">Experimental</span>{% endif %}</td>
-					<td>{{ debian.name }} root filesystem image</td>
+				<tr id="downloads-{{ i }}" class="d-none">
+					<td><i class="bi-download"></i> <a href="" id="downloads-{{ i }}-link">PLACEHOLDER</a></td>
+					<td>{{ debian.name }} image {% if debian.exp == true %}<span class="badge text-bg-danger">Experimental</span>{% endif %} <span class="badge text-bg-primary d-none" id="downloads-{{ i }}-kernel">Kernel PLACEHOLDER</span></td>
 					<td id="downloads-{{ i }}-build">PLACEHOLDER</td>
 					<td id="downloads-{{ i }}-size">PLACEHOLDER</td>
 				</tr>
 {% endfor %}
 			</tbody>
 		</table>
-		<hr />
+		<hr>
 	</div>
-	<script>
-		base_url = "http://dl.sd-card-images.johang.se";
-		board = "{{ page.board_id }}";
-		arch = "{{ page.board_cpu_arch_debian }}";
-		dtb = "{{ page.board_dtb_name }}";
-		function basename(path) {
-			return path.substring(Math.max(0, path.lastIndexOf("/") + 1));
-		}
-		function handle_boots(boots) {
-			supported = 0;
-			boots.forEach(function(boot) {
-				if (boot["board"] != board)
-					return;
-				supported++;
-				// Update install instructions
-				$("span.install-boot_file").text(basename(boot["path"]));
-				$("span.install-boot_path").text(boot["path"]);
-				// Update downloads list
-				$("#downloads-boot-link").text(basename(boot["path"])).attr("href", base_url + boot["path"]);
-				$("#downloads-boot-build").text(boot["build"]);
-				$("#downloads-boot-size").text(Math.round(boot["size"] / 1024) + " kB");
-			});
-			if (supported <= 0) {
-				// Board's unsupported
-				$("#install-instructions").hide();
-				$("#downloads").hide();
-				$("#unsupported-warning").show();
-			}
-		}
-		function handle_debians(debians) {
-			supported = [];
-			debians.forEach(function(debian) {
-				if (debian["arch"] != arch)
-					return;
-				if (dtb == "N/A") {
-					supported.push(debian);
-				} else {
-					debian["dtbs"].forEach(function(_dtb) {
-						if (_dtb == dtb)
-							supported.push(debian);
-					});
-				}
-			});
-			if (supported.length <= 0) {
-				// Board's unsupported
-				$("#install-instructions").hide();
-				$("#downloads").hide();
-				$("#unsupported-warning").show();
-			}
-			supported.forEach(function(debian) {
-				i = debian["os"] + debian["dist"] + debian["arch"];
-				// Update install instructions
-				$("#install-" + i + "-debian_file").text(basename(debian["path"]));
-				$("#install-" + i + "-debian_path").text(debian["path"]);
-				$("#install-" + i + "-password").text(debian["password"]);
-				$("#install-" + i + "-tab").removeClass("hidden").addClass("show");
-				$("#install-" + i).removeClass("hidden").addClass("show");
-				// Update downloads list
-				$("#downloads-" + i + "-link").text(basename(debian["path"])).attr("href", base_url + debian["path"]);
-				$("#downloads-" + i + "-build").text(debian["build"]);
-				$("#downloads-" + i + "-size").text(Math.round(debian["size"] / (1024 * 1024)) + " MB");
-				$("#downloads-" + i).removeClass("hidden").addClass("show");
-			});
-			// Hide irrelevant stuff
-			$("#install-instructions .nav a.hidden").hide();
-			$("#downloads table tbody tr.hidden").hide();
-			// Set first visible tab to active
-			$("#install-instructions .nav a.show:first").addClass("active");
-			$("#install-instructions .tab-content div.show:first").addClass(["active"]);
-		}
-	</script>
-	<script src="https://cdn.sd-card-images.johang.se/index-boots.js" type="text/javascript"></script>
-	<script src="https://cdn.sd-card-images.johang.se/index-debians-{{ page.board_cpu_arch_debian }}.js" type="text/javascript"></script>
 	<div class="container">
 		<h3>Boards by {{ page.board_maker_name }}</h3>
 		<table class="table table-sm table-hover">
@@ -196,7 +116,7 @@ layout: default
 {% endfor %}
 			</tbody>
 		</table>
-		<hr />
+		<hr>
 	</div>
 	<div class="container">
 		<h3>Boards with {{ page.board_soc_name }}</h3>
@@ -229,6 +149,100 @@ layout: default
 {% endfor %}
 			</tbody>
 		</table>
-		<hr />
+		<hr>
 	</div>
 </main>
+<script type="text/javascript">
+	var base_url = "http://dl.sd-card-images.johang.se";
+	var board = "{{ page.board_id }}";
+	var arch = "{{ page.board_cpu_arch_debian }}";
+	var dtb = "{{ page.board_dtb_name }}";
+
+	var all_boots = [];
+	function handle_boots(boots) {
+		all_boots = boots;
+	}
+
+	var all_debians = [];
+	function handle_debians(debians) {
+		all_debians = debians;
+	}
+</script>
+<script src="https://cdn.sd-card-images.johang.se/index-boots.js"></script>
+<script src="https://cdn.sd-card-images.johang.se/index-debians-{{ page.board_cpu_arch_debian }}.js"></script>
+<script type="text/javascript">
+	function basename(path) {
+		return path.substring(Math.max(0, path.lastIndexOf("/") + 1));
+	}
+
+	// Find supported boots
+	supported_boots = [];
+	all_boots.forEach(function(boot) {
+		if (boot["board"] != board)
+			return;
+
+		supported_boots.push(boot);
+	});
+	console.log("Found " + supported_boots.length + " supported boot images");
+
+	// Find supported debians
+	supported_debians = [];
+	all_debians.forEach(function(debian) {
+		if (debian["arch"] != arch)
+			return;
+
+		if (dtb == "N/A") {
+			supported_debians.push(debian);
+		} else {
+			debian["dtbs"].forEach(function(_dtb) {
+				if (_dtb == dtb)
+					supported_debians.push(debian);
+			});
+		}
+	});
+	console.log("Found " + supported_debians.length + " supported Debian/Ubuntu images");
+
+	if (supported_boots.length > 0) {
+		boot = supported_boots[0];
+
+		// Update download list
+		$("#downloads-boot-link").text(basename(boot["path"])).attr("href", base_url + boot["path"]);
+		$("#downloads-boot-build").text(boot["build"] + " (" + moment(boot["builddate"]).fromNow() + ")");
+		$("#downloads-boot-size").text(Math.round(boot["size"] / 1024) + " kB");
+		$("#downloads-boot").removeClass("d-none").addClass("show");
+	}
+
+	supported_debians.forEach(function(debian) {
+		i = debian["os"] + debian["dist"] + debian["arch"];
+
+		// Update download list
+		$("#downloads-" + i + "-link").text(basename(debian["path"])).attr("href", base_url + debian["path"]);
+		$("#downloads-" + i + "-build").text(debian["build"] + " (" + moment(debian["builddate"]).fromNow() + ")");
+		$("#downloads-" + i + "-size").text(Math.round(debian["size"] / (1024 * 1024)) + " MB");
+		$("#downloads-" + i).removeClass("d-none").addClass("show");
+	});
+
+	if (supported_boots.length > 0 && supported_debians.length > 0) {
+		boot = supported_boots[0];
+
+		supported_debians.forEach(function(debian) {
+			i = debian["os"] + debian["dist"] + debian["arch"];
+
+			// Update install instructions
+			$("#install-" + i + "-boot_file").text(basename(boot["path"]));
+			$("#install-" + i + "-boot_path").text(boot["path"]);
+			$("#install-" + i + "-debian_file").text(basename(debian["path"]));
+			$("#install-" + i + "-debian_path").text(debian["path"]);
+			$("#install-" + i + "-password").text(debian["password"]);
+			$("#v-pills-install-" + i + "-tab").removeClass("d-none").addClass("show");
+			$("#v-pills-install-" + i).removeClass("d-none");
+		});
+
+		// Set first visible tab to active
+		$("#install-instructions button:not(.d-none):first").addClass("active");
+		$("#install-instructions #v-pills-tab-content div:not(.d-none):first").addClass(["active", "show"]);
+	} else {
+		$("#unsupported-warning").removeClass("d-none");
+		$("#install-instructions").addClass("d-none");
+	}
+</script>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 5f03e1f..7f22f69 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -6,10 +6,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<meta name="description" content="{{ page.description }}">
 		<title>{{ page.title }}</title>
-		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.0/font/bootstrap-icons.css" crossorigin="anonymous">
+		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js" crossorigin="anonymous"></script>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" crossorigin="anonymous">
 		<style>
 			body {
 				padding-top: 4.5rem;
@@ -23,6 +24,9 @@
 			code.shell-normal:before {
 				content: "$ ";
 			}
+			pre.wrap {
+				white-space: pre-wrap;
+			}
 		</style>
 		<script async src="https://www.googletagmanager.com/gtag/js?id=G-V2XK1QS92P"></script>
 		<script>
@@ -35,40 +39,41 @@
 	<body>
 		<header>
 			<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-				<a class="navbar-brand" href="/">SD card images</a> 
-				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-					<span class="navbar-toggler-icon"></span>
-				</button>
-				<div class="collapse navbar-collapse" id="navbarCollapse">
-					<ul class="navbar-nav mr-auto">
-						<li class="nav-item">
-							<a class="nav-link" href="/boards.html">Supported boards</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="https://github.com/johang/sd-card-images">Source code</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="https://github.com/johang/sd-card-images/issues">Bugs</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="https://github.com/johang/sd-card-images/discussions">Support</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="/tips-and-tricks.html">Tips and tricks</a>
-						</li>
-					</ul>
-<!--
-					<form class="form-inline my-2 my-lg-0">
-						<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-						<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-					</form>
--->
+				<div class="container-fluid">
+					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+						<span class="navbar-toggler-icon"></span>
+					</button>
+					<a class="navbar-brand" href="/">SD card images</a> 
+					<div class="collapse navbar-collapse" id="navbarCollapse">
+						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+							<li class="nav-item">
+								<a class="nav-link" href="/boards.html">Supported boards</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="https://github.com/johang/sd-card-images">Source code</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="https://github.com/johang/sd-card-images/issues">Bugs</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="https://github.com/johang/sd-card-images/discussions">Support</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="/tips-and-tricks.html">Tips and tricks</a>
+							</li>
+						</ul>
+						<form class="d-flex" autocomplete="off" role="search" method="GET" action="https://www.google.com/search">
+							<input type="hidden" name="as_sitesearch" value="sd-card-images.johang.se">
+							<input class="form-control me-2" type="search" name="q" placeholder="Search" aria-label="Search">
+							<button class="btn btn-outline-success" type="submit">Search</button>
+						</form>
+					</div>
 				</div>
 			</nav>
 		</header>
 {{ content }}
 		<footer class="container">
-			<p class="float-right"><a href="#">Back to top</a></p>
+			<p class="float-end"><a href="#">Back to top</a></p>
 			<p>This project is not affiliated with Debian. Debian is a registered trademark owned by Software in the Public Interest, Inc.</p>
 		</footer>
 	</body>
diff --git a/docs/boards.html b/docs/boards.html
index 0b141e5..ecbe5b4 100644
--- a/docs/boards.html
+++ b/docs/boards.html
@@ -2,13 +2,15 @@
 title: All SD card images
 layout: default
 ---
-<main role="main">
+<main>
 	<div class="container">
 		<h2>Supported boards</h2>
 		<p>Minimal, pure and up-to-date vanilla Debian/Ubuntu Linux SD card images for various ARM-based single board computers (SBCs).</p>
+		<hr>
 	</div>
 	<div class="container">
 		<table class="table table-sm table-hover">
+			<caption>Supported boards.</caption>
 			<thead>
 				<tr>
 					<th scope="col">Board</th>
@@ -29,6 +31,6 @@ layout: default
 {% endfor %}
 			</tbody>
 		</table>
-		<hr />
+		<hr>
 	</div>
 </main>
diff --git a/docs/index.html b/docs/index.html
index 5d7d8b5..188cdbf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,11 +2,11 @@
 title: SD card images
 layout: default
 ---
-<main role="main">
+<main>
 	<div class="section section-header">
 		<div class="container">
 			<div class="row">
-				<div class="col-md-6 text-left my-auto col-z-index" >
+				<div class="col-md-6 my-auto col-z-index">
 					<h1>Minimal Debian/Ubuntu Linux SD card images</h1>
 					<h4>Unoffical, minimal, pure and up-to-date vanilla Debian/Ubuntu Linux SD card images for various ARM-based single board computers (SBCs).</h4>
 					<p class="my-3">
@@ -14,7 +14,7 @@ layout: default
 					</p>
 				</div>
 				<div class="col-md-6">
-					<img src="/img/board.jpg" style="width: 100%;">
+					<img src="/img/board.jpg" alt="Single board computer" class="img-fluid">
 				</div>
 			</div>
 		</div>
@@ -22,28 +22,28 @@ layout: default
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-4">
-				<img src="/img/board.jpg" height="48">
+				<img src="/img/board.jpg" alt="Single board computer thumbnail" height="48">
 				<h3>Minimal image</h3>
 				<p>The images contains just enough to boot up. Great for development, testing and learning.</p>
 			</div>
 			<div class="col-lg-4">
-				<img src="/img/board.jpg" height="48">
+				<img src="/img/board.jpg" alt="Single board computer thumbnail" height="48">
 				<h3>Pure image</h3>
 				<p>The images includes only official Debian/Ubuntu packages, including the official Debian/Ubuntu Linux kernel, downloaded from the offical Debian/Ubuntu mirrors.</p>
 			</div>
 			<div class="col-lg-4">
-				<img src="/img/board.jpg" height="48">
+				<img src="/img/board.jpg" alt="Single board computer thumbnail" height="48">
 				<h3>Up-to-date image</h3>
 				<p>The images are rebuilt once per week to include the latest versions and security patches for each of the Debian/Ubuntu suites.</p>
 			</div>
 		</div>
-		<hr />
+		<hr>
 	</div>
 	<div class="container">
 		<h3>Supported boards</h3>
 		<ul class="list-inline">
-{% for board in site.boards %}<li class="list-inline-item board-button my-1 mr-2 "><a href="/boards/{{ board.board_id }}.html" class="btn btn-outline-primary pill" role="button">{{ board.board_name }}</a></li>{% endfor %}
+{% for board in site.boards %}<li class="list-inline-item board-button my-1 mr-2"><a href="/boards/{{ board.board_id }}.html" class="btn btn-outline-primary pill" role="button">{{ board.board_name }}</a></li>{% endfor %}
 		</ul>
-		<hr />
+		<hr>
 	</div>
 </main>
diff --git a/docs/tips-and-tricks.html b/docs/tips-and-tricks.html
index 5ebb8ef..3e37fc7 100644
--- a/docs/tips-and-tricks.html
+++ b/docs/tips-and-tricks.html
@@ -1,18 +1,17 @@
 ---
-title: All SD card images
+title: Tips and tricks - SD card images
 layout: default
 ---
-<main role="main">
+<main>
 	<div class="container">
 		<h2>Tips and tricks</h2>
 		<p>Here's a collections of tips and tricks for setting up the images.</p>
-		<hr />
+		<hr>
 	</div>
 	<div class="container">
-		<hr />
 		<h3>Change root password</h3>
 		<p>You should change root password.</p>
-<pre class="bg-dark text-light p-3"><samp># passwd
+<pre class="bg-dark rounded text-light p-3 wrap"><samp># passwd
 Changing password for root.
 Current password: 
 New password: 
@@ -23,7 +22,7 @@ Retype new password:
 
 		<h3>Extend root filesystem</h3>
 		<p>If your SD card is larger than 4 GB, you can extend the root filesystem after writing it to the SD card.</p>
-<pre class="bg-dark text-light p-3"><samp># parted -s -a opt /dev/sdXXX "resizepart 2 100%"
+<pre class="bg-dark rounded text-light p-3 wrap"><samp># parted -a opt /dev/sdXXX "resizepart 2 100%"
 ...
 # partprobe
 ...
@@ -34,14 +33,14 @@ Retype new password:
 
 		<h3>Set time zone</h3>
 		<p>Set correct time zone to get correct system time.</p>
-<pre class="bg-dark text-light p-3"><samp># timedatectl set-timezone Europe/Stockholm
+<pre class="bg-dark rounded text-light p-3 wrap"><samp># timedatectl set-timezone Europe/Stockholm
 ...
 #
 </samp></pre>
 
 		<h3>perl: warning: Setting locale failed</h3>
 		<p>If you you get the following (or similar) warnings, fix it by installing and configuring <code>locale</code>.</p>
-<pre class="bg-danger text-light p-3"><samp>perl: warning: Setting locale failed.
+<pre class="bg-danger rounded text-light p-3 wrap"><samp>perl: warning: Setting locale failed.
 perl: warning: Please check that your locale settings:
 	LANGUAGE = (unset),
 	LC_ALL = (unset),
@@ -59,7 +58,7 @@ perl: warning: Please check that your locale settings:
 perl: warning: Falling back to the standard locale ("C").
 </samp></pre>
 
-<pre class="bg-dark text-light p-3"><samp># apt-get install locales
+<pre class="bg-dark rounded text-light p-3 wrap"><samp># apt-get install locales
 ...
 # dpkg-reconfigure locales
 ...
@@ -68,7 +67,7 @@ perl: warning: Falling back to the standard locale ("C").
 
 		<h3>debconf: unable to initialize frontend: Dialog</h3>
 		<p>If you you get the following (or similar) warnings, fix it by installing <code>dialog</code>.</p>
-<pre class="bg-danger text-light p-3"><samp>debconf: unable to initialize frontend: Dialog
+<pre class="bg-danger rounded text-light p-3 wrap"><samp>debconf: unable to initialize frontend: Dialog
 debconf: (No usable dialog-like program is installed, so the dialog based frontend cannot be used. at /usr/share/perl5/Debconf/FrontEnd/Dialog.pm line 76.)
 debconf: falling back to frontend: Readline
 debconf: unable to initialize frontend: Readline
@@ -76,11 +75,11 @@ debconf: (Can't locate Term/ReadLine.pm in @INC (you may need to install the Ter
 debconf: falling back to frontend: Teletype
 </samp></pre>
 
-<pre class="bg-dark text-light p-3"><samp># apt-get install dialog
+<pre class="bg-dark rounded text-light p-3 wrap"><samp># apt-get install dialog
 ...
 #
 </samp></pre>
 
-		<hr />
+		<hr>
 	</div>
 </main>