templates: index rework
This commit is contained in:
Anirudh Oppiliappan
parent
d083d5d72e
commit
9649b3ed2b
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,11 @@
|
|||
<title>404</title>
|
||||
{{ template "head" . }}
|
||||
<body>
|
||||
404 — nothing like that here
|
||||
{{ template "nav" . }}
|
||||
<main>
|
||||
<h3>404 — nothing like that here.</h3>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@
|
|||
<title>500</title>
|
||||
{{ template "head" . }}
|
||||
<body>
|
||||
500 — something broke!
|
||||
{{ template "nav" . }}
|
||||
<main>
|
||||
<h3>500 — something broke!</h3>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<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 }}
|
||||
|
|
|
|||
|
|
@ -7,22 +7,19 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<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 }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue