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