feat: adds basic book layout

src/routes/+page.svelte

@@ -12,6 +12,7 @@
         "authors": "Scott Cawthon, Kira Breed-Wrisley, Kira Breed-Wrisley, Kira Breed-Wrisley Scott Cawthon, Suzanne Elise Freeman, Kira Breed-Wrisley",
         "imageurl": "https://covers.openlibrary.org/b/id/8075533-L.jpg",
         "publication_year": "2001",
+        "progress": "312",
         "page_length": "400"
       },
       {
@@ -21,6 +22,7 @@
         "authors": "Scott Cawthon",
         "imageurl": "https://covers.openlibrary.org/b/id/12405670-L.jpg",
         "publication_year": "2021",
+        "progress": "12",
         "page_length": "96"
       },
       {
@@ -30,6 +32,7 @@
         "authors": "Scott Cawthon",
         "imageurl": "https://covers.openlibrary.org/b/id/10502812-L.jpg",
         "publication_year": "2018",
+        "progress": "0",
         "page_length": "166"
       },
       {
@@ -38,8 +41,19 @@
         "title": "Freddy Files",
         "authors": "Scott Cawthon",
         "imageurl": "https://covers.openlibrary.org/b/id/14432108-L.jpg",
-        "year of publication": "2019",
-        "page length": "256"
+        "publication_year": "2019",
+        "progress": "256",
+        "page_length": "256"
+      },
+      {
+        "id": "5",
+        "isbn": "9781419747496",
+        "title": "The Art of The Mitchells vs. The Machines",
+        "authors": "Ramin Zahed",
+        "imageurl": "https://covers.openlibrary.org/b/id/13771830-L.jpg",
+        "publication_year": "2020",
+        "progress": "128",
+        "page_length": "224"
       }
     ]}`).books;
 </script>

src/routes/Book.svelte

@@ -6,6 +6,7 @@
     authors: string;
     imageurl: string;
     publication_year: number;
+    progress: number;
     page_length: number;
   }
 </script>
@@ -15,32 +16,106 @@
 </script>
 
 <div class="container">
-  <div class="cover" />
-  <div class="content" />
+  {#if entry.progress == 0}
+    <p class="progress unread">UNREAD</p>
+  {:else if entry.progress < entry.page_length}
+    <p class="progress reading">{entry.progress}/{entry.page_length}</p>
+  {:else if entry.progress == entry.page_length}
+    <p class="progress complete">COMPLETE</p>
+  {:else}
+    <p class="progress na">N/A</p>
+  {/if}
+  <div class="content">
+    <div class="cover">
+      <img src={entry.imageurl} alt="Book Cover" />
+    </div>
+    <div class="text">
+      <p class="author">{entry.authors}</p>
+      <p class="title">{entry.title}</p>
+    </div>
+  </div>
 </div>
 
 <style>
   .container {
-    display: flex;
-    flex-direction: column;
-
-    height: 350px;
+    height: 389px;
     border-radius: 10px;
-    padding: 10px;
-    background-color: blue;
+    background-color: color-mix(in srgb, transparent, var(--dark-gray) 50%);
+
+    & .progress {
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    & .cover {
       width: 100%;
-      height: 75%;
-      border-radius: 10px;
-      background-color: red;
+      padding: 5px 0;
+      border-radius: 10px 10px 0 0;
+      width: 100%;
+
+      font-family: "Rubik Mono One", sans-serif;
+
+      &.unread {
+        background-color: var(--dark-yellow);
+      }
+
+      &.reading {
+        background-color: var(--dark-blue);
+      }
+
+      &.complete {
+        background-color: var(--dark-green);
+      }
+
+      &.na {
+        background-color: var(--dark-red);
+      }
     }
 
     & .content {
-      width: 100%;
-      height: 25%;
-      margin-top: 10px;
-      background-color: magenta;
+      padding: 10px;
+
+      & .cover {
+        width: 100%;
+        aspect-ratio: 0.666667;
+        border-radius: 10px;
+        background-color: var(--background);
+
+        & img {
+          vertical-align: middle;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 10px;
+        }
+      }
+
+      & .text {
+        width: 100%;
+        height: 25%;
+        margin-top: 5px;
+
+        & .author {
+          font-family: "Oswald", sans-serif;
+          color: var(--light-gray);
+          line-clamp: 1;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        & .title {
+          font-family: "Merriweather Sans", sans-serif;
+          font-weight: bold;
+          line-clamp: 2;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
     }
   }
 </style>

src/routes/Header/Header.svelte

@@ -18,6 +18,8 @@
 </script>
 
 <nav>
+  <!--  TODO: Minimum width for title. -->
+  <!--  TODO: Sticky header. -->
   <div class="title">
     <div class="icon">󰗚</div>
     Library Manager

src/variables.css

@@ -28,6 +28,16 @@
   src: url('/fonts/Oswald/Oswald-VariableFont_wght.ttf');
 }
 
+@font-face {
+  font-family: 'Merriweather Sans';
+  src: url('/fonts/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf');
+}
+
+@font-face {
+  font-family: 'Rubik Mono One';
+  src: url('/fonts/Rubik_Mono_One/RubikMonoOne-Regular.ttf');
+}
+
 @font-face {
   font-family: 'NFSymbols';
   src: url('/fonts/NFSymbols/SymbolsNerdFontMono-Regular.ttf');