engineering/remarkbox-theme-meta
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add multi-column footer for non-embed mode

Browse source 
Replaces the centered pay-what-you-can footer with a structured
4-column footer (brand, product, resources, company) matching the
www.remarkbox.com marketing site. Embed mode keeps the lightweight
powered-by footer untouched. Responsive: 4 cols desktop, 2 tablet,
1 phone.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
russell@unturf.com 2026-02-08 11:56:25 -05:00
parent 81966aa5e0
commit b40f038fd1
2 changed files with 151 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

102
remarkbox_theme_meta/static/theme/meta/css/meta.css
View file

@ -329,3 +329,105 @@ label.inline-label {
.no-comments {
margin-top: 2rem;
}
/* Footer */
.rb-footer {
background-color: #ffffff;
border-top: solid 4px rgb(var(--red));
padding: 60px 0 30px;
}
.rb-footer .container {
max-width: 960px;
}
.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: rgb(var(--red)) !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,
.rb-footer-links a:link,
.rb-footer-links a:visited {
font-size: 0.85em;
color: #888;
}
.rb-footer-links a:hover {
color: rgb(var(--red));
}
.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 rgb(var(--red));
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;
}
}

59
remarkbox_theme_meta/templates/meta-base.j2
View file

@ -125,24 +125,63 @@
{% include 'snippets/phone-menu.j2' %}
{% endif %}
{% if request.mode == 'embed' %}
<div id="remarkbox-footer">
<br />
<br />
<center>
Our business model depends on reciprocity and trust to succeed.
<br>
Please contribute what you feel the software and service is worth.
<br>
<br>
<a class="button" href="/billing">Pay What You Can!</a>
{% include 'snippets/powered-by.j2' %}
</center>
</div>
{% endif %}
<!-- end of row -->
</div>
<!-- end of container -->
</div>
{% if request.mode != 'embed' %}
<footer class="rb-footer">
<div class="container">
<div class="rb-footer-grid">
<div class="rb-footer-brand">
<a href="{{ request.marketing_url }}" 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="{{ request.app_url }}/setup">Setup</a>
<a href="{{ request.marketing_url }}/#plans">Plans</a>
<a href="/billing">Billing</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="{{ request.marketing_url }}/privacy-policy.html">Privacy Policy</a>
<a href="{{ request.marketing_url }}/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div>
<div class="rb-footer-ctas">
<a class="button red" href="{{ request.app_url }}/setup">Setup Remarkbox</a>
<a class="button" href="/billing">Pay What You Can</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>
{% endif %}
</body>
</html>