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     .cite {
  17         @include size(padding, 46px 10px 48px 0);
  18         background: none;
  19         color: white;
  20
  21         @media screen and (min-width: 30em) {
  22             @include size(padding-right, 40px);
  23         }
  24
  25         .vip {
  26             @include size(margin-left, 10px);
  27             @include size(margin-top, 2.5px);
  28             @include size(margin-bottom, 5px);
  29             @include size(font-size, 11px);
  30
  31             @media screen and (min-width: 16em) {
  32                 padding-left: 10%;
  33                 @include size(margin-left, -18px);
  34             }
  35
  36             @media screen and (min-width: 62.5em) {
  37                 float: left;
  38                 padding-left: 0;
  39                 @include size(margin-left, 16px);
  40                 text-align: right;
  41                 @include size(width, 147px);
  42             }
  43         }
  44
  45         .cite-body {
  46             @include size(margin, .5px);
  47             @include size(font-size, 20px);
  48             line-height: 1.16em;
  49
  50             @media screen and (min-width: 30em) {
  51                 @include size(font-size, 30px);
  52             }
  53         }
  54
  55         .source {
  56             @include size(margin-top, 16px);
  57             @include size(margin-bottom, 16px);
  58             @include size(margin-right, 2px);
  59             @include size(font-size, 12px);
  60         }
  61
  62         /* Make cite body and source slide to the left. */
  63         .cite-body, .source {
  64             @include size(margin-left, 10px);
  65
  66             @media screen and (min-width: 16em) {
  67                 padding-left: 21.9%;
  68                 @include size(margin-left, -38px);
  69             }
  70
  71             @media screen and (min-width: 62.5em) {
  72                 padding-left: 0;
  73                 @include size(margin-left, 175px);
  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     /* a long cite displays smaller */
  92     .cite-small .cite-body {
  93         @include size(font-size, 16px);
  94         @media screen and (min-width: 30em) {
  95             @include size(font-size, 20px);
  96         }
  97     }
  98
  99     h2 {
 100         margin: 0;
 101         @include size(font-size, 11px);
 102         color: #575c63;
 103     }
 104 }
 105
 106
 107 #promo-box {
 108     @include size(margin-top, 16px);
 109
 110     @media screen and (min-width: 33em) {
 111         float: right;
 112         @include size(margin-top, -51px);
 113         @include size(width, 320px);
 114     }
 115
 116     h1 {
 117         @include size(padding, 20px 5px 0 10px);
 118         @include size(height, 31px);
 119         margin: 0;
 120         background: #191919;
 121         color: white;
 122         @include mono;
 123         @include size(font-size, 13px);
 124         font-weight: normal;
 125
 126         @media screen and (min-width: 33em) {
 127             @include size(padding-left, 25px);
 128             @include size(padding-right, 25px);
 129         }
 130     }
 131
 132     #promo-box-body {
 133         @include size(padding, 20px 5px);
 134         @include size(border-bottom, 2px solid #efefef);
 135         background: #efefef;
 136
 137         @media screen and (min-width: 33em) {
 138             @include size(padding-left, 28px);
 139             @include size(padding-right, 28px);
 140         }
 141
 142         @media screen and (min-width: 62.5em) {
 143             @include size(height, 300px);
 144         }
 145
 146         a {
 147             display: block;
 148             color: #6c6c6c;
 149         }
 150         p {
 151             margin-top: 0;
 152             @include size(font-size, 12px);
 153             line-height: 1.55em;
 154             color: #6c6c6c;
 155         }
 156         h2, h3 {
 157             color: #0d777e;
 158             @include size(font-size, 11px);
 159             @include size(height, 27.5px);
 160             margin: 0;
 161             @include mono;
 162             font-weight: normal;
 163
 164             &:after {
 165                 content: " >";
 166             }
 167         }
 168     }
 169 }
 170
 171
 172 #main-last {
 173     h1 {
 174         @include size(height, 32px);
 175         margin: 0;
 176         @include size(padding-top, 19px);
 177         @include size(padding-left, 10px);
 178
 179         @include size(font-size, 11px);
 180         @include mono;
 181         font-weight: normal;
 182
 183         @media screen and (min-width: 33em) {
 184             @include size(padding-left, 19px);
 185         }
 186
 187         a {
 188             color: black;
 189
 190             &:after {
 191                 content: " >";
 192             }
 193         }
 194     }
 195     .book-mini-box:nth-child(3) {
 196         @media screen and (min-width: 30em) {
 197             margin-right: 3em;
 198         }
 199         @media screen and (min-width: 33em) {
 200             margin-right: 0;
 201         }
 202     }
 203 }
 204
 205
 206 .infopages-box {
 207     margin: 0;
 208     @include size(margin-top, 5px);
 209     @include size(padding, 0 5px);
 210     vertical-align: top;
 211     color: #989898;
 212
 213     @media screen and (min-width: 20em) {
 214         display: inline-block;
 215         @include size(width, 206px);
 216         @include size(padding-left, 17px);
 217         @include size(padding-right, 17px);
 218     }
 219
 220     h1 {
 221         @include size(height, 28px);
 222         margin: 0;
 223         @include size(padding-top, 25px);
 224         @include size(font-size, 11px);
 225         color: #017e85;
 226         font-weight: normal;
 227         @include mono;
 228     }
 229
 230     a {
 231         color: black;
 232     }
 233
 234     ol, ul {
 235         @include size(font-size, 11px);
 236         list-style: none;
 237         padding: 0;
 238         margin: 0;
 239         line-height: 1.45em;
 240
 241         li {
 242             @include size(margin-bottom, 8px);
 243             @media screen and (min-width: 62.5em) {
 244                 @include size(margin-bottom, 2.5px);
 245             }
 246         }
 247     }
 248
 249     .social-links {
 250         @include size(margin-top, 10px);
 251
 252         a {
 253             @include size(margin-right, 6px);
 254         }
 255     }
 256 }