New landing page design

_includes/header.qmd

@@ -0,0 +1,39 @@
+```{=html}
+<div class="line-graph">
+  <div class="upper-content">
+    <div class="responsive-heading">Turing.jl</div>
+  </div>
+  <div>
+    <svg viewBox="0 0 2300 498" xmlns="http://www.w3.org/2000/svg">
+      <path class="line line1"
+        d="M0 487 C1155.53 487 1320.502 502.995 1391.761 461.5C1453.584 425.5 1467.657 399 1509.375 344.5C1551.093 290 1586.276 213 1645.586 213C1704.895 213 1776.77 350.5 1806.425 389C1875.39 478.535 1871.263 486.5 2300 487"/>
+      <path class="line line2"
+        d="M0 486.5 C223.96 486.5 883.72 484.016 977.94 484.016C1163.36 484.016 1183.85 461.682 1249.81 287.031C1283.73 197.222 1311.724 96 1349.948 96C1388.171 96 1418.291 219.36 1447.552 292.5C1536.356 514.469 1548.077 486 1734.55 486C1921.023 486 2087.346 485.5 2300 485.5"/>
+      <path class="line line3"
+        d="M0 487 C108.32 487 672.77 486.499 783.26 486.499C893.75 486.499 943.04 486.499 1051.36 486.499C1135.3 486.499 1218.74 489.327 1241.95 469.982C1293.57 426.95 1311.015 327.407 1328.845 262.111C1356 162.661 1377.725 8 1409.818 8C1441.911 8 1472.715 193.386 1490.888 262.111C1509.06 330.837 1526.835 423.687 1568.803 460.973C1600.671 489.286 1631.508 486.499 1722.851 486.499C1816.509 486.499 1890.44 486.499 1991.446 486.499C2092.453 486.499 2198.993 486.499 2300 486.499"/>
+    </svg>
+  </div>
+</div>
+```
+
+```{=html}
+<span class="display-6 d-block text-center py-5 display-md-5 display-lg-4">
+    Bayesian inference with probabilistic programming
+</span>
+<div class="d-flex flex-column align-items-center gap-0 pb-5">
+  <div class="d-flex flex-row flex-wrap panel-wrapper gap-2">
+    <a href="https://turinglang.org/docs/tutorials/docs-00-getting-started/" class="button--fill btn">
+      Tutorials
+    </a>
+    <a href="https://julialang.slack.com/archives/CCYDC34A0" class="button btn">
+      Slack
+    </a>
+    <a href="https://discourse.julialang.org/c/domain/probprog/48" class="button btn">
+      Discourse
+    </a>
+    <a href="https://github.com/TuringLang" class="button btn">
+      GitHub
+    </a>
+  </div>
+</div>
+```

_includes/news.qmd

@@ -0,0 +1,195 @@
+---
+listing:
+- id: news
+  contents:
+    - "news/posts/*/index.qmd"
+  sort: date desc
+  type: grid
+  grid-columns: 3
+  categories: false
+  sort-ui: false
+  filter-ui: false
+  fields: [title, description, date, reading-time, author]
+  image-height: "200"
+---
+
+### News
+
+::: {#news}
+
+:::
+
+[See all news →](news/)
+
+
+```{=html}
+<style>
+  /* hide default Quarto grid once JS enhancement is active */
+  #listing-news.enhanced-carousel .list.grid.quarto-listing-cols-3 {
+    display: none !important;
+  }
+
+  /* carousel wrapper */
+  #carousel-container {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+  /* focus outline for accessibility */
+  #carousel-container:focus {
+    outline: 2px solid #007acc;
+    outline-offset: 4px;
+  }
+
+  /* sliding track */
+  #carousel-track {
+    display: flex;
+    align-items: flex-start;
+    transition: transform 0.5s ease;
+    will-change: transform;
+  }
+
+  /* each slide sizing & height animation */
+  #carousel-track > .g-col-1 {
+    flex: 0 0 33.3333%;
+    padding: 1rem;
+    box-sizing: border-box;
+    display: block !important;
+    transition: height 0.3s ease;
+  }
+
+  /* single‑column on mobile */
+  @media (max-width: 768px) {
+    #carousel-track > .g-col-1 {
+      flex: 0 0 100%;
+    }
+  }
+
+  /* remove default card styling */
+  #carousel-track > .g-col-1 .card {
+    background: none;
+    box-shadow: none;
+    border: none;
+  }
+
+  /* trim default listing padding */
+  .quarto-listing {
+    padding-bottom: 0 !important;
+  }
+</style>
+
+<script>
+  // initialize carousel after DOM is ready
+  document.addEventListener('DOMContentLoaded', function () {
+    const listing = document.getElementById('listing-news');
+    if (!listing) return;
+    listing.classList.add('enhanced-carousel'); // flag JS enhancement
+
+    const items = Array.from(
+      listing.querySelectorAll('.list.grid.quarto-listing-cols-3 > .g-col-1')
+    ); // collect slides
+    const N = items.length; // total number of slides
+    if (!N) return;
+
+    // create carousel wrapper with accessibility roles
+    const carouselContainer = document.createElement('div');
+    carouselContainer.id = 'carousel-container';
+    carouselContainer.setAttribute('role', 'region');
+    carouselContainer.setAttribute('aria-live', 'polite');
+    carouselContainer.setAttribute('tabindex', '0');
+
+    // create track element
+    const carouselTrack = document.createElement('div');
+    carouselTrack.id = 'carousel-track';
+
+    items.forEach(i => carouselTrack.appendChild(i)); // move slides into track
+    carouselContainer.appendChild(carouselTrack);
+    listing.parentNode.insertBefore(carouselContainer, listing.nextSibling); // insert carousel
+
+    // determine items per view (responsive)
+    function getItemsPerView() { return window.innerWidth < 768 ? 1 : 3; }
+    let itemsPerView = getItemsPerView();
+    if (N <= itemsPerView) { // handle few slides
+      const h = Math.max(...items.map(i => i.offsetHeight));
+      carouselContainer.style.height = h + 'px';
+      return;
+    }
+
+    let currentIndex = 0;
+    let maxIndex = N - itemsPerView;
+    let shiftPercent = 100 / itemsPerView;
+    const displayDuration = 2000; // slide interval
+
+    // normalize visible slide heights
+    function recalcHeight() {
+      items.forEach(i => i.style.height = 'auto');
+      const vis = items.slice(currentIndex, currentIndex + itemsPerView);
+      const h = Math.max(...vis.map(i => i.offsetHeight));
+      vis.forEach(i => i.style.height = h + 'px');
+      carouselContainer.style.height = h + 'px';
+    }
+
+    // move track and adjust heights
+    function updateSlide(idx) {
+      carouselTrack.style.transform = `translateX(-${idx * shiftPercent}%)`;
+      recalcHeight();
+    }
+
+    // slide controls
+    function nextSlide() {
+      currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
+      updateSlide(currentIndex);
+    }
+    function prevSlide() {
+      currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
+      updateSlide(currentIndex);
+    }
+
+    // initial render
+    recalcHeight();
+    updateSlide(0);
+
+    // auto-play with pause on hover/focus/visibility
+    let intervalId = setInterval(nextSlide, displayDuration);
+    ['mouseenter','focusin'].forEach(e =>
+      carouselContainer.addEventListener(e, () => clearInterval(intervalId))
+    );
+    ['mouseleave','focusout'].forEach(e =>
+      carouselContainer.addEventListener(e, () => {
+        clearInterval(intervalId);
+        intervalId = setInterval(nextSlide, displayDuration);
+      })
+    );
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) clearInterval(intervalId);
+      else {
+        clearInterval(intervalId);
+        intervalId = setInterval(nextSlide, displayDuration);
+      }
+    });
+
+    // keyboard navigation
+    carouselContainer.addEventListener('keydown', e => {
+      if (e.key === 'ArrowRight') { nextSlide(); e.preventDefault(); }
+      if (e.key === 'ArrowLeft')  { prevSlide(); e.preventDefault(); }
+    });
+
+    // debounce on window resize
+    let resizeTimeout = null;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const v = getItemsPerView();
+        if (v !== itemsPerView) {
+          itemsPerView = v;
+          maxIndex = N - itemsPerView;
+          shiftPercent = 100 / itemsPerView;
+          currentIndex = Math.min(currentIndex, maxIndex);
+        }
+        recalcHeight();
+        updateSlide(currentIndex);
+      }, 150);
+    });
+  });
+</script>
+```

_quarto.yml

@@ -1,7 +1,7 @@
 project:
   type: website
   preview:
-    # Change port if it's busy in your system or just remove this line so that It will automatically use any free port
+    # Change port if it's busy in your system or just comment below line so that It will automatically use any free port
     port: 4200
     browser: true
 
@@ -16,9 +16,7 @@ website:
     type: overlay
   navbar:
     logo: "assets/images/turing-logo.svg"
-    logo-href: https://turinglang.org/
-    background: "#073c44"
-    foreground: "#ffffff"
+    # logo-href: https://turinglang.org/
     left:
       - text: Get Started
         href: https://turinglang.org/docs/getting-started/
@@ -39,18 +37,10 @@ website:
         href: https://github.com/TuringLang
 
   page-footer:
-    background: "#073c44"
+    #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/Turing.jl/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
+      Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and maintained by the <a href="/team" target="_blank">core team of developers</a>. <br>
+      © 2024 under the terms of the <a href="https://github.com/TuringLang/Turing.jl/blob/master/LICENCE" target="_blank">MIT License</a>.
 
   back-to-top-navigation: true
   repo-url: https://github.com/TuringLang/turinglang.github.io/
@@ -61,9 +51,9 @@ website:
 format:
   html:
     theme:
-      light: cosmo
-      dark: [cosmo, theming/theme-dark.scss]
-    css: theming/styles.css
+      light: [cosmo, theming/light.scss]
+      dark: [cosmo, theming/dark.scss]
+    highlight-style: github
     toc: true
     smooth-scroll: true
     code-overflow: wrap