info card dimension tweaks

2 files changed, 29 insertions, 13 deletions

diff --git a/static/site.css b/static/site.css
index 59f13c5c..83bddd37 100644
--- a/static/site.css
+++ b/static/site.css
@@ -704,9 +704,8 @@ li > ul {
 #info-card-container {
     position: absolute;
 
-    margin-right: 10px;
-    padding-left: 3ch;
-    border-top: 1px solid white;
+    left: 0;
+    right: 10px;
 
     pointer-events: none; /* Padding area shouldn't 8e interactive. */
     display: none;
@@ -714,7 +713,11 @@ li > ul {
 
 #info-card-container.show,
 #info-card-container.hide {
-    display: block;
+    display: flex;
+}
+
+#info-card-container > * {
+    flex-basis: 400px;
 }
 
 #info-card-container.show {
@@ -751,6 +754,11 @@ li > ul {
     }
 }
 
+.info-card-decor {
+    padding-left: 3ch;
+    border-top: 1px solid white;
+}
+
 .info-card {
     background-color: black;
     color: white;
@@ -765,6 +773,12 @@ li > ul {
     pointer-events: none;
 }
 
+.info-card::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
 #info-card-container.show .info-card {
     animation: 0.01s linear 0.2s forwards info-card-become-interactive;
 }
diff --git a/upd8.js b/upd8.js
index cfddf581..70fc89e7 100755
--- a/upd8.js
+++ b/upd8.js
@@ -2397,16 +2397,18 @@ writePage.html = (pageFn, {paths, strings, to}) => {
 
     const infoCardHTML = fixWS`
         <div id="info-card-container">
-            <div class="info-card">
-                <div class="info-card-art-container">
-                    ${img({
-                        class: 'info-card-art',
-                        src: '',
-                        square: true
-                    })}
+            <div class="info-card-decor">
+                <div class="info-card">
+                    <div class="info-card-art-container">
+                        ${img({
+                            class: 'info-card-art',
+                            src: '',
+                            square: true
+                        })}
+                    </div>
+                    <h1 class="info-card-name"><a></a></h1>
+                    <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p>
                 </div>
-                <h1 class="info-card-name"><a></a></h1>
-                <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p>
             </div>
         </div>
     `;