Updated logo and Added New Logo in Header

Author: shravanngoswamii

_includes/header.qmd

@@ -1,11 +1,12 @@
 ```{=html}
 <div class="hero-section">
   <div class="hero-content text-center">
-    <h1 class="hero-title">Turing.jl</h1>
+    <img src="./assets/logo/turing-logo-light.svg" alt="Turing Logo" class="hero-logo hero-logo-light">
+    <img src="./assets/logo/turing-logo-dark.svg" alt="Turing Logo" class="hero-logo hero-logo-dark">
     <p class="hero-subtitle">A powerful and flexible probabilistic programming language for Julia.</p>
     <div class="hero-cta-buttons">
-      <a href="[https://turinglang.org/docs/getting-started/](https://turinglang.org/docs/getting-started/)" class="button btn-lg button--fill">Get Started</a>
-      <a href="[https://github.com/TuringLang/Turing.jl](https://github.com/TuringLang/Turing.jl)" class="button btn-lg">View on GitHub</a>
+      <a href="https://turinglang.org/docs/getting-started/" class="button btn-lg button--fill">Get Started</a>
+      <a href="https://github.com/TuringLang/Turing.jl" class="button btn-lg">View on GitHub</a>
     </div>
   </div>
 </div>

_quarto.yml

@@ -15,7 +15,7 @@ website:
     location: navbar
     type: overlay
   navbar:
-    logo: "assets/images/turing-logo.svg"
+    logo: "assets/logo/turing-logo.svg"
     # logo-href: https://turinglang.org/ -- Keep this commented so clicking on logo in dev mode doesn't redirect to the site
     left:
       - text: Get Started

assets/logo/turing-logo-dark.svg

@@ -9,11 +9,20 @@
   margin: 0 auto 3rem auto;
 }
 
-.hero-title {
-  font-size: clamp(3rem, 10vw, 5.5rem);
-  font-weight: 700;
-  color: #2c3e50;
-  margin-bottom: 1rem;
+.hero-logo {
+  max-width: 55%;
+  height: auto;
+  margin-bottom: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-logo-light {
+  display: block;
+}
+
+.hero-logo-dark {
+  display: none;
 }
 
 .hero-subtitle {

assets/logo/turing-logo-light.svg

@@ -64,6 +64,14 @@ h1, h2, h3, h4, h5, h6 {
   background: none !important;
 }
 
+.hero-logo-light {
+  display: none !important;
+}
+
+.hero-logo-dark {
+  display: block !important;
+}
+
 .hero-subtitle {
   color: #bdc3c7 !important;
 }