templates: index rework

Anirudh Oppiliappan x@icyphox.sh

Sat, 17 Dec 2022 12:46:09 +0530

commit

9649b3ed2b252cab6ab4076d58814790582f07f0

parent

d083d5d72e4bf496b8152d14986818a5b63fe301

6 files changed, 140 insertions(+), 22 deletions(-)

jump to

static/style.css
templates/404.html
templates/500.html
templates/head.html
templates/index.html
templates/nav.html

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.html → templates/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.html → templates/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.html → templates/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.html → templates/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.html → templates/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 }}

all repos — elgit @ 9649b3ed2b252cab6ab4076d58814790582f07f0

fork of legit: web frontend for git, written in go