From: Omar Polo <op@omarpolo.com>
Subject: gotwebd: style improvements
To: gameoftrees@openbsd.org
Date: Sun, 10 Sep 2023 10:49:20 +0200

This is a first round of html polishing, css semplifications and
responsiveness for gotwebd.

I couldn't find a decent way to split this into smaller steps but the
diff seems quite readable so hope it's not a problem.

I'm doing a few things here:

 - nuke float usage in the CSS

 - use less divs and start to use html5 semantic markup; this
   includes:

   + switching the headings to proper titles (header + h2)

   + using a dl for the key-value part of the interface.

   + use an <hr /> instead of <div class="dotted_line">

   + using <pre> for the code.

   + using <code> for the commits ids.

 - attempt to make it usable on mobile phones; it's just a first
   start.

 - attempt to make it usable on text browsers like w3m and links.  I
   do use w3m from time to time and care for sites to work on it.
   IMHO with this change gotwebd is nicely browseable on text
   browsers.

   (On netsurf we have one regression in the key-value sections but
   it's still more than usable there.)

 - simplify the font definitions.  Just set one global width and only
   tweak when necessary.  I've dropped "Arial" from the font list and
   just kept `sans-serif' which will use the default font of the
   browser.

This shouldn't bring any noticeable differences in the UI on a
computer screen, except maybe for some slightly more spacing in the
tree view and in the key-value sections.

My goal is not to change the appearance but rather to make it work
better.  If there are noticeable differences, it's an unwanted
consequence that I haven't spotted.

One thing I'm not sure yet is the listing page.  I've used a "trick"
with a display:inline-block to render the various fields and drop the
float usage but I'm still not convinced by that.  I'll either change
it to a proper table or finally attempt to study the css grids.

I have this applied on my instance for comparison at
<{git,got}.omarpolo.com>.

This will likely break any existing custom CSS styling.  I'm not at
the point still where I care about breaking existing styling, there
are still many things I'd like to do before taking into consideration
backward compatibility of any sort.


diffstat refs/heads/main refs/heads/www
 M  gotwebd/files/htdocs/gotwebd/gotweb.css  |  115+  405-
 M  gotwebd/pages.tmpl                       |  183+  187-

2 files changed, 298 insertions(+), 592 deletions(-)

diff refs/heads/main refs/heads/www
commit - d71015b33dbfbef534be92e584006caddbf16aa6
commit + 63f64b43691020429ce49a45ca1d3668ab0f521b
blob - 5259d968ffb89ab3d1148ac90dc8dfffcada9857
blob + 6e681af4a0d62277a1a844d1ee29850a8ccdc256
--- gotwebd/files/htdocs/gotwebd/gotweb.css
+++ gotwebd/files/htdocs/gotwebd/gotweb.css
@@ -15,7 +15,9 @@
  * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
  */
 
-/* general sections */
+*, *::after, *::before {
+	box-sizing: border-box;
+}
 
 a {
 	color: #444444;
@@ -30,9 +32,15 @@ body {
 	color: #000000;
 	margin: 0;
 	padding: 0;
-	font-family: Arial, sans-serif;
+	font-family: sans-serif;
+	font-size: 16px;
 }
 
+pre {
+	font-family: monospace;
+	margin: 0;
+}
+
 .diff_minus, .diff_submodule {
 	color: magenta;
 }
@@ -50,45 +58,34 @@ body {
 	color: blue;
 }
 
-#logo {
-	height: 50px;
-}
 .refs_str {
 	background-color: #243647;
 	color: #ffffff;
 	font-style: italic;
+	white-space: pre;
 }
-.dotted_line {
-	clear: left;
-	float: left;
-	width: 100%;
+hr {
+	margin: 0;
+	height: 0;
 	border-top: 1px dotted #444444;
 }
 #header {
-	overflow: auto;
-	width: 100%;
 	background-image: linear-gradient(to right, White, LightSlateGray);
 }
 #header a {
 	color: #ffffff;
-	font-size: 1.2em;
 	text-decoration: none;
 }
 #header a:hover {
 	color: Gold;
-	font-size: 1.2em;
 	text-decoration: none;
 }
 #site_path {
-	clear: left;
-	float: left;
 	overflow: auto;
 	width: 100%;
 	background-color: #243647;
 }
 #site_link {
-	float: left;
-	width: 40%;
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
@@ -100,18 +97,10 @@ body {
 	text-decoration: none;
 }
 #got_link {
-	float: left;
 	padding-bottom: 10px;
 	padding-top: 10px;
 }
-#content {
-	width: 100%;
-	float: left;
-	clear: both;
-}
 #np_wrapper {
-	clear: left;
-	float: left;
 	width: 100%;
 	border-bottom: 1px dotted #444444;
 	background-color: #f5fcfb;
@@ -122,7 +111,6 @@ body {
 	text-align: center;
 }
 #nav_prev {
-	float: left;
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
@@ -136,8 +124,6 @@ body {
 	overflow: hidden;
 }
 .navs_wrapper {
-	clear: left;
-	float: left;
 	width: 100%;
 	background-color: #ced7e0;
 }
@@ -145,11 +131,13 @@ body {
 	padding-left: 10px;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	font-size: .8em;
 }
+@media (min-width: 680px) {
+	.navs {
+		font-size: .8em;
+	}
+}
 #site_owner_wrapper {
-	clear: left;
-	float: left;
 	width: 100%;
 	background-color: LightSlateGray;
 	color: #ffffff;
@@ -158,215 +146,86 @@ body {
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
+	margin: 0;
 }
-#description_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#description {
-	float: left;
-	width: 72%;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#repo_owner_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#repo_owner {
-	float: left;
-	width: 72%;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#last_change_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#last_change {
-	float: left;
-	width: 72%;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#cloneurl_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#cloneurl {
-	float: left;
-	width: 72%;
-	padding-top: 5px;
-	padding-bottom: 5px;
-	overflow: auto;
-	white-space: pre-wrap;
-}
 
-.header_commit_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.header_commit {
-	float: left;
-	width: 72%;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.header_author_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.header_author {
-	float: left;
-	width: 72%;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.header_age_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.header_age {
-	float: left;
-	width: 72%;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-#header_commit_msg_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-#header_commit_msg {
-	float: left;
-	width: 72%;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	white-space: pre-wrap;
-}
-#header_tree_title {
-	clear: left;
-	float: left;
-	width: 6.5em;
-	padding-left: 10px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-#header_tree {
-	float: left;
-	width: 72%;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-
 #err_content {
-	clear: left;
-	float: left;
 	padding-left: 20px;
 	padding-top: 20px;
 	padding-bottom: 20px;
 }
 
-#briefs_title_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
+header.subtitle {
 	background-color: LightSlateGray;
+}
+header.subtitle h2 {
+	margin: 0;
+	padding: 5px 10px;
+	font-size: 1rem;
+	font-weight: normal;
 	color: #ffffff;
 }
-#briefs_title {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
+
+.brief {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
 }
-#briefs_content {
-	clear: left;
-	float: left;
-	width: 100%;
+.brief p {
+	margin: 0;
 }
+.brief_meta {
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+.briefs_age, .briefs_author { display: inline-block; }
 .briefs_age {
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
-	float: left;
-	width: 7.5em;
-	overflow: auto;
+	width: 140px;
 }
 .briefs_author {
-	float: left;
 	padding-top: 5px;
 	padding-bottom: 5px;
 	width: 8.5em;
 	font-style: italic;
-	overflow: auto;
 }
 .briefs_log {
-	float: left;
 	padding-left: 10px;
 	padding-right: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
-	width: 65%;
+	width: 100%;
 }
 
-#tags_title_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
-	background-color: LightSlateGray;
-	color: #ffffff;
+@media (min-width: 680px) {
+	.brief {
+		flex-wrap: nowrap;
+	}
+	.briefs_log {
+		width: auto;
+	}
 }
-#tags_title {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
+
+.tag_age, .tag_name, .tag_log {
+	display: inline-block;
+	vertical-align: middle;
 }
-#tags_content {
-	clear: left;
-	float: left;
-	width: 100%;
-}
 .tag_age {
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
-	float: left;
-	width: 7.5em;
-	overflow: auto;
+	width: 140px;
 }
+.tag_name {
+	width: 8.5em;
+	font-style: italic;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
 .tag_log {
-	float: left;
 	padding-left: 10px;
 	padding-right: 10px;
 	padding-top: 5px;
@@ -375,88 +234,42 @@ body {
 }
 
 #tag_header_wrapper {
-	clear: left;
-	float: left;
 	background-color: #f5fcfb;
-	width: 100%;
 }
 #tag_header {
-	float: left;
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 2px;
 	width: 80%;
 }
-.tag {
-	float: left;
-	width: 8.5em;
-	font-style: italic;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
 #tag_commit {
-	clear: left;
-	float: left;
+	padding-top: 20px;
 	padding-left: 20px;
 	padding-bottom: 20px;
-	white-space: pre-wrap;
+	overflow: auto;
 }
 
 #index_header {
-	clear: left;
-	float: left;
-	overflow: auto;
-	width: 100%;
 	background-color: Khaki;
 }
-#index_header_project {
-	clear: left;
-	float: left;
-	width: 20%;
+.index_project, .index_project_description, .index_project_owner,
+.index_project_age {
+	display: inline-block;
 	padding: 10px;
-}
-#index_header_description {
-	float: left;
-	width: 30%;
-	padding: 10px;
-}
-#index_header_owner {
-	float: left;
-	width: 12%;
-	padding: 10px;
-}
-#index_header_age {
-	padding: 10px;
 	overflow: hidden;
+	vertical-align: middle;
 }
-.index_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
-}
 .index_project {
-	float: left;
 	width: 20%;
-	padding: 10px;
-	overflow: hidden;
 }
 .index_project_description {
-	float: left;
 	width: 30%;
-	padding: 10px;
-	overflow: auto;
 }
 .index_project_owner {
-	float: left;
-	width: 12%;
-	padding: 10px;
-	overflow: hidden;
+	width: 25%;
 }
 .index_project_age {
-	float: left;
-	width: 14%;
-	padding: 10px;
-	overflow: visible;
+	width: 25%;
 }
 .index_project a {
 	color: #444444;
@@ -483,261 +296,158 @@ body {
 	text-decoration: none;
 }
 
-.commits_title_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
-	background-color: LightSlateGray;
-	color: #ffffff;
-}
-.commits_title {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
 .commits_content {
-	clear: left;
-	float: left;
 	width: 100%;
 }
 .commits_header_wrapper {
-	float: left;
 	background-color: #f5fcfb;
-	width: 100%;
 }
 .commits_header {
-	float: left;
 	padding-top: 5px;
 	padding-bottom: 2px;
 	width: 80%;
 }
 .commit {
-	clear: left;
-	float: left;
 	padding-left: 20px;
 	padding-bottom: 20px;
 	white-space: pre-wrap;
 }
 
-#blame_title_wrapper, #blob_title_wrapper {
-	background-color: LightSlateGray;
-	color: #ffffff;
-}
-#blame_title, #blob_title_wrapper {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#blame_content, #blob_content {
-	clear: left;
-	float: left;
-	width: 100%;
-}
 #blame_header_wrapper, #blob_header_wrapper {
-	float: left;
 	background-color: #f5fcfb;
-	width: 100%;
 }
 #blame_header, #blob_header {
-	float: left;
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 2px;
-	width: 80%;
 }
 #blame, #blob {
-	clear: left;
-	float: left;
+	margin-top: 20px;
 	margin-left: 20px;
 	margin-bottom: 20px;
-	font-family: monospace;
-	white-space: pre;
 	overflow: auto;
 }
-.blame_wrapper, .blob_line {
-	clear: left;
-	float: left;
-	width: 100%;
+.blob_line > a {
+	display: inline-block;
+	text-align: right;
+	width: 60px;
+	padding-right: 20px;
 }
+.blame_number, .blame_hash, .blame_date, .blame_author, .blame_code {
+	display: inline-block;
+	vertical-align: middle;
+}
 .blame_wrapper:target, .blob_line:target {
 	background-color: Khaki;
 }
 .blame_number, .blob_number {
-	float: left;
 	width: 6em;
 	overflow: hidden;
 }
 .blame_hash {
-	float: left;
 	width: 6em;
 	overflow: auto;
 }
 .blame_date {
-	float: left;
 	width: 7em;
 	overflow: auto;
 }
 .blame_author {
-	float: left;
 	width: 6em;
 	overflow: hidden;
 }
-.blame_code, .blob_code {
-	float:left;
-	width: 50%;
-	overflow: visible;
-}
 
-#tree_title_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
-	background-color: LightSlateGray;
-	color: #ffffff;
-}
-#tree_title {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#tree_content {
-	clear: left;
-	float: left;
-	width: 100%;
-}
-#tree_header_wrapper {
-	clear: left;
-	float: left;
-	background-color: #f5fcfb;
-	width: 100%;
-}
 #tree_header {
-	float: left;
+	background-color: #f5fcfb;
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 2px;
-	width: 80%;
 }
 #tree {
-	clear: left;
-	float: left;
 	margin-left: 20px;
 	margin-top: 20px;
 	margin-bottom: 20px;
-	font-family: monospace;
+	border-collapse: collapse;
 }
 .tree_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
 	background-color: #d8f3ef;
 }
 .tree_wrapper:nth-child(even) {
 	background-color: #ffffff;
 }
 .tree_line {
-	clear: left;
-	float: left;
 	width: 20em;
-	padding: 1px;
+	padding: 5px;
 }
 .tree_line_blank {
-	float: left;
 	padding: 1px;
 	width: 9.5em;
 }
 
-#diff_title_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
-	background-color: LightSlateGray;
-	color: #ffffff;
-}
-#diff_title {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-#diff_content {
-	clear: left;
-	float: left;
-	width: 100%;
-}
 #diff_header_wrapper {
-	float: left;
 	background-color: #f5fcfb;
-	width: 100%;
 }
 #diff_header {
-	float: left;
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 2px;
-	width: 80%;
 }
 #diff {
-	clear: left;
-	float: left;
+	margin-top: 20px;
 	margin-left: 20px;
 	margin-bottom: 20px;
-	font-family: monospace;
-	white-space: pre;
+	overflow: auto;
 }
-.diff_line {
-	clear: left;
-	float: left;
-}
 
 #summary_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
 	background-color: Khaki;
 }
 
-#branches_title_wrapper {
-	clear: left;
-	float: left;
-	width: 100%;
-	background-color: LightSlateGray;
-	color: #ffffff;
+dl {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
 }
-#branches_title {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
+dt {
+	padding: 3px 7px;
+	width: 120px;
 }
-#branches_content {
-	clear: left;
-	float: left;
-	width: 100%;
+dd {
+	padding: 3px 7px;
+	margin-left: auto;
+	width: calc(100% - 130px);
+	flex-grow: 2;
 }
 
-.branches_wrapper {
-	clear: left;
-	float: left;
+.clone-url {
+	white-space: pre-wrap;
+}
+
+.commit-msg {
+	white-space: pre-wrap;
+}
+
+.commit-id {
 	width: 100%;
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
+
+.branches_age, .branches_space, .branch {
+	display: inline-block;
+	vertical-align: middle;
+}
 .branches_age {
 	padding-left: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
-	float: left;
-	width: 7.5em;
-	overflow: auto;
+	width: calc(140px + 8.5em);
 }
-.branches_space {
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-	float: left;
-	width: 8.5em;
-	overflow: auto;
-}
 .branch {
-	float: left;
 	padding-right: 10px;
 	padding-top: 5px;
 	padding-bottom: 5px;
+	padding-left: 10px;
 }
blob - fd2adb9dee5877d0502e944fac8a60b381b85437
blob + a3c3ef3680d3b543b512960b55dc48889c4b078e
--- gotwebd/pages.tmpl
+++ gotwebd/pages.tmpl
@@ -74,7 +74,7 @@ static inline int rss_author(struct template *, char *
   <head>
     <meta charset="utf-8" />
     <title>{{ srv->site_name }}</title>
-    <meta name="viewport" content="initial-scale=.75" />
+    <meta name="viewport" content="initial-scale=1.0" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff"/>
     <link rel="apple-touch-icon" sizes="180x180" href="{{ prfx }}apple-touch-icon.png" />
@@ -85,42 +85,40 @@ static inline int rss_author(struct template *, char *
     <link rel="stylesheet" type="text/css" href="{{ prfx }}{{ css }}" />
   </head>
   <body>
-    <div id="gw_body">
-      <div id="header">
-        <div id="got_link">
-          <a href="{{ srv->logo_url }}" target="_blank">
-            <img src="{{ prfx }}{{ srv->logo }}" />
-          </a>
-        </div>
+    <header id="header">
+      <div id="got_link">
+        <a href="{{ srv->logo_url }}" target="_blank">
+          <img src="{{ prfx }}{{ srv->logo }}" />
+        </a>
       </div>
-      <div id="site_path">
-        <div id="site_link">
-          <a href="?index_page={{ printf "%d", qs->index_page }}">
-            {{ srv->site_link }}
+    </header>
+    <nav id="site_path">
+      <div id="site_link">
+        <a href="?index_page={{ printf "%d", qs->index_page }}">
+          {{ srv->site_link }}
+        </a>
+        {{ if qs->path }}
+          {! u_path.path = qs->path; !}
+          {{ " / " }}
+          <a href="{{ render gotweb_render_url(tp->tp_arg, &u_path)}}">
+            {{ qs->path }}
           </a>
-          {{ if qs->path }}
-            {! u_path.path = qs->path; !}
-            {{ " / " }}
-            <a href="{{ render gotweb_render_url(tp->tp_arg, &u_path)}}">
-              {{ qs->path }}
-            </a>
-          {{ end }}
-          {{ if qs->action != INDEX }}
-            {{ " / " }}{{ gotweb_action_name(qs->action) }}
-          {{ end }}
-        </div>
+        {{ end }}
+        {{ if qs->action != INDEX }}
+          {{ " / " }}{{ gotweb_action_name(qs->action) }}
+        {{ end }}
       </div>
-      <div id="content">
-        {{ render body(tp) }}
-        <div id="site_owner_wrapper">
-          <div id="site_owner">
-            {{ if srv->show_site_owner }}
-              {{ srv->site_owner }}
-            {{ end }}
-          </div>
-        </div>
-      </div>
-    </div>
+    </nav>
+    <main>
+      {{ render body(tp) }}
+    </main>
+    <footer id="site_owner_wrapper">
+      <p id="site_owner">
+        {{ if srv->show_site_owner }}
+          {{ srv->site_owner }}
+        {{ end }}
+      </p>
+    </footer>
   </body>
 </html>
 {{ end }}
@@ -145,21 +143,21 @@ static inline int rss_author(struct template *, char *
 	struct server *srv = c->srv;
 !}
 <div id="index_header">
-  <div id="index_header_project">
+  <div class="index_project">
     Project
   </div>
   {{ if srv->show_repo_description }}
-    <div id="index_header_description">
+    <div class="index_project_description">
       Description
     </div>
   {{ end }}
   {{ if srv->show_repo_owner }}
-    <div id="index_header_owner">
+    <div class="index_project_owner">
       Owner
     </div>
   {{ end }}
   {{ if srv->show_repo_age }}
-    <div id="index_header_age">
+    <div class="index_project_age">
       Last Change
     </div>
   {{ end }}
@@ -235,7 +233,7 @@ static inline int rss_author(struct template *, char *
       {{ " | " }}
       <a href="{{ render gotweb_render_url(tp->tp_arg, &rss) }}">rss</a>
     </div>
-    <div class="dotted_line"></div>
+    <hr />
   </div>
 </div>
 {{ end }}
@@ -265,9 +263,9 @@ static inline int rss_author(struct template *, char *
 		.headref = qs->headref,
 	};
 !}
-<div id="briefs_title_wrapper">
-  <div id="briefs_title">Commit Briefs</div>
-</div>
+<header class='subtitle'>
+  <h2>Commit Briefs</h2>
+</header>
 <div id="briefs_content">
   {{ tailq-foreach rc &t->repo_commits entry }}
     {!
@@ -282,21 +280,26 @@ static inline int rss_author(struct template *, char *
 	if (tmp)
 		*tmp = '\0';
     !}
-    <div class="briefs_age">
-      {{ render gotweb_render_age(tp, rc->committer_time, TM_DIFF) }}
+    <div class='brief'>
+      <p class='brief_meta'>
+        <span class='briefs_age'>
+          {{ render gotweb_render_age(tp, rc->committer_time, TM_DIFF) }}
+        </span>
+        {{" "}}
+        <span class="briefs_author">
+          {{ rc->committer }}
+        </span>
+      </p>
+      <p class="briefs_log">
+        <a href="{{ render gotweb_render_url(tp->tp_arg, &diff_url) }}">
+          {{ rc->commit_msg }}
+        </a>
+        {{ if rc->refs_str }}
+          {{ " " }} <span class="refs_str">({{ rc->refs_str }})</span>
+        {{ end }}
+        </a>
+      </p>
     </div>
-    <div class="briefs_author">
-      {{ rc->committer }}
-    </div>
-    <div class="briefs_log">
-      <a href="{{ render gotweb_render_url(tp->tp_arg, &diff_url) }}">
-        {{ rc->commit_msg }}
-      </a>
-      {{ if rc->refs_str }}
-        {{ " " }} <span class="refs_str">({{ rc->refs_str }})</span>
-      {{ end }}
-      </a>
-    </div>
     <div class="navs_wrapper">
       <div class="navs">
         <a href="{{ render gotweb_render_url(tp->tp_arg, &diff_url) }}">diff</a>
@@ -304,7 +307,7 @@ static inline int rss_author(struct template *, char *
 	<a href="{{ render gotweb_render_url(tp->tp_arg, &tree_url) }}">tree</a>
       </div>
     </div>
-    <div class="dotted_line"></div>
+    <hr />
   {{ end }}
   {{ render gotweb_render_more(tp, BRIEFS) }}
 </div>
@@ -389,9 +392,9 @@ static inline int rss_author(struct template *, char *
 		.path = repo_dir->name,
 	};
 !}
-<div class="commits_title_wrapper">
-  <div class="commits_title">Commits</div>
-</div>
+<header class="subtitle">
+  <h2>Commits</h2>
+</header>
 <div class="commits_content">
   {{ tailq-foreach rc &t->repo_commits entry }}
     {!
@@ -399,22 +402,22 @@ static inline int rss_author(struct template *, char *
 	tree.commit = rc->commit_id;
     !}
     <div class="commits_header_wrapper">
-      <div class="commits_header">
-        <div class="header_commit_title">Commit:</div>
-        <div class="header_commit">{{ rc->commit_id }}</div>
-        <div class="header_author_title">From:</div>
-        <div class="header_author">{{ rc->author }}</div>
+      <dl class="commits_header">
+        <dt>Commit:</dt>
+        <dd><code class="commit-id">{{ rc->commit_id }}</code></dd>
+        <dt>From:</dt>
+        <dd>{{ rc->author }}</dd>
 	{{ if strcmp(rc->committer, rc->author) != 0 }}
-          <div class="header_author_title">Via:</div>
-          <div class="header_author">{{ rc->committer }}</div>
+          <dt>Via:</dt>
+          <dd>{{ rc->committer }}</dd>
 	{{ end }}
-        <div class="header_age_title">Date:</div>
-        <div class="header_age">
+        <dt>Date:</dt>
+        <dd>
           {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }}
-        </div>
-      </div>
+        </dd>
+      </dl>
     </div>
-    <div class="dotted_line"></div>
+    <hr />
     <div class="commit">
       {{ "\n" }}
       {{ rc->commit_msg }}
@@ -426,7 +429,7 @@ static inline int rss_author(struct template *, char *
         <a href="{{ render gotweb_render_url(c, &tree) }}">tree</a>
       </div>
     </div>
-    <div class="dotted_line"></div>
+    <hr />
   {{ end }}
   {{ render gotweb_render_more(tp, COMMITS) }}
 </div>
@@ -444,16 +447,16 @@ static inline int rss_author(struct template *, char *
 </div>
 <div id="blob_content">
   <div id="blob_header_wrapper">
-    <div id="blob_header">
-      <div class="header_age_title">Date:</div>
-      <div class="header_age">
+    <dl id="blob_header">
+      <dt>Date:</dt>
+      <dd>
         {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }}
-      </div>
-      <div id="header_commit_msg_title">Message:</div>
-      <div id="header_commit_msg">{{ rc->commit_msg }}</div>
-    </div>
+      </dd>
+      <dt>Message:</dt>
+      <dd class="commit-msg">{{ rc->commit_msg }}</dd>
+    </dl>
   </div>
-  <div class="dotted_line"></div>
+  <hr />
   <div id="blob">
     <pre>
       {{ render got_output_blob_by_lines(tp, blob, gotweb_render_blob_line) }}
@@ -473,10 +476,8 @@ static inline int rss_author(struct template *, char *
 		return -1;
 !}
 <div class="blob_line" id="line{{ lineno }}">
-  <div class="blob_number">
-    <a href="#line{{ lineno }}">{{ lineno }}</a>
-  </div>
-  <div class="blob_code">{{ line }}</div>
+  <a href="#line{{ lineno }}">{{ lineno }}</a>
+  <span class="blob_code">{{ line }}</span>
 </div>
 {{ end }}
 
@@ -486,26 +487,26 @@ static inline int rss_author(struct template *, char *
 	struct transport	*t = c->t;
 	struct repo_commit	*rc = TAILQ_FIRST(&t->repo_commits);
 !}
-<div id="tree_title_wrapper">
-  <div id="tree_title">Tree</div>
-</div>
+<header class='subtitle'>
+  <h2>Tree</h2>
+</header>
 <div id="tree_content">
   <div id="tree_header_wrapper">
-    <div id="tree_header">
-      <div id="header_tree_title">Tree:</div>
-      <div id="header_tree">{{ rc->tree_id }}</div>
-      <div class="header_age_title">Date:</div>
-      <div class="header_age">
+    <dl id="tree_header">
+      <dt>Tree:</dt>
+      <dd><code class="commit-id">{{ rc->tree_id }}</code></dd>
+      <dt>Date:</dt>
+      <dd>
         {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }}
-      </div>
-      <div id="header_commit_msg_title">Message:</div>
-      <div id="header_commit_msg">{{ rc->commit_msg }}</div>
-    </div>
+      </dd>
+      <dt>Message:</dt>
+      <dd class="commit-msg">{{ rc->commit_msg }}</d>
+    </dl>
   </div>
-  <div class="dotted_line"></div>
-  <div id="tree">
+  <hr />
+  <table id="tree">
     {{ render got_output_repo_tree(c, gotweb_render_tree_item) }}
-  </div>
+  </table>
 </div>
 {{ end }}
 
@@ -553,21 +554,20 @@ static inline int rss_author(struct template *, char *
 	else if (mode & S_IXUSR)
 		modestr = "*";
 !}
-<div class="tree_wrapper">
+<tr class="tree_wrapper">
   {{ if S_ISDIR(mode) }}
-    <div class="tree_line">
+    <td class="tree_line" colspan=2>
       <a href="{{ render gotweb_render_url(c, &url) }}">
         {{ name }}{{ modestr }}
       </a>
-    </div>
-    <div class="tree_line_blank">&nbsp;</div>
+    </td>
   {{ else }}
-    <div class="tree_line">
+    <td class="tree_line">
       <a href="{{ render gotweb_render_url(c, &url) }}">
         {{ name }}{{ modestr }}
       </a>
-    </div>
-    <div class="tree_line_blank">
+    </td>
+    <td class="tree_line_blank">
       {! url.action = COMMITS; !}
       <a href="{{ render gotweb_render_url(c, &url) }}">
         commits
@@ -577,9 +577,9 @@ static inline int rss_author(struct template *, char *
       <a href="{{ render gotweb_render_url(c, &url) }}">
         blame
       </a>
-    </div>
+    </td>
   {{ end }}
-</div>
+</tr>
 {{ finally }}
 {!
 	free(dir);
@@ -596,9 +596,9 @@ static inline int rss_author(struct template *, char *
 
 	commit_found = qs->commit == NULL;
 !}
-<div id="tags_title_wrapper">
-  <div id="tags_title">Tags</div>
-</div>
+<header class='subtitle'>
+  <h2>Tags</h2>
+</header>
 <div id="tags_content">
   {{ if t->tag_count == 0 }}
     <div id="err_content">
@@ -647,7 +647,7 @@ static inline int rss_author(struct template *, char *
 <div class="tag_age">
   {{ render gotweb_render_age(tp, rt->tagger_time, TM_DIFF) }}
 </div>
-<div class="tag">{{ tag_name }}</div>
+<div class="tag_name">{{ tag_name }}</div>
 <div class="tag_log">
   <a href="{{ render gotweb_render_url(c, &url) }}">
     {{ msg }}
@@ -664,7 +664,7 @@ static inline int rss_author(struct template *, char *
     <a href="{{ render gotweb_render_url(c, &url) }}">commits</a>
   </div>
 </div>
-<div class="dotted_line"></div>
+<hr />
 {{ end }}
 
 {{ define gotweb_render_tag(struct template *tp) }}
@@ -680,32 +680,31 @@ static inline int rss_author(struct template *, char *
 	if (strncmp(tag_name, "refs/", 5) == 0)
 		tag_name += 5;
 !}
-<div id="tags_title_wrapper">
-  <div id="tags_title">Tag</div>
-</div>
+<header class="subtitle">
+  <h2>Tag</h2>
+</header>
 <div id="tags_content">
   <div id="tag_header_wrapper">
-    <div id="tag_header">
-      <div class="header_commit_title">Commit:</div>
-      <div class="header_commit">
-        {{ rt->commit_id }}
+    <dl id="tag_header">
+      <dt>Commit:</dt>
+      <dd>
+        <code class="commit-id">{{ rt->commit_id }}</code>
         {{ " " }}
         <span class="refs_str">({{ tag_name }})</span>
-      </div>
-      <div class="header_author_title">Tagger:</div>
-      <div class="header_author">{{ rt->tagger }}</div>
-      <div class="header_age_title">Date:</div>
-      <div class="header_age">
+      </dd>
+      <dt>Tagger:</dt>
+      <dd>{{ rt->tagger }}</dd>
+      <dt>Date:</dt>
+      <dd>
         {{ render gotweb_render_age(tp, rt->tagger_time, TM_LONG)}}
-      </div>
-      <div id="header_commit_msg_title">Message:</div>
-      <div id="header_commit_msg">{{ rt->commit_msg }}</div>
-    </div>
-    <div class="dotted_line"></div>
-    <div id="tag_commit">
-      {{ "\n" }}
+      </dd>
+      <dt>Message:</dt>
+      <dd class="commit-msg">{{ rt->commit_msg }}</dd>
+    </dl>
+    <hr />
+    <pre id="tag_commit">
       {{ rt->tag_commit }}
-    </div>
+    </pre>
   </div>
 </div>
 {{ end }}
@@ -720,35 +719,34 @@ static inline int rss_author(struct template *, char *
 	size_t			 linesize = 0;
 	ssize_t			 linelen;
 !}
-<div id="diff_title_wrapper">
-  <div id="diff_title">Commit Diff</div>
-</div>
+<header class="subtitle">
+  <h2>Commit Diff</h2>
+</header>
 <div id="diff_content">
   <div id="diff_header_wrapper">
-    <div id="diff_header">
-      <div class="header_commit_title">Commit:</div>
-      <div class="header_commit">{{ rc->commit_id }}</div>
-      <div class="header_author_title">From:</div>
-      <div class="header_author">{{ rc->author }}</div>
+    <dl id="diff_header">
+      <dt>Commit:</dt>
+      <dd><code class="commit-id">{{ rc->commit_id }}</code></dd>
+      <dt>From:</dt>
+      <dd>{{ rc->author }}</dd>
       {{ if strcmp(rc->committer, rc->author) != 0 }}
-        <div class="header_author_title">Via:</div>
-        <div class="header_author">{{ rc->committer }}</div>
+        <dt>Via:</dt>
+        <dd>{{ rc->committer }}</dd>
       {{ end }}
-      <div class="header_age_title">Date:</div>
-      <div class="header_age">
+      <dt>Date:</dt>
+      <dd>
         {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }}
-      </div>
-      <div id="header_commit_msg_title">Message:</div>
-      <div id="header_commit_msg">{{ rc->commit_msg }}</div>
-    </div>
+      </dd>
+      <dt>Message:</dt>
+      <dd class="commit-msg">{{ rc->commit_msg }}</dd>
+    </dl>
   </div>
-  <div class="dotted_line"></div>
-  <div id="diff">
-    {{ "\n" }}
+  <hr />
+  <pre id="diff">
     {{ while (linelen = getline(&line, &linesize, fp)) != -1 }}
       {{ render diff_line(tp, line) }}
     {{ end }}
-  </div>
+  </pre>
 </div>
 {{ finally }}
 {! free(line); !}
@@ -781,7 +779,7 @@ static inline int rss_author(struct template *, char *
 	if (nl)
 		*nl = '\0';
 !}
-<div class="diff_line {{ color }}">{{ line }}</div>
+<span class="diff_line {{ color }}">{{ line }}</span>{{"\n"}}
 {{ end }}
 
 {{ define gotweb_render_branches(struct template *tp,
@@ -789,9 +787,9 @@ static inline int rss_author(struct template *, char *
 {!
 	struct got_reflist_entry	*re;
 !}
-<div id="branches_title_wrapper">
-  <div id="branches_title">Branches</div>
-</div>
+<header class='subtitle'>
+  <h2>Branches</h2>
+</header>
 <div id="branches_content">
   {{ tailq-foreach re refs entry }}
     {{ if !got_ref_is_symbolic(re->ref) }}
@@ -828,11 +826,10 @@ static inline int rss_author(struct template *, char *
 
 	url.headref = refname;
 !}
-<div class="branches_wrapper">
+<section class="branches_wrapper">
   <div class="branches_age">
     {{ render gotweb_render_age(tp, age, TM_DIFF) }}
   </div>
-  <div class="branches_space">&nbsp;</div>
   <div class="branch">
     <a href="{{ render gotweb_render_url(c, &url) }}">{{ refname }}</a>
   </div>
@@ -847,8 +844,8 @@ static inline int rss_author(struct template *, char *
       <a href="{{ render gotweb_render_url(c, &url) }}">commits</a>
     </div>
   </div>
-  <div class="dotted_line"></div>
-</div>
+  <hr />
+</section>
 {{ end }}
 
 {{ define gotweb_render_summary(struct template *tp) }}
@@ -858,26 +855,26 @@ static inline int rss_author(struct template *, char *
 	struct transport	*t = c->t;
 	struct got_reflist_head	*refs = &t->refs;
 !}
-<div id="summary_wrapper">
+<dl id="summary_wrapper">
   {{ if srv->show_repo_description }}
-    <div id="description_title">Description:</div>
-    <div id="description">{{ t->repo_dir->description }}</div>
+    <dt>Description:</dt>
+    <dd>{{ t->repo_dir->description }}</dd>
   {{ end }}
   {{ if srv->show_repo_owner }}
-    <div id="repo_owner_title">Owner:</div>
-    <div id="repo_owner">{{ t->repo_dir->owner }}</div>
+    <dt>Owner:</dt>
+    <dd>{{ t->repo_dir->owner }}</dd>
   {{ end }}
   {{ if srv->show_repo_age }}
-    <div id="last_change_title">Last Change:</div>
-    <div id="last_change">
+    <dt>Last Change:</dt>
+    <dd>
       {{ render gotweb_render_age(tp, t->repo_dir->age, TM_DIFF) }}
-    </div>
+    </dd>
   {{ end }}
   {{ if srv->show_repo_cloneurl }}
-    <div id="cloneurl_title">Clone URL:</div>
-    <div id="cloneurl">{{ t->repo_dir->url }}</div>
+    <dt>Clone URL:</dt>
+    <dd><pre class="clone-url">{{ t->repo_dir->url }}</pre></dd>
   {{ end }}
-</div>
+</dl>
 {{ render gotweb_render_briefs(tp) }}
 {{ render gotweb_render_tags(tp) }}
 {{ render gotweb_render_branches(tp, refs) }}
@@ -890,23 +887,22 @@ static inline int rss_author(struct template *, char *
 	struct transport	*t = c->t;
 	struct repo_commit	*rc = TAILQ_FIRST(&t->repo_commits);
 !}
-<div id="blame_title_wrapper">
-  <div id="blame_title">Blame</div>
-</div>
+<header class="subtitle">
+  <h2>Blame</h2>
+</header>
 <div id="blame_content">
   <div id="blame_header_wrapper">
-    <div id="blame_header">
-      <div class="header_age_title">Date:</div>
-      <div class="header_age">
+    <dl id="blame_header">
+      <dt>Date:</dt>
+      <dd>
         {{ render gotweb_render_age(tp, rc->committer_time, TM_LONG) }}
-      </div>
-      <div id="header_commit_msg_title">Message:</div>
-      <div id="header_commit_msg">{{ rc->commit_msg }}</div>
-    </div>
+      </dd>
+      <dt>Message:</dt>
+      <dd class="commit-msg">{{ rc->commit_msg }}</dd>
+    </dl>
   </div>
-  <div class="dotted_line"></div>
-  <div id="blame">
-    {{ "\n" }}
+  <hr />
+  <pre id="blame">
     {!
 	err = got_output_file_blame(c, &blame_line);
 	if (err && err->code != GOT_ERR_CANCELLED)
@@ -915,7 +911,7 @@ static inline int rss_author(struct template *, char *
 	if (err)
 		return (-1);
     !}
-  </div>
+  </pre>
 </div>
 {{ end }}