Browse Source

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>
pull/378/head
Oscar Arzola 2 years ago committed by GitHub
parent
commit
79648d397f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      assets/styles/components/_book.scss
  2. 17
      assets/styles/components/_featured_book.scss
  3. 25
      dist/styles/aldine.css
  4. 3
      webpack.mix.js

2
assets/styles/components/_book.scss

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

17
assets/styles/components/_featured_book.scss

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

25
dist/styles/aldine.css vendored

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

3
webpack.mix.js

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

Loading…
Cancel
Save