Color-Theme update to match main site for consistency (#613)

* Updated theme-colors to match main site for consistency

* fixed search results color in dark mode

* fix copy button css in dark mode

* search bar background udpdate

* removed current default footer and added custom one

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

* Update styles to match original site

* cleanup code

* Added SCSS styles to match main site

* Add all icons in navbar + match few tweaks with main PR

* Enable Open Graph and Twitter Cards for SEO

* fix corrupted png

* remove old styles

---------

Co-authored-by: Penelope Yong <[email protected]>

Author: 2 people

.gitignore

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

_quarto.yml

@@ -5,31 +5,38 @@ project:
     port: 4200
     browser: true
 
-
 # These cannot be used as variables. They are reserved for the project configuration.
 website:
   title: "Turing.jl"
   site-url: "https://turinglang.org/docs/"
+  description: "Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language."
+  image: assets/images/turing-text-logo.jpg
   favicon: "assets/favicon.ico"
+  open-graph:
+    title: "The Turing Language"
+    locale: en_GB
+  twitter-card:
+    creator: "@Hong_Ge2"
+    site: "@TuringLang"
+    image-width: 4214
+    image-height: 1032
   search:
     location: navbar
     type: overlay
   navbar:
     logo: "assets/images/turing-logo.svg"
     logo-href: https://turinglang.org/
-    background: "#073c44"
-    foreground: "#ffffff"
     left:
-      - href: getting-started/
-        text: Get Started
-      - href: tutorials/coin-flipping/
-        text: Tutorials
-      - href: https://turinglang.org/library/
-        text: Libraries
-      - href: https://turinglang.org/news/
-        text: News
-      - href: https://turinglang.org/team/
-        text: Team
+      - text: Get Started
+        href: getting-started/
+      - text: Tutorials
+        href: tutorials/
+      - text: Libraries
+        href: https://turinglang.org/library/
+      - text: News
+        href: https://turinglang.org/news/
+      - text: Team
+        href: https://turinglang.org/team/
     right:
       # Current version
       - text: "v0.39"
@@ -40,11 +47,17 @@ website:
             href: https://turinglang.org/docs/versions.html
     tools:
       - icon: twitter
-        href: https://x.com/TuringLang
         text: Turing Twitter
+        href: https://x.com/TuringLang
+      - icon: chat-dots
+        text: Turing Discourse
+        href: https://discourse.julialang.org/c/domain/probprog/48
+      - icon: slack
+        text: Turing Slack
+        href: https://julialang.slack.com/archives/CCYDC34A0
       - icon: github
-        href: https://github.com/TuringLang/Turing.jl
         text: Turing GitHub
+        href: https://github.com/TuringLang
 
   sidebar:
     - text: documentation
@@ -118,20 +131,6 @@ website:
               - developers/inference/variational-inference/index.qmd
               - developers/inference/implementing-samplers/index.qmd
 
-  page-footer:
-    background: "#073c44"
-    left: |
-      Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and lovingly maintained by the <a href="https://github.com/TuringLang/Turing.jl/graphs/contributors" target="_blank">core team</a> of volunteers. <br>
-      The contents of this website are © 2018–2025 under the terms of the <a href="https://github.com/TuringLang/docs/blob/main/LICENCE" target="_blank">MIT License</a>.
-
-    right:
-      - icon: twitter
-        href: https://x.com/TuringLang
-        aria-label: Turing Twitter
-      - icon: github
-        href: https://github.com/TuringLang/Turing.jl
-        aria-label: Turing GitHub
-
   back-to-top-navigation: true
   repo-url: https://github.com/TuringLang/docs
   repo-actions: [edit, issue]
@@ -142,29 +141,76 @@ website:
 format:
   html:
     theme:
-      light: cosmo
+      light: [cosmo, theming/theme-light.scss]
       dark: [cosmo, theming/theme-dark.scss]
-    css: theming/styles.css
+    highlight-style: github
     smooth-scroll: true
     output-block-background: true
     toc: true
     toc-title: "Table of Contents"
     code-fold: false
     code-overflow: scroll
+    include-in-header:
+      - text: |
+          <style>
+            a {
+              text-decoration: none;
+            }
+            a:hover {
+              text-decoration: underline;
+            }
+          </style>
+    include-after-body:
+      - text: |
+          <footer class="custom-footer">
+            <div class="footer-container">
+              <div class="footer-grid">
+                <div class="footer-links-wrapper">
+                  <div class="footer-column footer-explore">
+                    <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="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">
+                    <h5>Connect</h5>
+                    <a href="https://github.com/TuringLang" target="_blank" rel="noopener"><i class="bi bi-github"></i> GitHub</a>
+                    <a href="https://x.com/TuringLang" target="_blank" rel="noopener"><i class="bi bi-twitter"></i> Twitter</a>
+                    <a href="https://julialang.slack.com/archives/CCYDC34A0" target="_blank" rel="noopener"><i class="bi bi-slack"></i> Slack</a>
+                    <a href="https://discourse.julialang.org/c/domain/probprog/48" target="_blank" rel="noopener"><i class="bi bi-chat-dots"></i> Discourse</a>
+                  </div>
+                </div>
+
+                <div class="footer-column footer-brands">
+                  <h5>Supported by leading researchers</h5>
+                  <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="/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">
+                      <img src="/assets/images/brands/Turing_Logo_1000x400px_White.webp" alt="The Alan Turing Institute Logo Dark" class="brands-dark-mode-logo">
+                    </a>
+                  </div>
+                </div>
+
+              </div>
+              <div class="footer-bottom">
+                <p>Turing is created by <a href="https://mlg.eng.cam.ac.uk/hong/" target="_blank" rel="noopener">Hong Ge</a>, and maintained by the core <a href="https://turinglang.org/team/" target="_blank" rel="noopener">team</a> of developers and <a href="https://github.com/TuringLang/Turing.jl/graphs/contributors" target="_blank" rel="noopener">contributors</a>.<br>© 2025 The Turing Project Contributors. <a href="https://github.com/TuringLang/Turing.jl/blob/master/LICENCE" target="_blank" rel="noopener">MIT License</a>.</p>
+                <a href="https://github.com/TuringLang/docs/" target="_blank" rel="noopener" class="footer-source-link"><i class="bi bi-github"></i> Website Source</a>
+              </div>
+            </div>
+          </footer>
+
 execute:
   echo: true
   output: true
   freeze: auto
-include-in-header:
-  - text: |
-      <style>
-        a {
-          text-decoration: none;
-        }
-        a:hover {
-          text-decoration: underline;
-        }
-      </style>
 
 # These variables can be used in any qmd files, e.g. for links:
 # the [Getting Started page]({{< meta get-started >}})

assets/images/brands/Turing_Logo_1000x400px_Black.webp

@@ -0,0 +1,18 @@
+.dropdown-menu {
+  background-color: $navbar-bg;
+  border-color: $btn-border-color;
+  border-radius: $border-radius-sm;
+  scrollbar-width: none;
+}
+
+.dropdown-item {
+  color: $text-muted;
+  padding: 0.5rem 1.5rem;
+  transition: all 0.2s ease;
+
+  &:hover,
+  &:focus {
+    color: $links-hover;
+    background-color: if(lightness($navbar-bg) > 50, darken($navbar-bg, 4%), lighten($navbar-bg, 4%));
+  }
+}