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