apps/wolnelektury_core/static/css/main/main_page.scss

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