fix: aspect ratio (#373)

* fix: aspect ratio
* Fix featured book title margin & child compile error
* fix: featured image improvements

Co-authored-by: SteelWagstaff <steel@pressbooks.com>

assets/styles/components/_book.scss

@@ -48,7 +48,7 @@
     margin: .5rem 0 0;
     font-size: 0.875rem;
     text-align: left;
-    display: box;
+    display: flex;
     overflow: hidden;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

assets/styles/components/_featured_book.scss

@@ -1,18 +1,25 @@
+#latest-books {
+  .books {
+    align-items: flex-start;
+  }
+}
+
 .featured_book {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: space-between;
   width: 100%;
-  max-width: 18rem;
+  height: 100%;
-  height: 25rem;
   border: solid 1px var(--accent);
   margin: 0 0 2rem;
 
   &__cover {
+    aspect-ratio: 3 / 4;
     width: 100%;
-    height: 80%;
     background-repeat: no-repeat;
     background-size: cover;
+    background-position: center;
+    min-height: 17rem;
   }
 
   a {
@@ -27,5 +34,7 @@
     justify-content: center;
     align-items: center;
     font-weight: 500;
+    margin-top: 1rem;
+    min-height: 4rem;
   }
 }

dist/styles/aldine.css

@@ -1901,7 +1901,9 @@ nav {
   margin: 0.5rem 0 0;
   font-size: 0.875rem;
   text-align: left;
-  display: box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   overflow: hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1937,6 +1939,12 @@ nav {
   }
 }
 
+#latest-books .books {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+
 .featured_book {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1945,20 +1953,21 @@ nav {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: start;
+  -webkit-box-pack: justify;
-      -ms-flex-pack: start;
+      -ms-flex-pack: justify;
-          justify-content: flex-start;
+          justify-content: space-between;
   width: 100%;
-  max-width: 18rem;
+  height: 100%;
-  height: 25rem;
   border: solid 1px var(--accent);
   margin: 0 0 2rem;
 }
 .featured_book__cover {
+  aspect-ratio: 3/4;
   width: 100%;
-  height: 80%;
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: center;
+  min-height: 17rem;
 }
 .featured_book a {
   margin: 0;
@@ -1979,6 +1988,8 @@ nav {
       -ms-flex-align: center;
           align-items: center;
   font-weight: 500;
+  margin-top: 1rem;
+  min-height: 4rem;
 }
 
 label {

webpack.mix.js

@@ -74,4 +74,7 @@ mix.webpackConfig( {
 			isotope: 'isotope-layout',
 		},
 	},
+	stats: {
+		children: true
+	}
 } );