From c84ce797e483acfb4327a18bfc3680d54806e4dd Mon Sep 17 00:00:00 2001
From: Philip Kaludercic <philipk@posteo.net>
Date: Thu, 15 Feb 2024 11:42:06 +0100
Subject: [PATCH 1/2] Use more HTML5 tags instead of custom CSS classes

---
 html/layout.css | 92 ++++++++++++-------------------------------------
 1 file changed, 22 insertions(+), 70 deletions(-)

diff --git a/html/layout.css b/html/layout.css
index 4f5c50d393..434220f8c1 100644
--- a/html/layout.css
+++ b/html/layout.css
@@ -1,4 +1,4 @@
-/* Copyright (C) 2010-2022 Free Software Foundation, Inc.
+/* Copyright (C) 2010-2022, 2024 Free Software Foundation, Inc.
 
 This file is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
@@ -10,71 +10,23 @@ but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details. */
 
-/* Begin of reset */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
 body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* End of reset */
-
-body {
-  font-family: "Fira Sans", sans-serif;
+  font-family: system-ui, sans-serif;
   line-height: 1.5em;
   font-size: 1.2em;
   color: #333;
 }
 
 html, body {
-  height: 100%;
+  height: 100vw;
 }
-.wrapper {
+#wrapper {
   min-height: 100%;
   height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
   height: 100%;
   margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
 }
-.footer, .push {
+footer, .push {
   height: 90px; /* .push must be the same height as .footer */
 }
 
@@ -196,13 +148,13 @@ dd {
   font-size: 1.2em;
 }
 
-.container {
+header, main, footer {
   padding: 20px;
   width: 960px;
   margin: 0 auto;
 }
 
-.header {
+header {
   color: white;
   text-align: center;
   background-color: #bb3955;
@@ -210,27 +162,27 @@ dd {
   border-bottom: 6px solid #691240;
 }
 
-.header p {
+header p {
   margin: 0;
 }
 
-.header a {
+header a {
   color: rgb(240, 255, 135);
   text-decoration: none;
 }
 
-.header a:hover {
+header a:hover {
   color: rgb(240, 255, 135);
   text-decoration: underline;
   background: transparent;
 }
 
-.header.small {
+header.small {
   text-align: left;
   border-width: 3px;
 }
 
-.header.small h1 {
+header.small h1 {
   display: inline;
   font-size: 1.5em;
   margin: 0;
@@ -239,7 +191,7 @@ dd {
   padding-left: 120px;
 }
 
-.header.small .container {
+header.small .container {
   padding: 20px;
 }
 
@@ -260,9 +212,13 @@ input[type="search"][placeholder] {
   color: #666;
 }
 
-.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
-.fitler-table .quick:hover { text-decoration: underline; }
-td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
+tr.invisible {
+    display: none;
+}
+td.alt {
+    background-color: #ffc;
+    background-color: rgba(255, 255, 0, 0.2);
+}
 
 td, th {
   padding: 6px;
@@ -279,7 +235,7 @@ td {
   border-bottom: 1px solid #ddd;
 }
 
-.footer {
+footer {
   border-top: 1px solid #999;
   text-align:center;
   font-size: 0.9em;
@@ -287,11 +243,7 @@ td {
   color: #666;
 }
 
-.footer .container {
-  padding: 15px 0;
-}
-
-.footer p {
+footer p {
   margin: 0;
   font-size: .8em;
   padding: 0;
-- 
2.43.0