@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 {
@include size(margin-top, 5px);
}
+ @include min-screen($S_BOOK_SHORT_FULL) {
+ // Show full title on the work's page.
+
+ .book-box-body {
+ height: auto;
+ @include size(min-height, 170px);
+
+ .book-box-head .title {
+ height: auto;
+ @include size(min-height, 57.6px);
+ }
+ }
+ }
+
.book-box-head,
.tags,
.book-box-tools {
}
}
-/* 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;
+ }
}
.tags {
@include size(font-size, 11px);
line-height: 1.2em;
+ margin-bottom: 5px;
@include min-screen($S_BOOK_SHORT_FULL) {
clear: right;