templates: index rework

This commit is contained in:
Anirudh Oppiliappan 2022-12-17 12:46:09 +05:30
parent d083d5d72e
commit 9649b3ed2b
No known key found for this signature in database
GPG Key ID: 8A93F96F78C5D4C4
6 changed files with 140 additions and 22 deletions

112
static/style.css Normal file
View File

@ -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;
}
}

View File

@ -3,7 +3,11 @@
<title>404</title> <title>404</title>
{{ template "head" . }} {{ template "head" . }}
<body> <body>
404 &mdash; nothing like that here {{ template "nav" . }}
<main>
<h3>404 &mdash; nothing like that here.</h3>
</main>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View File

@ -3,7 +3,11 @@
<title>500</title> <title>500</title>
{{ template "head" . }} {{ template "head" . }}
<body> <body>
500 &mdash; something broke! {{ template "nav" . }}
<main>
<h3>500 &mdash; something broke!</h3>
</main>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View File

@ -3,6 +3,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/style.css" type="text/css"> <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 --> <!-- other meta tags here -->
</head> </head>
{{ end }} {{ end }}

View File

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

View File

@ -4,12 +4,12 @@
<li><a href="/">all repos</a> <li><a href="/">all repos</a>
{{ if .name }} {{ if .name }}
<li><a href="/{{ .name }}">{{ .name }}</a> <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> <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> </ul>
</nav> </nav>
{{ end }} {{ end }}