Release styling

5 files changed, 20 insertions, 67 deletions

diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index 896f138..fdf1b34 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -167,7 +167,7 @@ pre.box {
   width: fit-content;
 }
 
-.overview {
+.overview, .release {
   overflow-wrap: break-word;
 
   /* This is a bit convoluted: we want the effect of padding but using margins
@@ -193,7 +193,7 @@ pre.box {
     border-bottom: 1px solid var(--border-color);
   }
 
-  img {
+  img, video {
     max-width: 100%;
   }
 
@@ -207,6 +207,14 @@ pre.box {
   }
 }
 
+.release > header {
+  display: flex;
+  align-items: baseline;
+  > :first-child {
+    flex-grow: 1;
+  }
+}
+
 .timestamp {
   white-space: nowrap;
   font-size: .8rem;
@@ -232,52 +240,6 @@ pre.box {
   font-size: 0.8rem;
 }
 
-.release-nav {
-  margin-bottom: 1rem;
-}
-
-.release {
-  margin-bottom: 2rem;
-}
-
-.release-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 1rem;
-  padding-bottom: .5rem;
-  border-bottom: 1px solid var(--border-color);
-
-  h3 {
-    margin: 0;
-  }
-}
-
-.release-body {
-  overflow-wrap: break-word;
-
-  a {
-    text-decoration: underline;
-  }
-
-  h1, h2 {
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  code, pre {
-    background: var(--shade-background);
-  }
-
-  pre {
-    overflow-x: auto;
-    scrollbar-color: var(--border-color) var(--shade-background);
-  }
-}
-
 /* TODO Strip permalinks? */
 svg.octicon-link {
   display: none;
diff --git a/cgithub/views/_release.eta b/cgithub/views/_release.eta
index 85126a2..4769f9b 100644
--- a/cgithub/views/_release.eta
+++ b/cgithub/views/_release.eta
@@ -1,23 +1,19 @@
 <div class="box release">
-  <div class="release-header">
-    <h3>
-      <% if (it.linkToDetail) { %>
-        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases/tag/<%= it.release.tagName %>">
-          <%= it.release.title %>
-        </a>
-      <% } else { %>
+  <header>
+    <% if (it.linkToDetail) { %>
+      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases/tag/<%= it.release.tagName %>">
         <%= it.release.title %>
-      <% } %>
-    </h3>
+      </a>
+    <% } else { %>
+      <span><%= it.release.title %></span>
+    <% } %>
     <% if (it.release.publishedAt) { %>
       <time class="timestamp" title="<%= it.release.publishedAt %>">
         <%= it.release.publishedAt.split("T")[0] %>
       </time>
     <% } %>
-  </div>
+  </header>
   <% if (it.release.bodyHtml) { %>
-    <div class="release-body">
-      <%~ it.release.bodyHtml %>
-    </div>
+    <%~ it.release.bodyHtml %>
   <% } %>
 </div>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index a404437..3910d4b 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -16,6 +16,7 @@ git clone git@github.com:<%= it.repo.owner %>/<%= it.repo.name %>.git</code></pr
       <% if (it.branch) { %>
         <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/commits/<%= it.branch %><%= it.path && it.path !== '/' ? '/' + it.path : '' %>">Commits</a>
       <% } %>
+      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases">Releases</a>
     </nav>
   </div>
 
diff --git a/cgithub/views/release.eta b/cgithub/views/release.eta
index b8c0fe6..46dd5db 100644
--- a/cgithub/views/release.eta
+++ b/cgithub/views/release.eta
@@ -1,7 +1,3 @@
 <% layout("./layout.eta") %>
 
-<div class="release-nav">
-  <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases">← All releases</a>
-</div>
-
 <%~ include("./_release.eta", { repo: it.repo, release: it.release, linkToDetail: false }) %>
diff --git a/cgithub/views/releases.eta b/cgithub/views/releases.eta
index b3cb254..840908c 100644
--- a/cgithub/views/releases.eta
+++ b/cgithub/views/releases.eta
@@ -1,7 +1,5 @@
 <% layout("./layout.eta") %>
 
-<h2>Releases</h2>
-
 <% for (const release of it.releases) { %>
   <%~ include("./_release.eta", { repo: it.repo, release, linkToDetail: true }) %>
 <% } %>