Skip to content

Instantly share code, notes, and snippets.

@yongzhihuang
Created January 24, 2019 21:28
Show Gist options
  • Save yongzhihuang/b5fba26435eb0fdf9e9de9721d34ce07 to your computer and use it in GitHub Desktop.
Save yongzhihuang/b5fba26435eb0fdf9e9de9721d34ce07 to your computer and use it in GitHub Desktop.
<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&#8217;ve read your last complimentary article.</h2>
<h1 class="header">Rejoin the party.</h1>
<p class="body">Winter Sale&mdash;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