@font-face { font-family: 'esq_pelican30_medium'; src: url('/static/posts/2014-best/fonts/esq_pelican_27-webfont.eot'); src: url('/static/posts/2014-best/fonts/esq_pelican_27-webfont.eot?#iefix') format('embedded-opentype'), url('/static/posts/2014-best/fonts/esq_pelican_27-webfont.woff2') format('woff2'), url('/static/posts/2014-best/fonts/esq_pelican_27-webfont.woff') format('woff'), url('/static/posts/2014-best/fonts/esq_pelican_27-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .post-lead{ display:none; } .article-comments-white-wrap{ width: 100%; margin-top: -50px; padding-top: 0px; padding-bottom: 70px; background: #f6f6f6; } .article-comments-white-wrap section.comments{ margin:0 auto; } .article-comments-white-wrap .comments-header{ color:#000; } .article-comments-white-wrap .comment-text textarea{ background: #fff; border: 1px solid #BDBDBD; color:black; } .article-comments-white-wrap .comment{ } .article-comments-white-wrap .comment-body{ color:#000 !important; } .article-comments-white-wrap .comment-username{ color: #000 !important; } .article-comments-white-wrap .comment-line{ background:#E2E2E1; } .no-touch .article-comments-white-wrap .comment:hover{ background:#fff !important; } .no-touch .article-comments-white-wrap .new-comment:hover{ background:none !important; } footer.bottom{ margin-top:0px; } #article-detail{ padding-bottom: 70px; } #article-detail > .right-column{ height:600px; max-height:600px !important; overflow:hidden; padding-left: 43px; padding-right: 0px; } .article-comments-white-wrap .related-articlepost-list{ width:1248px; margin:19px auto; } .article-comments-white-wrap .related-articlepost-list li{ margin-top:40px; } .article-comments-white-wrap .related-articlepost-list .related-articlepost-list-excerpt{ color:#000; } .article-comments-white-wrap .comments-wrap{ margin-top:100px; } #body-inner.blacknoise-bg { background: #030303; } .best-2014-header{ position:relative; width:886px; height:598px; margin-left:-181px; background: #000; margin-top: -19px; border-top:1px solid #737373; border-bottom:1px solid #737373; } .best-2014-header .best-2014-icon{ position:absolute; left:50%; margin-left:-50px; top:55px; } .best-2014-header .best-2014-title{ position:absolute; left:50%; margin-left:-350px; top:245px; text-transform:uppercase; font-family:'esq_pelican30_medium'; font-size:61px; letter-spacing:30px; } .best-2014-header .best-2014-subtitle{ position:absolute; left:50%; margin-left:-201px; top:320px; text-align:center; font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; } .best-2014-header .best-2014-subtitle span{ color: #00E7E3; } .best-2014-header .best-2014-esq{ position:absolute; left:50%; margin-left:-10px; bottom:85px; } .pages{ margin-left:-181px; } .pages .photo-wrap{ margin-top:80px; } .pages .photo-inner{ width:1248px; } .pages .photo-wrap .photo-info{ margin-top:30px; width: 1248px; } .pages .photo-wrap .photo-date{ float:left; width:162px; margin-right:19px; font-family: 'esq_pelican30_medium'; color: #00E7E3; letter-spacing:9px; margin-top:3px; font-size:37px; } .pages .photo-wrap .photo-date a, .pages .photo-wrap .photo-date a:visited{ color: #00E7E3; } .pages .photo-wrap .photo-description{ float:left; width:705px; text-transform:uppercase; font-weight:bold; font-size:11px; margin-top:-7px; } .pages .photo-wrap .photo-description small{ /*margin-left:15px;*/ } .pages .photo-wrap .photo-location{ float:right; width:162px; text-align:left; margin-top:-7px; } .pages .photo-wrap .photo-location p{ text-transform:uppercase; font-weight:bold; font-size: 11px; line-height:18px; margin:0px; color: #00E7E3; } .photo-wrap.first .photo{ float:left; width:886px; margin-right:19px; } .photo-wrap.first .photo_b_wrap{ float:left; width:300px; height:600px; display:table; padding-left:43px; } .photo-wrap.first .photo_b_wrap .photo_b_inner{ background:#fff; display: table-cell; vertical-align: middle; text-align:center; } .photo-wrap.first .photo_b_wrap .photo_b{ margin:0 auto; } .photo-wrap.first .photo-info{ width:886px; } .photo-wrap.first .photo-description{ width:524px; margin-right:19px; } .photo-wrap.first .photo-location{ float:left; } .page-spinner{ text-align:center; height:50px; width:886px; line-height:117px; color:#000; visibility:hidden; margin-left:-181px; } .page-spinner.loading{ visibility:visible; height:100px; } .page-spinner .pinner { margin: 0px auto; width: 70px; text-align: center; } .page-spinner .pinner > div { width: 10px; height: 10px; background-color: #00E7E3; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .page-spinner .pinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .page-spinner .pinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } $(function(){ $('.related-articlepost-list').insertBefore('.wide-banner-bottom') $('.article-comments-white-wrap').insertAfter('#article-detail') $('div', { 'class':'clear' }).insertBefore('.comments') var data = BEST_2014_DATA var page_to_load = 1 $pages = $('.pages').html() $pageTemplate = $('#page-template').html().trim() $photoFirstTemplate = $('#photo-first-template').html().trim() $photoTemplate = $('#photo-template').html().trim() var pageTemplate = _.template($pageTemplate); var photoFirstTemplate = _.template($photoFirstTemplate); var photoTemplate = _.template($photoTemplate); var srcKey = window.devicePixelRatio > 1 ? 'src_2x' : 'src' // adriver stuff for banner var custom = function (s){ var ar_s = 0; if (typeof s !== 'undefined' && s.length) { ar_s = (s.indexOf('T') + 1) ? 1 : 0 } return ar_s; } function appendPage(page, output, bannerToLoad, cb){ var html = pageTemplate({'photos': output.join(«\n»), 'id': page.page_id}) $(html).appendTo('.pages') // $('.page-spinner.loading').removeClass('loading') setTimeout(function(){ if (bannerToLoad){ var ar_custom = []; ar_custom[95] = (document.referrer.match(/^https?:\/\/[^\/]*rambler\.ru/) ? 1 : 0); ar_custom[93] = custom(window.ASPQ_CTjdcL); ar_custom[94] = custom(window.ASPQ_uQQP0s); try{ new adriver(bannerToLoad, {sid:153392, bt:52, bn:1, keyword:ar_duo1, custom: ar_custom}) }catch(e){ } } if (cb) cb() }, 1000) } window.loadPage = function(page_id, cb){ var page = data[page_id] var output = [] var imagesToLoad = [] var bannerToLoad; var fix_desc_dates = ['18 / 07', '12 / 05', '26 / 02'] $.each(page.images, function(key, value){ var date = value.day + ' / ' + value.month; var desc = value.description desc = desc.replace(' ', '') desc = desc.replace(' ', '') desc = desc.replace(' ', '') if (fix_desc_dates.indexOf(date) == -1){ desc = desc.replace('', ' ') } var context = _.extend({ 'img_url': 'http://pravilamag.ru' + value[srcKey], 'desc': desc }, value) imagesToLoad.push(value[srcKey]) var html; if (key == 0 && page_id != 0){ var banner_id = _.uniqueId('best2014_b_') bannerToLoad = banner_id context = _.extend(context, {'banner_id': banner_id}) html = photoFirstTemplate(context) }else{ html = photoTemplate(context) } output.push(html) }) if (page_id == 0){ appendPage(page, output, bannerToLoad, cb) }else{ $.imgpreload(imagesToLoad, function(){ appendPage(page, output, bannerToLoad, cb) }, 100000); } } loadPage(0) var isPreloadPage = false; function isInView(elem){ return $(elem).offset().top — $(window).scrollTop() > $(elem).height() ; } $(window).scroll(_.debounce(function(){ if (isInView($('.page-spinner.loading')) && !isPreloadPage){ isPreloadPage = true; loadPage(page_to_load, function(){ page_to_load++; if (page_to_load > 4){ $('.page-spinner.loading').removeClass('loading') isPreloadPage = true; }else{ isPreloadPage = false; } }) } }, 500)); }) <%= photos %>
