aboutsummaryrefslogtreecommitdiff
path: root/Code/Blocks/Flipboard/css/style.css
diff options
context:
space:
mode:
authorJinweiClarkChao <[email protected]>2014-09-23 22:34:14 +0800
committerJinwei Zhao <[email protected]>2017-01-13 15:07:44 +0800
commitb214f38d2c24a890ce36512a0c8bab965e27a508 (patch)
tree1522b651444407cbf120798e79be4657f1b472ab /Code/Blocks/Flipboard/css/style.css
parente13882d1656b143533cec307a19425e0a56ec999 (diff)
downloadjinwei.me-b214f38d2c24a890ce36512a0c8bab965e27a508.tar.gz
README
Diffstat (limited to 'Code/Blocks/Flipboard/css/style.css')
-rw-r--r--Code/Blocks/Flipboard/css/style.css465
1 files changed, 465 insertions, 0 deletions
diff --git a/Code/Blocks/Flipboard/css/style.css b/Code/Blocks/Flipboard/css/style.css
new file mode 100644
index 0000000..577dc52
--- /dev/null
+++ b/Code/Blocks/Flipboard/css/style.css
@@ -0,0 +1,465 @@
1.container {
2 position: relative;
3 margin: 0 auto;
4 -webkit-perspective: 2200px;
5 -moz-perspective: 2200px;
6 perspective: 2200px;
7}
8.page {
9 width: 50%;
10 height: 100%;
11 position: absolute;
12 -webkit-transform-style: preserve-3d;
13 -moz-transform-style: preserve-3d;
14 -webkit-transform-origin: left center;
15 -moz-transform-origin: left center;
16 -webkit-touch-callout: none;
17 -webkit-user-select: none;
18 -khtml-user-select: none;
19 -moz-user-select: none;
20 -ms-user-select: none;
21 user-select: none;
22}
23.page > div {
24 display: block;
25 height: 100%;
26 width: 100%;
27 position: absolute;
28 background: #fff;
29 -webkit-transform-style: preserve-3d;
30 -moz-transform-style: preserve-3d;
31 -webkit-backface-visibility: hidden;
32 -moz-backface-visibility: hidden;
33}
34.page .back {
35 -webkit-transform: rotateY(-180deg);
36 -moz-transform: rotateY(-180deg);
37}
38.page .outer{
39 width: 100%;
40 height: 100%;
41 position: absolute;
42 top: 0px;
43 left: 0px;
44 overflow: hidden;
45 z-index: 999;
46}
47.page .content{
48 height: 100%;
49 position: absolute;
50 top: 0px;
51 left: 0px;
52}
53.overlay, .flipoverlay{
54 background-color: rgba(0, 0, 0, 0.6);
55 position: absolute;
56 top: 0px;
57 left: 0px;
58 width: 100%;
59 height: 100%;
60 opacity: 0;
61}
62.flipoverlay{
63 background-color: rgba(0, 0, 0, 0.2);
64}
65.page .content .inner{
66 padding: 50px 15px 10px;
67 height: 100%;
68}
69.page h1{
70 text-align: center;
71}
72.page.cover .front .content,
73.page.cover-back .back .content{
74 width: 100% !important;
75}
76.page.cover .front .content:after,
77.page.cover-back .back .content:after{
78 position: absolute;
79 top: 0px;
80 left: 0px;
81 width: 10px;
82 height: 100%;
83 content: '';
84 background: -webkit-linear-gradient(left, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.01) 16%,rgba(0,0,0,0) 17%,rgba(0,0,0,0) 44%,rgba(0,0,0,0.08) 60%,rgba(0,0,0,0.09) 61%,rgba(0,0,0,0.35) 100%);
85 opacity: 0.2;
86}
87.page.cover-back .back .content:after{
88 left: auto;
89 right: 0px;
90 background:-webkit-linear-gradient(left, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.1) 10%,rgba(0,0,0,1) 100%);
91}
92.page.cover .front .content .inner{
93 padding-top: 20px;
94}
95.page.cover .front .content{
96 background: #ddd url(../images/cover1.jpg) no-repeat center center;
97 background-size: cover;
98}
99.page.cover-back .back .content{
100 background: #B0D5FF;
101}
102.page.cover h1{
103 color: rgba(255,255,255,0.9);
104 text-align: right;
105 font-weight: 300;
106 font-size: 34px;
107 text-transform: uppercase;
108 margin: 0 0 0 60%;
109 line-height: 34px;
110 padding-bottom: 10px;
111 cursor: default;
112}
113.page.cover h1 span{
114 display: block;
115 font-weight: 300;
116 font-size: 15px;
117}
118.page.cover .f-cover-story{
119 color: rgba(255,255,255,0.9);
120 font-weight: 600;
121 font-size: 50px;
122 line-height: 46px;
123 position: absolute;
124 bottom: 60px;
125 left: 40px;
126 margin: 0;
127 text-transform: uppercase;
128 cursor: default;
129}
130a.f-ref{
131 line-height: 20px;
132 font-size: 16px;
133 position: absolute;
134 top: 252px;
135 font-weight: 300;
136 text-indent: 1px;
137}
138.page.cover .f-cover-story span{
139 display: block;
140 font-size: 26px;
141 line-height: 26px;
142}
143.page a,
144.page.cover .f-cover-story span{
145 color: #F86738;
146}
147.page a:hover{
148 color: #000;
149}
150.f-cover-flip{
151 background: #000;
152 color: #ddd;
153 position: absolute;
154 right: 0px;
155 padding: 5px 30px 5px 20px;
156 font-size: 30px;
157 text-transform: uppercase;
158 font-weight: 500;
159 top: 50%;
160 margin-top: -25px;
161 cursor: default;
162}
163.logo{
164 width: 180px;
165 height: 180px;
166 position: absolute;
167 top: 20px;
168 left: 30px;
169 line-height: 428px;
170 color: white;
171 font-size: 59px;
172 font-weight: bold;
173 text-indent: -3px;
174 cursor: default;
175}
176.logo:before{
177 position: absolute;
178 width: 49%;
179 height: 50%;
180 content: '';
181 top: 0px;
182 left: 0px;
183 background: rgba(255,255,255,0.4);
184 box-shadow: 0 95px 0px rgba(255,255,255,0.6);
185}
186.logo:after{
187 position: absolute;
188 width: 49%;
189 height: 50%;
190 content: '';
191 top: 0px;
192 right: 0px;
193 background: rgba(255,255,255,0.6);
194 box-shadow: 0 95px 0px rgba(255,255,255,0.4);
195}
196.f-title{
197 position: absolute;
198 top: 0px;
199 left: 0px;
200 height: 50px;
201 text-align:center;
202 width: 100%;
203}
204.f-title h2{
205 line-height: 50px;
206 margin: 0;
207 font-weight: 300;
208 font-size: 28px;
209 color: #aaa;
210 float: left;
211 width: 33%;
212}
213.f-title a{
214 width: 33%;
215 float: left;
216 text-align: right;
217 overflow: hidden;
218 height: 50px;
219 font-size: 12px;
220 line-height: 50px;
221 padding: 0px 15px;
222 color: #777;
223 font-style: italic;
224 font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
225}
226.f-title a:first-child{
227 text-align: left;
228}
229.f-title a:hover{
230 color: #000;
231}
232.box{
233 border-top: 1px solid #f2f2f2;
234 float: left;
235 padding: 20px;
236 overflow: hidden;
237 position: relative;
238 background: #fff;
239 cursor: pointer;
240}
241.img-cont{
242 height: 40%;
243 width: 100%;
244 background-repeat: no-repeat;
245 background-position: top center;
246 background-size: cover;
247}
248.img-1{
249 background-image: url(../images/1.gif);
250}
251.img-2{
252 background-image: url(../images/beijing.png);
253 height: 60%;
254}
255.img-3{
256 background-image: url(../images/31.png);
257}
258.img-4{
259 background-image: url(../images/32.png);
260}
261.img-5{
262 background-image: url(../images/33.png);
263}
264.img-6{
265 background-image: url(../images/34.png);
266}
267.img-7{
268 background-image: url(../images/44.jpg);
269}
270.img-8{
271 background-image: url(../images/41.jpg);
272}
273.img-9{
274 background-image: url(../images/43.jpg);
275}
276.box h3{
277 padding: 10px 0px;
278 margin: 0;
279 font-size: 18px;
280}
281.box h3 span{
282 display: block;
283 font-size: 11px;
284 font-weight: 300;
285 text-transform: uppercase;
286 letter-spacing: 2px;
287 color: #74726f;
288}
289.box:after{
290 position: absolute;
291 background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.73) 22%, rgba(255,255,255,0.73) 23%, rgba(255,255,255,1) 91%);
292 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(255,255,255,0.73)), color-stop(23%,rgba(255,255,255,0.73)), color-stop(91%,rgba(255,255,255,1)));
293 background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
294 background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
295 background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
296 background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
297 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
298 height: 50px;
299 bottom: 0px;
300 left: 0px;
301 right: 0px;
302 content: '';
303}
304.box p{
305 margin: 0;
306 padding: 0;
307 text-align: justify;
308 font-family: Georgia;
309 font-size: 13px;
310 line-height: 20px;
311 display: block;
312 position: relative;
313 padding-bottom: 30px;
314}
315.w-25{ width: 25%; }
316.w-30{ width: 30%; }
317.w-40{ width: 40%; }
318.w-50{ width: 50%; }
319.w-60{ width: 60%; }
320.w-70{ width: 70%; }
321.w-75{ width: 75%; }
322.w-100{ width: 100%; }
323
324.h-25{ height: 25%; }
325.h-30{ height: 30%; }
326.h-40{ height: 40%; }
327.h-50{ height: 50%; }
328.h-60{ height: 60%; }
329.h-70{ height: 70%; }
330.h-75{ height: 75%; }
331.h-100{ height: 100%; }
332
333.box-expanded.box-img-left .img-cont,
334.box-img-left .img-cont{
335 float: left;
336 width: 40%;
337 height: 100%;
338 margin-right: 2%;
339}
340.box-img-left:after{
341 left: 42%;
342}
343.box-img-left p{
344 margin-left: 42%;
345}
346.box-img-right .img-cont{
347 float: right;
348 width: 40%;
349 height: 100%;
350 margin-left: 2%;
351}
352.box-img-right:after{
353 right: 42%;
354}
355.box-img-right p{
356 margin-right: 42%;
357}
358.title-top h3{
359 padding-top: 0px;
360}
361.box-b-r{
362 border-right: 1px solid #f2f2f2;
363}
364.box-b-l{
365 border-left: 1px solid #f2f2f2;
366}
367.box-expanded{
368 border: none;
369 padding: 50px;
370}
371.box-expanded .img-cont{
372 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
373 float: left;
374 width: 50%;
375 height: 50%;
376 margin-right: 20px;
377 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
378}
379.box.box-expanded h3{
380 font-size: 50px;
381 line-height: 50px;
382 padding-top: 0px;
383}
384.box.box-expanded h3 span{
385 font-size: 14px;
386}
387.box.box-expanded p{
388 font-size: 20px;
389 line-height: 30px;
390}
391.box.box-expanded:after{
392 background: transparent;
393}
394.box-expanded .box-close{
395 position: absolute;
396 top: 0px;
397 right: 20px;
398 width: 80px;
399 height: 30px;
400 background: #000;
401 color: #fff;
402 font-weight: bold;
403 font-size: 16px;
404 text-align: center;
405 line-height: 30px;
406}
407@media screen and (max-width: 760px){
408 .f-title a {
409 height: 30px;
410 line-height: 14px;
411 margin-top: 10px;
412 }
413 .f-title h2{
414 font-size: 18px;
415 line-height: 18px;
416 margin-top: 5px;
417 }
418}
419@media screen and (max-width: 690px){
420 .page .box{
421 width: 100%;
422 height: 20%;
423 padding: 5px;
424 border: none;
425 border-top: 1px solid #ddd;
426 }
427 .page .box h3{
428 font-size: 16px;
429 }
430 .page .box h3 span,
431 .page .box .img-cont,
432 .page .box p,
433 .page .box:after{
434 display: none;
435 }
436 .box.box-expanded h3{
437 font-size: 26px;
438 line-height: 30px;
439 padding-top: 15px;
440 clear: both;
441 }
442 .box.box-expanded p{
443 font-size: 16px;
444 line-height: 22px;
445 }
446 .box-img-left p,
447 .box-img-right p{
448 margin: 0;
449 }
450 .box.box-expanded h3 span{
451 font-size: 12px;
452 }
453 body .box-expanded{
454 padding: 40px 20px 20px;
455 }
456 body .box-expanded .img-cont{
457 width: 100% !important;
458 height: 50% !important;
459 margin: 0;
460 }
461 .cover-elements{
462 display: none;
463 }
464
465} \ No newline at end of file
Powered by cgit v1.2.3 (git 2.41.0)