all repos — legit @ 9649b3ed2b252cab6ab4076d58814790582f07f0

web frontend for git, written in go

templates: index rework
Anirudh Oppiliappan x@icyphox.sh
Sat, 17 Dec 2022 12:46:09 +0530
commit

9649b3ed2b252cab6ab4076d58814790582f07f0

parent

d083d5d72e4bf496b8152d14986818a5b63fe301

A static/style.css

@@ -0,0 +1,112 @@

+:root { + --light: #f4f4f4; + --cyan: #509c93; + --light-gray: #eee; + --medium-gray: #ddd; + --gray: #6a6a6a; + --dark: #444; + --darker: #222; +} + +html { + background: var(--light); + -webkit-text-size-adjust: none; + font-family: "InterVar", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; +} + +::selection { + background: var(--medium-gray); + opacity: 0.3; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + max-width: 750px; + padding: 0 13px; + margin: 40px auto; +} + +main, footer { + font-size: 1rem; + padding: 0; + line-height: 160%; +} + +main h1, h2, h3, .small-heading { + font-family: "InterDisplay", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; + font-weight: 500; +} + +strong { + font-weight: 500; +} + +main h1 { + font-size: 20px; + padding: 10px 0 10px 0; +} + +main h2 { + font-size: 18px; +} + +main h2, h3 { + padding: 20px 0 15px 0; +} + +nav { + padding-top: 1rem; +} + +nav ul { + padding: 0; + margin: 0; + list-style: none; + padding-bottom: 20px; +} + +nav ul li { + padding-right: 10px; + display: inline-block; +} + +a { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + word-wrap: break-word; +} + +a { + color: var(--darker); + border-bottom: 1.5px solid var(--medium-gray); +} + +a:hover { + border-bottom: 1.5px solid var(--gray); +} + +.repo-index { + display: grid; + grid-template-columns: 6em 1fr 7em; + grid-row-gap: 0.5em; +} + +.repo-index-headings { + display: grid; + grid-template-columns: 6em 1fr 7em; + padding-bottom: 1.2em; + padding-top: 1.2em; +} + +@media (max-width: 385px) { + .repo-index { + grid-row-gap: 0.8em; + } +}
M templates/404.htmltemplates/404.html

@@ -3,7 +3,11 @@ <html>

<title>404</title> {{ template "head" . }} <body> - 404 &mdash; nothing like that here + {{ template "nav" . }} + <main> + <h3>404 &mdash; nothing like that here.</h3> + </main> </body> + </html> {{ end }}
M templates/500.htmltemplates/500.html

@@ -3,7 +3,11 @@ <html>

<title>500</title> {{ template "head" . }} <body> - 500 &mdash; something broke! + {{ template "nav" . }} + <main> + <h3>500 &mdash; something broke!</h3> + </main> </body> + </html> {{ end }}
M templates/head.htmltemplates/head.html

@@ -3,6 +3,7 @@ <head>

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/style.css" type="text/css"> + <link rel="stylesheet" href="https://cdn.icyphox.sh/fonts/inter.css" type="text/css"> <!-- other meta tags here --> </head> {{ end }}
M templates/index.htmltemplates/index.html

@@ -7,22 +7,19 @@ <h1>{{ .meta.Title }}</h1>

<h2>{{ .meta.Description }}</h2> </header> <body> - {{ template "nav" . }} <main> - <table> - <tr> - <td>repository</td> - <td>description</td> - <td>last active</td> - </tr> - {{ range .info }} - <tr> - <td><a href="/{{ .Name }}">{{ .Name }}</a></td> - <td>{{ .Desc }}</td> - <td>{{ .Idle }}</td> - </tr> - {{ end }} - </table> + <div class="repo-index-headings small-heading"> + <div>repository</div> + <div>description</div> + <div>idle</div> + </div> + <div class="repo-index"> + {{ range .info }} + <div><a href="/{{ .Name }}">{{ .Name }}</a></div> + <div>{{ .Desc }}</div> + <div>{{ .Idle }}</div> + {{ end }} + </div> </main> </body> </html>
M templates/nav.htmltemplates/nav.html

@@ -4,12 +4,12 @@ <ul>

<li><a href="/">all repos</a> {{ if .name }} <li><a href="/{{ .name }}">{{ .name }}</a> - {{ end }} - {{ if .ref }} - <li><a href="/{{ .name }}/tree/{{ .ref }}/">tree</a> - <li><a href="/{{ .name }}/log/{{ .ref }}">log</a> - {{ end }} <li><a href="/{{ .name }}/refs">refs</a> + {{ if .ref }} + <li><a href="/{{ .name }}/tree/{{ .ref }}/">tree</a> + <li><a href="/{{ .name }}/log/{{ .ref }}">log</a> + {{ end }} + {{ end }} </ul> </nav> {{ end }}