Make website fully responsive

This commit upgrades to Hugo 0.134.1 and enables Bootstrap 5's responsive
tables. This effectively makes the entire site responsive.

Hugo added support for table render hooks in version 0.134.1 ([release
notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0),
[docs](https://gohugo.io/render-hooks/tables/)), which are needed to support
Bootstrap 5's responsive tables
([source](gohugoio/hugo#9316 (comment))).

.github/workflows/gh-pages.yml

@@ -30,7 +30,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.124.1
+      HUGO_VERSION: v0.134.1
     steps:
       - name: Install Hugo CLI
         run: |

themes/bootstrap/layouts/_default/_markup/render-table.html

@@ -0,0 +1,37 @@
+{{/*
+Extends the defaul Hugo table rendering
+(https://gohugo.io/render-hooks/tables/#example) to support Bootstrap 5's
+responsive tables by adding a wrapper div with a "table-responsive" class and
+by adding the class "table" to the table element.
+*/}}
+<div class="table-responsive">
+  <table class="table">
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}
+    <thead>
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th {{ printf "style=%q" (printf "text-align: %s" .Alignment) | safeHTMLAttr }}>
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td {{ printf "style=%q" (printf "text-align: %s" .Alignment) | safeHTMLAttr }}>
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>

themes/bootstrap/layouts/_default/tools.html

@@ -119,18 +119,20 @@
         <p class="lead" id="search-result-message">
           Loading...
         </p>
-        <table class="table table-striped" aria-label="tools table">
-          <thead>
-          <tr>
-            <th scope="col">Tool</th>
-            <th scope="col">Description</th>
-            <th scope="col">License</th>
-          </tr>
-          </thead>
-          <tbody id="tools-table">
+        <div class="table-responsive">
+          <table class="table table-striped" aria-label="tools table">
+            <thead>
+            <tr>
+              <th scope="col">Tool</th>
+              <th scope="col">Description</th>
+              <th scope="col">License</th>
+            </tr>
+            </thead>
+            <tbody id="tools-table">
 
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>

themes/bootstrap/static/css/theme.css

@@ -84,18 +84,9 @@ dl dd {
 }
 
 td, th {
-  padding: 8px;
-  line-height: 1.428571429;
-  vertical-align: top;
   border-top: 1px solid #ddd;
 }
 
-table {
-  width: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
 footer {
   width: 100%;
   padding: 20px 0;
@@ -213,43 +204,3 @@ footer {
 .goat svg {
   font-size: 14px;
 }
-
-/** 
- * Bootsrap 5 has table styles as opt-in by adding the class .table to <table>.
- * However Hugo converts Markdown tables to HTML directly, and there are
- * currently no Hugo render hooks for tables. As a workaround, we copy the
- * styles for .table in bootstrap.css to the table tag here.
- */
-table {
-  --bs-table-color-type: initial;
-  --bs-table-bg-type: initial;
-  --bs-table-color-state: initial;
-  --bs-table-bg-state: initial;
-  --bs-table-color: var(--bs-emphasis-color);
-  --bs-table-bg: var(--bs-body-bg);
-  --bs-table-border-color: var(--bs-border-color);
-  --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: var(--bs-emphasis-color);
-  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
-  --bs-table-active-color: var(--bs-emphasis-color);
-  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
-  --bs-table-hover-color: var(--bs-emphasis-color);
-  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
-  width: 100%;
-  margin-bottom: 1rem;
-  vertical-align: top;
-  border-color: var(--bs-table-border-color);
-}
-table > :not(caption) > * > * {
-  padding: 0.5rem 0.5rem;
-  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
-  background-color: var(--bs-table-bg);
-  border-bottom-width: var(--bs-border-width);
-  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
-}
-table > tbody {
-  vertical-align: inherit;
-}
-table > thead {
-  vertical-align: bottom;
-}