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>
|
<title>404</title>
|
||||||
{{ template "head" . }}
|
{{ template "head" . }}
|
||||||
<body>
|
<body>
|
||||||
404 — nothing like that here
|
{{ template "nav" . }}
|
||||||
|
<main>
|
||||||
|
<h3>404 — nothing like that here.</h3>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,11 @@
|
||||||
<title>500</title>
|
<title>500</title>
|
||||||
{{ template "head" . }}
|
{{ template "head" . }}
|
||||||
<body>
|
<body>
|
||||||
500 — something broke!
|
{{ template "nav" . }}
|
||||||
|
<main>
|
||||||
|
<h3>500 — something broke!</h3>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -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 }}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 }}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue