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