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

Compact footer for mobile: keep link columns side-by-side on narrow screens.

Browse source
This commit is contained in:
russell@unturf.com 2026-02-09 07:31:24 -05:00
parent 074050a55e
commit 81add0b4fa
2 changed files with 53 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -340,7 +340,13 @@ label.inline-label {
.rb-footer-grid { .rb-footer-grid {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-columns: 1fr;
gap: 30px;
}
.rb-footer-nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px; gap: 40px;
} }
@ -411,19 +417,35 @@ label.inline-label {
} }
@media screen and (max-width:750px) { @media screen and (max-width:750px) {
.rb-footer-grid { .rb-footer {
grid-template-columns: 1fr 1fr; padding: 40px 20px 20px;
} }
}
@media screen and (max-width:568px) {
.rb-footer-grid { .rb-footer-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 20px;
}
.rb-footer-nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.rb-footer-group-title {
margin-bottom: 8px;
}
.rb-footer-links {
gap: 4px;
} }
.rb-footer-ctas { .rb-footer-ctas {
margin-top: 24px;
flex-direction: column; flex-direction: column;
} }
.rb-footer-ctas .button { .rb-footer-ctas .button {
text-align: center; text-align: center;
} }
.rb-footer-quote {
margin-top: 20px;
}
.rb-footer-bottom {
margin-top: 20px;
}
} }

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

@ -143,29 +143,31 @@
<a href="{{ request.marketing_url }}" class="rb-footer-logo">remarkbox</a> <a href="{{ request.marketing_url }}" class="rb-footer-logo">remarkbox</a>
<p class="rb-footer-tagline">Hosted comments without ads or tracking.</p> <p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
</div> </div>
<div class="rb-footer-group"> <div class="rb-footer-nav">
<span class="rb-footer-group-title">Product</span> <div class="rb-footer-group">
<nav class="rb-footer-links"> <span class="rb-footer-group-title">Product</span>
<a href="{{ request.app_url }}/setup">Setup</a> <nav class="rb-footer-links">
<a href="{{ request.marketing_url }}/#plans">Plans</a> <a href="{{ request.app_url }}/setup">Setup</a>
<a href="{{ request.marketing_url }}/#remarkbox-demo">Demo</a> <a href="{{ request.marketing_url }}/#plans">Plans</a>
</nav> <a href="{{ request.marketing_url }}/#remarkbox-demo">Demo</a>
</div> </nav>
<div class="rb-footer-group"> </div>
<span class="rb-footer-group-title">Resources</span> <div class="rb-footer-group">
<nav class="rb-footer-links"> <span class="rb-footer-group-title">Resources</span>
<a href="https://faq.remarkbox.com">FAQ</a> <nav class="rb-footer-links">
<a href="https://meta.remarkbox.com">Meta</a> <a href="https://faq.remarkbox.com">FAQ</a>
<a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a> <a href="https://meta.remarkbox.com">Meta</a>
<a href="https://pypi.org/project/remarkbox/">PyPi</a> <a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
</nav> <a href="https://pypi.org/project/remarkbox/">PyPi</a>
</div> </nav>
<div class="rb-footer-group"> </div>
<span class="rb-footer-group-title">Company</span> <div class="rb-footer-group">
<nav class="rb-footer-links"> <span class="rb-footer-group-title">Company</span>
<a href="{{ request.marketing_url }}/privacy-policy.html">Privacy Policy</a> <nav class="rb-footer-links">
<a href="{{ request.marketing_url }}/terms-of-service.html">Terms of Service</a> <a href="{{ request.marketing_url }}/privacy-policy.html">Privacy Policy</a>
</nav> <a href="{{ request.marketing_url }}/terms-of-service.html">Terms of Service</a>
</nav>
</div>
</div> </div>
</div> </div>
<div class="rb-footer-ctas"> <div class="rb-footer-ctas">