diff --git a/assets/styles/components/_book.scss b/assets/styles/components/_book.scss index d566d55..7c4e7b6 100644 --- a/assets/styles/components/_book.scss +++ b/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; diff --git a/assets/styles/components/_featured_book.scss b/assets/styles/components/_featured_book.scss index 4b82fbf..82875e1 100644 --- a/assets/styles/components/_featured_book.scss +++ b/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: 25rem; + height: 100%; 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; } } diff --git a/dist/styles/aldine.css b/dist/styles/aldine.css index 711abcf..7342f9e 100644 --- a/dist/styles/aldine.css +++ b/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; - -ms-flex-pack: start; - justify-content: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; width: 100%; - max-width: 18rem; - height: 25rem; + height: 100%; 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 { diff --git a/webpack.mix.js b/webpack.mix.js index 018a669..e51e5b2 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -74,4 +74,7 @@ mix.webpackConfig( { isotope: 'isotope-layout', }, }, + stats: { + children: true + } } );