src/wolnelektury/static/scss/main/book_box.scss

   1 @mixin inner-box {
   2     display: block;
   3     color: black;
   4     @include size(margin, 1px);
   5     @include size(padding, 8px 10px);
   6     @include white-box;
   7 }
   8
   9
  10 .cover-area {
  11     float: left;
  12     @include size(margin-right, 15px);
  13     @include size(margin-bottom, 5px);
  14
  15     @include min-screen($S_BOOK_SHORT_FULL) {
  16         position: absolute;
  17         top: 0;
  18         left: 0;
  19         margin-right: 0;
  20     }
  21
  22     img.cover {
  23         @include size(height, 193px / 2);
  24         @include size(width, 139px / 2);
  25
  26         @include min-screen($S_BOOK_SHORT_MEDIUM) {
  27             @include size(height, 193px);
  28             @include size(width, 139px);
  29         }
  30     }
  31 }
  32
  33 .book-mini-box {
  34     /* Original design fits 6 boxes horizontally in 975px (162.5px each),
  35      * but we really want to fit 2 boxes on a 320px mobile screen. */
  36
  37     @include size(width, 160px);
  38     display: inline-block;
  39     vertical-align: top;
  40
  41     @include min-screen(350px) {
  42         @include size(width, 162.5px);
  43     }
  44
  45     .book-mini-box-inner {
  46         @include inner-box;
  47         @include size(height, 271px);
  48         @include size(margin, 1px);
  49         @include size(padding, 8px 9px);
  50         overflow: hidden;
  51
  52         @include min-screen(350px) {
  53             @include size(padding, 8px 10px);
  54         }
  55
  56         a {
  57             display: block;
  58         }
  59     }
  60     img.cover {
  61         @include size(height, 193px);
  62         @include size(width, 139px);
  63         @include size(margin-bottom, 18px);
  64     }
  65     .language {
  66         color: #aaa;
  67         float: right;
  68         @include mono;
  69         @include size(font-size, 10px);
  70         text-transform: uppercase;
  71         position: relative;
  72         @include size(top, -20px);
  73     }
  74     .desc {
  75         margin-left: 0;
  76     }
  77     .author {
  78         @include size(font-size, 11px);
  79         @include mono;
  80         color: #6d7877;
  81         display: block;
  82         overflow: hidden;
  83         text-overflow: ellipsis;
  84         white-space: nowrap;
  85     }
  86     .title {
  87         @include size(font-size, 14px);
  88         color: #242424;
  89         white-space: normal;
  90     }
  91 }
  92
  93
  94
  95 .work-list {
  96     margin: 0;
  97     padding: 0;
  98     list-style: none;
  99
 100     .Book-item {
 101         /*@include min-screen($S_BOOK_SHORT_FULL) {
 102             display: inline-block;
 103         }
 104         vertical-align: top;*/
 105     }
 106 }
 107
 108
 109 .book-box {
 110     margin: 0;
 111     vertical-align: top;
 112
 113     /* */
 114     a {
 115         color: #0D7E85;
 116     }
 117
 118     .book-box-inner {
 119         position: relative;
 120         @include inner-box;
 121         @include size(min-height, 197.5px);
 122     }
 123 }
 124
 125
 126 .audiobook-box {
 127     .book-left-column {
 128         @media screen and (min-width: 1024px) {
 129             display: inline-block;
 130             @include size(width, 590px);
 131         }
 132     }
 133
 134     .audiobook-right-column {
 135         @media screen and (min-width: 1024px) {
 136             float: right;
 137             @include size(width, 360px);
 138         }
 139     }
 140
 141     .jp-type-playlist {
 142         margin-top: 24px;
 143
 144         @media screen and (min-width: 1024px) {
 145             float: right;
 146             margin-top: 48px;
 147         }
 148     }
 149 }
 150
 151
 152 .book-wide-box {
 153     margin: 0;
 154     vertical-align: top;
 155
 156     @media screen and (min-width: 62.5em) {
 157         @include size(width, 975px);
 158     }
 159
 160     .book-box-inner {
 161         position: relative;
 162         @include size(min-height, 244px);
 163         @include inner-box;
 164         @include size(margin-left, 0);
 165         @include size(margin-right, 0);
 166
 167         .book-left-column { /* FIXME */
 168             @media screen and (min-width: 62.5em) {
 169                 float: left;
 170                 @include size(width, 536px);
 171             }
 172         }
 173
 174         .license-icon {
 175             display: block;
 176             @include size(margin-top, 5px);
 177         }
 178
 179         @include min-screen($S_BOOK_SHORT_FULL) {
 180              // Show full title on the work's page.
 181
 182             .book-box-body {
 183                 height: auto;
 184                 @include size(min-height, 170px);
 185
 186                 .book-box-head .title {
 187                     height: auto;
 188                     @include size(min-height, 57.6px);
 189                 }
 190             }
 191         }
 192
 193         .book-box-head,
 194         .tags,
 195         .book-box-tools {
 196             @media screen and (min-width: 62.5em) {
 197                 @include size(width, 382px);
 198             }
 199         }
 200
 201         #theme-list-wrapper {
 202             @include min-screen($S_BOOK_SHORT_MEDIUM) {
 203                 @include size(margin-left, 154px);
 204                 @include size(width, 300px);
 205             }
 206             margin-bottom: 0;
 207
 208             p {
 209                 @include size(margin-top, 10px);
 210                 @include size(margin-bottom, 10px);
 211             }
 212         }
 213
 214         .right-column {
 215             @include size(margin-top, 16px);
 216             // Eat the padding
 217             @include size(margin-left, -10px);
 218             @include size(margin-right, -10px);
 219             max-width: none;
 220
 221             @media screen and (min-width: 62.5em) {
 222                 @include size(width, 415px);
 223                 // Eat the padding
 224                 @include size(margin-top, -8px);
 225             }
 226
 227             .other-tools,
 228             .other-download {
 229                 @include size(font-size, 11px);
 230                 clear: left;
 231                 @include size(margin-top, 25px);
 232                 line-height: 1.75em;
 233                 @include size(margin-left, 15px);
 234
 235                 h2 {
 236                     margin: 0;
 237                     @include size(font-size, 11px);
 238                     @include mono;
 239                 }
 240
 241                 @include min-screen($S_BOOK_SHORT_FULL) {
 242                     float: left;
 243                     clear: none;
 244                     @include size(width, 145px);
 245                     @include size(margin-top, 50px);
 246                     @include size(margin-right, 0);
 247                     @include size(margin-bottom, 0);
 248                     @include size(margin-left, 5px);
 249                 }
 250
 251                 @include min-screen(1000px) {
 252                     @include size(margin-top, 50px);
 253                     line-height: 1.2em;
 254                 }
 255             }
 256             .other-download {
 257                 @include min-screen($S_BOOK_SHORT_FULL) {
 258                     @include size(margin-left, 15px);
 259                     @include size(width, 220px);
 260                 }
 261             }
 262         }
 263     }
 264
 265     .jp-type-playlist {
 266         margin-top: 24px;
 267         margin-left: 0.625rem;
 268
 269         @media screen and (min-width: 1024px) {
 270             float: right;
 271             margin-right: 0.625rem;
 272         }
 273     }
 274
 275 }
 276
 277 @media screen and (min-width: 50em) {
 278     .picture.book-wide-box .right-column {
 279         float: none;
 280         @include size(width, 415px);
 281         top: 0;
 282         @include size(margin-left, 550px);
 283         margin-top: 0em;
 284     }
 285 }
 286
 287
 288 .book-box-body {
 289     @include size(margin-bottom, 10px);
 290     position: relative;
 291
 292     .book-box-head,
 293     .tags,
 294     .book-box-tools {
 295         @include min-screen($S_BOOK_SHORT_FULL) {
 296             margin-left: 154px;
 297         }
 298     }
 299
 300     .book-box-head {
 301         @include size(padding-top, 14px);
 302         @include size(margin-bottom, 10px);
 303
 304         @include min-screen($S_BOOK_SHORT_FULL) {
 305             @include size(min-height, 70px);
 306         }
 307
 308         a {
 309             color: black;
 310         }
 311         .author {
 312             @include size(font-size, 11px);
 313             @include mono;
 314             @include size(line-height, 13.2px);
 315             @include size(max-height, 26.4px);
 316             overflow: hidden;
 317
 318             @include min-screen($S_BOOK_SHORT_FULL) {
 319                 @include size(max-width, 264px);
 320             }
 321         }
 322         .title {
 323             @include size(font-size, 24px);
 324             line-height: 1.2em;
 325             @include size(margin-top, 7.2px);
 326             @include size(margin-bottom, 12px);
 327
 328             @include min-screen($S_BOOK_SHORT_FULL) {
 329                 margin-bottom: 0;
 330                 @include size(height, 57.6px);
 331                 overflow: hidden;
 332             }
 333         }
 334     }
 335
 336     .tags {
 337         @include size(font-size, 11px);
 338         line-height: 1.2em;
 339         margin-bottom: 5px;
 340
 341         @include min-screen($S_BOOK_SHORT_FULL) {
 342             @include size(max-height, 57.6px);
 343             overflow: hidden;
 344         }
 345
 346         .category {
 347             display: block;
 348             @include size(margin-top, 6px);
 349             @include size(margin-bottom, 6px);
 350
 351             @include min-screen($S_BOOK_SHORT_FULL) {
 352                 display: inline;
 353             }
 354
 355             .mono {
 356                 @include mono;
 357             }
 358
 359             .book-box-tag {
 360                 @include size(margin-left, 4.4px);
 361                 @include size(margin-right, 5.5px);
 362             }
 363         }
 364     }
 365
 366 }
 367
 368
 369
 370 .book-box-tools {
 371     @include size(font-size, 11px);
 372     margin: 0;
 373     padding: 0;
 374     list-style: none;
 375
 376     clear: left;
 377
 378     @include min-screen($S_BOOK_SHORT_MEDIUM) {
 379         clear: none;
 380         @include size(margin-left, 139px + 15px);
 381     }
 382
 383     li {
 384         @include mono;
 385         margin-top: 0;
 386     }
 387
 388     .book-box-read {
 389         a {
 390             @include mono;
 391             display: inline-block;
 392             background: #0D7E85;
 393             color: white;
 394             @include size(width, 200px);
 395             text-align: center;
 396             @include size(margin-bottom, 5px);
 397         }
 398
 399         a:before {
 400             content: url("/static/img/read-white.png");
 401             @include size(font-size, 25px);
 402             @include size(margin-right, 3.71px);
 403             vertical-align: middle;
 404             font-weight: normal;
 405         }
 406     }
 407
 408     .book-box-download {
 409         position: relative;
 410
 411         a {
 412             @mixin downarrow {
 413                 color: #0D7E85;
 414
 415                 &:before {
 416                     content: url("/static/img/download.png");
 417                     @include size(font-size, 25px);
 418                     @include size(margin-right, 3.71px);
 419                     vertical-align: middle;
 420                     font-weight: normal;
 421                     display: inline;
 422                 }
 423             }
 424
 425             &.downarrow {
 426                 @include downarrow;
 427             }
 428         }
 429
 430         .book-box-formats {
 431             display: inline-block;
 432             max-width: 220px;
 433             vertical-align: top;
 434             padding-top: 6px;
 435
 436                 a {
 437                     display: inline-block;
 438                     @include size(padding, .2em 1em);
 439                 }
 440         }
 441     }
 442 }
 443
 444
 445
 446
 447 .star {
 448     @include size(font-size, 22.5px);
 449     @include size(margin-right, 11.25px);
 450     position: absolute;
 451     right: 0;
 452
 453     button::-moz-focus-inner {
 454         padding: 0;
 455         border: 0
 456     }
 457     .if-unlike button {
 458         font-size: 1em;
 459         font-family: inherit;
 460         border: 0;
 461         background: none;
 462         margin: 0;
 463         padding: 0;
 464         color: #757575;
 465     }
 466     .if-like a {
 467         display:block;
 468         text-align:right;
 469         padding: 0;
 470     }
 471 }
 472 .like .if-unlike {
 473     display: none;
 474 }
 475 .unlike .if-like {
 476     display: none;
 477 }
 478
 479
 480 #book-detail .see-also,
 481 #picture-detail .see-also {
 482     h1 {
 483         @include size(height, 32px);
 484         margin: 0;
 485         @include size(padding-top, 19px);
 486         @include size(padding-left, 10px);
 487
 488         @include size(font-size, 11px);
 489         @include mono;
 490         font-weight: normal;
 491
 492         @media screen and (min-width: 33em) {
 493             @include size(padding-left, 19px);
 494         }
 495     }
 496 }