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