@include white-box;
}
-.book-mini-box img.cover {
- @include size(height, 193px);
- @include size(width, 139px);
-}
-
.cover-area {
float: left;
}
.book-mini-box {
- @include size(width, 161.5px);
+ /* Original design fits 6 boxes horizontally in 975px (162.5px each),
+ * but we really want to fit 2 boxes on a 320px mobile screen. */
+
+ @include size(width, 160px);
display: inline-block;
vertical-align: top;
+ @include min-screen(350px) {
+ @include size(width, 162.5px);
+ }
+
.book-mini-box-inner {
@include inner-box;
@include size(height, 271px);
@include size(margin, 1px);
+ @include size(padding, 8px 9px);
overflow: hidden;
+
+ @include min-screen(350px) {
+ @include size(padding, 8px 10px);
+ }
+
a {
display: block;
}
}
img.cover {
+ @include size(height, 193px);
+ @include size(width, 139px);
@include size(margin-bottom, 18px);
}
.language {
}
}
-/* FIXME: RWD */
-.picture.book-wide-box .right-column {
- float: none;
- @include size(width, 415px);
- top: 0;
- @include size(margin-left, 550px);
- margin-top: 0em;
+@media screen and (min-width: 50em) {
+ .picture.book-wide-box .right-column {
+ float: none;
+ @include size(width, 415px);
+ top: 0;
+ @include size(margin-left, 550px);
+ margin-top: 0em;
+ }
}
position: relative;
z-index: 101;
- &.downarrow {
- color: black;
+ @mixin downarrow {
+ color: #0D7E85;
- @include min-screen($S_BOOK_SHORT_FULL) {
- color: #0D7E85;
+ &:before {
+ content: url("/static/img/download.png");
+ @include size(font-size, 25px);
+ @include size(margin-right, 3.71px);
+ vertical-align: middle;
+ font-weight: normal;
+ display: inline;
+ }
+ }
+ &.downarrow {
+ @include downarrow;
+ &.hoverclick {
+ color: black;
&:before {
- content: url("/static/img/download.png");
- @include size(font-size, 25px);
- @include size(margin-right, 3.71px);
- vertical-align: middle;
- font-weight: normal;
+ display: none;
+ }
+
+ @include min-screen($S_BOOK_SHORT_FULL) {
+ @include downarrow;
}
}
}