--- a/src/VideoPage.ts	Thu Dec 05 21:26:40 2024 -0800
+++ b/src/VideoPage.ts	Thu Dec 05 21:33:25 2024 -0800
@@ -88,7 +88,10 @@
         <sl-breadcrumb>${crumbs}</sl-breadcrumb>
       </header>
       <main>${this._router.outlet()}</main>
-      <footer>foot</footer>
+      <footer>
+        <bigast-loginbar></bigast-loginbar>
+        <span><a href="ingest/">Add new videos...</a></span>
+      </footer>
     `;
   }
 }
@@ -126,22 +129,43 @@
       :host {
         display: block;
       }
+
+      video-section {
+        margin: 8px;
+      }
+
       .listing a {
         font-size: 20px;
         text-transform: uppercase;
         text-underline-offset: 10px;
       }
 
+      .listing a .subdir {
+        transition: background 0.5s;
+        transition-delay: 0.1s;
+        background: #4ea1bd21;
+      }
+
+      .listing a:hover .subdir {
+        transition: background 0.5s;
+        background: #4ea1bd66;
+      }
+
       .subdir {
         vertical-align: top;
         color: white;
         padding: 11px;
         display: inline-block;
         width: 300px;
-        background: #4ea1bd21;
         margin: 5px;
-        border-bottom-right-radius: 29px;
+        border-radius: 2px;
       }
+
+      .subdir:after {
+        content: " › ";
+        color: #979797;
+      }
+
       #scrim {
         position: fixed;
         background: #000000b5;
@@ -180,8 +204,6 @@
       <h2>${this.dirName}</h2>
       <div class="listing">${listings}</div>
 
-      <p><a href="ingest/">Add new videos...</a></p>
-
       <div id="scrim" @click=${this.closePlayer}></div>
       <page-player manifest=""></page-player>
     `;

--- a/src/VideoSection.ts	Thu Dec 05 21:26:40 2024 -0800
+++ b/src/VideoSection.ts	Thu Dec 05 21:33:25 2024 -0800
@@ -11,23 +11,38 @@
 
   static styles = [
     css`
+      :host {
+        display: inline-block;
+      }
       section {
+        box-shadow: 4px 4px 2px #00000029;
+        border-radius: 5px;
         background: #ffffff14;
         display: inline-block;
         padding: 10px;
         color: white;
-        width: 300px;
+        width: 255px;
       }
       .video-title {
-        font-size: 120%;
+        line-clamp: 2;
+        height: 3.2em;
+      }
+      #imgCrop {
+        overflow: hidden;
+        width: 250px;
+        height: 140px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        display: inline-block;
       }
     `,
   ];
   render() {
     return html`
       <section @click=${this.click}>
-        <div class="video-title">${this.title}</div>
-        <img src="${this.thumbRelPath}" />
+        <div class="video-title" title="${this.title}">${this.title}</div>
+        <span id="imgCrop" style='background-image: url("${this.thumbRelPath}")'></span>
       </section>
     `;
   }

--- a/src/index.html	Thu Dec 05 21:26:40 2024 -0800
+++ b/src/index.html	Thu Dec 05 21:33:25 2024 -0800
@@ -11,7 +11,6 @@
     <video-page></video-page>
 
     <script type="module" src="https://bigasterisk.com/lib/bigast/v2/loginBar.js"></script>
-    <bigast-loginbar></bigast-loginbar>
 
   </body>
 </html>

--- a/src/main.css	Thu Dec 05 21:26:40 2024 -0800
+++ b/src/main.css	Thu Dec 05 21:33:25 2024 -0800
@@ -11,6 +11,18 @@
 
 header {
   background: rgb(247 112 31 / 44%);
+  border-bottom: 3px solid black;
+  display: flex;
+  align-items: center;
+}
+
+footer {
+  background: rgb(247 112 31 / 44%);
+  border-top: 3px solid black;
+  display: flex;
+  align-items: center;
+  margin-top: 3em;
+  padding: 6px;
 }
 
 header img {