chore: better book page mobile styles

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "21.4.6",
+  "version": "21.4.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "21.4.6",
+      "version": "21.4.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -2754,9 +2754,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.40",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
-      "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "dev": true,
       "funding": [
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "21.4.6",
+  "version": "21.4.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/styles/pages/books.css

@@ -90,18 +90,28 @@
 
   & .book-display {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    align-items: center;
     gap: var(--sizing-base);
     margin-bottom: var(--sizing-base);
+
+    & .book-meta {
+      width: 100%;
+      align-items: center;
+
+      & p {
+        margin: 0;
+      }
+
+      & .progress-bar-wrapper {
+        max-width: 50%;
+      }
+    }
   }
 
   p {
     margin: var(--sizing-base) 0;
   }
-
-  & .book-meta p {
-    margin: 0;
-  }
 }
 
 @media screen and (min-width: 768px) {
@@ -115,7 +125,21 @@
 
       & .progress-bar-wrapper {
         margin-top: 0;
-        max-width: 40%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  .book-focus .book-display {
+    flex-direction: row;
+    align-items: start;
+
+    & .book-meta {
+      width: auto;
+      align-items: start;
+
+      & .progress-bar-wrapper {
+        max-width: none;
       }
     }
   }