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 #main-library {
 108     .main-library-row {
 109         position: relative;
 110
 111         .covers {
 112             white-space: nowrap;
 113             width: 90%;
 114             overflow-x: hidden;
 115             padding-bottom: 2px;
 116
 117         }
 118         .note {
 119             position: absolute;
 120             right: 0;
 121             top: 1px;
 122             width: 139px;
 123             height: 289px - 22px;
 124         }
 125     }
 126 }
 127
 128
 129 #main-last {
 130     h1 {
 131         @include size(height, 32px);
 132         margin: 0;
 133         @include size(padding-top, 19px);
 134         @include size(padding-left, 10px);
 135
 136         @include size(font-size, 11px);
 137         @include mono;
 138         font-weight: normal;
 139
 140         @media screen and (min-width: 33em) {
 141             @include size(padding-left, 19px);
 142         }
 143
 144         a {
 145             color: black;
 146
 147             &:after {
 148                 content: " >";
 149             }
 150         }
 151     }
 152     .book-mini-box:nth-child(3) {
 153         @media screen and (min-width: 30em) {
 154             margin-right: 3em;
 155         }
 156         @media screen and (min-width: 33em) {
 157             margin-right: 0;
 158         }
 159     }
 160 }
 161
 162
 163 .infopages-box {
 164     margin: 0;
 165     @include size(margin-top, 5px);
 166     @include size(padding, 0 5px);
 167     vertical-align: top;
 168     color: #989898;
 169
 170     @media screen and (min-width: 20em) {
 171         display: inline-block;
 172         @include size(width, 206px);
 173         @include size(padding-left, 17px);
 174         @include size(padding-right, 17px);
 175     }
 176
 177     h1 {
 178         @include size(height, 28px);
 179         margin: 0;
 180         @include size(padding-top, 25px);
 181         @include size(font-size, 11px);
 182         color: #017e85;
 183         font-weight: normal;
 184         @include mono;
 185     }
 186
 187     a {
 188         color: black;
 189     }
 190
 191     ol, ul {
 192         @include size(font-size, 11px);
 193         list-style: none;
 194         padding: 0;
 195         margin: 0;
 196         line-height: 1.45em;
 197
 198         li {
 199             @include size(margin-bottom, 8px);
 200             @media screen and (min-width: 62.5em) {
 201                 @include size(margin-bottom, 2.5px);
 202             }
 203         }
 204     }
 205
 206     .social-links {
 207         @include size(margin-top, 10px);
 208
 209         a {
 210             @include size(margin-right, 6px);
 211         }
 212     }
 213 }
 214
 215 .more {
 216     display: block;
 217     margin-top: .5em;
 218 }
 219
 220
 221 section {
 222     margin-top: 2em;
 223 }
 224
 225
 226 .tag-box-section {
 227     @media screen and (min-width: 768px) {
 228         display: inline-block;
 229         width: 48%;
 230         margin-right: 2%;
 231         vertical-align: top;
 232
 233         .tag-box {
 234             display: block;
 235             width: 100%;
 236         }
 237     }
 238 }
 239
 240 #main-theme {
 241     .white-box {
 242         position: relative;
 243
 244         .cite {
 245             display: none;
 246
 247             @media screen and (min-width: 768px) {
 248                 display: block;
 249                 position: absolute;
 250                 right: 1em;
 251                 top: 7em;
 252                 background: #F7F7F7;
 253                 width: 200px;
 254                 padding-left: 20px;
 255             }
 256
 257             @media screen and (min-width: 1024px) {
 258                 width: 340px;
 259                 padding-left: 80px;
 260             }
 261         }
 262     }
 263 }