summary history branches tags files
commit:f142234be0bc353a6d92eb44a03d9e4812bc3efc
author:Trevor Bentley
committer:Trevor Bentley
date:Fri Jan 13 04:39:20 2023 +0100
parents:0966bb534f5997a62dc3b9f3f6ca0b5bc1931c5f
add a stylized default template
diff --git a/templates/base.html b/templates/base.html
line changes: +46/-2
index 882f694..f729531
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,16 +1,60 @@
 <html>
 <head>
+{% set head_title = site_name | default(value="Itsy-Gitsy") -%}
+{% set head_description = metadata.description | default(value=site_description | default(value="Static Git repository listings")) -%}
+{% set root_url = site_url | default(value=site_dir) -%}
+{% if name -%}
+{% set repo_url = root_url ~ "/" ~ name -%}
+{% set head_title = head_title ~ " -- " ~ name -%}
+{% endif -%}
+{% set asset_url = root_url ~ "/" ~ site_assets -%}
+{% set head_url = repo_url | default(value=root_url) -%}
+
 {% block html_head -%}
-<title>{{site_name | default(value="Itsy-Gitsy")}}</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="HandheldFriendly" content="True" />
+  <title>{{head_title}}</title>
+  <meta name="description" content="{{ head_description }}">
+  <meta name="og:title" content="{{head_title}}">
+  <meta name="og:url" content="{{ head_url | safe }}">
+  <meta name="og:description" content="{{ head_description }}">
+  <meta name="og:type" content="website">
+  <link rel="canonical" href="{{ head_url | safe }}">
+  <link rel="stylesheet" type="text/css" href="{{ asset_url | safe }}/style.css" />
 {% block html_head_extra -%}
 {% endblock html_head_extra -%}
 {% endblock html_head -%}
 </head>
 
-<body style="font-family: monospace;">
+<body>
 {% block header -%}{% include "header.html" -%}{% endblock header -%}
 
+<div class="main">
+
+<div class="subheader">
+{% block subheader -%}{% include "subheader.html" -%}{% endblock subheader -%}
+</div>
+
+{% if repo_url -%}
+<table class='tabs'>
+  <tr>
+    <td class="tab {% block tab_summary_selected -%}{% endblock -%} "><a href='{{ repo_url | safe }}/summary.html'  class="tab">summary</a></td>
+    <td class="tab {% block tab_history_selected -%}{% endblock -%} "><a href='{{ repo_url | safe }}/history.html'  class="tab">history</a></td>
+    <td class="tab {% block tab_branches_selected -%}{% endblock -%}"><a href='{{ repo_url | safe }}/branches.html' class="tab">branches</a></td>
+    <td class="tab {% block tab_tags_selected -%}{% endblock -%}    "><a href='{{ repo_url | safe }}/tags.html'     class="tab">tags</a></td>
+    <td class="tab {% block tab_files_selected -%}{% endblock -%}   "><a href='{{ repo_url | safe }}/files.html'    class="tab">files</a></td>
+    <td class="padding"></td>
+  </tr>
+</table>
+{% endif -%}
+
+<div class="content">
 {% block content %}{% endblock content %}
+</div>
+
+</div>
 
 {% block footer -%}{% include "footer.html" -%}{% endblock footer -%}
 </body>

diff --git a/templates/branch.html b/templates/branch.html
line changes: +12/-7
index 0731947..6c6ee14
--- a/templates/branch.html
+++ b/templates/branch.html
@@ -1,11 +1,16 @@
 {% extends "base.html" %}
 
+{% block tab_branches_selected -%}selected{% endblock -%}
+
 {% block content %}
-branch: {{branch.ref_name}}<br/>
-hash: {{branch.full_hash}} ({{branch.short_hash}})<br/>
-author: {{branch.author.name}}<br/>
-committer: {{branch.committer.name}}<br/>
-date: {{ts_to_date(ts=branch.ts_utc, tz=branch.ts_offset)}}<br/>
-summary: {{branch.summary}}<br/>
-<pre>{{branch.message}}</pre>
+<div class="branch-page">
+  <table class="branch-header">
+    <tr class="header"><td class="field">branch:</td><td class="value">{{branch.ref_name}}</td></tr>
+    <tr class="header"><td class="field">commit:</td><td class="value">{% if branch.full_hash in commits -%}<a href="{{repo_url | safe}}/commit/{{branch.full_hash}}.html">{{branch.full_hash}}</a>{% else -%}{{branch.full_hash}}{% endif -%}</td></tr>
+    <tr class="header"><td class="field">author:</td><td class="value">{{branch.author.name}} <{{branch.author.email}}></td></tr>
+    <tr class="header"><td class="field">committer:</td><td class="value">{{branch.committer.name}} <{{branch.committer.email}}></td></tr>
+    <tr class="header"><td class="field">date:</td><td class="value">{{ts_to_git_timestamp(ts=branch.ts_utc, tz=branch.ts_offset)}}</td></tr>
+  </table>
+  <div class="branch-message"><pre>{{branch.message}}</pre></div>
+</div>
 {% endblock content %}

diff --git a/templates/branches.html b/templates/branches.html
line changes: +20/-6
index db98fea..1e4c620
--- a/templates/branches.html
+++ b/templates/branches.html
@@ -1,11 +1,21 @@
 {% extends "base.html" %}
 
+{% block tab_branches_selected -%}selected{% endblock -%}
+
 {% block content %}
-<table class="branches">
+<div class="full-header branches">Branches</div>
+<table class="summary-table branches">
+  <colgroup>
+    <col class="branch" />
+    <col class="oid" />
+    <col class="msg nosmall" />
+    <col class="author" />
+    <col class="date" />
+  </colgroup>
   <tr>
     <th>Branch</th>
-    <th>Commit ID</th>
-    <th>Message</th>
+    <th>Commit</th>
+    <th class="nosmall">Message</th>
     <th>Author</th>
     <th>Date</th>
   </tr>
@@ -13,11 +23,15 @@
   <tr class="branch">
     <td class="name"><a href="branch/{{entry.full_hash}}.html">{{entry.ref_name}}</a></td>
     <td class="oid">{{entry.short_hash}}</td>
-    <td class="commit-msg" style="font-family: sans-serif;">{{entry.summary}}</td>
-    <td class="author">{{entry.author.name}}</td>
+    <td class="msg sans nosmall">{{entry.summary}}</td>
+    <td class="author sans">{{entry.author.name}}</td>
     <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
   </tr>
   {% endfor -%}
 </table>
-{% if page.prev_page %}<a href="{{ page.prev_page }}">PREV</a>{% endif %} &nbsp; &nbsp; &nbsp; <a href="{{ page.cur_page }}">CUR</a> &nbsp; &nbsp; &nbsp; {%if page.next_page %}<a href="{{ page.next_page }}">NEXT</a>{% endif %}<br>
+<nav class="paginate" role="navigation">
+  <a class="paginate {% if not page.prev_page -%}disabled{% endif -%}" href="{{ page.prev_page }}">&lt; prev page</a>
+  <span class="paginate">[page {{ page.page_idx }} of {{ page.pages }}]</span>
+  <a class="paginate {% if not page.next_page -%}disabled{% endif -%}" href="{{ page.next_page }}">next page &gt;</a>
+</nav>
 {% endblock content %}

diff --git a/templates/commit.html b/templates/commit.html
line changes: +28/-22
index 9afc401..442ae4a
--- a/templates/commit.html
+++ b/templates/commit.html
@@ -1,31 +1,37 @@
 {% extends "base.html" %}
 
+{% block tab_history_selected -%}selected{% endblock -%}
+
 {% block content %}
-<strong>
-  commit: {{commit.full_hash}}<br/>
-  author: {{commit.author.name}}<br/>
-  committer: {{commit.committer.name}}<br/>
-  parent: {% if commit.parents | length > 0 -%}<a href="{{commit.parents | first}}.html">{{commit.parents | first}}</a>{%-endif-%}<br/>
-</strong>
-<br/>
-<pre style="margin: 0;">{{commit.message}}</pre>
+<div class="commit-page">
+  <table class="commit-header">
+    <tr class="header"><td class="field">commit:</td><td class="value">{{commit.full_hash}}</td></tr>
+    <tr class="header"><td class="field">author:</td><td class="value">{{commit.author.name}} <{{commit.author.email}}></td></tr>
+    <tr class="header"><td class="field">committer:</td><td class="value">{{commit.committer.name}} <{{commit.committer.email}}></td></tr>
+    <tr class="header"><td class="field">date:</td><td class="value">{{ts_to_git_timestamp(ts=commit.ts_utc, tz=commit.ts_offset)}}</td></tr>
+    <tr class="header"><td class="field">parents:</td><td class="value">{% for parent in commit.parents -%}{% if loop.index0 > 0 -%}, {%endif-%}{% if parent in commits -%}<a href="{{parent}}.html">{{parent}}</a>{%else-%}{{parent}}{%endif-%}{%-endfor-%}</td></tr>
+  </table>
+  <div class="commit-message">
+    <pre style="margin: 0;">{{commit.message}}</pre>
+  </div>
 {% for file in commit.diff.files -%}
-<br/>
-<strong>
-  diff --git a/{{file.basefile}} b/{{file.basefile}}<br/>
-  line changes: +{{file.additions}}/-{{file.deletions}}<br/>
-  index {{file.oldid | truncate(length=7,end="")}}..{{file.newid | truncate(length=7,end="")}}<br/>
-  --- {{file.oldfile}}<br/>
-  +++ {{file.newfile}}
-</strong>
+  <div class="commit-diff">
+    <div class="commit-diff-header">
+      <pre>diff --git a/{{file.basefile}} b/{{file.basefile}}
+line changes: +{{file.additions}}/-{{file.deletions}}
+index {{file.oldid | truncate(length=7,end="")}}..{{file.newid | truncate(length=7,end="")}}
+--- {{file.oldfile}}
++++ {{file.newfile}}</pre>
+    </div>
 {% for hunk in file.hunks -%}
-<pre><strong>{{hunk.context}}</strong>
-  {%- for line in hunk.lines -%}
-  {%- if line.kind in ["del","add"] -%}<span style="color: {%- if line.kind == "del" -%}bb0000{%- else -%}00aa00{% endif %}">{%- endif -%}
-    {{line.prefix}}{{line.text}}
-    {%- if line.kind in ["del","add"] -%}</span>{%- endif -%}
-  {%- endfor -%}
+<pre><span class="hunk-header">{{hunk.context}}</span>
+{%- for line in hunk.lines -%}
+<span class="{{ line.kind }}">{{line.prefix}}{{line.text}}</span>
+{%- endfor -%}
 </pre>
 {% endfor -%}
+<br/>
 {% endfor -%}
+</div>
+</div>
 {% endblock content %}

diff --git a/templates/dir.html b/templates/dir.html
line changes: +19/-7
index a56436a..bdbc262
--- a/templates/dir.html
+++ b/templates/dir.html
@@ -1,21 +1,33 @@
 {% extends "base.html" %}
 
+{% block tab_files_selected -%}selected{% endblock -%}
+
+{% block subheader -%}
+<div class="breadcrumbs"><span class="site-title"><a href="{{ root_url | safe }}/repos.html">{{site_name | default(value="Itsy-Gitsy") }}</a></span>{% if name -%}&nbsp;&gt;&gt;&nbsp;<span class="site-title">{{ name }}</span>{% endif -%}&nbsp;&gt;&gt;&nbsp;<span class="repo-name">{{ dir.path }}</span></div>
+{% endblock -%}
+
 {% block content %}
-<table class="files">
+<div class="nocap-header files">{{ dir.path }}</div>
+<table class="summary-table files">
+  <colgroup>
+    <col class="file" />
+    <col class="type" />
+    <col class="mode" />
+    <col class="size" />
+  </colgroup>
   <tr>
     <th>File</th>
-    <th>ID</th>
     <th>Type</th>
     <th>Mode</th>
     <th>Size</th>
   </tr>
   {% for file in files -%}
   <tr class="file">
-    <td class="file-name"><a href="../{{file.kind}}/{{file.id}}.html">{{file.name}}</a></td>
-    <td class="file-id">{{file.id}}</td>
-    <td class="file-type">{{file.kind}} ({{file.is_binary}})</td>
-    <td class="file-mode">{{file.mode}}</td>
-    <td class="file-size">{{file.size}}</td>
+    <td class="name"><a href="{{repo_url | safe}}/{{file.kind}}/{{file.id}}.html">{{file.name}}{% if file.kind == "dir" -%}/{% endif -%}</a></td>
+    <td class="type">{{file.kind}}</td>
+    <td class="mode">{{file.mode | mask(mask="0xfff") | oct}}</td>
+    <td class="size">{{file.size}}</td>
   </tr>
   {% endfor -%}
+</table>
 {% endblock content %}

diff --git a/templates/file.html b/templates/file.html
line changes: +8/-2
index 26de15b..023d364
--- a/templates/file.html
+++ b/templates/file.html
@@ -4,10 +4,15 @@
 <link rel="stylesheet" type="text/css" href="syntax.css" />
 {% endblock html_head_extra %}
 
+{% block tab_files_selected -%}selected{% endblock -%}
+
+{% block subheader -%}
+<div class="breadcrumbs"><span class="site-title"><a href="{{ root_url | safe }}/repos.html">{{site_name | default(value="Itsy-Gitsy") }}</a></span>{% if name -%}&nbsp;&gt;&gt;&nbsp;<span class="site-title">{{ name }}</span>{% endif -%}&nbsp;&gt;&gt;&nbsp;<span class="repo-name">{{ file.path }}</span></div>
+{% endblock -%}
 
 {% block content %}
-{{file.path}} ({{file.name}}) [{{file.id}}]<br/>
--------<br/>
+<div class="file-contents">
+<div class="nocap-header file">{{ file.path }}</div>
 {% if file.contents_safe -%}
 {% if file.contents_preformatted -%}
 <pre>{{file.contents | safe }}</pre>
@@ -17,4 +22,5 @@
 {%- else -%}
 <pre style="margin: 0">{{file.contents}}</pre>
 {%- endif -%}
+</div>
 {% endblock content %}

diff --git a/templates/files.html b/templates/files.html
line changes: +29/-0
index 0000000..d155880
--- /dev/null
+++ b/templates/files.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block tab_files_selected -%}selected{% endblock -%}
+
+{% block content %}
+<div class="full-header tags">File tree</div>
+<table class="summary-table files">
+  <colgroup>
+    <col class="file" />
+    <col class="type nosmall" />
+    <col class="mode nosmall" />
+    <col class="size nosmall" />
+  </colgroup>
+  <tr>
+    <th>File</th>
+    <th class="nosmall">Type</th>
+    <th class="nosmall">Mode</th>
+    <th class="nosmall">Size</th>
+  </tr>
+  {% for file in root_files -%}
+  <tr class="file">
+    <td class="name"><a href="{{file.kind}}/{{file.id}}.html">{{file.name}}{% if file.kind == "dir" -%}/{% endif -%}</a></td>
+    <td class="type nosmall">{{file.kind}}</td>
+    <td class="mode nosmall">{{file.mode | mask(mask="0xfff") | oct}}</td>
+    <td class="size nosmall">{{file.size}}</td>
+  </tr>
+  {% endfor -%}
+</table>
+{% endblock content %}

diff --git a/templates/footer.html b/templates/footer.html
line changes: +2/-1
index 9d302a7..7493bdb
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,2 +1,3 @@
+<div class="footer">
 <hr/>
-Generated by {{extra | get(key="generated_by", default="Itsy-Gitsy")}} on {{ts_to_git_timestamp(ts=site_generated_ts, tz=site_generated_offset)}}<br/>
+Generated by {{extra | get(key="generated_by", default="Itsy-Gitsy")}} on {{ts_to_git_timestamp(ts=site_generated_ts, tz=site_generated_offset)}}</div>

diff --git a/templates/header.html b/templates/header.html
line changes: +13/-3
index 16e9ddf..bf761ea
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,3 +1,13 @@
-Site: {{site_name | default(value="Itsy-Gitsy") }}<br/>
-Description: {{site_description | default(value="A collection of Git repositories")}}<br/>
-<hr/>
+<div class="banner">
+  {% if name -%}
+  <div class="site-title">{{name | default(value="unnamed repository") }}</div>
+  {% else -%}
+  <div class="site-title">{{site_name | default(value="Itsy-Gitsy") }}</div>
+  {% endif -%}
+
+  {% if name -%}
+  <div class="site-description">{{metadata.description | default(value="") }}</div>
+  {% else -%}
+  <div class="site-description">{{site_description | default(value="A collection of Git repositories")}}</div>
+  {% endif -%}
+</div>

diff --git a/templates/history.html b/templates/history.html
line changes: +28/-15
index 5b950cd..e61ae59
--- a/templates/history.html
+++ b/templates/history.html
@@ -1,27 +1,40 @@
 {% extends "base.html" %}
 
+{% block tab_history_selected -%}selected{% endblock -%}
+
 {% block content %}
-<table class="commits">
+<div class="full-header commit">History</div>
+<table class="summary-table commits">
+  <colgroup>
+    <col class="oid" />
+    <col class="msg" />
+    <col class="author" />
+    <col class="date" />
+    <col class="diff nosmall" />
+    <col class="refs nosmall" />
+  </colgroup>
   <tr>
-    <th>Commit ID</th>
+    <th>Commit</th>
     <th>Message</th>
     <th>Author</th>
     <th>Date</th>
-    <th>Diff</th>
-    <th>Refs</th>
+    <th class="nosmall">Diff</th>
+    <th class="nosmall">Refs</th>
   </tr>
   {% for entry in history -%}
-  {% if loop.index0 < 250  -%}
-                      <tr class="commit">
-                        <td class="oid"><a href="commit/{{entry.full_hash}}.html">{{entry.short_hash}}</a></td>
-                        <td class="commit-msg" style="font-family: sans-serif;">{{entry.summary}}</td>
-                        <td class="author" style="font-family: sans-serif;">{{entry.author.name}}</td>
-                        <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
-                        <td class="diff">{{entry.stats.files}} (+{{entry.stats.additions}}/-{{entry.stats.deletions}})</td>
-                        <td class="refs">{%- for ref in entry.alt_refs -%}{%- if loop.index0 > 0 -%},&nbsp; {%- endif -%}<span class="commit-ref">{{ref}}</span>{%- endfor -%}</td>
-</tr>
-{% endif -%}
+  <tr class="commit">
+    <td class="oid"><a href="commit/{{entry.full_hash}}.html">{{entry.short_hash}}</a></td>
+    <td class="msg sans">{{entry.summary}}</td>
+    <td class="author sans">{{entry.author.name}}</td>
+    <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
+    <td class="diff nosmall">{{entry.stats.files}} (+{{entry.stats.additions}}/-{{entry.stats.deletions}})</td>
+    <td class="refs nosmall">{%- for ref in entry.alt_refs -%}{%- if loop.index0 < 3 -%}<span class="ref">{{ref}}</span>{%- endif -%}{%- endfor -%}{% if entry.alt_refs | length > 3 -%}<span class="ref">...</span>{% endif -%}</td>
+  </tr>
 {% endfor -%}
 </table>
-{% if page.prev_page %}<a href="{{ page.prev_page }}">PREV</a>{% endif %} &nbsp; &nbsp; &nbsp; <a href="{{ page.cur_page }}">CUR</a> &nbsp; &nbsp; &nbsp; {%if page.next_page %}<a href="{{ page.next_page }}">NEXT</a>{% endif %}<br>
+<nav class="paginate" role="navigation">
+  <a class="paginate {% if not page.prev_page -%}disabled{% endif -%}" href="{{ page.prev_page }}">&lt; prev page</a>
+  <span class="paginate">[page {{ page.page_idx }} of {{ page.pages }}]</span>
+  <a class="paginate {% if not page.next_page -%}disabled{% endif -%}" href="{{ page.next_page }}">next page &gt;</a>
+</nav>
 {% endblock content %}

diff --git a/templates/repos.html b/templates/repos.html
line changes: +21/-2
index 70b1eb6..84e7769
--- a/templates/repos.html
+++ b/templates/repos.html
@@ -1,7 +1,26 @@
 {% extends "base.html" %}
 
 {% block content %}
-{% for repo in repos | sort(attribute="name") -%}
-<a href="{{repo.name}}/summary.html">{{ repo.name }}</a> ({{repo.metadata.website}}) [{{repo.metadata.attributes | get(key="status", default="unknown")}}] ({{ts_to_date(ts=repo.history[0].ts_utc, tz=repo.history[0].ts_offset)}})<br/>
+<table class="repo-list">
+  <colgroup>
+    <col class="repo" />
+    <col class="description nosmall" />
+    <col class="website" />
+    <col class="updated" />
+  </colgroup>
+  <tr>
+    <th>Repository</th>
+    <th class="nosmall">Description</th>
+    <th>Website</th>
+    <th>Last Updated</th>
+  </tr>
+  {% for repo in repos | sort(attribute="name") -%}
+  <tr>
+    <td class="repo"><a href="{{repo.name}}/summary.html">{{ repo.name }}</a></td>
+    <td class="description nosmall">{{repo.metadata.description}}</td>
+    <td class="website">{% if repo.metadata.website -%}<a href="{{repo.metadata.website}}">link</a>{% endif -%}</td>
+    <td class="date">{{ts_to_date(ts=repo.history[0].ts_utc, tz=repo.history[0].ts_offset)}}</td>
+  </tr>
 {% endfor -%}
+</table>
 {% endblock content %}

diff --git a/templates/style.css b/templates/style.css
line changes: +339/-0
index 0000000..aa541f6
--- /dev/null
+++ b/templates/style.css
@@ -0,0 +1,339 @@
+:root {
+    --greyblue: #dee2ea;
+    --greyblue: #60738c;
+    --greypink: #e0deea;
+    --greypink: #c0d2dd;
+    --greypink: #dbdcdd;
+    --offwhite: #f4f4f4;
+    --offerwhite: #e9e9e9;
+    --deepred: #770000;
+    --deepblue: #3002e8;
+    --nearwhite: #fafafa;
+    --nearblack: #222222;
+    --borderverylight: #ddd;
+    --borderlight: #bbb;
+    --borderdark: #888;
+}
+body {
+    height: 100%;
+    font-family: monospace,monospace;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    line-height: 1.5;
+    background-color: var(--nearwhite);
+    color: var(--nearblack);
+}
+body {
+    margin: 0;
+    min-height: 100%;
+}
+div.banner {
+    width: 95%;
+    max-width: 100rem;
+    color: var(--offwhite);
+    background-color: var(--greyblue);
+    border-radius: 0 0 30px 30px;
+    font-family: sans-serif;
+    text-align: center;
+    margin: 0 auto 0 auto;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+}
+div.breadcrumbs {
+    background-color: var(--greypink);
+    font-weight: bold;
+    padding: 0.5em;
+    border-radius: 10px 10px 0 0;
+}
+div.breadcrumbs a {
+    color: var(--nearblack);
+    text-decoration: none;
+}
+div.breadcrumbs span.site-title {
+    font-size: 1rem;
+}
+div.breadcrumbs span.repo-name {
+    font-size: 1.5rem;
+}
+div.site-title {
+    letter-spacing: .1em;
+    font-size: 2.5rem;
+    font-weight: bold;
+}
+div.site-description {
+    min-height: 1.5em;
+}
+a {
+    word-wrap: break-word;
+    background-color: transparent;
+    color: var(--deepblue);
+    transition: opacity .1s;
+}
+a:hover {
+    opacity: 0.5;
+}
+a.disabled {
+    pointer-events: none;
+    color: var(--nearblack);
+}
+div.main {
+    width: 95%;
+    max-width: 100rem;
+    margin: 0 auto 0 auto;
+}
+div.content {
+    padding: 1em 0 1em 0;
+}
+table {
+    width: 100%;
+}
+table.tabs {
+    padding: 0 0 0 0;
+    margin: 0 auto 0 auto;
+    background-color: var(--offwhite);
+    border-radius: 0 0 3px 3px;
+    border-bottom: solid 3px var(--borderlight);
+    border-spacing: 0;
+}
+table.tabs td.tab {
+    text-align: center;
+    min-width: 8em;
+    border-right: solid 1px var(--borderdark);
+}
+table.tabs td.padding {
+    width: 100%;
+}
+table.tabs a {
+    color: var(--deepred);
+    text-decoration: none;
+    letter-spacing: .1em;
+    font-weight: bold;
+}
+table.tabs td.selected {
+    background-color: var(--greyblue);
+    background-color: #ede5de;
+    background-color: var(--greypink);
+}
+table.summary-table, table.repo-list {
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--offwhite);
+    border-radius: 8px;
+}
+table.summary-table th, table.repo-list th {
+    text-align: left;
+    padding-left: 0.3em;
+}
+table.summary-table tr:nth-child(even), table.repo-list tr:nth-child(even) {
+    background-color: var(--offerwhite);
+}
+table.repo-list td {
+    padding: 0.5em 0.3em 0.5em 0.3em;
+}
+table.summary-table td, table.repo-list td {
+    word-break: break-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 0.3em;
+}
+table.repo-list col.repo {
+    width: 12rem;
+}
+table.repo-list td.description {
+    max-width: 40em;
+}
+table.repo-list col.description {
+    width: 30rem;
+}
+table.repo-list col.website {
+    width: 7em;
+    max-width: 7em;
+}
+table.repo-list col.updated {
+    width: 10em;
+    max-width: 10em;
+}
+table.summary-table col.oid {
+    width: 7em;
+    max-width: 7em;
+}
+table.summary-table col.date {
+    width: 9em;
+    max-width: 9em;
+}
+table.summary-table col.diff {
+    width: 9em;
+    max-width: 9em;
+}
+table.summary-table col.msg {
+    width: 30rem;
+}
+table.summary-table col.refs {
+    width: 25rem;
+}
+table.summary-table col.branch {
+    width: 30em;
+}
+table.summary-table col.tag {
+    width: 30em;
+}
+table.summary-table col.type {
+    width: 7em;
+    max-width: 7em;
+}
+table.summary-table col.mode {
+    width: 7em;
+    max-width: 7em;
+}
+table.summary-table col.size {
+    width: 7em;
+    max-width: 7em;
+}
+table.summary-table td.msg {
+    max-width: 10em;
+}
+table.summary-table td.refs {
+    font-size: 0.8rem;
+}
+table.summary-table span.ref {
+    color: var(--offwhite);
+    background-color: var(--greyblue);
+    border-radius: 10px;
+    margin-right: 1em;
+    padding: 0 0.5em 0 0.5em;
+}
+table.summary-table td.sans {
+    font-family: sans-serif;
+}
+div.summary-header {
+    color: var(--offwhite);
+    letter-spacing: 0.05em;
+    background-color: var(--greyblue);
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+    margin-top: 2rem;
+    border-bottom: solid 1px var(--borderdark);
+    border-radius: 10px 10px 0 0;
+}
+div.summary-header.commit {
+    margin-top: 0rem;
+}
+div.full-header {
+    color: var(--offwhite);
+    letter-spacing: 0.05em;
+    background-color: var(--greyblue);
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+    margin-top: 0rem;
+    border-bottom: solid 1px var(--borderdark);
+    border-radius: 10px 10px 0 0;
+}
+div.nocap-header {
+    color: var(--offwhite);
+    letter-spacing: 0.05em;
+    background-color: var(--greyblue);
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 0rem;
+    border-bottom: solid 1px var(--borderdark);
+    border-radius: 10px 10px 0 0;
+}
+hr {
+    border-color: var(--borderverylight);
+}
+div.footer {
+    margin-top: 1em;
+    padding-bottom: 2em;
+    text-align: center;
+    font-size: 0.9rem;
+}
+nav.paginate {
+    text-align: center;
+    margin-top: 2em;
+}
+nav.paginate span.paginate {
+    margin: 0 5em 0 5em;
+}
+nav.paginate a.disabled {
+    text-decoration: none;
+    color: var(--borderlight);
+}
+div.file-contents {
+    background-color: var(--offwhite);
+    font-size: 1rem;
+    overflow: visible;
+}
+div.commit-page, div.branch-page, div.tag-page {
+    background-color: var(--offwhite);
+    font-size: 1rem;
+    overflow: visible;
+}
+table.commit-header, table.branch-header, table.tag-header {
+    width: 100%;
+    background-color: var(--offerwhite);
+    background-color: var(--greypink);
+    border-radius: 10px 10px 0 0;
+    padding: 0.5em;
+    border-bottom: solid 2px var(--borderlight);
+}
+table.commit-header td.field, table.branch-header td.field, table.tag-header td.field {
+    width: 10em;
+    font-weight: bold;
+}
+div.commit-message {
+    padding: 1em 0.5em 2em 0.5em;
+    border-bottom: solid 2px var(--borderlight);
+}
+div.branch-message, div.tag-message {
+    padding: 1em 0.5em 2em 0.5em;
+}
+div.commit-diff {
+    padding: 0.5em;
+}
+div.commit-diff-header {
+    font-weight: bold;
+}
+div.commit span.hunk-header {
+    font-weight: bold;
+}
+div.commit-diff-header pre, div.branch-page pre, div.tag-page pre {
+    padding: 0;
+    margin: 0;
+}
+div.commit-page span.add {
+    color: #00aa00;
+}
+div.commit-page span.del {
+    color: #bb0000;
+}
+@media screen and (max-width:50em) {
+    body, table, div {
+        font-size: 0.8rem;
+    }
+    div.footer {
+        font-size: 0.7rem;
+    }
+    col.nosmall, td.nosmall, th.nosmall {
+        display: none;
+        visibility: hidden;
+    }
+    table.tabs td.tab {
+        min-width: 0em;
+        padding: 0 0.3em 0 0.3em;
+    }
+    div.file-contents {
+        font-size: 0.7rem;
+    }
+    div.breadcrumbs span.site-title {
+        font-size: 0.7rem;
+    }
+    div.breadcrumbs span.repo-name {
+        font-size: 0.9rem;
+    }
+}

diff --git a/templates/subheader.html b/templates/subheader.html
line changes: +1/-0
index 0000000..b7d0936
--- /dev/null
+++ b/templates/subheader.html
@@ -0,0 +1 @@
+<div class="breadcrumbs"><span class="site-title"><a href="{{ root_url | safe }}/repos.html">{{site_name | default(value="Itsy-Gitsy") }}</a></span>{% if name -%}&nbsp;&gt;&gt;&nbsp;<span class="repo-name">{{ name }}</span>{% endif -%}</div>

diff --git a/templates/summary.html b/templates/summary.html
line changes: +66/-38
index e016439..429581a
--- a/templates/summary.html
+++ b/templates/summary.html
@@ -1,90 +1,118 @@
 {% extends "base.html" %}
 
+{% block tab_summary_selected -%}selected{% endblock -%}
+
 {% block content %}
-<a href="history.html">Commit history</a><br>
-<a href="branches.html">All branches</a><br>
-<a href="tags.html">All tags</a><br>
-<br/>
-<table class="commits">
+<div class="summary-header commit">Recent history</div>
+<table class="summary-table commits">
+  <colgroup>
+    <col class="oid" />
+    <col class="msg" />
+    <col class="author" />
+    <col class="date" />
+    <col class="diff nosmall" />
+    <col class="refs nosmall" />
+  </colgroup>
   <tr>
-    <th>Commit ID</th>
+    <th>Commit</th>
     <th>Message</th>
     <th>Author</th>
     <th>Date</th>
-    <th>Diff</th>
-    <th>Refs</th>
+    <th class="nosmall">Diff</th>
+    <th class="nosmall">Refs</th>
   </tr>
   {% for entry in history -%}
   {% if loop.index0 < 10  -%}
-                      <tr class="commit">
-                        <td class="oid"><a href="commit/{{entry.full_hash}}.html">{{entry.short_hash}}</a></td>
-                        <td class="commit-msg" style="font-family: sans-serif;">{{entry.summary}}</td>
-                        <td class="author" style="font-family: sans-serif;">{{entry.author.name}}</td>
-                        <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
-                        <td class="diff">{{entry.stats.files}} (+{{entry.stats.additions}}/-{{entry.stats.deletions}})</td>
-                        <td class="refs">{%- for ref in entry.alt_refs -%}{%- if loop.index0 > 0 -%},&nbsp; {%- endif -%}<span class="commit-ref">{{ref}}</span>{%- endfor -%}</td>
-</tr>
+  <tr class="commit">
+    <td class="oid"><a href="commit/{{entry.full_hash}}.html">{{entry.short_hash}}</a></td>
+    <td class="msg sans">{{entry.summary}}</td>
+    <td class="author sans">{{entry.author.name}}</td>
+    <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
+    <td class="diff nosmall">{{entry.stats.files}} (+{{entry.stats.additions}}/-{{entry.stats.deletions}})</td>
+    <td class="refs nosmall">{%- for ref in entry.alt_refs -%}{%- if loop.index0 < 3 -%}<span class="ref">{{ref}}</span>{%- endif -%}{%- endfor -%}{% if entry.alt_refs | length > 3 -%}<span class="ref">...</span>{% endif -%}</td>
+  </tr>
 {% endif -%}
 {% endfor -%}
 </table>
 
-<table class="branches">
+<div class="summary-header branches">Recent branches</div>
+<table class="summary-table branches">
+  <colgroup>
+    <col class="branch" />
+    <col class="oid" />
+    <col class="msg nosmall" />
+    <col class="author" />
+    <col class="date" />
+  </colgroup>
   <tr>
     <th>Branch</th>
-    <th>Commit ID</th>
-    <th>Message</th>
+    <th>Commit</th>
+    <th class="nosmall">Message</th>
     <th>Author</th>
     <th>Date</th>
   </tr>
-  {% for entry in branches -%}
+  {% for entry in branches | sort(attribute="ts_utc") | reverse -%}
   {% if loop.index0 < 10  -%}
   <tr class="branch">
     <td class="name"><a href="branch/{{entry.full_hash}}.html">{{entry.ref_name}}</a></td>
     <td class="oid">{{entry.short_hash}}</td>
-    <td class="commit-msg" style="font-family: sans-serif;">{{entry.summary}}</td>
-    <td class="author">{{entry.author.name}}</td>
+    <td class="msg sans nosmall">{{entry.summary}}</td>
+    <td class="author sans">{{entry.author.name}}</td>
     <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
   </tr>
   {% endif -%}
   {% endfor -%}
 </table>
 
-<table class="tags">
+<div class="summary-header tags">Recent tags</div>
+<table class="summary-table tags">
+  <colgroup>
+    <col class="tag" />
+    <col class="oid" />
+    <col class="msg nosmall" />
+    <col class="author" />
+    <col class="date" />
+  </colgroup>
   <tr>
     <th>Tag</th>
-    <th>Commit ID</th>
-    <th>Message</th>
+    <th>Commit</th>
+    <th class="nosmall">Message</th>
     <th>Author</th>
     <th>Date</th>
   </tr>
-  {% for entry in tags -%}
+  {% for entry in tags | sort(attribute="ts_utc") | reverse -%}
   {% if loop.index0 < 10  -%}
   <tr class="tag">
     <td class="name"><a href="tag/{{entry.full_hash}}.html">{{entry.ref_name}}</a></td>
     <td class="oid">{{entry.short_hash}}</td>
-    <td class="commit-msg" style="font-family: sans-serif;">{{entry.summary}}</td>
-    <td class="author">{{entry.author.name}}</td>
+    <td class="msg sans nosmall">{{entry.summary}}</td>
+    <td class="author sans">{{entry.author.name}}</td>
     <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
   </tr>
   {% endif -%}
   {% endfor -%}
 </table>
 
-<table class="files">
+<div class="summary-header tags">File tree</div>
+<table class="summary-table files">
+  <colgroup>
+    <col class="file" />
+    <col class="type nosmall" />
+    <col class="mode nosmall" />
+    <col class="size nosmall" />
+  </colgroup>
   <tr>
     <th>File</th>
-    <th>ID</th>
-    <th>Type</th>
-    <th>Mode</th>
-    <th>Size</th>
+    <th class="nosmall">Type</th>
+    <th class="nosmall">Mode</th>
+    <th class="nosmall">Size</th>
   </tr>
   {% for file in root_files -%}
   <tr class="file">
-    <td class="name"><a href="{{file.kind}}/{{file.id}}.html">{{file.name}}</a></td>
-    <td class="id">{{file.id}}</td>
-    <td class="type">{{file.kind}} ({{file.is_binary}})</td>
-    <td class="mode">{{file.mode}}</td>
-    <td class="size">{{file.size}}</td>
+    <td class="name"><a href="{{repo_url | safe}}/{{file.kind}}/{{file.id}}.html">{{file.name}}{% if file.kind == "dir" -%}/{% endif -%}</a></td>
+    <td class="type nosmall">{{file.kind}}</td>
+    <td class="mode nosmall">{{file.mode | mask(mask="0xfff") | oct}}</td>
+    <td class="size nosmall">{{file.size}}</td>
   </tr>
   {% endfor -%}
 </table>

diff --git a/templates/tag.html b/templates/tag.html
line changes: +12/-11
index c21f6b9..5178118
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -1,15 +1,16 @@
 {% extends "base.html" %}
 
+{% block tab_tags_selected -%}selected{% endblock -%}
+
 {% block content %}
-branch: {{tag.ref_name}}<br/>
-hash: {{tag.full_hash}} ({{tag.short_hash}})<br/>
-author: {{tag.author.name}}<br/>
-committer: {{tag.committer.name}}<br/>
-date: {{ts_to_date(ts=tag.ts_utc, tz=tag.ts_offset)}}<br/>
-summary: {{tag.summary}}<br/>
-<pre>{{tag.message}}</pre>
-<br/>
-commit: {%- if commit -%}<a href="../commit/{{commit.full_hash}}.html">{{commit.full_hash}}</a>
-<pre>{{commit.message}}</pre>
-{%-else-%}{{tag.tagged_id}}{%-endif-%}<br/>
+<div class="tag-page">
+  <table class="tag-header">
+    <tr class="header"><td class="field">tag:</td><td class="value">{{tag.ref_name}}</td></tr>
+    <tr class="header"><td class="field">hash:</td><td class="value">{{tag.full_hash}}</td></tr>
+    <tr class="header"><td class="field">tagged commit:</td><td class="value">{% if tag.tagged_id -%}{% if tag.tagged_id in commits -%}<a href="{{repo_url | safe}}/commit/{{tag.tagged_id}}.html">{{tag.tagged_id}}</a>{% else -%}{{tag.tagged_id}}{% endif -%}{% endif -%}</td></tr>
+    <tr class="header"><td class="field">author:</td><td class="value">{{tag.author.name}} <{{tag.author.email}}></td></tr>
+    <tr class="header"><td class="field">date:</td><td class="value">{{ts_to_git_timestamp(ts=tag.ts_utc, tz=tag.ts_offset)}}</td></tr>
+  </table>
+  <div class="tag-message"><pre>{{tag.message}}</pre></div>
+</div>
 {% endblock content %}

diff --git a/templates/tags.html b/templates/tags.html
line changes: +20/-6
index f846bcb..b959d1a
--- a/templates/tags.html
+++ b/templates/tags.html
@@ -1,11 +1,21 @@
 {% extends "base.html" %}
 
+{% block tab_tags_selected -%}selected{% endblock -%}
+
 {% block content %}
-<table class="tags">
+<div class="full-header tags">Tags</div>
+<table class="summary-table tags">
+  <colgroup>
+    <col class="tag" />
+    <col class="oid" />
+    <col class="msg nosmall" />
+    <col class="author" />
+    <col class="date" />
+  </colgroup>
   <tr>
     <th>Tag</th>
-    <th>Commit ID</th>
-    <th>Message</th>
+    <th>Commit</th>
+    <th class="nosmall">Message</th>
     <th>Author</th>
     <th>Date</th>
   </tr>
@@ -13,11 +23,15 @@
   <tr class="tag">
     <td class="name"><a href="tag/{{entry.full_hash}}.html">{{entry.ref_name}}</a></td>
     <td class="oid">{{entry.short_hash}}</td>
-    <td class="commit-msg" style="font-family: sans-serif;">{{entry.summary}}</td>
-    <td class="author">{{entry.author.name}}</td>
+    <td class="msg sans nosmall">{{entry.summary}}</td>
+    <td class="author sans">{{entry.author.name}}</td>
     <td class="date">{{ts_to_date(ts=entry.ts_utc, tz=entry.ts_offset)}}</td>
   </tr>
   {% endfor -%}
 </table>
-{% if page.prev_page %}<a href="{{ page.prev_page }}">PREV</a>{% endif %} &nbsp; &nbsp; &nbsp; <a href="{{ page.cur_page }}">CUR</a> &nbsp; &nbsp; &nbsp; {%if page.next_page %}<a href="{{ page.next_page }}">NEXT</a>{% endif %}<br>
+<nav class="paginate" role="navigation">
+  <a class="paginate {% if not page.prev_page -%}disabled{% endif -%}" href="{{ page.prev_page }}">&lt; prev page</a>
+  <span class="paginate">[page {{ page.page_idx }} of {{ page.pages }}]</span>
+  <a class="paginate {% if not page.next_page -%}disabled{% endif -%}" href="{{ page.next_page }}">next page &gt;</a>
+</nav>
 {% endblock content %}