templates: new design, cleanup

6 files changed, 164 insertions, 143 deletions

diff --git a/templates/admin-edit.html b/templates/admin-edit.html
index 972c2c7..12b4e54 100644
--- a/templates/admin-edit.html
+++ b/templates/admin-edit.html
@@ -1,6 +1,8 @@
 {{ template "layout.html" . }}
 {{ define "content" }}
-<table class="admin" id="header">
+<div class="header-desc">
+{{ block "topics" . }}{{ end }}
+<table>
   <tr>
   <td>
   {{ if .LastPaperDL }}
@@ -16,7 +18,7 @@
     <td>
       <form method='post' action='/admin/edit/'>
         <input type="text" id="rename-category" name="rename-to" placeholder="Mathematics"/>
-        <select class="sel" name="rename-category" id="category">
+        <select name="rename-category" id="category">
         {{ range $category, $papers := .Papers.List }}
         <option value="{{ $category }}">{{ $category }}</option>
         {{ end }}
@@ -27,19 +29,10 @@
   {{ end }}
   </tr>
 </table>
-<div class="cat-cont">
-  <div class="cat">
-    {{ range $category, $paper := .Papers.List }}
-    <span class="cat"><a href="#{{ $category }}">{{ $category }}</a></span>
-    {{ end }}
-  </div>
-</div>
-<p class="Pp"><a class='active' href='/admin/'>Back</a></p>
-<div class='content'>
 {{ if gt $categoryCount 0 }}
+</div>
 <form method='post' action='/admin/edit/'>
-  <div class="action">
-  <select class="sel" name="action" id="Action">
+  <select name="action" id="Action">
     <optgroup label="Action">
       <option value="delete">Delete</option>
     </optgroup>
@@ -50,70 +43,56 @@
     </optgroup>
   </select>
   <input type="submit" value="Save" />
-  </div>
-<div>
-{{ range $category, $papers := .Papers.List }}
+  <p><a href='/admin/'>Back</a></p>
+</div>
+  {{ range $category, $papers := .Papers.List }}
   {{ $paperCount := len $papers }}
   <input type="checkbox" id="{{ $category }}" name="category" value="{{ $category }}"/>
   <label for="{{ $category }}">
   <span id='{{ $category }}'>
-  <a class="permalink" href="#{{ $category }}">{{ $category }}</a>
+  <a class="category-title" href="#{{ $category }}">{{ $category }}</a>
   </span>
   </label>
   {{ range $path, $paper := $papers }}
-  <div class="paper">
+  <div>
     {{ if $paper.Meta.Title }}
-    <span class="title">
       <input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"/> 
-      <a href='/download/{{ $path }}' title='{{ normalizeStr $paper.Meta.Title }}'>
-        {{- normalizeStr $paper.Meta.Title }}</a>
-    </span>
+      <a class="paper-title" href='/download/{{ $path }}' title='{{ normalizeStr $paper.Meta.Title }}'>{{- normalizeStr $paper.Meta.Title }}</a>
     <br />
     {{ else }}
-    <span class="title">
-      <input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"/>
-      <label for="{{ $path }}"> 
-        <a href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>{{ $paper.PaperName }}</a>
-      </label>
-    </span>
+    <input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"/>
+    <label for="{{ $path }}"> 
+      <a class="paper-title" href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>{{ $paper.PaperName }}</a>
+    </label>
     <br />
     {{ end }}
-
+    <div class="paper">
     {{ $contCount := len $paper.Meta.Contributors }}{{ if ge $contCount 1 }}
-    <span class="authors">
-      {{- range $index, $contributor := $paper.Meta.Contributors -}}
-      {{- if $index }}, {{ end }}
-      {{- $contributor.FirstName }} {{ $contributor.LastName -}}
-      {{- end -}}
-    </span>
+    {{- range $index, $contributor := $paper.Meta.Contributors -}}
+    {{- if $index }}, {{ end }}
+    {{- $contributor.FirstName }} {{ $contributor.LastName -}}
+    {{- end -}}
     <br />
     {{ end }}
 
     {{ $hasVal := false }}
     {{ if $paper.Meta.PubYear }}{{ $hasVal = true }}
-    <span class="year">{{ $paper.Meta.PubYear }}</span>
+    <span class="paper-year">{{ $paper.Meta.PubYear }}</span>
     {{ end }}
 
     {{ if $paper.Meta.DOI }}{{ if $hasVal }}- {{end}}
-    <span class="doi">
-      <a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a>
-    </span>
+    <a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a>
     {{ else if $paper.Meta.ArxivID }}
     {{ if $hasVal }}- {{ end }}
-    <span class="doi">
-      <a href="https://arxiv.org/abs/{{ $paper.Meta.ArxivID }}">{{ $paper.Meta.ArxivID }}</a>
-    </span>
+    <a href="https://arxiv.org/abs/{{ $paper.Meta.ArxivID }}">{{ $paper.Meta.ArxivID }}</a>
     {{ else if $paper.Meta.Resource }}
     {{ if $hasVal }}- {{ end }}
-    <span class="doi">
-      <a href="{{ $paper.Meta.Resource }}">{{ $paper.Meta.Resource }}</a>
-    </span>
+    <a href="{{ $paper.Meta.Resource }}">{{ $paper.Meta.Resource }}</a>
     {{ end }}
 
     {{ if $paper.Meta.Journal }}
     {{ if $hasVal }}- {{ end }}
-    <span class="journal">{{ $paper.Meta.Journal }}
-    </span>
+      {{ $paper.Meta.Journal }}
     {{ end }}
 
   </div>
@@ -121,5 +100,5 @@
 {{ end }}
 </div>
 {{ end }}
-</form></div>
+</form>
 {{ end }}
diff --git a/templates/admin.html b/templates/admin.html
index 2226a83..b3d2427 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -1,15 +1,19 @@
 {{ template "layout.html" . }}
 {{ define "content" }}
-<table class="admin">
+<div class="header-desc">
+{{ block "topics" . }}{{ end }}
+<table>
+  {{ if .Status }}
   <tr>
   <td>
-  {{ if .LastPaperDL }}
-  {{ .Status }} (<a style="text-decoration: underline;" href="/download/{{ .LastPaperDL }}">download</a>)
-  {{ else }}
-  {{ .Status }}
-  {{ end }}
+    {{ if .LastPaperDL }}
+    {{ .Status }} (<a href="/download/{{ .LastPaperDL }}">download</a>)
+    {{ else }}
+    {{ .Status }}
+    {{ end }}
   </td>
   </tr>
+  {{ end }}
   <tr>
   <td>
     <form method='post' action='/admin/add/'>
@@ -24,7 +28,7 @@
   <td>
     <form method='post' action='/admin/add/'>
     <input type='text' name='dl-paper' placeholder="URL or DOI" value=''/>
-    <select class="sel" name="dl-category" id="category">
+    <select name="dl-category" id="category">
     {{ $lastUsedCategory := .LastUsedCategory }}
     {{ if $lastUsedCategory }}
       <option value="{{ .LastUsedCategory }}">{{ $lastUsedCategory }}</option>
@@ -41,17 +45,9 @@
   </tr>
   {{ end }}
 </table>
-{{ if gt $categoryCount 0 }}
-<div class="cat-cont">
-  <div class="cat">
-    {{ range $category, $paper := .Papers.List }}
-    <span class="cat"><a href="#{{ $category }}">{{ $category }}</a></span>
-    {{ end }}
-  </div>
 </div>
-<p class="Pp"><a class='active' href='/admin/edit/'>Edit</a></p>
+<p><a href='/admin/edit/'>Edit</a></p>
 <div class='content'>
 {{ block "list" . }}{{ end }}
 </div>
 {{ end }}
-{{ end }}
diff --git a/templates/index.html b/templates/index.html
index 727e727..83e6d79 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,22 +1,19 @@
 {{ template "layout.html" . }}
 {{ define "content" }}
+<div class="header-desc">
+<p>
+The articles in this library have been included in light of their social,
+ethical, environmental, and political significance. They provide academic
+scaffolding to movements which endeavor to challenge and dismantle oppressive
+systems of domination and exploitation, cultivate relationships of love and
+mutual care, and engage in the collective struggle for human and non-human
+liberation.
+</p>
 
-<div class="content">
-{{ $categoryCount := len .Papers.List }}
-{{ if gt $categoryCount 0 }}
-<div class="cat-cont">
-  <div class="cat">
-    {{ range $category, $paper := .Papers.List }}
-    <span class="cat"><a href="#{{ $category }}">{{ $category }}</a></span>
-    {{ end }}
-  </div>
+{{ block "topics" . }}{{ end }}
 </div>
-<p class="Pp"><a class='active' href='/admin/'>Manage</a></p>
+
 {{ block "list" . }}{{ end }}
-</div>
-{{ else }}
-<p>nothing here yet, 
-<a style="text-decoration:underline;" href="/admin/">create a category</a> 
+<a href="/admin/">create a category</a> 
 to start downloading papers</p>
 {{ end }}
-{{ end }}
diff --git a/templates/layout.html b/templates/layout.html
index 9afe143..d389ca8 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -5,47 +5,96 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>Crane</title>
 <style>
-table.head, table.foot { width: 100%; }
-td.head-rtitle, td.foot-os { text-align: right; }
-td.head-vol { text-align: center; }
-div.Pp { margin: 1ex 0ex; }
-div.Nd, div.Bf, div.Op { display: inline; }
-span.Pa, span.Ad { font-style: italic; }
-span.Ms { font-weight: bold; }
-dl.Bl-diag > dt { font-weight: bold; }
-code.Nm, code.Fl, code.Cm, code.Ic, code.In, code.Fd, code.Fn,
-code.Cd { font-weight: bold; font-family: inherit; }
-
-html { font-family: monospace; line-height: 1.25em; }
-body { max-width: 80ch; margin: 1em auto; padding: 0 1ch; }
-table { border-collapse: collapse; }
-table.Nm code.Nm { padding-right: 1ch; }
-table.foot { margin-top: 1em; }
-
-html { background-color: var(--ansi16); color: var(--ansi17); }
-a { color: var(--ansi4); }
-a:visited { color: var(--ansi5); }
-a.permalink { color: var(--ansi3); text-decoration: none; }
-
-div.paper { padding-bottom: 1em; }
-div.cat-cont { }
-div.cat { justify-content: space-between; display: flex; flex-wrap: wrap; }
-div.cat a { margin-right: 1rem; }
-div.action { padding-bottom: 1em; margin-left: 1em; }
-span.doi a { text-decoration: none; }
-span.title a { text-decoration: underline; color: blue; }
-table.head a { text-decoration: none; }
-table.admin { margin-bottom: 1em; }
+html { font-family: Helvetica,Arial,sans-serif; }
+body { width: 45em; max-width: 90%; margin: auto; line-height: 1.45; }
+
+h1 { 
+  float: left;
+}
+
+nav {
+  text-align: right;
+}
+
+nav ul {
+  list-style: none;
+}
+
+nav ul li {
+  display: inline-block;
+  margin: 1em;
+  font-size: 0.875rem;
+}
+
+body p {
+  clear: both;
+}
+
+a {
+  color: #18181a;
+  overflow: hidden;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+a:hover {
+  color: #6c5edc;
+}
+
+a.crane-title {
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+div.header-desc {
+  font-weight: 200;
+  font-size: .875rem;
+  color: #5a5a60;
+}
+
+div.header-desc a {
+  color: #5a5a60;
+  border-bottom: 1px solid #9f9fa5;
+}
+
+a.category-title {
+  font-size: 1.5rem;
+}
+
+a.paper-title { 
+  font-size: 1rem;
+  border-bottom: 1px solid #9f9fa5;
+}
+
+div.paper { 
+  padding-bottom: 1em;
+}
+
+div.paper-meta {
+  color: #5a5a60;
+  font-size: .875rem;
+}
+
+div.paper-meta a {
+  color: inherit;
+}
+
+span.paper-year {
+  background-color: #f3f3f3;
+  border-radius: 5px;
+  display: inline-block;
+  padding: 0 6px;
+}
 </style>
 </head>
 <body>
-<div class="manual-text">
-<h1 class="Sh" id="CRANE"><a class="permalink" href="/">CRANE</a></h1>
-<p class="Pp">Crane is a research literature download and categorization
-service. The source code can be downloaded 
-<a href="https://git.jordan.im/crane">here</a>.</p>
+<h1 id="CRANE"><a class="crane-title" href="/">CRANE</a></h1>
+<nav>
+  <ul>
+    <li><a href="/admin">Manage</a></li>
+  </ul>
+</nav>
 {{ block "content" . }}{{ end }}
-</div>
 <a href='https://git.jordan.im/crane'>crane</a>
 </body>
 </html>
diff --git a/templates/list.html b/templates/list.html
index 6d6cdaf..c3790a0 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -4,65 +4,52 @@
   {{ $paperCount := len $papers }}
   {{ if ge $paperCount 1 }}
   <h2 id="{{ $category }}">
-    <a class="permalink" href="#{{ $category }}">{{ $category }}</a>
+    <a class="category-title" href="#{{ $category }}">{{ $category }}</a>
   </h2>
   {{ range $path, $paper := $papers }}
     <div class="paper">
     {{ if $paper.Meta.Title }}
-    <span class="title">
-      <a href='/download/{{ $path }}' title='{{ normalizeStr $paper.Meta.Title }}'>
-        {{- normalizeStr $paper.Meta.Title }}</a>
-    </span>
+    <a class="paper-title" href='/download/{{ $path }}' title='{{ normalizeStr $paper.Meta.Title }}'>{{- normalizeStr $paper.Meta.Title }}</a>
     <br />
     {{ else }}
-    <span class="title">
-      <a href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>
-        {{- $paper.PaperName }}</a>
-    </span>
+    <a class="paper-title" href='/download/{{ $path }}' title='{{ $paper.PaperName }}'> {{- $paper.PaperName }}</a>
     <br />
     {{ end }}
 
+    <div class="paper-meta">
     {{ $contCount := len $paper.Meta.Contributors }}
     {{ if ge $contCount 1 }}
-    <span class="authors">
-      {{- range $index, $contributor := $paper.Meta.Contributors -}}
-      {{- if $index }}, {{ end -}}
-      {{- $contributor.FirstName }} {{ $contributor.LastName -}}
-      {{- end -}}
-    </span>
+    {{- range $index, $contributor := $paper.Meta.Contributors -}}
+    {{- if $index }}, {{ end -}}
+    {{- $contributor.FirstName }} {{ $contributor.LastName -}}
+    {{- end -}}
     <br />
     {{ end }}
 
     {{ $hasVal := false }}
     {{ if $paper.Meta.PubYear }}
     {{ $hasVal = true }}
-    <span class="year">{{ $paper.Meta.PubYear }}</span>
+    <span class="paper-year">{{ $paper.Meta.PubYear }}</span>
     {{ end }}
 
     {{ if $paper.Meta.DOI }}
     {{ if $hasVal }}- {{end}}
-    <span class="doi">
-      <a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a>
-    </span>
+    <a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a>
 
     {{ else if $paper.Meta.ArxivID }}
     {{ if $hasVal }}- {{ end }}
-    <span class="doi">
-      <a href="https://arxiv.org/abs/{{ $paper.Meta.ArxivID }}">
-        {{- $paper.Meta.ArxivID }}</a>
-    </span>
+    <a href="https://arxiv.org/abs/{{ $paper.Meta.ArxivID }}"> {{- $paper.Meta.ArxivID }}</a>
     {{ else if $paper.Meta.Resource }}
     {{ if $hasVal }}- {{ end }}
-    <span class="doi">
-      <a href="{{ $paper.Meta.Resource }}">{{ $paper.Meta.Resource }}</a>
-    </span>
+    <a href="{{ $paper.Meta.Resource }}">{{ $paper.Meta.Resource }}</a>
     {{ end }}
 
     {{ if $paper.Meta.Journal }}
     {{ if $hasVal }}- {{ end }}
-    <span class="journal">{{ $paper.Meta.Journal }}</span>
+    {{ $paper.Meta.Journal }}
     {{ end }}
     </div>
+    </div>
   {{ end }}
   {{ end }}
 {{ end }}
diff --git a/templates/topics.html b/templates/topics.html
new file mode 100644
index 0000000..5c3667f
--- /dev/null
+++ b/templates/topics.html
@@ -0,0 +1,13 @@
+{{ define "topics" }}
+{{ $categoryCount := len .Papers.List }}
+{{ if gt $categoryCount 0 }}
+  <p>Topics: 
+  {{ $first := true -}}
+  {{- range $category, $paper := .Papers.List -}}
+  {{- if $first -}}{{- $first = false -}}{{- else -}}, {{ end -}}
+  <a href="#{{ $category }}">{{ $category }}</a>
+  {{- end -}}.</p>
+{{ else }}
+  <p>nothing here yet.</p>
+{{ end }}
+{{ end }}