src/wolnelektury/static/scss/main/main_page.scss

   1 .big-cite {
   2     background-color: #444;
   3     color: white;
   4     padding: 0;
   5     margin: 0;
   6     background-size: cover;
   7     background-position: 50% 50%;
   8
   9     background-image: url(/static/img/backdrop/book-drawer-315.jpg);
  10
  11     .cite-box, .cite-box-text, .cite-text {
  12         box-sizing: border-box;
  13         //@include size(padding, 46px 10px 48px 0);
  14         padding:
  15                 46/975*100vw
  16                 40/975*100vw
  17                 48/975*100vw
  18                 0;
  19
  20         background: none;
  21         color: white;
  22
  23         @media screen and (min-width: 62.5em) {
  24                 padding: 46px 40px 48px 0;
  25         }
  26
  27         .vip {
  28             padding-left: 10%;
  29             margin:
  30                 2.5/975*100vw
  31                 0
  32                 5/975*100vw
  33                 10/975*100vw;
  34
  35             font-size: 11/975 * 100vw;
  36
  37             @media screen and (min-width: 62.5em) {
  38                 margin: 2.5px 0 5px 10px;
  39                 font-size: 11px;
  40             }
  41         }
  42
  43         .cite-body {
  44             margin: .5 /975 * 100vw;
  45             font-size: (30 / 975) * 100vw;
  46             line-height: 1.16em;
  47
  48             @media screen and (min-width: 62.5em) {
  49                 font-size: 30px;
  50                 margin: .5px;
  51             }
  52         }
  53
  54         .source {
  55             margin: 16/975*100vw 2/975*100vw 16/975*100vw 0;
  56             font-size: 12/975*100vw;
  57             @media screen and (min-width: 62.5em) {
  58                 margin: 16px 2px 16px 0;
  59                 font-size: 12px;
  60             }
  61         }
  62
  63         /* Make cite body and source slide to the left. */
  64         .cite-body, .source {
  65                 padding-left: 21.9%;
  66             margin-left: -38/975*100vw;
  67
  68             @media screen and (min-width: 62.5em) {
  69                 @include size(margin-left, -38px);
  70             }
  71         }
  72
  73         /* Semi-transparent background. */
  74         .cite-body span,
  75         .vip span,
  76         .source span {
  77             color: white;
  78             background-color: rgb(0, 0, 0);
  79             background-color: rgba(0, 0, 0, 0.6);
  80             /* For IE 5.5 - 7*/
  81             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  82             /* For IE 8*/
  83             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  84         }
  85     }
  86
  87
  88     .cite-text {
  89         .vip {
  90                 float: left;
  91                 padding-left: 0;
  92                 margin-left: 16/975*100vw;
  93                 text-align: right;
  94                 width: 147/975*100vw;
  95         }
  96         .cite-body, .source {
  97                 padding-left: 0;
  98                 margin-left: 175/975*100vw;
  99         }
 100
 101         @media screen and (min-width: 62.5em) {
 102             .vip {
 103                 @include size(margin-left, 16px);
 104                 @include size(width, 147px);
 105             }
 106             .cite-body, .source {
 107                 @include size(margin-left, 175px);
 108             }
 109
 110         }
 111     }
 112
 113
 114     .cite-box-text {
 115             padding-left: (975 / 2 + 45) /975 * 100vw;
 116
 117             @media screen and (min-width: 62.5em) {
 118                     padding-left: 975px / 2 + 45px;
 119             }
 120     }
 121
 122     /* a long cite displays smaller */
 123     .cite-text-small .cite-body {
 124         //@include size(font-size, 16px);
 125         font-size: (20/975) * 100vw;
 126         @media screen and (min-width: 62.5em) {
 127             @include size(font-size, 20px);
 128         }
 129     }
 130
 131     h2 {
 132         margin: 0;
 133         @include size(font-size, 11px);
 134         color: #575c63;
 135     }
 136 }
 137
 138
 139 #main-library {
 140     .main-library-row {
 141         position: relative;
 142
 143         .covers {
 144             white-space: nowrap;
 145             width: 90%;
 146             overflow-x: hidden;
 147             padding-bottom: 2px;
 148
 149         }
 150         .note {
 151             position: absolute;
 152             right: 0;
 153             top: 1px;
 154             width: 139px;
 155             height: 289px - 22px;
 156         }
 157     }
 158 }
 159
 160
 161 #main-last {
 162     h1 {
 163         @include size(height, 32px);
 164         margin: 0;
 165         @include size(padding-top, 19px);
 166         @include size(padding-left, 10px);
 167
 168         @include size(font-size, 11px);
 169         @include mono;
 170         font-weight: normal;
 171
 172         @media screen and (min-width: 33em) {
 173             @include size(padding-left, 19px);
 174         }
 175
 176         a {
 177             color: black;
 178
 179             &:after {
 180                 content: " >";
 181             }
 182         }
 183     }
 184     .book-mini-box:nth-child(3) {
 185         @media screen and (min-width: 30em) {
 186             margin-right: 3em;
 187         }
 188         @media screen and (min-width: 33em) {
 189             margin-right: 0;
 190         }
 191     }
 192 }
 193
 194
 195 .infopages-box {
 196     margin: 0;
 197     @include size(margin-top, 5px);
 198     @include size(padding, 0 5px);
 199     vertical-align: top;
 200     color: #989898;
 201
 202     @media screen and (min-width: 20em) {
 203         display: inline-block;
 204         @include size(width, 206px);
 205         @include size(padding-left, 17px);
 206         @include size(padding-right, 17px);
 207     }
 208
 209     h1 {
 210         @include size(height, 28px);
 211         margin: 0;
 212         @include size(padding-top, 25px);
 213         @include size(font-size, 11px);
 214         color: #017e85;
 215         font-weight: normal;
 216         @include mono;
 217     }
 218
 219     a {
 220         color: black;
 221     }
 222
 223     ol, ul {
 224         @include size(font-size, 11px);
 225         list-style: none;
 226         padding: 0;
 227         margin: 0;
 228         line-height: 1.45em;
 229
 230         li {
 231             @include size(margin-bottom, 8px);
 232             @media screen and (min-width: 62.5em) {
 233                 @include size(margin-bottom, 2.5px);
 234             }
 235         }
 236     }
 237
 238     .social-links {
 239         @include size(margin-top, 10px);
 240
 241         a {
 242             @include size(margin-right, 6px);
 243         }
 244     }
 245 }
 246
 247 .more {
 248     display: block;
 249     margin-top: .5em;
 250 }
 251
 252
 253 section {
 254     margin-top: 2em;
 255 }
 256
 257
 258 .tag-box-section {
 259     @media screen and (min-width: 768px) {
 260         display: inline-block;
 261         width: 48%;
 262         margin-right: 2%;
 263         vertical-align: top;
 264
 265         .tag-box {
 266             display: block;
 267             width: 100%;
 268         }
 269     }
 270 }
 271
 272 #main-theme {
 273     .white-box {
 274         position: relative;
 275
 276         .cite-text, .cite-text-small {
 277             display: none;
 278
 279             @media screen and (min-width: 768px) {
 280                 display: block;
 281                 position: absolute;
 282                 right: 1em;
 283                 top: 7em;
 284                 background: #F7F7F7;
 285                 width: 200px;
 286                 padding-left: 20px;
 287             }
 288
 289             @media screen and (min-width: 1024px) {
 290                 width: 340px;
 291                 padding-left: 80px;
 292             }
 293         }
 294     }
 295 }
 296
 297
 298 .carousel {
 299     position: relative;
 300     width: 100%;
 301     height: 315/975*100vw;
 302     overflow: hidden;
 303
 304     @media screen and (min-width: 62.5em) {
 305         width: 975px;
 306         height: 315px;
 307     }
 308
 309     .cycle-prev {
 310         left: 0;
 311         &::after {
 312             content: "◀";
 313         }
 314     }
 315     .cycle-next {
 316         right: 0;
 317         &::after {
 318             content: "▶";
 319         }
 320     }
 321
 322     .cycle-prev, .cycle-next {
 323         position: absolute;
 324         top: 50/975 * 100vw;
 325         bottom: 50/975 * 100vw;
 326         width: 15%;
 327         z-index: 1000;
 328         background: black;
 329         color: white;
 330         opacity: 0;
 331
 332         @media screen and (min-width: 62.5em) {
 333             top: 50px;
 334             bottom: 50px;
 335         }
 336
 337         &::after {
 338             top: 50/975 * 100vw;
 339             bottom: 50/975 * 100vw;
 340             font-size: 100/975*100vw;
 341             display: block;
 342             line-height: (315-100)/975*100vw;
 343             text-align: center;
 344             cursor: pointer;
 345
 346             @media screen and (min-width: 62.5em) {
 347                 font-size: 100px;
 348                 line-height: 315px - 100px;
 349                 top: 50px;
 350                 bottom: 50px;
 351             }
 352         }
 353         &:hover {
 354             opacity: .33;
 355         }
 356     }
 357 }
 358
 359
 360 .cycle-pager {
 361     text-align: center;
 362     width: 100%;
 363     z-index: 500;
 364     position: absolute;
 365     bottom: 0;
 366     overflow: hidden;
 367
 368     span {
 369         font-family: arial;
 370         font-size: 64 /975*100vw;
 371         width: 32 /975*100vw;
 372         height: 32 /975*100vw;
 373         display: inline-block;
 374         color: #ddd;
 375         cursor: pointer;
 376
 377         text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
 378
 379         @media screen and (min-width: 62.5em) {
 380             font-size: 64px;
 381             width: 32px;
 382             height: 32px;
 383         }
 384
 385         &.cycle-pager-active {
 386             color: #018189;
 387         }
 388     }
 389
 390     > * {
 391         cursor: pointer;
 392     }
 393 }