Merge pull request #8 from FitzwilliamMuseum/feat/tnew-improvements

TNEW improvements ( navigation & footer )
FitzwilliamMuseum · Feb 21, 2024 · d767ef1 · d767ef1
2 parents edd6239 + 53b9373
commit d767ef1
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 59 deletions.
diff --git a/404.html b/404.html
@@ -2,20 +2,6 @@
 layout: default
 ---
 
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
 <div class="container">
   <h1>404</h1>
 

diff --git a/_includes/structure/footer.html b/_includes/structure/footer.html
@@ -1,42 +1,50 @@
-<!--- Footer stuff -->
-<div id="footer-layout" role="contentinfo" class="l-footer">
-  <div class="footer-holder">
-    <div class="region--copyright region region-copyright">
-      <div id="block-sitebranding" class="col-md-4">
-        <div id="site-branding">
-          <div id="logo">
-            <a href="https://museums.cam.ac.uk/" title="Home" rel="home" class="site-logo">
-              <img src="{{ site.url }}{{ site.baseurl }}/images/logos/logo.svg" alt="Home">
-            </a>
-          </div>
-        </div>
-      </div>
-      <div id="block-acelogo" class="col-md-8 block block-block-content ">
-        <div class="content">
-          <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
-            <p>
-              <a href="https://www.artscouncil.org.uk/"><img alt="ACE website logo"  src="{{ site.url }}{{ site.baseurl }}/images/logos/u43.png"></a>
-            </p>
-            <p>&nbsp;</p>
-          </div>
-        </div>
-      </div>
+<div class="bg-white border-cambridge">
+  <div class="fitz-footer">
+    <div class="text-center">
+      <a href="https://fitzmuseum.cam.ac.uk/">
+        <img class="mx-auto my-2" loading="lazy" width="200" height="62" alt="The Fitzwilliam Museum logo"
+          src="{{ site.url }}{{ site.baseurl }}/images/logos/fitz_logo.svg" />
+      </a>
+    </div>
+    <div class="text-center">
+      <a href="https://www.museums.cam.ac.uk">
+        <img class="mx-auto my-2" loading="lazy" width="200" height="62" alt="University of Cambridge Museums logo"
+          src="https://fitzmuseum.cam.ac.uk/images/logos/ucm_logo.svg" />
+      </a>
+    </div>
+    <div class="text-center">
+      <a href="https://www.cambridge.gov.uk/">
+        <img class="mx-auto my-2" loading="lazy" width="60" height="73.85" alt="Cambridge City Council logo"
+          src="https://fitzmuseum.cam.ac.uk/images/logos/Cambridge_City.svg" />
+      </a>
+    </div>
+    <div class="text-center">
+      <a href="https://www.artscouncil.org.uk/">
+        <img class="mx-auto my-2" alt="Arts Council England Logo"
+          src="https://fitzmuseum.cam.ac.uk/images/logos/ace_grant_eps_black.svg" loading="lazy" width="200"
+          height="63.3833" />
+      </a>
+    </div>
+    <div class="text-center">
+      <a href="https://re.ukri.org/">
+        <img class="mx-auto my-2" alt="Research England logo" loading="lazy" width="200" height="63.5"
+          src="https://fitzmuseum.cam.ac.uk/images/logos/UKRI_RE-Logo_Horiz-RGB.svg" />
+      </a>
     </div>
   </div>
 </div>
-
-<footer class="text-white bg-black">
+<footer>
 
   <div class="container">
     <div class="row">
       <div class="col-md-4 mt-4 mb-2">
         <h4 class="sr-only">Contact us</h4>
         <p class="share">
-          University of Cambridge Museums<br />
-          The Fitzwilliam Museum,<br/>
-          Trumpington Street,<br/>
-          Cambridge<br/>
-          CB2 1RB<br/>
+          University of Cambridge Museums</br />
+          The Fitzwilliam Museum<br />
+          Trumpington Street<br />
+          Cambridge<br />
+          CB2 1RB<br />
           Tel: +44 (0)1223 333 230<br />
           Email: <a href="mailto:[email protected]">[email protected]</a>
         </p>
@@ -45,13 +53,16 @@ <h4 class="sr-only">Contact us</h4>
         <h4 class="sr-only">Useful links</h4>
         <ul class="share">
           <li>
-            <a href="https://www.cam.ac.uk/about-this-site/terms-and-conditions" aria-label="Website terms and conditions">Website Terms of Use</a>
+            <a href="https://www.cam.ac.uk/about-this-site/terms-and-conditions"
+              aria-label="Website terms and conditions">Website Terms of Use</a>
           </li>
           <li>
-            <a href="https://www.cam.ac.uk/about-this-site/accessibility/university-of-cambridge-web-accessibility-policy">Accessibility</a>
+            <a
+              href="https://www.cam.ac.uk/about-this-site/accessibility/university-of-cambridge-web-accessibility-policy">Accessibility</a>
           </li>
           <li>
-            <a href="https://www.registrarysoffice.admin.cam.ac.uk/governance-and-strategy/anti-slavery-and-anti-trafficking" aria-label="Modern Slavery Act statement of compliance">Modern Slavery Act Statement</a>
+            <a href="https://www.registrarysoffice.admin.cam.ac.uk/governance-and-strategy/anti-slavery-and-anti-trafficking"
+              aria-label="Modern Slavery Act statement of compliance">Modern Slavery Act Statement</a>
           </li>
           <li>
             <a href="https://alumni.cam.ac.uk/data-protection" aria-label="Data Protection measures">Data Protection</a>
@@ -70,5 +81,88 @@ <h4 class="sr-only">Copyright</h4>
     </div>
   </div>
 
-  <a href="#0" class="cd-top js-cd-top">Top</a>
-</footer>
+  <div class="container">
+    <div class="row pt-2">
+      <div class="col-md-6 mx-auto">
+        <h3 class="sr-only">Join our conversations</h3>
+        <p class="share text-center">
+          <a aria-label="Fitzwilliam Museum instagram account" href="https://www.instagram.com/fitzmuseum_uk">
+            <svg width="48" height="48" alt="Instagram logo" class="my-2
+                    mx-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
+            </svg> </a>
+          <a aria-label="Fitzwilliam Museum facebook account" href="https://www.facebook.com/fitzwilliammuseum/">
+            <svg width="48" height="48" alt="Facebook logo" class="my-2
+                    mx-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
+            </svg> </a>
+          <a aria-label="Fitzwilliam Museum twitter account" href="https://twitter.com/FitzMuseum_UK">
+            <svg width="48" height="48" alt="Twitter logo" class="my-2
+                    mx-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
+            </svg> </a>
+          <a aria-label="Fitzwilliam Museum linkedin account"
+            href="https://www.linkedin.com/company/the-fitzwilliam-museum/">
+            <svg width="48" height="48" alt="Linkedin logo" class="my-2
+                    mx-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+            </svg> </a>
+          <a aria-label="Watch our YouTube videos" href="https://www.youtube.com/channel/UCFwhw5uPJWb4wVEU3Y2nScg">
+            <svg width="48" height="48" alt="Youtube logo" class="my-2
+                    mx-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 576 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
+            </svg> </a>
+          <a aria-label="Fitzwilliam Museum sketchfab account" href="https://www.sketchfab.com/fitzwilliammuseum/">
+            <svg width="48" height="48" class="my-2 mx-2 eden" viewBox="0 0 2000 2000"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="m1000 69c-515.52 0-933.28 417.84-933.28 933.24s417.76 933.29 933.28 933.29 933.36-417.89 933.36-933.29-417.84-933.24-933.36-933.24z"
+                fill="#fff" />
+              <path
+                d="m1000 0c-552.32 0-1000 447.72-1000 1000s447.68 1000 1000 1000 1000-447.72 1000-1000-447.6-1000-1000-1000zm-86.88 1595.07-431.12-248.86v-502l431.12 232.79zm76.8-636.19-510.08-270.38 510.08-294.5 510.16 294.5zm510.48 388.29-429.52 248v-516.17l429.52-232z"
+                fill="#1faad8" />
+            </svg>
+          </a>
+          <a aria-label="Fitzwilliam Museum github account" href="https://www.github.com/fitzwilliammuseum/">
+            <svg width="48" height="48" alt="Github logo" class="my-2 mx-2" fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 496 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+            </svg> </a>
+        </p>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 mb-2 mx-auto">
+        <p class="text-center">
+          <a href="https://cam.ac.uk">
+            <img src="https://fitzmuseum.cam.ac.uk/images/logos/cambridge_university2.svg"
+              alt="The University of Cambridge logo" width="200" height="41.59" class="img-fluid mx-auto mb-3"
+              loading="lazy" />
+          </a>
+          <br />
+          The University of Cambridge
+        </p>
+      </div>
+    </div>
+
+    <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-top"
+      aria-label="Return to the top of the page">
+      <svg height="48" viewBox="0 0 48 48" width="64" xmlns="http://www.w3.org/2000/svg">
+        <path fill="black" id="scrolltop-bg" d="M0 0h48v48h-48z" />
+        <path fill="white" id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z" />
+      </svg>
+    </button>
+</footer>
diff --git a/_includes/structure/javascript.html b/_includes/structure/javascript.html
@@ -47,3 +47,31 @@
     $('.head').css({'background-image': 'url(https://fitz-cms-images.s3.eu-west-2.amazonaws.com/img_20190105_153947.jpg)'});
   }
 </script>
+
+<script defer>
+  //Get the button
+let mybutton = document.getElementById("btn-back-to-top");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function () {
+    scrollFunction();
+};
+
+function scrollFunction() {
+    if (
+        document.body.scrollTop > 20 ||
+        document.documentElement.scrollTop > 20
+    ) {
+        mybutton.style.display = "block";
+    } else {
+        mybutton.style.display = "none";
+    }
+}
+// When the user clicks on the button, scroll to the top of the document
+mybutton.addEventListener("click", backToTop);
+
+function backToTop() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+}
+</script>
diff --git a/_includes/structure/navigation.html b/_includes/structure/navigation.html
@@ -1,5 +1,5 @@
 <!-- Nav bars -->
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top">
-  <a class="navbar-brand order-md-last" href="https://tickets.museums.cam.ac.uk/">Tickets & Events <span class="ucm-hide">: University of Cambridge Museums</span></a>
-</nav>
+  <a class="navbar-brand order-md-last" href="https://tickets.museums.cam.ac.uk/">Tickets: University of Cambridge Museums</a>
+</nav>
diff --git a/css/site.css b/css/site.css
@@ -70,10 +70,6 @@ html {
   } */
 }
 
-footer, .chip-icon {
-  background-color: #000000;
-}
-
 .bg-black {
   background-color: #000000!important;
 }
@@ -152,7 +148,7 @@ video {
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
-  background: rgba(232, 98, 86, 0.8) url(../images/layouts/arrow.svg) no-repeat center 50%;
+  background: rgba(0,0,0) url(../images/layouts/arrow.svg) no-repeat center 50%;
   visibility: hidden;
   opacity: 0;
   -webkit-transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
@@ -178,7 +174,7 @@ video {
 }
 
 .cd-top:hover {
-  background-color: #e86256;
+  background-color: #000;
   opacity: 1;
 }
 
@@ -616,7 +612,7 @@ section.tn-header-component h1 {
 .tn-event-listing-mode-tab-nav__list-item.active {
   border: none!important;
 }
-@media (min-width: 768px)
+@media (min-width: 768px) {
 .tn-prod-list-item__property--img-container {
   grid-row: 1/span 3!important;
 }
@@ -818,7 +814,6 @@ input#tn-subnav-promo-code {
   margin-right:10px;
 }
 
-}
 .tn-component-contact-permissions__settings__item__header {
   border-bottom: 1px solid black;
   font-weight: bold!important;
@@ -975,3 +970,86 @@ label.tn-ticket-selector__pricetype-label-heading {
 .js .tn-interests {
   display: none;
 }
+
+.navbar {
+  height: 88px;
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  max-width: 200px;
+}
+
+.container .row .mt-4 {
+  margin-top: 28px !important;
+}
+.navbar .container {
+  max-width: 1290px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.fitz-footer {
+  max-width: 1280px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  justify-items: center;
+  padding: 28px 12px;
+}
+.fitz-footer div {
+  max-width: fit-content;
+}
+
+a.nav-link {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration-line: underline;
+  color: white;
+}
+
+.tn-page-top {
+  max-width: 510px;
+  padding-bottom: 16px;
+}
+
+#btn-back-to-top {
+  bottom: 20px;
+  box-shadow: none;
+  display: none;
+  position: fixed;
+  right: 20px;
+}
+
+#btn-back-to-top:focus {
+  outline: 1px dotted;
+  outline-offset: -3px;
+  outline: 3px auto -webkit-focus-ring-color;
+}
+
+#btn-back-to-top:hover,
+#btn-back-to-top:active,
+#btn-back-to-top:focus {
+  background-image: none;
+  background-color: transparent;
+}
+
+.parallax {
+  height: 365px;
+}
+
+.share a {
+  color: #000 !important;
+}
+
+.share a:hover {
+  text-decoration: none;
+}
+
+.eden {
+  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(100deg) brightness(100%) contrast(100%);
+}