new file: custom.js
new file: custom2.css modified: index.html new file: index2.html new file: jquery-3.2.0.slim.min.js
This commit is contained in:
parent
9b098a0164
commit
5fddb35ad7
5 changed files with 538 additions and 1 deletions
32
custom.js
Normal file
32
custom.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
$body = $('body')
|
||||
$nav = $('.nav')
|
||||
$body = $('body')
|
||||
$window = $(window)
|
||||
navOffsetTop = $nav.offset().top
|
||||
|
||||
function init() {
|
||||
$window.on('scroll', onScroll)
|
||||
$window.on('resize', resize)
|
||||
onScroll()
|
||||
}
|
||||
|
||||
function resize() {
|
||||
$body.removeClass('has-docked-nav')
|
||||
navOffsetTop = $nav.offset().top
|
||||
onScroll()
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
|
||||
$body.addClass('has-docked-nav')
|
||||
}
|
||||
if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
|
||||
$body.removeClass('has-docked-nav')
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
});
|
||||
103
custom2.css
Normal file
103
custom2.css
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
h1, h2, h3, h4, h5, h6 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
a, a:link, a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.reasons {
|
||||
background-color: #f8f5f5;
|
||||
}
|
||||
|
||||
.graybg {
|
||||
background-color: #f8f5f5;
|
||||
}
|
||||
|
||||
.nav {
|
||||
word-spacing: 30px;
|
||||
font-weight: bold;
|
||||
border-top: solid 4px #AA0000;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
font-weight: bold;
|
||||
word-spacing: 30px;
|
||||
border-top: solid 4px #AA0000;
|
||||
|
||||
width: 100%;
|
||||
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.redline {
|
||||
border-top: solid 4px #AA0000;
|
||||
}
|
||||
|
||||
.has-docked-nav .navbar {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.navlinks {
|
||||
float: right;
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.navlogo {
|
||||
width: 280px;
|
||||
/*vertical-align: middle;*/
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.herologo {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
min-width: 300px;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.row-padding {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
span.avoidwrap {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:568px) {
|
||||
.hidden-on-phone {display: none}
|
||||
}
|
||||
|
||||
@media screen and (max-width:750px) {
|
||||
.navbar.hidden-on-tablet {display: none}
|
||||
.hidden-on-tablet {display: none}
|
||||
}
|
||||
|
|
@ -244,6 +244,8 @@ For <b>beta access</b> and updates, join the email list
|
|||
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
|
||||
#mc_embed_signup .button { background-color: #AA0000; }
|
||||
#mc_embed_signup .button:hover { background-color: #D40000; }
|
||||
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
|
||||
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
|
||||
</style>
|
||||
|
|
@ -254,7 +256,7 @@ For <b>beta access</b> and updates, join the email list
|
|||
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c64d1bc4e5a99ee1343dba0fc_b4deeab70b" tabindex="-1" value=""></div>
|
||||
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
||||
<div class="clear"><input type="submit" value="join beta" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
||||
</div>
|
||||
<i>(only 2 messages a month)</i>
|
||||
</form>
|
||||
|
|
|
|||
396
index2.html
Normal file
396
index2.html
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>Comments as a service | Remarkbox</title>
|
||||
|
||||
<!-- this makes mobile pretty... -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="theme-color" content="#D40000">
|
||||
|
||||
<link rel="stylesheet" href="normalize.css">
|
||||
<link rel="stylesheet" href="skeleton.css">
|
||||
<link rel="stylesheet" href="custom2.css">
|
||||
|
||||
<script src="jquery-3.2.0.slim.min.js"></script>
|
||||
<script src="custom.js"></script>
|
||||
|
||||
|
||||
<!-- reviewing the data - https://getmirrorshades.com/view.html?siteKey=NwkBplCe -->
|
||||
<script async src="https://getmirrorshades.com/agent.js" data-siteId="MA-EWUFWH-64A"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="remarkbox-body">
|
||||
|
||||
<a name="top"></a>
|
||||
|
||||
<div class="redline"></div>
|
||||
|
||||
<div class="navbar">
|
||||
<div class="hidden-on-tablet">
|
||||
<a href="http://www.remarkbox.com"><img src="remarkbox-minified.png" class="navlogo" /></a>
|
||||
|
||||
<div class="navlinks">
|
||||
<a href="#beta">Beta</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#plans">Plans</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="proposition">
|
||||
<div class="container">
|
||||
|
||||
<a name="free"></a>
|
||||
|
||||
<center><a href="http://www.remarkbox.com">
|
||||
<img src="remarkbox-minified.png" class="herologo" /></a>
|
||||
<h3>Your readers want to communicate with you</h3>
|
||||
</center>
|
||||
|
||||
<div class="row">
|
||||
<div class="one-half column">
|
||||
|
||||
<center>
|
||||
<span style="font-size: 1.25em;">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
Remarkbox offers a <span class="avoidwrap"><b>free comment system</b></span>
|
||||
<br />
|
||||
to keep readers engaged <span class="avoidwrap">with your content.</span>
|
||||
<br />
|
||||
<br />
|
||||
It works everywhere, <span class="avoidwrap">even <b>static sites</b>!</span>
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<button style="color: #FFFFFF; background-color: #AA0000; border-color: #AA0000;">Get Started</button>
|
||||
<br />
|
||||
<br />
|
||||
Setup on your page in 30s or <a href="#learn">learn more</a>
|
||||
<br />
|
||||
<br />
|
||||
</center>
|
||||
|
||||
</div>
|
||||
<div class="one-half column">
|
||||
<center>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<textarea style="width: 96%; height: 270px; font-size: .7em; color: #999999; border-color: #cccccc;" disabled><!-- Remarkbox - readers want to communicate with you -->
|
||||
<script type="text/javascript" src="https://demo.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script><script type="text/javascript">thread_fragment=window.location.hash; thread_uri=window.location.href; document.write('<iframe id="remarkbox" src="https://demo.remarkbox.com/embed?thread_uri=' + thread_uri + '" title="remarkbox" width="100%" style="width: 100% !important; border: none !important; overflow: hidden !important;" allowtransparency="true" scrolling="no" horizontalscrolling="no" verticalscrolling="no" tabindex="0" seamless></iframe>'); iFrameResize({inPageLinks: true, initCallback: function(iframe){iframe.iFrameResizer.moveToAnchor(thread_fragment);}}, document.getElementById("remarkbox") );</script><noscript><iframe id="remarkbox" src="https://demo.remarkbox.com/embed?nojs=true" frameborder="0" style="height: 600px; width: 100%; border: none !important;" allowtransparency="true" height="600px" width="100%"></iframe></noscript></textarea>
|
||||
<br />
|
||||
<b>⬆ Put me on your web page</b>
|
||||
</center>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<span id="learn">
|
||||
<div class="nav">
|
||||
<div>
|
||||
<a href="http://www.remarkbox.com"><img src="remarkbox-minified.png" class="navlogo" /></a>
|
||||
|
||||
<div class="navlinks">
|
||||
<a href="#beta">Beta</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#plans">Plans</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reasons row-padding">
|
||||
<center>
|
||||
<h4>Finally, a blog comment system with ethics</h4>
|
||||
<br/>
|
||||
</center>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="one-half column">
|
||||
|
||||
<center>
|
||||
<img src="/static/img/remarkbox-instant-preview-of-comments.gif" width="94%" style="margin-top: 20px;">
|
||||
<span style="font-size: .7em">Markdown and syntax highlighted code blocks!</span>
|
||||
</center>
|
||||
|
||||
<br/>
|
||||
|
||||
</div>
|
||||
<div class="one-half column" style="padding-left: 5%;">
|
||||
|
||||
<h5>Say <u>YES</u> to Privacy!</h5>
|
||||
|
||||
<ul style="margin-bottom: 40px;">
|
||||
<li><b>No user tracking</b> - anonymous by default</li>
|
||||
<li><b>No ads</b> - promote your message only</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h5>Dissolve barriers of engagement</h5>
|
||||
|
||||
<ul style="margin-bottom: 40px;">
|
||||
<li><b>No registration</b> - optional email verification</li>
|
||||
<li><b>Realtime previews</b> - as the user types</li>
|
||||
<li><b>Looks and feels</b> - like part of your site</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h5>Free comments</h5>
|
||||
<ul style="margin-bottom: 40px;">
|
||||
<li><b>Setup</b> - in 30s or less!</li>
|
||||
<li><b>Cancel anytime</b> - export comments as JSON</li>
|
||||
<li><b>No Cost or limits</b> - <a href="#plans">free plan</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
|
||||
<center>
|
||||
<h5 style="margin-bottom: 0px">Don't give your readers Disqust</h5>
|
||||
|
||||
<h6>Switch to Remarkbox, the Disqus alternative</h6>
|
||||
|
||||
</center>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<p>
|
||||
If you wonder why I would do something crazy like open source my product, watch
|
||||
Bryan Cantrill's talk on "Corporate Open Source Anti-patterns":
|
||||
<p>
|
||||
https://www.youtube.com/watch?v=Pm8P4oCIY3g
|
||||
-->
|
||||
<span id="plans">
|
||||
<span id="faq">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container row-padding">
|
||||
<div class="row">
|
||||
|
||||
<div class="one-half column" style="padding-left: 5%;">
|
||||
|
||||
<h5>Plans and Pricing</h5>
|
||||
|
||||
<b><a href="#free">Free</a></b>
|
||||
<br />
|
||||
Simply put the snippet into your HTML
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<b>$5/mo</b> (beta)
|
||||
<br />
|
||||
Moderator access for one verified domain
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<b>$14/mo</b> (beta)
|
||||
<br />
|
||||
<span id="beta">
|
||||
Moderator access for unlimited verified domains
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<span style="font-size: .7em">
|
||||
There will likely be an Enterprise plan with dedicated resources.
|
||||
</span>
|
||||
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
||||
<h5>Remarkbox Beta</h5>
|
||||
|
||||
For <b>beta access</b> and updates, join the email list
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- Begin MailChimp Signup Form -->
|
||||
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
|
||||
#mc_embed_signup .button { background-color: #AA0000; }
|
||||
#mc_embed_signup .button:hover { background-color: #D40000; }
|
||||
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
|
||||
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
|
||||
</style>
|
||||
<div id="mc_embed_signup">
|
||||
<form action="//ballestrini.us2.list-manage.com/subscribe/post?u=c64d1bc4e5a99ee1343dba0fc&id=b4deeab70b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
||||
<div id="mc_embed_signup_scroll">
|
||||
|
||||
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c64d1bc4e5a99ee1343dba0fc_b4deeab70b" tabindex="-1" value=""></div>
|
||||
<div class="clear"><input type="submit" value="join beta" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
||||
</div>
|
||||
<i>(only 2 messages a month)</i>
|
||||
</form>
|
||||
</div>
|
||||
<!--End mc_embed_signup-->
|
||||
|
||||
Your <b>feedback will shape</b> Remarkbox!
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
</div>
|
||||
|
||||
<div class="one-half column" style="padding-left: 5%;">
|
||||
|
||||
<h5>FAQ</h5>
|
||||
|
||||
<p>
|
||||
|
||||
|
||||
<!--
|
||||
<p>
|
||||
May I migrate from Wordpress to Remarkbox?
|
||||
Yes, Describe how to use our ETL tool.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
May I migrate from Disqus to Remarkbox?
|
||||
Yes, Describe how to use our ETL tool.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
May I migrate from open source Remarkbox to hosted Remarkbox?
|
||||
Yes, Describe how to use our ETL tool.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
May I migrate from Remarkbox to open source Remarkbox?
|
||||
Yes, Describe how to use our ETL tool.
|
||||
</p>
|
||||
-->
|
||||
|
||||
<p style="margin-bottom: 10px;">
|
||||
<b>Do you have any real examples?</b>
|
||||
<ul style="margin-left: 20px;">
|
||||
<li><a href="http://russell.ballestrini.net/random.html" target="_blank">http://russell.ballestrini.net/random.html</a></li>
|
||||
<li><a href="https://linkpeek.com/blog" target="_blank">https://linkpeek.com/blog</a></li>
|
||||
<li><a href="http://westworld2.com/">http://westworld2.com</a></li>
|
||||
<li><a href="http://webscale.plumbing/managing-apt-repos-in-s3-using-lambda" target="_blank">http://webscale.plumbing</a></li>
|
||||
<li><a href="http://gumyum.com/" target="_blank">http://gumyum.com</a></li>
|
||||
<li><a href="http://www.remarkbox.com/#remarkbox">http://www.remarkbox.com/#remarkbox</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<span id="about">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="graybg row-padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="six columns" style="padding-left: 5%">
|
||||
|
||||
<h5>About Remarkbox</h5>
|
||||
|
||||
<p>
|
||||
<img src="https://lh3.googleusercontent.com/-uAPZy7NmmP0/AAAAAAAAAAI/AAAAAAAAAnI/iG2P43gCL2U/s140-c/photo.jpg" align="left" style="margin-right: 20px; margin-top: 5px;">
|
||||
<b><a href="http://russell.ballestrini.net/about">Russell Ballestrini</a></b> - <i>Founder</i>
|
||||
|
||||
My vision of Remarkbox started back in 2013 while porting
|
||||
my blog from Wordpress to Pelican, a static-site-generator.
|
||||
</p>
|
||||
<p>
|
||||
I had a problem: what would I do with my readers comments?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
My research found solutions which served ads and I didn't want that.
|
||||
I set out to build my own solution because - <br/>"how long could it possibly take to build an embeddable comment system?" (hint: 3 years)
|
||||
</p>
|
||||
|
||||
Lots of love and thought have gone into making Remarkbox. I hope you and your readers enjoy using it!
|
||||
|
||||
</div>
|
||||
|
||||
<div class="six columns" style="padding-left: 5%">
|
||||
|
||||
<h5>Resilient Web Design</h5>
|
||||
|
||||
<p>
|
||||
Remarkbox follows resilient web design principles.
|
||||
This means Remarkbox will work even when Javascript does not.
|
||||
</p>
|
||||
<p>
|
||||
When Javascript works, Remarkbox will powerup and enhance the user experience!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
For more details read: <a href="http://russell.ballestrini.net/capability-driven-presentation/" target="_blank">Capability driven Presentation</a>
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row row-padding">
|
||||
|
||||
<h5 id="remarkbox-demo">Remarkbox Demo <span style="font-size: .65em; margin-left: 10px;">try it out! </span></h5>
|
||||
|
||||
<!-- Remarkbox - readers want to communicate with you -->
|
||||
<script type="text/javascript" src="https://demo.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script><script type="text/javascript">thread_fragment=window.location.hash; thread_uri=window.location.href; document.write('<iframe id="remarkbox" src="https://demo.remarkbox.com/embed?thread_uri=' + thread_uri + '" title="remarkbox" width="100%" style="width: 100% !important; border: none !important; overflow: hidden !important;" allowtransparency="true" scrolling="no" horizontalscrolling="no" verticalscrolling="no" tabindex="0" seamless></iframe>'); iFrameResize({inPageLinks: true, initCallback: function(iframe){iframe.iFrameResizer.moveToAnchor(thread_fragment);}}, document.getElementById("remarkbox") );</script><noscript><iframe id="remarkbox" src="https://demo.remarkbox.com/embed?nojs=true" frameborder="0" style="height: 600px; width: 100%; border: none !important;" allowtransparency="true" height="600px" width="100%"></iframe></noscript>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="graybg row-padding">
|
||||
<center>
|
||||
<b>
|
||||
©2016-2017 | USA, Connecticut, New London | <a href="https://twitter.com/RussellBal" target="_blank">@russellbal</a>
|
||||
</b>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
4
jquery-3.2.0.slim.min.js
vendored
Normal file
4
jquery-3.2.0.slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue