engineering/www.remarkbox.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add multi-column footer adapted from unsandbox.com

Browse source 
Replaces the single-line copyright footer with a structured 4-column
footer (brand, product, resources, company) with CTA buttons, quote,
and copyright. Responsive: 4 cols desktop, 2 tablet, 1 phone. Also
fixes stale copyright years and dead Twitter links on two pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
russell@unturf.com 2026-02-08 11:36:09 -05:00
parent 420c0df7c1
commit 5761076d75
6 changed files with 320 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

104
custom.css
View file

@ -174,7 +174,103 @@ span.avoidwrap {
}
@media screen and (max-width:750px) {
.navbar.hidden-on-tablet {display: none}
.hidden-on-tablet {display: none}
.shown-on-tablet {display: block}
}
.navbar.hidden-on-tablet {display: none}
.hidden-on-tablet {display: none}
.shown-on-tablet {display: block}
}
/* Footer */
.rb-footer {
background-color: #ffffff;
border-top: solid 4px #AA0000;
padding: 60px 0 30px;
}
.rb-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
}
.rb-footer-logo {
font-size: 1.4em;
font-weight: bold;
color: #AA0000 !important;
}
.rb-footer-tagline {
font-size: 0.85em;
color: #888;
margin-top: 10px;
line-height: 1.5;
}
.rb-footer-group-title {
font-weight: bold;
font-size: 0.85em;
display: block;
margin-bottom: 15px;
}
.rb-footer-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.rb-footer-links a {
font-size: 0.85em;
color: #888;
}
.rb-footer-links a:hover {
color: #AA0000;
}
.rb-footer-ctas {
margin-top: 40px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.rb-footer-quote {
margin-top: 30px;
font-style: italic;
font-size: 0.85em;
color: #888;
border-left: 4px solid #AA0000;
padding-left: 20px;
}
.rb-footer-quote p {
margin: 0;
}
.rb-footer-bottom {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
font-size: 0.8em;
color: #888;
text-align: center;
}
@media screen and (max-width:750px) {
.rb-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width:568px) {
.rb-footer-grid {
grid-template-columns: 1fr;
}
.rb-footer-ctas {
flex-direction: column;
}
.rb-footer-ctas .button {
text-align: center;
}
}

52
finally-a-disqus-alternative.html
View file

@ -303,14 +303,50 @@ Try on your site, risk free, no card required.
</div>
<div class="row-padding">
<center>
<b>
Remarkbox &#169;2016-2022 | USA, Connecticut, New London | <a href="https://twitter.com/RussellBal" target="_blank">@russellbal</a> | <a href="https://twitter.com/remarkbox" target="_blank">@Remarkbox</a>
</b>
</center>
</div>
<div class="redline"></div>
<footer class="rb-footer">
<div class="container">
<div class="rb-footer-grid">
<div class="rb-footer-brand">
<a href="https://www.remarkbox.com" class="rb-footer-logo">remarkbox</a>
<p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Product</span>
<nav class="rb-footer-links">
<a href="https://my.remarkbox.com/setup">Setup</a>
<a href="/#plans">Plans</a>
<a href="/#remarkbox-demo">Demo</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Resources</span>
<nav class="rb-footer-links">
<a href="https://faq.remarkbox.com">FAQ</a>
<a href="https://meta.remarkbox.com">Meta</a>
<a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
<a href="https://pypi.org/project/remarkbox/">PyPi</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Company</span>
<nav class="rb-footer-links">
<a href="/privacy-policy.html">Privacy Policy</a>
<a href="/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div>
<div class="rb-footer-ctas">
<a class="button red" href="https://my.remarkbox.com/setup">Setup Remarkbox</a>
<a class="button" href="https://faq.remarkbox.com">Browse FAQ</a>
</div>
<div class="rb-footer-quote">
<p>&ldquo;How long could it take to build a comment system?&rdquo; &mdash; 3 years later, Remarkbox was born.</p>
</div>
<div class="rb-footer-bottom">
remarkbox.com &copy; 2016-2026 &mdash; Hosted comments without ads or tracking.
</div>
</div>
</footer>
</body>

59
index.html
View file

@ -468,21 +468,50 @@ No credit card required.
</div>
</div>
<hr>
<div class="row-padding">
<center>
<b>
Remarkbox &#169;2016-2026 | USA, Connecticut, New London | <a href="/privacy-policy.html">Privacy</a> | <a href="/terms-of-service.html">Terms</a>
</b>
</center>
</div>
<br/>
<div class="redline"></div>
<span style="display: none;">potato</span>
<footer class="rb-footer">
<div class="container">
<div class="rb-footer-grid">
<div class="rb-footer-brand">
<a href="https://www.remarkbox.com" class="rb-footer-logo">remarkbox</a>
<p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Product</span>
<nav class="rb-footer-links">
<a href="https://my.remarkbox.com/setup">Setup</a>
<a href="/#plans">Plans</a>
<a href="/#remarkbox-demo">Demo</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Resources</span>
<nav class="rb-footer-links">
<a href="https://faq.remarkbox.com">FAQ</a>
<a href="https://meta.remarkbox.com">Meta</a>
<a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
<a href="https://pypi.org/project/remarkbox/">PyPi</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Company</span>
<nav class="rb-footer-links">
<a href="/privacy-policy.html">Privacy Policy</a>
<a href="/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div>
<div class="rb-footer-ctas">
<a class="button red" href="https://my.remarkbox.com/setup">Setup Remarkbox</a>
<a class="button" href="https://faq.remarkbox.com">Browse FAQ</a>
</div>
<div class="rb-footer-quote">
<p>&ldquo;How long could it take to build a comment system?&rdquo; &mdash; 3 years later, Remarkbox was born.</p>
</div>
<div class="rb-footer-bottom">
remarkbox.com &copy; 2016-2026 &mdash; Hosted comments without ads or tracking.
</div>
</div>
</footer>
</body>

52
privacy-policy.html
View file

@ -234,13 +234,49 @@ Remarkbox reserves the right to modify this Privacy Policy at any time. Please r
</div>
<div class="row-padding">
<center>
<b>
Remarkbox &#169;2016-2026 | USA, Connecticut, New London | <a href="/privacy-policy.html">Privacy</a> | <a href="/terms-of-service.html">Terms</a>
</b>
</center>
</div>
<div class="redline"></div>
<footer class="rb-footer">
<div class="container">
<div class="rb-footer-grid">
<div class="rb-footer-brand">
<a href="https://www.remarkbox.com" class="rb-footer-logo">remarkbox</a>
<p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Product</span>
<nav class="rb-footer-links">
<a href="https://my.remarkbox.com/setup">Setup</a>
<a href="/#plans">Plans</a>
<a href="/#remarkbox-demo">Demo</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Resources</span>
<nav class="rb-footer-links">
<a href="https://faq.remarkbox.com">FAQ</a>
<a href="https://meta.remarkbox.com">Meta</a>
<a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
<a href="https://pypi.org/project/remarkbox/">PyPi</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Company</span>
<nav class="rb-footer-links">
<a href="/privacy-policy.html">Privacy Policy</a>
<a href="/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div>
<div class="rb-footer-ctas">
<a class="button red" href="https://my.remarkbox.com/setup">Setup Remarkbox</a>
<a class="button" href="https://faq.remarkbox.com">Browse FAQ</a>
</div>
<div class="rb-footer-quote">
<p>&ldquo;How long could it take to build a comment system?&rdquo; &mdash; 3 years later, Remarkbox was born.</p>
</div>
<div class="rb-footer-bottom">
remarkbox.com &copy; 2016-2026 &mdash; Hosted comments without ads or tracking.
</div>
</div>
</footer>
</body>
</html>

59
remarkbox-is-now-pay-what-you-can.html
View file

@ -150,21 +150,50 @@ Wed Feb 3 09:06:21 EST 2021
</div>
</div>
<hr>
<div class="row-padding">
<center>
<b>
Remarkbox &#169;2016-2022 | USA, Connecticut, New London | <a href="https://twitter.com/RussellBal" target="_blank">@russellbal</a> | <a href="https://twitter.com/remarkbox" target="_blank">@Remarkbox</a> | <a href="/privacy-policy.html">Privacy</a>
</b>
</center>
</div>
<br/>
<div class="redline"></div>
<span style="display: none;">potato</span>
<footer class="rb-footer">
<div class="container">
<div class="rb-footer-grid">
<div class="rb-footer-brand">
<a href="https://www.remarkbox.com" class="rb-footer-logo">remarkbox</a>
<p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Product</span>
<nav class="rb-footer-links">
<a href="https://my.remarkbox.com/setup">Setup</a>
<a href="/#plans">Plans</a>
<a href="/#remarkbox-demo">Demo</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Resources</span>
<nav class="rb-footer-links">
<a href="https://faq.remarkbox.com">FAQ</a>
<a href="https://meta.remarkbox.com">Meta</a>
<a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
<a href="https://pypi.org/project/remarkbox/">PyPi</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Company</span>
<nav class="rb-footer-links">
<a href="/privacy-policy.html">Privacy Policy</a>
<a href="/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div>
<div class="rb-footer-ctas">
<a class="button red" href="https://my.remarkbox.com/setup">Setup Remarkbox</a>
<a class="button" href="https://faq.remarkbox.com">Browse FAQ</a>
</div>
<div class="rb-footer-quote">
<p>&ldquo;How long could it take to build a comment system?&rdquo; &mdash; 3 years later, Remarkbox was born.</p>
</div>
<div class="rb-footer-bottom">
remarkbox.com &copy; 2016-2026 &mdash; Hosted comments without ads or tracking.
</div>
</div>
</footer>
</body>

52
terms-of-service.html
View file

@ -143,13 +143,49 @@ For questions about these Terms of Service, please contact us through the Remark
</div>
<div class="row-padding">
<center>
<b>
Remarkbox &#169;2016-2026 | USA, Connecticut, New London | <a href="/privacy-policy.html">Privacy</a> | <a href="/terms-of-service.html">Terms</a>
</b>
</center>
</div>
<div class="redline"></div>
<footer class="rb-footer">
<div class="container">
<div class="rb-footer-grid">
<div class="rb-footer-brand">
<a href="https://www.remarkbox.com" class="rb-footer-logo">remarkbox</a>
<p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Product</span>
<nav class="rb-footer-links">
<a href="https://my.remarkbox.com/setup">Setup</a>
<a href="/#plans">Plans</a>
<a href="/#remarkbox-demo">Demo</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Resources</span>
<nav class="rb-footer-links">
<a href="https://faq.remarkbox.com">FAQ</a>
<a href="https://meta.remarkbox.com">Meta</a>
<a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
<a href="https://pypi.org/project/remarkbox/">PyPi</a>
</nav>
</div>
<div class="rb-footer-group">
<span class="rb-footer-group-title">Company</span>
<nav class="rb-footer-links">
<a href="/privacy-policy.html">Privacy Policy</a>
<a href="/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div>
<div class="rb-footer-ctas">
<a class="button red" href="https://my.remarkbox.com/setup">Setup Remarkbox</a>
<a class="button" href="https://faq.remarkbox.com">Browse FAQ</a>
</div>
<div class="rb-footer-quote">
<p>&ldquo;How long could it take to build a comment system?&rdquo; &mdash; 3 years later, Remarkbox was born.</p>
</div>
<div class="rb-footer-bottom">
remarkbox.com &copy; 2016-2026 &mdash; Hosted comments without ads or tracking.
</div>
</div>
</footer>
</body>
</html>