Add custom footer and update styles to match TuringLang/turinglang.github.io#119

Author: shravanngoswamii

.gitignore

@@ -27,3 +27,5 @@ venv
 404.html
 site_libs
 .DS_Store
+index_files
+digest.txt

_quarto.yml

@@ -5,7 +5,6 @@ project:
     port: 4200
     browser: true
 
-
 # These cannot be used as variables. They are reserved for the project configuration.
 website:
   title: "Turing.jl"
@@ -17,8 +16,6 @@ website:
   navbar:
     logo: "assets/images/turing-logo.svg"
     logo-href: https://turinglang.org/
-    # background: "#073c44"
-    # foreground: "#ffffff"
     left:
       - href: getting-started/
         text: Get Started
@@ -155,9 +152,9 @@ format:
                     <h5>Explore</h5>
                     <a href="https://turinglang.org/docs/getting-started/">Get Started</a>
                     <a href="https://turinglang.org/docs/tutorials/">Tutorials</a>
-                    <a href="/library">Libraries</a>
-                    <a href="/news">News</a>
-                    <a href="/team">Team</a>
+                    <a href="https://turinglang.org/library/">Libraries</a>
+                    <a href="https://turinglang.org/news/">News</a>
+                    <a href="https://turinglang.org/team/">Team</a>
                   </div>
 
                   <div class="footer-column footer-connect">
@@ -174,8 +171,8 @@ format:
                   <p>Turing.jl is developed by researchers and engineers at the following research institutions.</p>
                   <div class="logo-grid">
                     <a href="https://mlg.eng.cam.ac.uk/" class="partner-logo" target="_blank" rel="noopener">
-                      <img src="https://www.cam.ac.uk/sites/default/files/university-cambridge-logo-black-example-640x132.png" alt="University of Cambridge Logo" class="brands-light-mode-logo">
-                      <img src="https://www.cam.ac.uk/sites/default/files/university-cambridge-logo-white-example-640x133.png" alt="University of Cambridge Logo Dark" class="brands-dark-mode-logo">
+                      <img src="/assets/images/brands/university-cambridge-logo-black-example-640x132.png" alt="University of Cambridge Logo" class="brands-light-mode-logo">
+                      <img src="/assets/images/brands/university-cambridge-logo-white-example-640x133.png" alt="University of Cambridge Logo Dark" class="brands-dark-mode-logo">
                     </a>
                     <a href="https://www.turing.ac.uk/" class="partner-logo" target="_blank" rel="noopener">
                       <img src="/assets/images/brands/Turing_Logo_1000x400px_Black.webp" alt="The Alan Turing Institute Logo" class="brands-light-mode-logo">

assets/images/brands/Turing_Logo_1000x400px_Black.webp

@@ -1,3 +1,15 @@
+.quarto-container {
+  background-color: #f8f9fa;
+}
+
+.navbar {
+  background-color: #ffffff;
+}
+
+nav.sidebar.sidebar-navigation:not(.rollup) {
+    background-color: #f8f9fa;
+}
+
 .navbar a:hover {
     text-decoration: none;
 }
@@ -45,3 +57,203 @@
     overflow: scroll;
 }
 
+/* Custom Footer */
+.footer {
+    display: none;
+}
+.custom-footer {
+  background-color: #fff;
+  color: #6c757d;
+  font-size: 0.9rem;
+  padding: 3rem 2rem 2rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.custom-footer .footer-container {
+  max-width: 1350px;
+  margin: 0 auto;
+}
+
+.custom-footer .footer-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.custom-footer .footer-links-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  flex: 2 1 400px;
+}
+
+.custom-footer .footer-column {
+  flex: 1 1 auto;
+}
+
+.custom-footer .footer-brands {
+  flex: 1 1 320px;
+}
+
+.custom-footer .footer-column h5 {
+  font-weight: 600;
+  color: #212529;
+  margin-bottom: 1.25rem;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.custom-footer .footer-column a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  color: #6c757d;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.custom-footer .footer-column a:hover {
+  color: #212529;
+  text-decoration: none;
+}
+
+.custom-footer .footer-column a i {
+  font-size: 1.1rem;
+  line-height: 1;
+  width: 20px;
+  text-align: center;
+}
+
+.custom-footer .footer-brands p {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  margin-top: -0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.custom-footer .footer-brands .logo-grid {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+.custom-footer .partner-logo {
+  flex: 1;
+}
+
+.custom-footer .partner-logo img {
+  max-width: 100%;
+  height: 50px;
+  object-fit: contain;
+  transition: transform 0.2s ease;
+}
+
+.custom-footer .partner-logo:hover img {
+  transform: scale(1.05);
+}
+
+.custom-footer .brands-light-mode-logo {
+  display: inline;
+}
+
+.custom-footer .brands-dark-mode-logo {
+  display: none;
+}
+
+.custom-footer .footer-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.85rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.custom-footer .footer-bottom p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.custom-footer .footer-bottom a {
+  color: #495057;
+  font-weight: 500;
+  text-decoration: none;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.custom-footer .footer-bottom a:hover {
+  border-bottom-color: #495057;
+}
+
+.footer-source-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (max-width: 992px) {
+  .custom-footer .footer-links-wrapper {
+    flex-basis: 100%;
+    justify-content: center;
+  }
+
+  .custom-footer .footer-grid {
+    justify-content: center;
+  }
+
+  .custom-footer .footer-brands {
+    flex-grow: 0;
+    text-align: center;
+  }
+
+  .custom-footer .footer-brands .logo-grid {
+    justify-content: center;
+  }
+
+  .custom-footer .footer-column {
+    flex-grow: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .custom-footer .footer-bottom {
+    flex-direction: column;
+    gap: 1.5rem;
+    text-align: center;
+  }
+}
+
+@media (max-width: 576px) {
+  .custom-footer .footer-links-wrapper {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+  }
+
+  .custom-footer .footer-column {
+    width: 100%;
+    max-width: 350px;
+  }
+
+  .custom-footer .footer-column a {
+    justify-content: center;
+  }
+
+  .custom-footer .footer-brands .logo-grid {
+    flex-direction: column;
+    gap: 1.5rem;
+    align-items: center;
+  }
+
+  .custom-footer .partner-logo {
+    flex-basis: auto;
+    width: 100%;
+    max-width: 220px;
+  }
+}