From: Omar Polo <op@omarpolo.com>
Subject: Re: gotwebd: style improvements
To: Omar Polo <op@omarpolo.com>
Cc: gameoftrees@openbsd.org
Date: Sun, 10 Sep 2023 13:42:26 +0200

On 2023/09/10 10:49:20 +0200, Omar Polo <op@omarpolo.com> wrote:
> 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.

fixes for some issues spotted by Lucas on irc, thanks!

 - keep the monospace in the filenames in the tree view
 - missing styling for the "Blob" title
 - fix the width of the first tab character in the blob view

diffstat refs/heads/main refs/heads/www
 M  gotwebd/files/htdocs/gotwebd/gotweb.css  |  120+  405-
 M  gotwebd/pages.tmpl                       |  186+  190-

2 files changed, 306 insertions(+), 595 deletions(-)

diff refs/heads/main refs/heads/www
commit - d71015b33dbfbef534be92e584006caddbf16aa6
commit + 60d047a69262c73dc1665023af0b0d3e35920a04
blob - 5259d968ffb89ab3d1148ac90dc8dfffcada9857
blob + 9c9ca1cfdede56727c229a6af5d944e28b121533
--- 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,163 @@ 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;
 }
+.blob_code {
+	/* fixes the width of the first tab */
+	display: inline-block;
+}
+.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;
+	font-family: monospace;
 	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 + efdda59e16224c27afe672254b9627509db74a08
--- 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>
@@ -439,21 +442,21 @@ static inline int rss_author(struct template *, char *
 	struct got_blob_object	*blob = t->blob;
 	struct repo_commit	*rc = TAILQ_FIRST(&t->repo_commits);
 !}
-<div id="blob_title_wrapper">
-  <div id="blob_title">Blob</div>
-</div>
+<header class="subtitle">
+  <h2>Blob</h2>
+</header>
 <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 }}