From: Stefan Sperling <stsp@stsp.name>
Subject: Re: gotwebd: style improvements
To: Omar Polo <op@omarpolo.com>
Cc: gameoftrees@openbsd.org
Date: Mon, 11 Sep 2023 12:17:26 +0200

On Sun, Sep 10, 2023 at 01:42:26PM +0200, Omar Polo wrote:
> 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(-)

I like the visual changes, especially for text browsers where
diffs are finally readable! (tested in w3m)

My web-foo is not good enough to judge the actual changes but I support
this going in.

> 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 }}
>  
> 
>