Merge branch 'reflow'
[wolnelektury.git] / 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 }