X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/357027375ff8867f42ca34bcbfb5a78b5b185fc3..4d63dddcde34ef242f0f4283adc39ff04737a9c6:/src/wolnelektury/static/scss/main/book_box.scss?ds=inline diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss index d318fda34..55eba24d4 100755 --- a/src/wolnelektury/static/scss/main/book_box.scss +++ b/src/wolnelektury/static/scss/main/book_box.scss @@ -86,6 +86,7 @@ .title { @include size(font-size, 14px); color: #242424; + white-space: normal; } } @@ -97,10 +98,10 @@ list-style: none; .Book-item { - @include min-screen($S_BOOK_SHORT_FULL) { + /*@include min-screen($S_BOOK_SHORT_FULL) { display: inline-block; } - vertical-align: top; + vertical-align: top;*/ } } @@ -114,10 +115,6 @@ color: #0D7E85; } - @include min-screen($S_BOOK_SHORT_FULL) { - @include size(width, $W_BOOK_SHORT_FULL); - } - .book-box-inner { position: relative; @include inner-box; @@ -126,6 +123,32 @@ } +.audiobook-box { + .book-left-column { + @media screen and (min-width: 1024px) { + display: inline-block; + @include size(width, 590px); + } + } + + .audiobook-right-column { + @media screen and (min-width: 1024px) { + float: right; + @include size(width, 360px); + } + } + + .jp-type-playlist { + margin-top: 24px; + + @media screen and (min-width: 1024px) { + float: right; + margin-top: 48px; + } + } +} + + .book-wide-box { margin: 0; vertical-align: top; @@ -238,6 +261,17 @@ } } } + + .jp-type-playlist { + margin-top: 24px; + margin-left: 0.625rem; + + @media screen and (min-width: 1024px) { + float: right; + margin-right: 0.625rem; + } + } + } @media screen and (min-width: 50em) { @@ -253,10 +287,6 @@ .book-box-body { @include size(margin-bottom, 10px); - @include min-screen($S_BOOK_SHORT_FULL) { - margin-bottom: 0; - @include size(height, 170px); - } position: relative; .book-box-head, @@ -309,7 +339,6 @@ margin-bottom: 5px; @include min-screen($S_BOOK_SHORT_FULL) { - clear: right; @include size(max-height, 57.6px); overflow: hidden; } @@ -353,19 +382,10 @@ li { @include mono; - margin-top: 1em; - - @include min-screen($S_BOOK_SHORT_FULL) { - display: inline-block; - margin-top: 0; - } + margin-top: 0; } .book-box-read { - @include min-screen($S_BOOK_SHORT_FULL) { - @include size(width, 126.5px); - } - a { @include mono; } @@ -382,14 +402,7 @@ .book-box-download { position: relative; - @include min-screen($S_BOOK_SHORT_FULL) { - @include size(width, 93.5px); - } - a { - position: relative; - z-index: 101; - @mixin downarrow { color: #0D7E85; @@ -405,86 +418,20 @@ &.downarrow { @include downarrow; - &.hoverclick { - color: black; - &:before { - display: none; - } - - @include min-screen($S_BOOK_SHORT_FULL) { - @include downarrow; - } - } } } .book-box-formats { - @include size(padding-left, 19px); - - @include min-screen($S_BOOK_SHORT_FULL) { - display: none; - position: absolute; - - @include size(width, 180px); - @include size(padding-top, 38px); - @include size(padding-bottom, 9px); - @include size(padding-left, 19px); - @include size(padding-right, 19px); - - @include white-box; - - z-index: 100; - - @include size(top, -16px); - @include size(left, -19px); - } - - span { - display: block; - @include size(margin-top, 16px); + display: inline-block; + max-width: 220px; + vertical-align: top; + padding-top: 6px; a { - &:before { - content: url("/static/img/download.png"); - @include size(font-size, 25px); - @include size(margin-right, 3.71px); - vertical-align: middle; - font-weight: normal; - } - } - - @include min-screen($S_BOOK_SHORT_FULL) { - @include size(margin-top, 0); - - &:first-child { - @include size(margin-top, 16px); - } - a:before { - display:none; - } + display: inline-block; + @include size(padding, .2em 1em); } - } - } - - &:hover .book-box-formats, - &.hover .book-box-formats { - display: block; - } - } - - .book-box-audiobook { - @include min-screen($S_BOOK_SHORT_FULL) { - @include size(width, 77px); } - - a:before { - content: url("/static/img/listen.png"); - @include size(font-size, 25px); - @include size(margin-right, 3.71px); - vertical-align: middle; - font-weight: normal; - } - } }