Updating HTML design to be more minimalistic. - staticgit - A git static site generator, the site you are viewing now!
 (DIR) Log
 (DIR) Files
 (DIR) Refs
 (DIR) README
       ---
 (DIR) commit 9d8853a409012768220b56db8959cdc7f73abff9
 (DIR) parent 3ae097a4ff6feb3c58b3e5c5aae916616d5bddf6
 (HTM) Author: Jay Scott <me@jay.scot>
       Date:   Sun, 14 Jul 2024 11:21:13 +0100
       
       Updating HTML design to be more minimalistic.
       
       Diffstat:
         M main.go                             |     108 ++++++++++++++-----------------
       
       1 file changed, 50 insertions(+), 58 deletions(-)
       ---
 (DIR) diff --git a/main.go b/main.go
       @@ -32,63 +32,61 @@ type RepoInfo struct {
        }
        
        const (
       -        base = `
       +
       +    base = `
        <!DOCTYPE html>
       -<html>
       +<html lang="en">
        <head>
       -  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       -  <meta name="viewport" content="width=device-width, initial-scale=1" />
       -  <title>{{.Title}}</title>
       -  <link rel="icon" type="image/png" href="{{.IconPath}}favicon.png" />
       -  <style>
       -    body{color:#000;background-color:#FFF;font-family:monospace}
       -        table{padding-left:20px}
       -        h1{font-size:2em;margin:10}
       -        h2{font-size:1.5em;margin:10}
       -        table td{padding:0 .4em}
       -        a{color:#000;text-decoration:none}
       -        a:hover{color:#333;font-weight:700}
       -        a:target{background-color:#CCC}
       -        .desc{color:#555;margin-bottom:1em}
       -        hr{border:0;border-top:1px solid #AAA;height:2px}
       -        table tr:hover{background-color:#EEE}
       -  </style>
       +    <meta charset="UTF-8">
       +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       +    <title>{{.Title}}</title>
       +    <style>
       +        body {
       +            font-family: monospace;
       +            line-height: 1.6;
       +            margin: 0;
       +            padding: 20px;
       +            max-width: 1200px;
       +            margin: 0 auto;
       +                        background-color: #f4f4f4;
       +        }
       +        h1, h2 { margin: 0.5em 0; }
       +        table {
       +            border-collapse: collapse;
       +            width: 100%;
       +        }
       +        td, th {
       +            border-bottom: 1px solid #ccc;
       +            padding: 3px;
       +            text-align: left;
       +        }
       +        @media (max-width: 600px) {
       +            body { padding: 10px; }
       +            table { font-size: 14px; }
       +        }
       +    </style>
        </head>
        <body>
       -  <table>
       -    <tr>
       -      <td>
       -                  <img src="{{.IconPath}}logo.png" alt="" width="32" height="32" />
       -          </td>
       -      <td>
       -              <span class="desc">{{.Title}}</span>
       -          </td>
       -    </tr>
       -  </table>
       -
       -  <hr/>
       -
       -  <div id="content">
       +    <h1>{{.Title}}</h1>
            {{template "content" .}}
       -  </div>
        </body>
        </html>
        `
       -        details = `
       +
       +    details = `
        {{define "content"}}
          <pre>{{.ReadmeContent}}</pre>
        
       -  <h2 id="commits">Commit History</h2>
       -  <hr>
       +  <h2>Commit History</h2>
          <table>
            <thead>
              <tr>
       -        <td><b>Date</b></td>
       -        <td><b>Message</b></td>
       -        <td><b>Author</b></td>
       -        <td><b>Hash</b></td>
       -                <td><b>Added</b></td>
       -        <td><b>Deleted</b></td>
       +        <th>Date</th>
       +        <th>Message</th>
       +        <th>Author</th>
       +        <th>Hash</th>
       +        <th>Added</th>
       +        <th>Deleted</th>
              </tr>
            </thead>
            <tbody>
       @@ -98,40 +96,34 @@ const (
                <td>{{.Message}}</td>
                <td>{{.Author}}</td>
                <td>{{.Hash}}</td>
       -                <td style="color: green;">+{{.Added}}</td>
       -        <td style="color: red;">-{{.Removed}}</td>
       +        <td>+{{.Added}}</td>
       +        <td>-{{.Removed}}</td>
              </tr>
       -
              {{end}}
            </tbody>
          </table>
        
       -  <h2 id="files">Files</h2>
       -  <hr>
       +  <h2>Files</h2>
          <ul>
            {{range .Files}}
            <li>{{.}}</li>
            {{end}}
          </ul>
       -
        {{end}}
        `
        
       -        index = `
       +    index = `
        {{define "content"}}
       -  <table id="index">
       +  <table>
            <thead>
              <tr>
       -        <td><b>Name</b></td>
       -        <td><b>Description</b></td>
       -        <td><b>Last commit</b></td>
       +        <th>Name</th>
       +        <th>Description</th>
       +        <th>Last commit</th>
              </tr>
            </thead>
            <tbody>
              {{range $group, $repos := .Repos}}
       -      <tr>
       -        <td colspan="4">{{if eq $group ""}}{{else}}<hr>{{end}}</td>
       -      </tr>
              {{range $repos}}
              <tr>
                <td><a href="{{.Name}}/index.html">{{.Name}}</a></td>
       @@ -174,7 +166,7 @@ func generateIndex(repoInfos []RepoInfo) error {
                        IconPath string
                        Repos    map[string][]RepoInfo
                }{
       -                Title:    "repos for days!",
       +                Title:    "Repos for days!",
                        IconPath: "./",
                        Repos:    groupedRepos,
                })