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: 100%;
   7     background-position: 50% 68%;
   8     background-repeat: repeat-y;
   9
  10     background-image: url(/static/img/backdrop/book-drawer2.jpg);
  11
  12     @media screen and (min-width: 62.5em) {
  13         background-image: url(/static/img/backdrop/book-drawer2.jpg);
  14     }
  15
  16     &.banner {
  17         background-image: none;
  18     }
  19
  20     .cite {
  21         @include size(padding, 46px 10px 48px 0);
  22         background: none;
  23         color: white;
  24
  25         @media screen and (min-width: 30em) {
  26             @include size(padding-right, 40px);
  27         }
  28
  29         .vip {
  30             @include size(margin-left, 10px);
  31             @include size(margin-top, 2.5px);
  32             @include size(margin-bottom, 5px);
  33             @include size(font-size, 11px);
  34
  35             @media screen and (min-width: 16em) {
  36                 padding-left: 10%;
  37                 @include size(margin-left, -18px);
  38             }
  39
  40             @media screen and (min-width: 62.5em) {
  41                 float: left;
  42                 padding-left: 0;
  43                 @include size(margin-left, 16px);
  44                 text-align: right;
  45                 @include size(width, 147px);
  46             }
  47         }
  48
  49         .cite-body {
  50             @include size(margin, .5px);
  51             @include size(font-size, 20px);
  52             line-height: 1.16em;
  53
  54             @media screen and (min-width: 30em) {
  55                 @include size(font-size, 30px);
  56             }
  57         }
  58
  59         .source {
  60             @include size(margin-top, 16px);
  61             @include size(margin-bottom, 16px);
  62             @include size(margin-right, 2px);
  63             @include size(font-size, 12px);
  64         }
  65
  66         /* Make cite body and source slide to the left. */
  67         .cite-body, .source {
  68             @include size(margin-left, 10px);
  69
  70             @media screen and (min-width: 16em) {
  71                 padding-left: 21.9%;
  72                 @include size(margin-left, -38px);
  73             }
  74
  75             @media screen and (min-width: 62.5em) {
  76                 padding-left: 0;
  77                 @include size(margin-left, 175px);
  78             }
  79         }
  80
  81         /* Semi-transparent background. */
  82         .cite-body span,
  83         .vip span,
  84         .source span {
  85             color: white;
  86             background-color: rgb(0, 0, 0);
  87             background-color: rgba(0, 0, 0, 0.6);
  88             /* For IE 5.5 - 7*/
  89             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  90             /* For IE 8*/
  91             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  92         }
  93     }
  94
  95     /* a long cite displays smaller */
  96     .cite-small .cite-body {
  97         @include size(font-size, 16px);
  98         @media screen and (min-width: 30em) {
  99             @include size(font-size, 20px);
 100         }
 101     }
 102
 103     h2 {
 104         margin: 0;
 105         @include size(font-size, 11px);
 106         color: #575c63;
 107     }
 108 }
 109
 110
 111 #main-library {
 112     .main-library-row {
 113         position: relative;
 114
 115         .covers {
 116             white-space: nowrap;
 117             width: 90%;
 118             overflow-x: hidden;
 119             padding-bottom: 2px;
 120
 121         }
 122         .note {
 123             position: absolute;
 124             right: 0;
 125             top: 1px;
 126             width: 139px;
 127             height: 289px - 22px;
 128         }
 129     }
 130 }
 131
 132
 133 #main-last {
 134     h1 {
 135         @include size(height, 32px);
 136         margin: 0;
 137         @include size(padding-top, 19px);
 138         @include size(padding-left, 10px);
 139
 140         @include size(font-size, 11px);
 141         @include mono;
 142         font-weight: normal;
 143
 144         @media screen and (min-width: 33em) {
 145             @include size(padding-left, 19px);
 146         }
 147
 148         a {
 149             color: black;
 150
 151             &:after {
 152                 content: " >";
 153             }
 154         }
 155     }
 156     .book-mini-box:nth-child(3) {
 157         @media screen and (min-width: 30em) {
 158             margin-right: 3em;
 159         }
 160         @media screen and (min-width: 33em) {
 161             margin-right: 0;
 162         }
 163     }
 164 }
 165
 166
 167 .infopages-box {
 168     margin: 0;
 169     @include size(margin-top, 5px);
 170     @include size(padding, 0 5px);
 171     vertical-align: top;
 172     color: #989898;
 173
 174     @media screen and (min-width: 20em) {
 175         display: inline-block;
 176         @include size(width, 206px);
 177         @include size(padding-left, 17px);
 178         @include size(padding-right, 17px);
 179     }
 180
 181     h1 {
 182         @include size(height, 28px);
 183         margin: 0;
 184         @include size(padding-top, 25px);
 185         @include size(font-size, 11px);
 186         color: #017e85;
 187         font-weight: normal;
 188         @include mono;
 189     }
 190
 191     a {
 192         color: black;
 193     }
 194
 195     ol, ul {
 196         @include size(font-size, 11px);
 197         list-style: none;
 198         padding: 0;
 199         margin: 0;
 200         line-height: 1.45em;
 201
 202         li {
 203             @include size(margin-bottom, 8px);
 204             @media screen and (min-width: 62.5em) {
 205                 @include size(margin-bottom, 2.5px);
 206             }
 207         }
 208     }
 209
 210     .social-links {
 211         @include size(margin-top, 10px);
 212
 213         a {
 214             @include size(margin-right, 6px);
 215         }
 216     }
 217 }
 218
 219 .more {
 220     display: block;
 221     margin-top: .5em;
 222 }
 223
 224
 225 section {
 226     margin-top: 2em;
 227 }
 228
 229
 230 .tag-box-section {
 231     @media screen and (min-width: 768px) {
 232         display: inline-block;
 233         width: 48%;
 234         margin-right: 2%;
 235         vertical-align: top;
 236
 237         .tag-box {
 238             display: block;
 239             width: 100%;
 240         }
 241     }
 242 }
 243
 244 #main-theme {
 245     .white-box {
 246         position: relative;
 247
 248         .cite {
 249             display: none;
 250
 251             @media screen and (min-width: 768px) {
 252                 display: block;
 253                 position: absolute;
 254                 right: 1em;
 255                 top: 7em;
 256                 background: #F7F7F7;
 257                 width: 200px;
 258                 padding-left: 20px;
 259             }
 260
 261             @media screen and (min-width: 1024px) {
 262                 width: 340px;
 263                 padding-left: 80px;
 264             }
 265         }
 266     }
 267 }