salt/mandelstudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore styled footer shell

Browse Source
This commit is contained in:
Mandel Olaiya
2026-04-26 09:43:39 +02:00
parent 93e2d7910a
commit e394eb0288
2 changed files with 276 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
mandelstudio/templates/oxyan/partials/footer.html
View File

@@ -4,21 +4,132 @@
{% localized_footer_content as localized_footer %}
{% cache 300 footer_menu LANGUAGE_CODE request.site %}
<footer class="footer">
<style>
.mb-footer-wrap {
margin-top: clamp(2rem, 4vw, 3.5rem);
position: relative;
}
.mb-footer {
position: relative;
background:
radial-gradient(120% 120% at 0% 0%, rgba(84, 149, 230, .22) 0%, rgba(84, 149, 230, 0) 45%),
radial-gradient(90% 120% at 100% 0%, rgba(65, 206, 186, .16) 0%, rgba(65, 206, 186, 0) 45%),
linear-gradient(180deg, #264f72 0%, #203f5c 100%);
border-radius: 28px 28px 0 0;
padding: clamp(2rem, 4vw, 3rem) 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 -10px 24px rgba(20, 43, 72, .20);
overflow: hidden;
}
.mb-footer:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.06) 100%);
pointer-events: none;
}
.mb-footer .footer_column {
padding-top: .75rem;
padding-bottom: .75rem;
}
.mb-footer .mb-footer__card {
height: 100%;
background: rgba(255, 255, 255, .055);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
padding: 1.1rem 1.15rem;
backdrop-filter: blur(1.2px);
}
.mb-footer .footer_header {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .01em;
margin-bottom: .9rem;
color: #f4f8ff;
}
.mb-footer .footer_column,
.mb-footer .footer_column * {
color: rgba(237, 244, 255, .93);
}
.mb-footer .footer_column a {
color: #eef4ff;
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
.mb-footer .footer_column a:hover {
color: #ffffff;
transform: translateX(2px);
}
.mb-footer .footer_column .rich-text p {
margin-bottom: .65rem;
line-height: 1.65;
max-width: 34ch;
}
.mb-footer .mb-footer__card .aboutus-logo {
max-height: 52px;
width: auto;
}
.mb-footer .mb-footer__card .social {
margin-top: 1rem;
}
.mb-footer .mb-footer__card .social a {
border-color: rgba(255, 255, 255, .42);
color: #ffffff;
background: rgba(255,255,255,.08);
}
.mb-footer .mb-footer__card .social a:hover {
background: rgba(255,255,255,.18);
}
.mb-copyright {
background: #1b3650;
padding: 1rem 0;
border-top: 1px solid rgba(255,255,255,.16);
}
.mb-copyright .copyright_block,
.mb-copyright .copyright_block * {
color: rgba(234, 241, 255, .92);
margin: 0;
font-size: .95rem;
}
.mb-copyright .copyright_block a {
color: #ffffff;
text-decoration: none;
}
.mb-copyright .copyright_block a:hover {
text-decoration: underline;
}
@media (max-width: 991.98px) {
.mb-footer {
border-radius: 20px 20px 0 0;
}
.mb-footer .mb-footer__card {
padding: 1rem;
}
}
</style>
<div class="mb-footer-wrap">
<footer class="footer mb-footer">
<div class="container">
<div class="row">
<div class="row g-4">
{% with footer=localized_footer.footer|default:settings.ocyan_plugin_wagtail.OcyanSettings.footer %}
{% for block in footer %}
<div class="col-lg-3 col-md-6 col-sm-12 footer_column {{ block.block_type|slugify }}">
{% if block.block_type == 'page_list' and block.value.page and not block.value.page.get_children.live.public %}
{% else %}
<div class="{% if footer|length == 3 %}col-lg-4{% elif footer|length == 2 %}col-lg-6{% else %}col-lg-3{% endif %} col-md-6 col-sm-12 footer_column {{ block.block_type|slugify }}">
<div class="mb-footer__card">
{% include_block block %}
</div>
</div>
{% endif %}
{% endfor %}
{% endwith %}
</div>
</div>
</footer>
<section class="copyright_wrapper">
<section class="copyright_wrapper mb-copyright">
<div class="container">
<div class="row">
<div class="col-lg-12 copyright_block">
@@ -33,4 +144,5 @@
</div>
</div>
</section>
</div>
{% endcache %}

120
templates/oxyan/partials/footer.html
View File

@@ -4,21 +4,132 @@
{% localized_footer_content as localized_footer %}
{% cache 300 footer_menu LANGUAGE_CODE request.site %}
<footer class="footer">
<style>
.mb-footer-wrap {
margin-top: clamp(2rem, 4vw, 3.5rem);
position: relative;
}
.mb-footer {
position: relative;
background:
radial-gradient(120% 120% at 0% 0%, rgba(84, 149, 230, .22) 0%, rgba(84, 149, 230, 0) 45%),
radial-gradient(90% 120% at 100% 0%, rgba(65, 206, 186, .16) 0%, rgba(65, 206, 186, 0) 45%),
linear-gradient(180deg, #264f72 0%, #203f5c 100%);
border-radius: 28px 28px 0 0;
padding: clamp(2rem, 4vw, 3rem) 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 -10px 24px rgba(20, 43, 72, .20);
overflow: hidden;
}
.mb-footer:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.06) 100%);
pointer-events: none;
}
.mb-footer .footer_column {
padding-top: .75rem;
padding-bottom: .75rem;
}
.mb-footer .mb-footer__card {
height: 100%;
background: rgba(255, 255, 255, .055);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
padding: 1.1rem 1.15rem;
backdrop-filter: blur(1.2px);
}
.mb-footer .footer_header {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .01em;
margin-bottom: .9rem;
color: #f4f8ff;
}
.mb-footer .footer_column,
.mb-footer .footer_column * {
color: rgba(237, 244, 255, .93);
}
.mb-footer .footer_column a {
color: #eef4ff;
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
.mb-footer .footer_column a:hover {
color: #ffffff;
transform: translateX(2px);
}
.mb-footer .footer_column .rich-text p {
margin-bottom: .65rem;
line-height: 1.65;
max-width: 34ch;
}
.mb-footer .mb-footer__card .aboutus-logo {
max-height: 52px;
width: auto;
}
.mb-footer .mb-footer__card .social {
margin-top: 1rem;
}
.mb-footer .mb-footer__card .social a {
border-color: rgba(255, 255, 255, .42);
color: #ffffff;
background: rgba(255,255,255,.08);
}
.mb-footer .mb-footer__card .social a:hover {
background: rgba(255,255,255,.18);
}
.mb-copyright {
background: #1b3650;
padding: 1rem 0;
border-top: 1px solid rgba(255,255,255,.16);
}
.mb-copyright .copyright_block,
.mb-copyright .copyright_block * {
color: rgba(234, 241, 255, .92);
margin: 0;
font-size: .95rem;
}
.mb-copyright .copyright_block a {
color: #ffffff;
text-decoration: none;
}
.mb-copyright .copyright_block a:hover {
text-decoration: underline;
}
@media (max-width: 991.98px) {
.mb-footer {
border-radius: 20px 20px 0 0;
}
.mb-footer .mb-footer__card {
padding: 1rem;
}
}
</style>
<div class="mb-footer-wrap">
<footer class="footer mb-footer">
<div class="container">
<div class="row">
<div class="row g-4">
{% with footer=localized_footer.footer|default:settings.ocyan_plugin_wagtail.OcyanSettings.footer %}
{% for block in footer %}
<div class="col-lg-3 col-md-6 col-sm-12 footer_column {{ block.block_type|slugify }}">
{% if block.block_type == 'page_list' and block.value.page and not block.value.page.get_children.live.public %}
{% else %}
<div class="{% if footer|length == 3 %}col-lg-4{% elif footer|length == 2 %}col-lg-6{% else %}col-lg-3{% endif %} col-md-6 col-sm-12 footer_column {{ block.block_type|slugify }}">
<div class="mb-footer__card">
{% include_block block %}
</div>
</div>
{% endif %}
{% endfor %}
{% endwith %}
</div>
</div>
</footer>
<section class="copyright_wrapper">
<section class="copyright_wrapper mb-copyright">
<div class="container">
<div class="row">
<div class="col-lg-12 copyright_block">
@@ -33,4 +144,5 @@
</div>
</div>
</section>
</div>
{% endcache %}