6f45bf67afdcd35fdba2365473cef4731c184865
[wolnelektury.git] / 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 }