Created
January 24, 2019 21:28
-
-
Save yongzhihuang/b5fba26435eb0fdf9e9de9721d34ce07 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
@font-face { | |
font-family: "Adobe Caslon"; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/AdobeCaslonPro-Regular.woff2') format('woff2'), url('/fonts/AdobeCaslonPro-Regular.woff') format('woff'); | |
} | |
@font-face { | |
font-family: "Graphik Web"; | |
font-stretch: normal; | |
font-style: normal; | |
font-weight: 500; | |
src: url('/fonts/Graphik-Medium.eot'); | |
src: url('/fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/Graphik-Medium.woff2') format('woff2'), url('/fonts/Graphik-Medium.woff') format('woff'); | |
} | |
html, | |
body { | |
height: 100%; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
text-align: center; | |
font-family: "Adobe Caslon", Georgia, "Times New Roman", Times, serif; | |
overflow: hidden; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
time, | |
div, | |
p, | |
span, | |
a { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
text-rendering: geometricPrecision; | |
} | |
h1, | |
h2 { | |
font-weight: normal; | |
} | |
img { | |
margin: 50px 0 25px; | |
} | |
.wrapper { | |
min-width: 520px; | |
min-height: 640px; | |
padding-top: 40px; | |
} | |
.text-wrapper { | |
padding: 0 10px 10px; | |
} | |
.header { | |
font-size: 36px; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
} | |
.subheader { | |
font-size: 24px; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
} | |
.body { | |
font-size: 20px; | |
margin-bottom: 10px; | |
margin-top: 0; | |
} | |
.button, | |
.later, | |
.login { | |
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-weight: 500; | |
font-size: 13px; | |
} | |
.button { | |
width: 380px; | |
border-radius: 2px; | |
background-color: #000; | |
display: inline-block; | |
color: #fff; | |
text-decoration: none; | |
padding: 18px 0; | |
margin-top: 18px; | |
} | |
.later, .login { | |
color: #121212; | |
display: block; | |
cursor: pointer; | |
margin-top: 15px; | |
text-decoration: none; | |
} | |
.login a { | |
color: #121212; | |
} | |
.show { | |
display: block; | |
overflow: scroll; | |
} | |
.barrier { | |
background: rgba(0,0,0,.6); | |
height: 100%; | |
left: 0; | |
position: fixed; | |
top: 0; | |
width: 100%; | |
z-index: 9999999; | |
} | |
.wall { | |
background-color: #efb425; | |
height: auto; | |
margin: 50px auto 60px; | |
width: 520px; | |
display: flex; | |
flex-direction: column; | |
position: relative; | |
} | |
.container { | |
width: 100%; | |
} | |
.homeLink { | |
position: absolute; | |
right: 26px; | |
top: 18px; | |
font-size: 14px; | |
color: #121212; | |
font-family: Graphik Web,Helvetica Neue,Helvetica,Arial,sans-serif; | |
font-weight: 500; | |
line-height: normal; | |
text-decoration: none; | |
} | |
#paywall { | |
display: none; | |
} | |
</style> | |
<div id="paywall"> | |
<div class="barrier show"> | |
<div class="wall"> | |
<div class="container"> | |
<div class="wrapper"> | |
<img src="%%FILE:PNG1%%" alt="Winter Sale - 12 weeks for <strike>$12</strike> $6."> | |
<div class="text-wrapper"> | |
<h2 class="subheader">You’ve read your last complimentary article.</h2> | |
<h1 class="header">Rejoin the party.</h1> | |
<p class="body">Winter Sale—12 weeks for <strike>$12</strike> $6.</p> | |
<p class="body">Plus, get a free tote.</p> | |
<a class="button" href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank">Subscribe</a> | |
<p class="login">Already have a login? <a id="signUp" href="#">Sign in</a></p> | |
</div> | |
</div> | |
<a id="home" class="homeLink " href="#">newyorker.com <span class="rightArrow">»</span></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
(function init(window, document) { | |
let paywall = document.getElementById('paywall'); | |
let signUp = document.getElementById('signUp'); | |
let home = document.getElementById('home'); | |
try { | |
window.top._satellite.track('barrierfull'); | |
window.top.dataLayer.push({'event': 'barrier-full'}); | |
window.top.digitalData.articleNumSession = 4; | |
} catch (e) { | |
console.error('Error in barrier ad tracking calls', e); | |
} | |
window.onload = function() { | |
window.frameElement.style.cssText += 'height:100vw;width:100vw'; | |
window.frameElement.parentNode.style.minWidth = ''; | |
window.frameElement.parentNode.parentNode.style.cssText += 'position:fixed;top:0;left:0;widht:100%;'; | |
window.frameElement.parentNode.parentNode.parentNode.style.overflow = 'visible'; | |
paywall.style.display = 'block'; | |
}; | |
// redirect the user to accounts passing the current url | |
signUp.addEventListener('click', function (e) { | |
e.preventDefault(); | |
window.top.location.href = `https://account.newyorker.com/?retURL=${window.top.location.href}?reload=true`; | |
}); | |
// redirect to homepage | |
home.addEventListener('click', function (e) { | |
e.preventDefault(); | |
window.top.location.href = 'https://www.newyorker.com'; | |
}); | |
})(window, document); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment