From 80255411ee7040e0cebbf6b05d2ce323f6f2596e Mon Sep 17 00:00:00 2001 From: JinweiClarkChao Date: Fri, 22 Aug 2014 17:23:02 +0800 Subject: backup --- Back/Blocks/Flipboard/css/demo.css | 49 +++ Back/Blocks/Flipboard/css/fallback.css | 41 ++ Back/Blocks/Flipboard/css/font.css | 18 + ...k5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff | Bin 0 -> 21512 bytes ...k5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff | Bin 0 -> 20972 bytes ...XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff | Bin 0 -> 19916 bytes Back/Blocks/Flipboard/css/style.css | 465 +++++++++++++++++++++ 7 files changed, 573 insertions(+) create mode 100644 Back/Blocks/Flipboard/css/demo.css create mode 100644 Back/Blocks/Flipboard/css/fallback.css create mode 100644 Back/Blocks/Flipboard/css/font.css create mode 100644 Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff create mode 100644 Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff create mode 100644 Back/Blocks/Flipboard/css/jIXlqT1WKafUSwj6s9AzV6XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff create mode 100644 Back/Blocks/Flipboard/css/style.css (limited to 'Back/Blocks/Flipboard/css') diff --git a/Back/Blocks/Flipboard/css/demo.css b/Back/Blocks/Flipboard/css/demo.css new file mode 100644 index 0000000..2bf1e5b --- /dev/null +++ b/Back/Blocks/Flipboard/css/demo.css @@ -0,0 +1,49 @@ +/* @import url('normalize.css'); */ +/* General Demo Style */ +*{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +body{ + font-family: 'Open Sans Condensed','Arial Narrow', serif; + background: #ddd url(../images/fabric_plaid.png) repeat top left; + font-weight: 400; + font-size: 15px; + color: #333; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; + margin: 0; + overflow: hidden; +} +a{ + color: #555; + text-decoration: none; +} +.clr{ + clear: both; + padding: 0; + height: 0; + margin: 0; +} +.main-title{ + position: absolute; + z-index: -1; + width: 50%; + padding: 20px 40px; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); +} +.main-title h1{ + font-size: 45px; + line-height: 52px; + font-weight: 300; + color: #777; +} +.main-title h1 strong{ + font-weight: 700; +} +.main-title p{ + font-size: 18px; + color: #F86738; +} \ No newline at end of file diff --git a/Back/Blocks/Flipboard/css/fallback.css b/Back/Blocks/Flipboard/css/fallback.css new file mode 100644 index 0000000..6ceae5a --- /dev/null +++ b/Back/Blocks/Flipboard/css/fallback.css @@ -0,0 +1,41 @@ +.no-csstransforms3d body{ + overflow: auto; +} +.no-csstransforms3d .f-page.f-cover, +.no-csstransforms3d .f-page.f-cover-back{ + display: none !important; +} +.no-csstransforms3d .f-title{ + position: relative; +} +.no-csstransforms3d .main-title{ + position: relative; + width: 100%; +} +.no-csstransforms3d .box{ + width: auto; + float: none; + height: auto; + margin: 20px; + box-shadow: 1px 1px 3px rgba(0,0,0,0.2); + cursor: auto; +} +.no-csstransforms3d .box:after, +.no-csstransforms3d .box-img-left:after, +.no-csstransforms3d .box-img-right:after{ + display: none; +} +.no-csstransforms3d .box .img-cont, +.no-csstransforms3d .box-img-left .img-cont, +.no-csstransforms3d .box-img-right .img-cont{ + width: 300px; + height: 200px; + float: left; + margin: 10px 20px 20px 0; +} +.no-csstransforms3d .box-img-left p{ + margin-left: 0px +} +.no-csstransforms3d .box-img-right p{ + margin-right: 0px +} \ No newline at end of file diff --git a/Back/Blocks/Flipboard/css/font.css b/Back/Blocks/Flipboard/css/font.css new file mode 100644 index 0000000..de90dc0 --- /dev/null +++ b/Back/Blocks/Flipboard/css/font.css @@ -0,0 +1,18 @@ +@font-face { + font-family: 'Open Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans Condensed'; + font-style: normal; + font-weight: 700; + src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(jIXlqT1WKafUSwj6s9AzV6XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff) format('woff'); +} \ No newline at end of file diff --git a/Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff b/Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff new file mode 100644 index 0000000..66adc47 Binary files /dev/null and b/Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff differ diff --git a/Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff b/Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff new file mode 100644 index 0000000..fa873b2 Binary files /dev/null and b/Back/Blocks/Flipboard/css/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff differ diff --git a/Back/Blocks/Flipboard/css/jIXlqT1WKafUSwj6s9AzV6XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff b/Back/Blocks/Flipboard/css/jIXlqT1WKafUSwj6s9AzV6XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff new file mode 100644 index 0000000..ffd3d2f Binary files /dev/null and b/Back/Blocks/Flipboard/css/jIXlqT1WKafUSwj6s9AzV6XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff differ diff --git a/Back/Blocks/Flipboard/css/style.css b/Back/Blocks/Flipboard/css/style.css new file mode 100644 index 0000000..577dc52 --- /dev/null +++ b/Back/Blocks/Flipboard/css/style.css @@ -0,0 +1,465 @@ +.container { + position: relative; + margin: 0 auto; + -webkit-perspective: 2200px; + -moz-perspective: 2200px; + perspective: 2200px; +} +.page { + width: 50%; + height: 100%; + position: absolute; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -webkit-transform-origin: left center; + -moz-transform-origin: left center; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.page > div { + display: block; + height: 100%; + width: 100%; + position: absolute; + background: #fff; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; +} +.page .back { + -webkit-transform: rotateY(-180deg); + -moz-transform: rotateY(-180deg); +} +.page .outer{ + width: 100%; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + overflow: hidden; + z-index: 999; +} +.page .content{ + height: 100%; + position: absolute; + top: 0px; + left: 0px; +} +.overlay, .flipoverlay{ + background-color: rgba(0, 0, 0, 0.6); + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + opacity: 0; +} +.flipoverlay{ + background-color: rgba(0, 0, 0, 0.2); +} +.page .content .inner{ + padding: 50px 15px 10px; + height: 100%; +} +.page h1{ + text-align: center; +} +.page.cover .front .content, +.page.cover-back .back .content{ + width: 100% !important; +} +.page.cover .front .content:after, +.page.cover-back .back .content:after{ + position: absolute; + top: 0px; + left: 0px; + width: 10px; + height: 100%; + content: ''; + 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%); + opacity: 0.2; +} +.page.cover-back .back .content:after{ + left: auto; + right: 0px; + 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%); +} +.page.cover .front .content .inner{ + padding-top: 20px; +} +.page.cover .front .content{ + background: #ddd url(../images/cover1.jpg) no-repeat center center; + background-size: cover; +} +.page.cover-back .back .content{ + background: #B0D5FF; +} +.page.cover h1{ + color: rgba(255,255,255,0.9); + text-align: right; + font-weight: 300; + font-size: 34px; + text-transform: uppercase; + margin: 0 0 0 60%; + line-height: 34px; + padding-bottom: 10px; + cursor: default; +} +.page.cover h1 span{ + display: block; + font-weight: 300; + font-size: 15px; +} +.page.cover .f-cover-story{ + color: rgba(255,255,255,0.9); + font-weight: 600; + font-size: 50px; + line-height: 46px; + position: absolute; + bottom: 60px; + left: 40px; + margin: 0; + text-transform: uppercase; + cursor: default; +} +a.f-ref{ + line-height: 20px; + font-size: 16px; + position: absolute; + top: 252px; + font-weight: 300; + text-indent: 1px; +} +.page.cover .f-cover-story span{ + display: block; + font-size: 26px; + line-height: 26px; +} +.page a, +.page.cover .f-cover-story span{ + color: #F86738; +} +.page a:hover{ + color: #000; +} +.f-cover-flip{ + background: #000; + color: #ddd; + position: absolute; + right: 0px; + padding: 5px 30px 5px 20px; + font-size: 30px; + text-transform: uppercase; + font-weight: 500; + top: 50%; + margin-top: -25px; + cursor: default; +} +.logo{ + width: 180px; + height: 180px; + position: absolute; + top: 20px; + left: 30px; + line-height: 428px; + color: white; + font-size: 59px; + font-weight: bold; + text-indent: -3px; + cursor: default; +} +.logo:before{ + position: absolute; + width: 49%; + height: 50%; + content: ''; + top: 0px; + left: 0px; + background: rgba(255,255,255,0.4); + box-shadow: 0 95px 0px rgba(255,255,255,0.6); +} +.logo:after{ + position: absolute; + width: 49%; + height: 50%; + content: ''; + top: 0px; + right: 0px; + background: rgba(255,255,255,0.6); + box-shadow: 0 95px 0px rgba(255,255,255,0.4); +} +.f-title{ + position: absolute; + top: 0px; + left: 0px; + height: 50px; + text-align:center; + width: 100%; +} +.f-title h2{ + line-height: 50px; + margin: 0; + font-weight: 300; + font-size: 28px; + color: #aaa; + float: left; + width: 33%; +} +.f-title a{ + width: 33%; + float: left; + text-align: right; + overflow: hidden; + height: 50px; + font-size: 12px; + line-height: 50px; + padding: 0px 15px; + color: #777; + font-style: italic; + font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif; +} +.f-title a:first-child{ + text-align: left; +} +.f-title a:hover{ + color: #000; +} +.box{ + border-top: 1px solid #f2f2f2; + float: left; + padding: 20px; + overflow: hidden; + position: relative; + background: #fff; + cursor: pointer; +} +.img-cont{ + height: 40%; + width: 100%; + background-repeat: no-repeat; + background-position: top center; + background-size: cover; +} +.img-1{ + background-image: url(../images/1.gif); +} +.img-2{ + background-image: url(../images/beijing.png); + height: 60%; +} +.img-3{ + background-image: url(../images/31.png); +} +.img-4{ + background-image: url(../images/32.png); +} +.img-5{ + background-image: url(../images/33.png); +} +.img-6{ + background-image: url(../images/34.png); +} +.img-7{ + background-image: url(../images/44.jpg); +} +.img-8{ + background-image: url(../images/41.jpg); +} +.img-9{ + background-image: url(../images/43.jpg); +} +.box h3{ + padding: 10px 0px; + margin: 0; + font-size: 18px; +} +.box h3 span{ + display: block; + font-size: 11px; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 2px; + color: #74726f; +} +.box:after{ + position: absolute; + 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%); + 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))); + 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%); + 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%); + 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%); + 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%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); + height: 50px; + bottom: 0px; + left: 0px; + right: 0px; + content: ''; +} +.box p{ + margin: 0; + padding: 0; + text-align: justify; + font-family: Georgia; + font-size: 13px; + line-height: 20px; + display: block; + position: relative; + padding-bottom: 30px; +} +.w-25{ width: 25%; } +.w-30{ width: 30%; } +.w-40{ width: 40%; } +.w-50{ width: 50%; } +.w-60{ width: 60%; } +.w-70{ width: 70%; } +.w-75{ width: 75%; } +.w-100{ width: 100%; } + +.h-25{ height: 25%; } +.h-30{ height: 30%; } +.h-40{ height: 40%; } +.h-50{ height: 50%; } +.h-60{ height: 60%; } +.h-70{ height: 70%; } +.h-75{ height: 75%; } +.h-100{ height: 100%; } + +.box-expanded.box-img-left .img-cont, +.box-img-left .img-cont{ + float: left; + width: 40%; + height: 100%; + margin-right: 2%; +} +.box-img-left:after{ + left: 42%; +} +.box-img-left p{ + margin-left: 42%; +} +.box-img-right .img-cont{ + float: right; + width: 40%; + height: 100%; + margin-left: 2%; +} +.box-img-right:after{ + right: 42%; +} +.box-img-right p{ + margin-right: 42%; +} +.title-top h3{ + padding-top: 0px; +} +.box-b-r{ + border-right: 1px solid #f2f2f2; +} +.box-b-l{ + border-left: 1px solid #f2f2f2; +} +.box-expanded{ + border: none; + padding: 50px; +} +.box-expanded .img-cont{ + box-shadow: 1px 1px 2px rgba(0,0,0,0.1); + float: left; + width: 50%; + height: 50%; + margin-right: 20px; + box-shadow: 1px 1px 2px rgba(0,0,0,0.1); +} +.box.box-expanded h3{ + font-size: 50px; + line-height: 50px; + padding-top: 0px; +} +.box.box-expanded h3 span{ + font-size: 14px; +} +.box.box-expanded p{ + font-size: 20px; + line-height: 30px; +} +.box.box-expanded:after{ + background: transparent; +} +.box-expanded .box-close{ + position: absolute; + top: 0px; + right: 20px; + width: 80px; + height: 30px; + background: #000; + color: #fff; + font-weight: bold; + font-size: 16px; + text-align: center; + line-height: 30px; +} +@media screen and (max-width: 760px){ + .f-title a { + height: 30px; + line-height: 14px; + margin-top: 10px; + } + .f-title h2{ + font-size: 18px; + line-height: 18px; + margin-top: 5px; + } +} +@media screen and (max-width: 690px){ + .page .box{ + width: 100%; + height: 20%; + padding: 5px; + border: none; + border-top: 1px solid #ddd; + } + .page .box h3{ + font-size: 16px; + } + .page .box h3 span, + .page .box .img-cont, + .page .box p, + .page .box:after{ + display: none; + } + .box.box-expanded h3{ + font-size: 26px; + line-height: 30px; + padding-top: 15px; + clear: both; + } + .box.box-expanded p{ + font-size: 16px; + line-height: 22px; + } + .box-img-left p, + .box-img-right p{ + margin: 0; + } + .box.box-expanded h3 span{ + font-size: 12px; + } + body .box-expanded{ + padding: 40px 20px 20px; + } + body .box-expanded .img-cont{ + width: 100% !important; + height: 50% !important; + margin: 0; + } + .cover-elements{ + display: none; + } + +} \ No newline at end of file -- cgit v1.2.3