Hi… I am well aware that this diff view is very suboptimal. It will be fixed when the refactored server comes along!
repo_index.html, style.css: CSS state machines
html {
font-family: sans-serif;
background-color: var(--background-color);
color: var(--text-color);
--background-color: hsl(0, 0%, 100%);
--text-color: hsl(0, 0%, 0%);
--link-color: hsl(320, 50%, 36%);
--light-text-color: hsl(0, 0%, 45%);
--darker-border-color: hsl(0, 0%, 72%);
--lighter-border-color: hsl(0, 0%, 85%);
--text-decoration-color: hsl(0, 0%, 72%);
--darker-box-background-color: hsl(0, 0%, 92%);
--lighter-box-background-color: hsl(0, 0%, 95%);
}
@media (prefers-color-scheme: dark) {
html {
--background-color: hsl(0, 0%, 0%);
--text-color: hsl(0, 0%, 100%);
--link-color: hsl(320, 50%, 76%);
--light-text-color: hsl(0, 0%, 78%);
--darker-border-color: hsl(0, 0%, 35%);
--lighter-border-color: hsl(0, 0%, 25%);
--text-decoration-color: hsl(0, 0%, 30%);
--darker-box-background-color: hsl(0, 0%, 20%);
--lighter-box-background-color: hsl(0, 0%, 15%);
}
}
html, code, pre {
font-size: 1rem; /* TODO: Not always correct */
}
footer {
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
display: block;
padding: 0 5px;
width: fit-content;
text-align: center;
color: var(--light-text-color);
}
footer a:link, footer a:visited {
color: inherit;
}
.padding-wrapper {
margin: 1rem auto;
max-width: 60rem;
padding: 0 5px;
}
a:link, a:visited {
text-decoration-color: var(--text-decoration-color);
color: var(--link-color);
}
code:not(pre > code) {
background-color: var(--lighter-box-background-color);
border-radius: 2px;
padding: 2px;
}
table {
border: var(--lighter-border-color) solid 1px;
border-spacing: 0px;
border-collapse: collapse;
}
table.wide {
width: 100%;
}
td, th {
padding: 3px 5px;
border: var(--lighter-border-color) solid 1px;
}
th {
background-color: var(--lighter-box-background-color);
}
th[scope=row] {
text-align: left;
}
tr.title-row > th {
background-color: var(--darker-box-background-color);
}
td > pre {
margin: 0;
}
td#readme > *:last-child {
margin-bottom: 0;
}
td#readme > *:first-child {
margin-top: 0;
}
.commit-id {
font-family: monospace;
}
pre, .scroll {
overflow-x: auto;
}
.toggle-table-off, .toggle-table-on {
display: none;
}
.toggle-table-off + table > thead > tr > th, .toggle-table-on + table > thead > tr > th {
padding: 0;
}
.toggle-table-off + table > thead > tr > th > label, .toggle-table-on + table > thead > tr > th > label {
width: 100%;
display: inline-block;
padding: 3px 1px;
cursor: pointer;
}
.toggle-table-off:checked + table > tbody {
display: none;
}
.toggle-table-on + table > tbody {
display: none;
}
.toggle-table-on:checked + table > tbody {
display: table-row-group;
}
{{- define "repo_index" -}}
<!DOCTYPE html>
<html lang="en">
<head>
{{ template "head_common" . }}
<title>{{ .group_name }}/repos/{{ .repo_name }} – Lindenii Forge</title>
</head>
<body class="repo-index">
<div class="padding-wrapper scroll">
<input id="toggle-table-recent-commits" type="checkbox" class="toggle-table-off" />
<table id="recent-commits" class="wide"> <thead> <tr class="title-row">
<th colspan="3">Recent Commits (<a href="log/{{ .ref }}/">see all</a>)</th>
</tr>
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Time</th>
<th colspan="3"><label for="toggle-table-recent-commits">Recent Commits (<a href="log/{{ .ref }}/">see all</a>)</label></th>
</tr>
</thead>
<tbody>
{{- range .commits }}
<tr>
<td class="commit-title"><a href="commit/{{ .ID }}">{{ .Message | first_line }}</a></td>
<td class="commit-author">
<a class="email-name" href="mailto:{{ .Author.Email }}">{{ .Author.Name }}</a>
</td>
<td class="commit-time">
{{ .Author.When.Format "2006-01-02 15:04:05 -0700" }}
</td>
</tr>
{{- end }}
</tbody>
</table>
</div>
<div class="padding-wrapper scroll">
<input id="toggle-table-file-tree" type="checkbox" class="toggle-table-off" />
<table id="file-tree" class="wide"> <thead> <tr class="title-row">
<th colspan="3">/ on {{ .ref }}</th>
</tr>
<tr>
<th scope="col">Mode</th>
<th scope="col">Name</th>
<th scope="col">Size</th>
<th colspan="3"><label for="toggle-table-file-tree">/ on {{ .ref }}</label></th>
</tr>
</thead>
<tbody>
{{- $ref := .ref }}
{{- range .files }}
<tr>
<td class="file-mode">{{ .Mode }}</td>
<td class="file-name"><a href="tree/{{ $ref }}/{{ .Name }}">{{ .Name }}</a>{{ if not .Is_file }}/{{ end }}</td>
<td class="file-size">{{ .Size }}</td>
</tr>
{{- end }}
</tbody>
</table>
</div>
<div class="padding-wrapper">
<div id="refs">
</div>
</div>
<div class="padding-wrapper">
{{ if .readme }}
<input id="toggle-table-readme" type="checkbox" class="toggle-table-off" />
<table class="wide"> <thead> <tr class="title-row">
<th> README.md </th>
<th><label for="toggle-table-readme">README</label></th>
</tr>
</thead>
<tbody>
<tr>
<td id="readme">
{{ .readme -}}
</td>
</tr>
</tbody>
</table>
{{ end }}
</div>
<footer>
{{ template "footer" . }}
</footer>
</body>
</html>
{{- end -}}
{{- define "repo_raw_dir" -}}
<!DOCTYPE html>
<html lang="en">
<head>
{{ template "head_common" . }}
<title>{{ .group_name }}/repos/{{ .repo_name }}/{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }} – Lindenii Forge</title>
</head>
<body class="repo-raw-dir">
<div class="padding-wrapper scroll">
<table id="file-tree" class="wide">
<thead>
<tr class="title-row">
<th colspan="3">
(Raw) /{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }} on {{ .ref }}
</th>
</tr>
<tr> <th scope="col">Mode</th> <th scope="col">Name</th> <th scope="col">Size</th> </tr>
</thead>
<tbody>
{{- $path_spec := .path_spec }}
{{- range .files }}
<tr>
<td class="file-mode">{{ .Mode }}</td>
<td class="file-name"><a href="{{ .Name }}{{ if not .Is_file }}/{{ end }}">{{ .Name }}</a>{{ if not .Is_file }}/{{ end }}</td>
<td class="file-size">{{ .Size }}</td>
</tr>
{{- end }}
</tbody>
</table>
</div>
<div class="padding-wrapper">
<div id="refs">
</div>
</div>
<footer>
{{ template "footer" . }}
</footer>
</body>
</html>
{{- end -}}
{{- define "repo_tree_dir" -}}
<!DOCTYPE html>
<html lang="en">
<head>
{{ template "head_common" . }}
<title>{{ .group_name }}/repos/{{ .repo_name }}/{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }} – Lindenii Forge</title>
</head>
<body class="repo-tree-dir">
<div class="padding-wrapper scroll">
<table id="file-tree" class="wide">
<thead>
<tr class="title-row">
<th colspan="3">
/{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }} on {{ .ref }}
</th>
</tr>
<tr> <th scope="col">Mode</th> <th scope="col">Name</th> <th scope="col">Size</th> </tr>
</thead>
<tbody>
{{- $path_spec := .path_spec }}
{{- range .files }}
<tr>
<td class="file-mode">{{ .Mode }}</td>
<td class="file-name"><a href="{{ .Name }}{{ if not .Is_file }}/{{ end }}">{{ .Name }}</a>{{ if not .Is_file }}/{{ end }}</td>
<td class="file-size">{{ .Size }}</td>
</tr>
{{- end }}
</tbody>
</table>
</div>
<div class="padding-wrapper">
<div id="refs">
</div>
</div>
<div class="padding-wrapper">
{{ if .readme }}
<table class="wide">
<thead>
<tr class="title-row">
<th>
README.md
</th>
</tr>
</thead>
<tbody>
<tr>
<td id="readme">
{{ .readme -}}
</td>
</tr>
</tbody>
</table>
{{ end }}
</div>
<footer>
{{ template "footer" . }}
</footer>
</body>
</html>
{{- end -}}