fixed font and other minor issues in title cards

static/skin/home.css

@@ -66,7 +66,7 @@ body {
 }
 
 .book {
-    text-decoration: none;
+    border-color: #acacac;
 }
 
 .book__wrapper {
@@ -74,8 +74,8 @@ body {
     height: 280px;
     width: 250px;
     margin: 15px;
-    background-color: #fcfcfc;
-    box-shadow: 0 0 5px #acacac;
+    background-color: #fbfbfb;
+    border: 1px solid #ececec;
     border-radius: 3px;
     display: grid;
     grid-template-columns: 65px 1fr;
@@ -91,14 +91,20 @@ body {
 .book__icon {
     display: flex;
     align-items: center;
+    align-content: center;
+    justify-content: center;
     margin: 10px 0 0 10px;
 }
 
 .book__title {
-    display: block;
+    display: grid;
     font-family: poppins;
     color: black;
-    margin: 10px 10px 0 0;
+    padding: 12px 10px 0 2px;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    align-content: center;
 }
 
 #bookSize {
@@ -108,10 +114,9 @@ body {
 
 #bookTitle {
     overflow: hidden;
-    display: -webkit-box;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     font-size: 1.45rem;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
 }
 
 .book__description {
@@ -146,11 +151,20 @@ body {
 .book__tags {
     display: flex;
     text-align: end;
+    font-size: 1.1rem;
+    justify-content: flex-end;
+    color: #909090;
+    font-family: roboto;
     margin-right: 10px;
     margin-top: 10px;
-    justify-content: flex-end;
-    font-family: roboto;
-    color: #909090;
+    overflow: hidden;
+}
+
+.book__tags--wrapper {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 .book__links {
@@ -159,7 +173,7 @@ body {
     justify-content: flex-end;
     grid-column: 2 / 3;
     font-size: 1.1rem;
-    margin: 10px;
+    margin: 10px 4px;
     color: #00b4e4;
 }
 
@@ -167,7 +181,8 @@ body {
     text-decoration: none;
     color: #00b4e4;
     position: relative;
-    padding: 2px 6px 0;
+    padding: 1px 6px 0;
+    font-family: roboto;
 }
 
 .book__links > a::after {
@@ -182,7 +197,7 @@ body {
     background: #00b4e4;
     color: white;
     z-index: -1;
-    transition: transform 0.3s;
+    transition: transform 0.2s;
 }
 
 .book__links > a:hover::after {
@@ -193,10 +208,6 @@ body {
     color: white;
 }
 
-.book__links > span {
-    color: #31353e;
-}
-
 .fadeOut {
     position: fixed;
     display: none;

static/skin/index.js

@@ -44,7 +44,7 @@
 
     const humanFriendlySize = (fileSize) => {
         if (fileSize === 0) {
-            return 'unkown';
+            return '';
         }
         const units = ['bytes', 'kB', 'MB', 'GB', 'TB'];
         let quotient = Math.floor(Math.log10(fileSize) / 3);
@@ -94,6 +94,7 @@
         } catch {
             downloadLink = '';
         }
+        humanFriendlyZimSize = humanFriendlySize(zimSize);
 
         const divTag = document.createElement('div');
         divTag.setAttribute('class', 'book');
@@ -103,13 +104,13 @@
         }
         divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
             <div class='book__title' title='${title}'>
-                <div id='bookSize'>${humanFriendlySize(zimSize)}</div>
                 <div id="bookTitle">${title}</div>
+                ${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''}
             </div>
             <div class='book__description' title='${description}'>${description}</div>
             <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
-            <div class='book__tags'>${tagHtml}</div>
-            <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>&nbsp;|&nbsp;${downloadLink ? `<a href="${downloadLink}" data-hove="Download" download>Download</a>` : `<span>Download</span>`} </div></div>`;
+            <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
+            <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<a href="${downloadLink}" data-hove="Download" download>Download</a>` : ''} </div></div>`;
         return divTag;
     }