fix issue TEDEFO-3333

OP-TED · May 13, 2024 · 88a78e6 · 88a78e6
1 parent aa8509b
commit 88a78e6
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 28 deletions.
diff --git a/src/css/footer.css b/src/css/footer.css
@@ -8,7 +8,6 @@ footer.footer {
 
 .footer p {
   margin: 0;
-  font-family: var(--footer-OP-font-family);
   font-size: x-small;
 }
 
@@ -26,13 +25,6 @@ footer.footer {
 /* .footer .columns div {
   flex-grow: 1;
 } */
-.footer h3 {
-  font-family: var(--footer-OP-font-family);
-  font-size: 15px;
-  font-weight: 700;
-  margin: 0 0 15px 0;
-}
-
 .footer .logo {
   margin: 0;
   height: 48px;
@@ -171,8 +163,15 @@ footer.footer {
   flex-wrap: wrap;
   background-color: #f3f6fc;
   border-bottom: 1px solid #cfdaf5;
+  justify-content: center;
 }
 
+.three-columns > div {
+  flex: 1; /* This allows the divs to grow and shrink as needed */
+  min-width: 20%; /* This sets a minimum width for the divs */
+  box-sizing: border-box;
+  padding: 1rem;
+}
 .three-columns > div:first-child {
   flex: 0 0 20%;
   box-sizing: border-box;
@@ -188,6 +187,11 @@ footer.footer {
   padding: 1rem;
 }
 
+@media (max-width: 1024px) {
+  .three-columns {
+    flex-direction: column;
+  }
+}
 /* tablet breakpoint */
 /* @media screen and (min-width: 769px) {
   .three-columns {
@@ -281,3 +285,36 @@ footer.footer {
   margin-right: 0.35rem;
   margin-left: 2rem;
 }
+
+.ted-footer__title {
+  font-size: 28px;
+  font-weight: 400;
+  color: #333333;
+  border-bottom: 1px solid #CFDAF5;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  display: block;
+  line-height: 1.2;
+}
+
+
+.ted-footer__rich-text {
+  padding-right: 60px;
+  font-family: var(--gs-base-font-family-default);
+  font-weight: var(--gs-base-font-weight-default);
+}
+
+.ted-footer__rich-text p {
+  font-size: 16px;
+  color: #333333;
+}
+
+.ted-footer__rich-text a {
+  font-size: 16px;
+  color: #0E47CB;
+}
+
+.ted-footer__title.ted-footer__title--main {
+  border: unset;
+  padding: 0;
+}
diff --git a/src/img/twitter.svg b/src/img/twitter.svg
diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
@@ -9,52 +9,59 @@
             <div class="ls-footer-logo-DD"><a href="https://docs.ted.europa.eu/home/index.html"><img
                         alt="TED Developer Docs" class="ls-op" src="{{{uiRootPath}}}/img/ted-logo-footer2.png"
                         height="48" /></a></div>
+            <span class="ted-footer__title ted-footer__title--main"></span>
             <div class="ted-footer__rich-text">
                 <p>This website is managed by:
                     <u>
-                        <a href="https://op.europa.eu/en/home" target="_blank">Publications Office of the European Union</a>
+                        <a href="https://op.europa.eu/en/home" target="_blank">Publications Office of the European
+                            Union</a>
                     </u>
                 </p>
                 {{!-- <img src="{{{uiRootPath}}}/img/op-logo-with-name.svg" class="logo" /> --}}
 
             </div>
         </div>
 
-        <div>
+        <div class="col-md-12 col-lg-4">
 
-            <h3 class="h3-footer">Need Help?</h3>
+            <h3 class="ted-footer__title">Need Help?</h3>
             <ul class="ul-footer">
                 <li class="li-footer"><a href="https://ted.europa.eu/en/help-page">Help</a></li>
                 <li class="li-footer"><a href="https://simap.ted.europa.eu/contact">Contact the TED Helpdesk</a></li>
             </ul>
 
-            <h3 class="h3-footer">Follow us</h3>
+            <h3 class="ted-footer__title">Follow us</h3>
             <ul class="ul-footer">
-                <li>
+                <li class="li-footer">
                     <a href="https://twitter.com/eulawdatapubs"> <img src="{{{uiRootPath}}}/img/twitter.svg"
-                            class="icon-footer" /><span>Twitter</span></a>
+                            class="icon-footer" /><span>X/Twitter</span></a>
                     <a href="https://www.youtube.com/playlist?list=PLT5rARDev_rkQdFimoHlpv2Och1H0uBLs"><img
                             src="{{{uiRootPath}}}/img/youtube.svg" class="icon-footer-2nd" /><span>YouTube</span></a>
                 </li>
             </ul>
 
-            <h3 class="h3-footer">Legal</h3>
+            <h3 class="ted-footer__title">Legal</h3>
             <ul class="ul-footer">
+                <li class="li-footer"><a href="https://ted.europa.eu/en/legal-notice" target="_blank">Legal Notice</a>
+                </li>
+                <li class="li-footer"><a href="https://ted.europa.eu/en/cookie-choice" target="_blank">Cookies</a>
+                </li>
                 <li class="li-footer"><a
-                        href="https://op.europa.eu/en/web/about-us/legal-notices/accessibility-statement">Accessibility</a>
+                        href="https://op.europa.eu/en/web/about-us/legal-notices/accessibility-statement"
+                        target="_blank">Accessibility</a>
                 </li>
             </ul>
 
         </div>
 
-        <div>
+        <div class="col-md-12 col-lg-4">
 
-            <h3 class="h3-footer">About us</h3>
+            <h3 class="ted-footer__title">About us</h3>
             <ul class="ul-footer">
                 <li class="li-footer"><a href="https://ted.europa.eu/">About TED</a></li>
             </ul>
 
-            <h3 class="h3-footer">Other services</h3>
+            <h3 class="ted-footer__title">Other services</h3>
             <ul class="ul-footer">
                 <li class="li-footer"><a href="https://ted.europa.eu/TED/main/HomePage.do">EU tenders</a></li>
                 <li class="li-footer"><a href="https://data.europa.eu/en">European data</a></li>
@@ -72,13 +79,17 @@
 
             <div class="ls-footer-logo"><a aria-labelledby="section-title-op" href="/"><img alt="European Union"
                         class="ls-op" /></a></div>
-            <p class="byline-footer">Discover more on <a class="ls-underline" href="https://europa.eu/en/home"><span
-                        style="word-break: keep-all; white-space: nowrap; text-decoration: underline!important">europa.eu</span></a>
-            </p>
+            <span class="ted-footer__title ted-footer__title--main"></span>
+
+            <div class="ted-footer__rich-text">
+                <p class="byline-footer">Discover more on <a class="ls-underline" href="https://europa.eu/en/home"><span
+                            style="word-break: keep-all; white-space: nowrap; text-decoration: underline!important">europa.eu</span></a>
+                </p>
 
+            </div>
         </div>
         <div class="col-md-12 col-lg-4">
-            <h3 class="h3-footer">Contact the EU</h3>
+            <h3 class="ted-footer__title">Contact the EU</h3>
 
             <ul class="ul-footer">
                 <li class="li-footer"><a href="tel:0080067891011">Call us 00 800 6 7 8 9 10 11</a></li>
@@ -91,15 +102,15 @@
 
             </ul>
 
-            <h3 class="h3-footer">Social Media</h3>
+            <h3 class="ted-footer__title">Social Media</h3>
             <ul class="ul-footer">
                 <li class="li-footer"><a
                         href="https://european-union.europa.eu/contact-eu/social-media-channels_en#/search"><i
                             aria-hidden="true" class="gs-icon-twitter"></i>Search of EU social media channels</a></li>
 
             </ul>
 
-            <h3 class="h3-footer">Legal</h3>
+            <h3 class="ted-footer__title">Legal</h3>
 
             <ul class="ul-footer">
                 <li class="li-footer"><a aria-labelledby="section-title-op"
@@ -115,7 +126,7 @@
             </ul>
         </div>
         <div class="col-md-12 col-lg-4">
-            <h3 class="h3-footer">EU institutions</h3>
+            <h3 class="ted-footer__title">EU institutions</h3>
 
             <ul class="ul-footer">
                 <li class="li-footer"><a href="https://www.europarl.europa.eu/portal/en">European Parliament</a></li>