ddce4fc21e3e85eed8669019c13770047dffc61d
[wolnelektury.git] / apps / wolnelektury_core / 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 }