style: fixed top navigation bar

html/feed.html

@@ -1,18 +1,41 @@
-{{define "title"}}{{.Title}}{{end}}
-{{define "content"}}
-<ul>
+{{define "title"}}{{.Title}}{{end}} {{define "content"}}
+
+<nav class="navigation">
   {{if .Search }}
-       <li><a href="{{.Search}}">Search</a></li>  
+  <div class="search">
+    <a href="{{.Search}}" tabindex="-1">
+      <svg
+        width="30"
+        height="30"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+        />
+      </svg>
+    </a>
+  </div>
   {{end}}
 
+  <div class="nav-controls">
     {{range .Navigation}}
-       <li><a href="{{.Href}}">{{.Label}}</a></li>  
+    <a tabindex="-1" href="{{.Href}}">{{.Label}}</a>
     {{end}}
+  </div>
+</nav>
 
+<ul>
   {{range .Links}}
   <li class="link">
     {{if .ImageURL}}
-                <img src="/acquisition{{.ImageURL}}" alt="{{.Title}}" height="40">
+    <img src="/acquisition{{.ImageURL}}" alt="{{.Title}}" height="40" />
     {{end}}
 
     <div class="info">

html/html.go

@@ -82,11 +82,13 @@ func constructLink(entry opds.Entry) LinkViewModel {
 	for _, author := range entry.Author {
 		authors = append(authors, author.Name)
 	}
-	vm.Author = strings.Join(authors, ", ")
+	vm.Author = strings.Join(authors, " & ")
 
 	for _, link := range entry.Links {
+		vm.IsDownload = link.IsDownload()
 		if link.IsNavigation() || link.IsDownload() {
 			vm.Href = link.Href
+
 		}
 
 		// Prefer the first "thumbnail" image we find

html/static/style.css

@@ -8,20 +8,13 @@
   font-size: 1.25rem;
 }
 
-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-}
-
 #container {
-  padding: 2rem;
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  padding: 1rem;
   width: 100%;
 }
 
 #container > ul {
+  margin-top: 75px;
   list-style-type: none;
 }
 
@@ -45,17 +38,54 @@ body {
   font-size: 1rem;
 }
 
-#container > ul > li a {
+a {
   display: inline-block;
   text-decoration: none;
   color: black;
-  vertical-align: top;
 }
 
-#container > ul > li a:active {
-  background-color: black;
+#container > ul > li a {
+  vertical-align: top;
 }
 
 #container > ul > li:not(:last-child) {
   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
 }
+
+.navigation {
+  background-color: white;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  display: block;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.search {
+  width: 100px;
+  display: inline-block;
+}
+
+.search:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.search > a {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  display: block;
+  margin: auto;
+}
+
+.nav-controls {
+  float: right;
+}
+
+.nav-controls > a {
+  padding: 1rem;
+}