From 5ae5d852a9420f197b4eafe133e66ad5b2fec209 Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 16 Jan 2026 16:45:56 +0200 Subject: [PATCH 1/2] feat: add footer badge and update responsive layout --- .../modules/asset/ui/src/scss/_footer.scss | 132 +++++++++++++----- website/public/images/proud-icon.png | Bin 0 -> 6629 bytes website/views/fragments/fragments.html | 54 +++---- 3 files changed, 127 insertions(+), 59 deletions(-) create mode 100644 website/public/images/proud-icon.png diff --git a/website/modules/asset/ui/src/scss/_footer.scss b/website/modules/asset/ui/src/scss/_footer.scss index 4244780d..52096658 100644 --- a/website/modules/asset/ui/src/scss/_footer.scss +++ b/website/modules/asset/ui/src/scss/_footer.scss @@ -8,79 +8,140 @@ padding-bottom: 16px; @include breakpoint-medium { - padding-bottom: 24px; + padding-bottom: 150px; } } .sf-footer__mission { text-align: center; - margin-bottom: 32px; + margin-bottom: 20px; display: block; + @include breakpoint-medium { display: block; width: fit-content; margin-left: auto; margin-right: auto; + margin-bottom: 91.5px; } p { - font-size: $font-size-footer-mobile; - font-weight: $font-weight-300; - color: $gray-300; + font-size: 10px; + font-weight: $font-weight-bold; + color: #7c7c7b; margin: 0; - line-height: 120%; + line-height: 140%; display: block; - margin-right: 4px; + text-align: center; text-wrap: balance; + @include breakpoint-medium { + font-size: 12px; + } + &:first-child { display: block; } - &:not(:first-child) { + &:nth-child(2) { display: block; - @include breakpoint-medium { - display: inline-block; - } } } } - .sf-footer__links { + .sf-footer__badge-row { display: flex; flex-direction: column; - align-items: flex-start; - font-size: $font-size-footer-mobile; - font-weight: $font-weight-300; - line-height: 120%; - gap: 44px; + align-items: center; + margin-bottom: 104px; @include breakpoint-medium { flex-direction: row; + align-items: center; justify-content: space-between; - gap: 32px; - text-align: left; + margin-bottom: 0; + position: relative; + } + } + + .sf-footer__badge { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 60px; + order: 1; + + @include breakpoint-medium { + position: absolute; + left: 50%; + transform: translateX(-50%); + margin-bottom: 0; + order: 1; + } + + .sf-footer__badge-image { + width: 100px; + height: 60px; + object-fit: contain; + + @include breakpoint-medium { + width: 140px; + height: 80px; + } + } + } + + .sf-footer__links-left { + display: flex; + flex-direction: column; + align-items: center; + order: 2; + margin-bottom: 0; + + @include breakpoint-medium { + flex-direction: row; + align-items: center; + gap: 50px; + flex: 1; + justify-content: flex-start; + order: 0; + margin-bottom: 0; } } - .sf-footer__links-group { + .sf-footer__links-right { display: flex; flex-direction: column; - gap: 12px; + align-items: center; + order: 3; + margin-bottom: 0; @include breakpoint-medium { flex-direction: row; align-items: center; - gap: 32px; + gap: 50px; + flex: 1; + justify-content: flex-end; + order: 2; + margin-bottom: 0; } } .sf-footer__links-item { - font-size: $font-size-footer-mobile; - font-weight: $font-weight-normal; + font-size: 10px; + font-weight: $font-weight-bold; color: $gray-500; + line-height: 140%; text-decoration: none; + text-align: center; transition: color 0.2s ease; + margin-bottom: 20px; + + @include breakpoint-medium { + font-size: 12px; + text-align: left; + margin-bottom: 0; + } &:hover, &:focus { @@ -89,16 +150,12 @@ } } - .sf-footer__links-item--policy { - margin-top: 44px; - @include breakpoint-medium { - margin-top: 0; - } - } - .sf-footer__bottom { text-align: center; - padding-top: 32px; + + @include breakpoint-medium { + text-align: right; + } } .sf-copy { @@ -108,8 +165,13 @@ .sf-copy { text-align: center; - font-weight: $font-weight-medium; - font-size: $font-size-body-medium-mobile; + font-weight: $font-weight-bold; + font-size: 10px; line-height: 140%; - color: $gray-300; + color: $gray-500; + + @include breakpoint-medium { + font-size: 12px; + text-align: right; + } } diff --git a/website/public/images/proud-icon.png b/website/public/images/proud-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..63460e5d846108c4f3fe7f43768a939be83110c8 GIT binary patch literal 6629 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 literal 0 HcmV?d00001 diff --git a/website/views/fragments/fragments.html b/website/views/fragments/fragments.html index d6195e42..3e31c01d 100644 --- a/website/views/fragments/fragments.html +++ b/website/views/fragments/fragments.html @@ -30,7 +30,6 @@ {% endfragment %} {% fragment footer() %}
- {% if data.global.companyMission and data.global.companyMission.items and data.global.companyMission.items.length > 0 %}
@@ -39,38 +38,45 @@
{% endif %} -
- {% if data.global.socialMediaLinks and data.global.socialMediaLinks.length > 0 %} -
+
+
+ {% if data.global.socialMediaLinks and data.global.socialMediaLinks.length > 0 %} {% for item in data.global.socialMediaLinks %} - {{ item.SMLink.linkTitle }} - - {% endfor %} -
- {% endif %} + {{ item.SMLink.linkTitle }} + + {% endfor %} + {% endif %} +
- {% if data.global.footerLinks and data.global.footerLinks.length > 0 %} -
- {% for item in data.global.footerLinks %} - - {{ item.footerLink.linkTitle }} - - {% endfor %} +
+ Proud member of The Bureau
- {% endif %} -
-
-

© {{ data.currentYear or '2025' }} S&F

+
+ {% if data.global.footerLinks and data.global.footerLinks.length > 0 %} + {% for item in data.global.footerLinks %} + + {{ item.footerLink.linkTitle }} + + {% endfor %} + {% endif %} +
+

© {{ data.currentYear or '2026' }} S&F

+
+
From 43f5205cf68891335c203006c28e1e9dbdcac9f5 Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 16 Jan 2026 16:57:52 +0200 Subject: [PATCH 2/2] chore: highlight inconsistent gray color usage --- website/modules/asset/ui/src/scss/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/modules/asset/ui/src/scss/_footer.scss b/website/modules/asset/ui/src/scss/_footer.scss index 52096658..5f457c5c 100644 --- a/website/modules/asset/ui/src/scss/_footer.scss +++ b/website/modules/asset/ui/src/scss/_footer.scss @@ -28,7 +28,7 @@ p { font-size: 10px; font-weight: $font-weight-bold; - color: #7c7c7b; + color: $gray-300; margin: 0; line-height: 140%; display: block;