1diff --git a/gshr.css b/gshr.css
  2index 5a39ca4..6c21d98 100644
  3--- a/gshr.css
  4+++ b/gshr.css
  5@@ -4,7 +4,6 @@
  6   --sans-font: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
  7     helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
  8     sans-serif;
  9-  --serif-font: "Times New Roman", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 10   /* Colors */
 11   --blue: #0062ff;
 12   /* General variables */
 13@@ -18,11 +17,6 @@
 14   --second-text-color: #838181;
 15   --link-color: var(--blue);
 16   --link-underline-color: var(--blue);
 17-  --bg: white;
 18-  --blockquote-color: #606060;
 19-  --blockquote-border: #424242;
 20-  --log-hr: #c2c2c2;
 21-  --hr: rgba(0, 0, 0, 0.50);
 22 }
 23 
 24 html {
 25@@ -56,13 +50,7 @@ body {
 26   font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "frac" 0;
 27 }
 28 
 29-p,
 30-ul,
 31-ol,
 32-pre,
 33-blockquote,
 34-hr,
 35-object {
 36+pre {
 37   margin: 0.31rem 0
 38 }
 39 
 40@@ -73,48 +61,11 @@ tt {
 41   font-feature-settings: 'ss02' 1, 'zero' 1
 42 }
 43 
 44-img {
 45-  border: none;
 46-  vertical-align: bottom
 47-}
 48-
 49-.img-border {
 50-  border: solid 1px rgb(222, 221, 222)
 51-}
 52-
 53-hr {
 54-  height: 1px;
 55-  border: none;
 56-  background-color: var(--hr)
 57-}
 58-
 59 strong,
 60 b {
 61   font-weight: 600
 62 }
 63 
 64-h1,
 65-h2,
 66-h3,
 67-h4,
 68-h5,
 69-h6 {
 70-  font-size: inherit;
 71-  font-weight: 600
 72-}
 73-
 74-h1 {
 75-  margin-bottom: 1.5em
 76-}
 77-
 78-h1,
 79-h2 {
 80-  line-height: 1.25;
 81-  font-weight: 600;
 82-  font-size: 24px;
 83-  letter-spacing: .009em
 84-}
 85-
 86 a[href] {
 87   color: var(--link-color);
 88   text-decoration-line: underline;
 89@@ -132,38 +83,6 @@ a[href]:hover {
 90   text-decoration-color: var(--link-color)
 91 }
 92 
 93-a.img {
 94-  border: none;
 95-  background: transparent !important
 96-}
 97-
 98-h1>a,
 99-h2>a,
100-h3>a,
101-h4>a,
102-h5>a,
103-h6>a,
104-h1>a:hover,
105-h2>a:hover,
106-h3>a:hover,
107-h4>a:hover,
108-h5>a:hover,
109-h6>a:hover {
110-  color: inherit !important;
111-  background-color: transparent !important;
112-  text-decoration-style: solid;
113-  text-decoration-line: underline;
114-  text-decoration-color: var(--link-color);
115-  text-decoration-thickness: 2px
116-}
117-
118-@media screen and (max-width: 920px) {
119-  div.content {
120-    margin: 0 auto;
121-    padding: 20px;
122-  }
123-}
124-
125 .mono {
126   font-family: var(--mono-font);
127 }
128@@ -181,135 +100,33 @@ div.content {
129   max-width: 860px
130 }
131 
132-div.content:not(.sub) h1:first-child {
133-  margin-top: 0
134-}
135-
136-div.content img,
137-div.content iframe {
138-  display: block;
139-  max-width: 100%;
140-  margin: 0 0 1em
141-}
142-
143-div.content iframe {
144-  border: none
145-}
146-
147-div.content li {
148-  margin-left: 2em;
149-  margin-bottom: 0.2em
150-}
151-
152-div.content ul>li {
153-  margin-left: 1.4em
154-}
155-
156-div.content blockquote {
157-  border-left: 4px solid var(--blockquote-border);
158-  padding: 0 0 0 20px;
159-  color: var(--blockquote-color);
160-  font-style: italic;
161-  letter-spacing: 0.002em;
162-  font-family: var(--serif-font);
163-  font-size: 1.1em
164-}
165-
166-div.content div.file {
167-  padding: 0 0.4em;
168-}
169-
170-div.content pre {
171+pre {
172   overflow-x: auto;
173   padding: 0.4em;
174   border: solid 1px gainsboro;
175   border-radius: 4px;
176 }
177 
178-div.content pre>code {
179+pre>code {
180   padding: 0;
181   background-color: transparent;
182   border-radius: 0
183 }
184 
185-div.content pre>code::before,
186-div.content pre>code::after {
187+pre>code::before,
188+pre>code::after {
189   letter-spacing: inherit;
190   content: none
191 }
192 
193-div.content *:target {
194+*:target {
195   outline: 4px solid #fe0
196 }
197 
198-div.content div.metadata {
199+div.metadata {
200   padding-bottom: 1em;
201 }
202 
203-div.content div.metadata h1 {
204-  font-size: 1em;
205-  margin: 0;
206-}
207-
208-div.content div:not(.metadata) * tr:hover {
209-  background: #efefef;
210-}
211-
212-div.content div.log .commit {
213-  white-space: nowrap;
214-  overflow: hidden;
215-  text-overflow: ellipsis
216-}
217-
218-div.content div.log {
219-  display: block;
220-}
221-
222-div.content div.metadata table,
223-div.content div.log table,
224-div.content div.commit-detail table,
225-div.content div.index table,
226-div.content div.files table {
227-  vertical-align: top;
228-  white-space: nowrap;
229-  width: 100%;
230-}
231-
232-div.content div.log table,
233-div.content div.commit-detail table,
234-div.content div.files table {
235-  font-family: var(--mono-font);
236-}
237-
238-div.content div.index table td.name {
239-  width: 130px;
240-  max-width: 130px;
241-  min-width: 50px;
242-}
243-
244-div.content div.index table td.description {
245-  width: 300px;
246-  max-width: 300px;
247-  min-width: 220px;
248-}
249-
250-div.content * table {
251-  border-collapse: separate;
252-  border-spacing: 2px 4px;
253-}
254-
255-div.content * td>* {
256-  padding: 2px;
257-}
258-
259-div.content * td>* {
260-  max-width: 380px;
261-  vertical-align: top;
262-  overflow: hidden;
263-  white-space: nowrap;
264-  text-overflow: ellipsis;
265-}
266-
267 .chroma {
268   background-color: #ffffff;
269 }
270diff --git a/template.commit.html b/template.commit.html
271index 7f42e39..eadb351 100644
272--- a/template.commit.html
273+++ b/template.commit.html
274@@ -9,46 +9,72 @@
275   <div class="content">
276     {{ template "metadata" .RepoData }}
277     <div class="commit-detail">
278-      <table>
279-        <tbody>
280-          <tr>
281-            <td><b>commit: </b></td>
282-            <td>
283-              <a href="{{ .RepoData.HeadData.BaseURL }}{{ .RepoData.Name }}/commit/{{ .Hash }}/">
284-                {{ .Hash }}
285-              </a>
286-            </td>
287-          </tr>
288-          <tr>
289-            <td><b>author: </b></td>
290-            <td>{{ .Author }} &lt;{{ .AuthorEmail }}&gt;</td>
291-          </tr>
292-          <tr>
293-            <td><b>date: </b></td>
294-            <td> {{ .Date }}</td>
295-          </tr>
296-          <tr>
297-            <td><b>message: </b></td>
298-            <td> {{ .Message }}</td>
299-          </tr>
300-          <tr>
301-            <td><b>stats: </b></td>
302-            <td>
303-              {{ .FileChangeCount }} file(s) changed,
304-              {{ .LinesAdded }} insertions(+),
305-              {{ .LinesDeleted }} deletions(-)
306-            </td>
307-          </tr>
308-          <tr>
309-            <td><b>files: </b></td>
310-            <td>
311-              {{ range .FilesChanged }}
312-              <div>{{ . }}</div>
313-              {{ end }}
314-            </td>
315-          </tr>
316-        </tbody>
317-      </table>
318+      <r-cell span="16">
319+        <div style="padding-bottom: 4px;">
320+          <a href="{{ .RepoData.HeadData.BaseURL }}{{ .RepoData.Name }}/log.html">
321+            <span>
322+              ←
323+              Commit log
324+            </span>
325+          </a>
326+        </div>
327+      </r-cell>
328+      <r-grid columns="16" style="gap: 2px;">
329+        <r-cell span="2">
330+          <div class="ellipsis"><b>commit</b></div>
331+        </r-cell>
332+        <r-cell span="14">
333+          <div class="mono ellipsis">
334+            <a href="{{ .RepoData.HeadData.BaseURL }}{{ .RepoData.Name }}/commit/{{ .Hash }}/">
335+              {{ .Hash }}
336+            </a>
337+          </div>
338+        </r-cell>
339+        <r-cell span="2">
340+          <div class="ellipsis"><b>message</b></div>
341+        </r-cell>
342+        <r-cell span="14">
343+          <div class="mono ellipsis">
344+            {{ .Message }}
345+          </div>
346+        </r-cell>
347+        <r-cell span="2">
348+          <div class="ellipsis"><b>author</b></div>
349+        </r-cell>
350+        <r-cell span="14">
351+          <div class="mono ellipsis">
352+            {{ .Author }} &lt;{{ .AuthorEmail }}&gt;
353+          </div>
354+        </r-cell>
355+        <r-cell span="2">
356+          <div class="ellipsis"><b>date</b></div>
357+        </r-cell>
358+        <r-cell span="14">
359+          <div class="mono ellipsis">
360+            {{ .Date }}
361+          </div>
362+        </r-cell>
363+        <r-cell span="2">
364+          <div class="ellipsis"><b>stats</b></div>
365+        </r-cell>
366+        <r-cell span="14">
367+          <div class="mono ellipsis">
368+            {{ .FileChangeCount }} file(s) changed,
369+            {{ .LinesAdded }} insertions(+),
370+            {{ .LinesDeleted }} deletions(-)
371+          </div>
372+        </r-cell>
373+        <r-cell span="2">
374+          <div class="ellipsis"><b>files</b></div>
375+        </r-cell>
376+        <r-cell span="14">
377+          <div class="mono ellipsis">
378+            {{ range .FilesChanged }}
379+            <div>{{ . }}</div>
380+            {{ end }}
381+          </div>
382+        </r-cell>
383+      </r-grid>
384       {{ .DiffContent }}
385     </div>
386   </div>
387diff --git a/template.file.html b/template.file.html
388index c4246f4..ec3d46f 100644
389--- a/template.file.html
390+++ b/template.file.html
391@@ -8,6 +8,16 @@
392 <body>
393   <div class="content">
394     {{ template "metadata" .RepoData }}
395+    <r-cell span="16">
396+      <div style="padding-bottom: 4px;">
397+        <a href="{{ .RepoData.HeadData.BaseURL }}{{ .RepoData.Name }}/files.html">
398+          <span>
399+            ←
400+            All files
401+          </span>
402+        </a>
403+      </div>
404+    </r-cell>
405     <div class="file">
406       {{ if .CanRender }}
407       {{ .Content }}
408diff --git a/template.files.html b/template.files.html
409index 8f1f951..ad3f37b 100644
410--- a/template.files.html
411+++ b/template.files.html
412@@ -8,7 +8,7 @@
413 <body>
414   <div class="content">
415     {{ template "metadata" .RepoData }}
416-    <div class="files mono">
417+    <div class="mono">
418       <r-grid columns="16">
419         <r-cell span="11">
420           <div class="ellipsis"><b>Name</b></div>
421diff --git a/template.index.html b/template.index.html
422index 3f10752..a527cd9 100644
423--- a/template.index.html
424+++ b/template.index.html
425@@ -8,17 +8,9 @@
426 <body>
427   <div class="content">
428     <div class="metadata">
429-      <table>
430-        <tbody>
431-          <tr>
432-            <td>
433-              <h1>{{ .HeadData.SiteName }}</h1>
434-            </td>
435-          </tr>
436-        </tbody>
437-      </table>
438+      <b>{{ .HeadData.SiteName }}</b>
439     </div>
440-    <div class="index">
441+    <div>
442       <div class="metadata">
443         <r-grid columns="12">
444           <r-cell span="2">
445@@ -41,13 +33,13 @@
446             <div>{{ .Description }}</div>
447           </r-cell>
448           <r-cell span="3">
449-            <div>
450+            <div class="ellipsis">
451               {{ if .HostGit }}
452-              <a href="{{ .BaseURL }}{{ .Name }}.git">
453+              <a class="mono" href="{{ .BaseURL }}{{ .Name }}.git">
454                 {{ .BaseURL }}{{ .Name }}.git
455               </a>
456               {{ else if not (eq .PublishedGitURL "") }}
457-              <a href="{{ .PublishedGitURL }}">
458+              <a class="mono" href="{{ .PublishedGitURL }}">
459                 {{ .PublishedGitURL }}
460               </a>
461               {{ else }}
462diff --git a/template.log.html b/template.log.html
463index 19c0ac9..2b4c4a2 100644
464--- a/template.log.html
465+++ b/template.log.html
466@@ -8,7 +8,7 @@
467 <body>
468   <div class="content">
469     {{ template "metadata" .RepoData }}
470-    <div class="log mono">
471+    <div class="mono">
472       <r-grid columns="16">
473         <r-cell span="3">
474           <div class="ellipsis"><b>Date</b></div>
475diff --git a/template.partials.html b/template.partials.html
476index 3a2602e..3204601 100644
477--- a/template.partials.html
478+++ b/template.partials.html
479@@ -10,61 +10,54 @@
480 
481 {{ define "metadata" }}
482 <div class="metadata">
483-  <table>
484-    <tbody>
485-      <tr>
486-        <td>
487-          <a href="{{ .HeadData.BaseURL }}">
488-            <span>
489-              ←
490-              Back to main page
491-            </span>
492-          </a>
493-        </td>
494-      </tr>
495-      <tr>
496-        <td>&nbsp;</td>
497-      </tr>
498-      <tr>
499-        <td>
500-          <h1>{{ .Name }}</h1>
501-          <span class="desc">
502-            {{ .Description }}
503+  <r-grid columns="12" style="gap: 2px;">
504+    <r-cell span="12">
505+      <div class="ellipsis">
506+        <a href="{{ .HeadData.BaseURL }}">
507+          <span>
508+            ←
509+            Back to main page
510           </span>
511-        </td>
512-      </tr>
513-      <tr>
514-        <td>
515-          git clone {{ .HeadData.BaseURL }}{{ .Name }}.git
516-        </td>
517-      </tr>
518-      {{ if not (eq .PublishedGitURL "") }}
519-      <tr>
520-        <td>
521-          alt url: <a href="{{ .PublishedGitURL }}">{{ .PublishedGitURL }}</a>
522-        </td>
523-      </tr>
524-      {{ end }}
525-      <tr>
526-        <td>
527-          <a href="{{ .HeadData.BaseURL }}{{ .Name }}/log.html">Log</a>
528-          |
529-          <a href="{{ .HeadData.BaseURL }}{{ .Name }}/files.html">Files</a>
530-          {{ if not (eq .ReadMePath "") }}
531-          |
532-          <a href="{{ .HeadData.BaseURL }}{{ .Name }}/files/{{ .ReadMePath }}/index.html">
533-            {{ .ReadMePath }}
534-          </a>
535-          {{ end }}
536-          {{ if not (eq .LicenseFilePath "") }}
537-          |
538-          <a href="{{ .HeadData.BaseURL }}{{ .Name }}/files/{{ .LicenseFilePath }}/index.html">
539-            {{ .LicenseFilePath }}
540-          </a>
541-          {{ end }}
542-        </td>
543-      </tr>
544-    </tbody>
545-  </table>
546+        </a>
547+      </div>
548+    </r-cell>
549+    <r-cell span="12" style="padding-top: 12px;">
550+      <div class="ellipsis">
551+        <div><b>{{ .Name }}</b></div>
552+        <div>{{ .Description }}</div>
553+      </div>
554+    </r-cell>
555+    <r-cell span="12">
556+      <div class="mono ellipsis">
557+        git clone {{ .HeadData.BaseURL }}{{ .Name }}.git
558+      </div>
559+    </r-cell>
560+    {{ if not (eq .PublishedGitURL "") }}
561+    <r-cell span="12">
562+      <div class="ellipsis">
563+        alt url: <a href="{{ .PublishedGitURL }}">{{ .PublishedGitURL }}</a>
564+      </div>
565+    </r-cell>
566+    {{ end }}
567+    <r-cell span="12">
568+      <div>
569+        <a href="{{ .HeadData.BaseURL }}{{ .Name }}/log.html">Log</a>
570+        |
571+        <a href="{{ .HeadData.BaseURL }}{{ .Name }}/files.html">Files</a>
572+        {{ if not (eq .ReadMePath "") }}
573+        |
574+        <a href="{{ .HeadData.BaseURL }}{{ .Name }}/files/{{ .ReadMePath }}/index.html">
575+          {{ .ReadMePath }}
576+        </a>
577+        {{ end }}
578+        {{ if not (eq .LicenseFilePath "") }}
579+        |
580+        <a href="{{ .HeadData.BaseURL }}{{ .Name }}/files/{{ .LicenseFilePath }}/index.html">
581+          {{ .LicenseFilePath }}
582+        </a>
583+        {{ end }}
584+      </div>
585+    </r-cell>
586+  </r-grid>
587 </div>
588 {{ end }}
589\ No newline at end of file