EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use not grid layout for mobile or unsupported devices

book-breakpoint
Nicholas Antonov 2018-02-06 15:39:07 -05:00
parent c99b19fe72
commit 554870d5d5
1 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
static/scss/bookview.scss
View File

@ -1,14 +1,9 @@
@import 'foundation';
@include breakpoint (small down) {
@mixin mobile() {
.wrapper {
display: grid;
grid-template-columns: fit-content 1fr 20%;
grid-template-rows: auto auto;
grid-template-areas: "bookImage bookImage bookImage"
"bookSidebar bookSidebar bookSidebar"
"bookDescription bookDescription bookDescription"
"bookComments bookComments bookComments";
display: flex;
flex-direction: column;
}
.pubinfo {
@ -22,11 +17,13 @@
}
.bookImage {
order: 0;
display: flex;
justify-content: center;
}
.bookSidebar {
order: 1;
flex-direction: row;
flex-wrap: wrap;
}
@ -47,29 +44,45 @@
flex: 100%;
}
.bookDescription {
order: 2;
}
.bookComments {
order: 3;
margin-top: 15px;
}
}
@include breakpoint (medium) {
.wrapper {
display: grid;
grid-template-columns: fit-content 1fr 20%;
grid-template-rows: auto auto;
grid-template-areas: "bookImage bookDescription bookSidebar"
". bookComments .";
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
@include breakpoint (small down) {
@include mobile();
}
.bookDescription {
padding-right: 15px;
}
.bookSidebar {
flex-direction: column;
@supports not (grid-template-rows: auto) {
@include mobile();
}
@supports (grid-template-rows: auto) {
@include breakpoint (medium) {
.wrapper {
display: grid;
grid-template-columns: fit-content 1fr 20%;
grid-template-rows: auto auto;
grid-template-areas: "bookImage bookDescription bookSidebar"
". bookComments .";
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.bookDescription {
padding-right: 15px;
}
.bookSidebar {
flex-direction: column;
}
}
}