ux: added core seal logo in footer

Author: shiftmed

angular/src/app/frame/footbar/footbar.component.css

@@ -3,6 +3,7 @@
   background: #000;
   color: white;
   position: relative;
+  --footer-right-offset: 1em;
 }
 
 .footer__inner {
@@ -120,7 +121,52 @@ ul, menu, dir {
 
 #footer .social-links {
   float: right;
-  margin-right: 1em;
+  margin-right: var(--footer-right-offset);
+}
+
+.footer-links-and-seal {
+  clear: both;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  gap: 1rem;
+}
+
+.footer-links {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.footer-links .menu--footer-menu {
+  clear: none;
+}
+
+.footer-links .menu--footer-menu ul.menu {
+  text-align: left;
+}
+
+.core-trust-seal {
+  flex: 0 0 auto;
+  text-align: right;
+  margin-right: var(--footer-right-offset);
+}
+
+.core-trust-seal a {
+  display: inline-block;
+}
+
+.core-trust-seal img {
+  height: clamp(72px, 6vw, 108px);
+  width: auto;
+  max-width: 100%;
+  display: block;
+}
+
+@media (max-width: 900px) {
+  .footer-links-and-seal {
+    align-items: center;
+  }
 }
 
 .social-btn--large {

angular/src/app/frame/footbar/footbar.component.html

@@ -30,24 +30,39 @@
           </a>
       </div>
 
-        <!-- Footer links line #1 -->
-        <div id="block-menu-menu-footer-menu" *ngIf="footerLinks01"
-        class="block menu--footer-menu first even block--menu block--menu-menu-footer-menu" role="navigation">
-            <ul class="menu">
-                <li *ngFor="let link of footerLinks01; let i = index" [ngClass]="getLinkClass(i, footerLinks01)">
-                    <a [href]="link.url" target="_blank" rel="noopener" class="menu__link">{{link.title}} </a>
-                </li>
-            </ul>
-        </div>
+        <div class="footer-links-and-seal">
+            <div class="footer-links">
+                <!-- Footer links line #1 -->
+                <div id="block-menu-menu-footer-menu" *ngIf="footerLinks01"
+                class="block menu--footer-menu first even block--menu block--menu-menu-footer-menu" role="navigation">
+                    <ul class="menu">
+                        <li *ngFor="let link of footerLinks01; let i = index" [ngClass]="getLinkClass(i, footerLinks01)">
+                            <a [href]="link.url" target="_blank" rel="noopener" class="menu__link">{{link.title}} </a>
+                        </li>
+                    </ul>
+                </div>
 
-        <!-- Footer links line #2 -->
-        <div id="block-menu-menu-footer-menu-3" *ngIf="footerLinks02"
-        class="block menu--footer-menu last even block--menu block--menu-menu-footer-menu-3" role="navigation">
-            <ul class="menu">
-                <li *ngFor="let link of footerLinks02; let i = index" [ngClass]="getLinkClass(i, footerLinks02)">
-                    <a [href]="link.url" target="_blank" rel="noopener" class="menu__link">{{link.title}} </a>
-                </li>
-            </ul>
+                <!-- Footer links line #2 -->
+                <div id="block-menu-menu-footer-menu-3" *ngIf="footerLinks02"
+                class="block menu--footer-menu last even block--menu block--menu-menu-footer-menu-3" role="navigation">
+                    <ul class="menu">
+                        <li *ngFor="let link of footerLinks02; let i = index" [ngClass]="getLinkClass(i, footerLinks02)">
+                            <a [href]="link.url" target="_blank" rel="noopener" class="menu__link">{{link.title}} </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="core-trust-seal">
+                <a
+                  href="https://www.coretrustseal.org/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="CoreTrustSeal">
+                    <img
+                      src="assets/images/core-trust-seal-logo.png"
+                      alt="CoreTrustSeal logo">
+                </a>
+            </div>
         </div>
     </div>
 </div>