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,249 @@
+---
+listing:
+- id: news
+  contents:
+    - "news/posts/*/index.qmd"
+  max-items: 10
+  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-container {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+  #carousel-container:focus {
+    outline: 2px solid #007acc;
+    outline-offset: 4px;
+  }
+
+  #carousel-track {
+    display: flex;
+    align-items: flex-start;
+    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
+    will-change: transform;
+  }
+
+  /* each slide sizing & height animation */
+  #carousel-track > .g-col-1 {
+    flex: 0 0 33.3333%; /* Default for desktop (3 columns) */
+    padding: 1rem;
+    box-sizing: border-box;
+    display: block !important;
+    transition: height 0.3s ease;
+  }
+
+  /* Tablet/iPad size: 2 columns */
+  @media (max-width: 1024px) and (min-width: 769px) {
+    #carousel-track > .g-col-1 {
+      flex: 0 0 50%; /* 2 columns */
+    }
+  }
+
+  /* Single-column on smaller mobile */
+  @media (max-width: 768px) {
+    #carousel-track > .g-col-1 {
+      flex: 0 0 100%; /* 1 column */
+    }
+  }
+
+  /* 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>
+  document.addEventListener('DOMContentLoaded', function () {
+    const listing = document.getElementById('listing-news');
+    if (!listing) return;
+
+    const originalItems = Array.from(
+      listing.querySelectorAll('.list.grid.quarto-listing-cols-3 > .g-col-1')
+    );
+    const N_original = originalItems.length;
+
+    // Helper to get items per view (cached on first call, recalculated on resize)
+    function getItemsPerView() {
+      const width = window.innerWidth;
+      if (width <= 768) { // Mobile
+        return 1;
+      } else if (width > 768 && width <= 1024) { // Tablet/iPad
+        return 2;
+      } else { // Desktop
+        return 3;
+      }
+    }
+
+    // If there are too few items to scroll, just display them statically.
+    // This check now uses the initial itemsPerView.
+    if (N_original <= getItemsPerView()) {
+      listing.classList.remove('enhanced-carousel');
+      return;
+    }
+
+    // Add enhanced-carousel class only if the carousel is actually being initialized
+    listing.classList.add('enhanced-carousel');
+
+    let carouselContainer = document.getElementById('carousel-container');
+    let carouselTrack = document.getElementById('carousel-track');
+
+    // Initialize carousel elements if they don't exist (first load or after a full re-init on resize)
+    if (!carouselContainer) {
+      carouselContainer = document.createElement('div');
+      carouselContainer.id = 'carousel-container';
+      carouselContainer.setAttribute('role', 'region');
+      carouselContainer.setAttribute('aria-live', 'polite');
+      carouselContainer.setAttribute('tabindex', '0');
+
+      carouselTrack = document.createElement('div');
+      carouselTrack.id = 'carousel-track';
+      carouselContainer.appendChild(carouselTrack);
+      listing.parentNode.insertBefore(carouselContainer, listing.nextSibling);
+    } else {
+        // Clear existing children from track if re-initializing on resize
+        while(carouselTrack.firstChild) {
+            carouselTrack.removeChild(carouselTrack.firstChild);
+        }
+    }
+
+    let itemsPerView = getItemsPerView(); // Initial calculation
+    const numClones = Math.max(itemsPerView, 1);
+
+    const clonedItems = [];
+    for (let i = 0; i < numClones; i++) {
+        const clone = originalItems[i % N_original].cloneNode(true);
+        clone.setAttribute('aria-hidden', 'true');
+        clonedItems.push(clone);
+    }
+
+    originalItems.forEach(i => {
+        carouselTrack.appendChild(i);
+        i.setAttribute('aria-hidden', 'false');
+    });
+    clonedItems.forEach(i => carouselTrack.appendChild(i));
+
+    const allItems = [...originalItems, ...clonedItems];
+
+    let currentIndex = 0;
+    let shiftPercent = 100 / itemsPerView;
+    const displayDuration = 2000;
+    const transitionDuration = 700;
+
+    function recalcHeight() {
+      for (let i = currentIndex; i < Math.min(currentIndex + itemsPerView, allItems.length); i++) {
+          allItems[i].style.height = 'auto';
+      }
+
+      const vis = allItems.slice(currentIndex, currentIndex + itemsPerView);
+      const h = vis.length > 0 ? Math.max(...vis.map(i => i.offsetHeight)) : 0;
+      vis.forEach(i => i.style.height = h + 'px');
+      carouselContainer.style.height = h + 'px';
+    }
+
+    function updateSlide(idx, instant = false) {
+      if (instant) {
+        carouselTrack.style.transition = 'none';
+      } else {
+        carouselTrack.style.transition = `transform ${transitionDuration / 1000}s cubic-bezier(0.25, 1, 0.5, 1)`;
+      }
+
+      carouselTrack.style.transform = `translateX(-${idx * shiftPercent}%)`;
+      recalcHeight();
+
+      allItems.forEach((item, i) => {
+          if (i >= currentIndex && i < currentIndex + itemsPerView) {
+              item.setAttribute('aria-hidden', 'false');
+          } else {
+              item.setAttribute('aria-hidden', 'true');
+          }
+      });
+
+      if (!instant && idx >= N_original) {
+        setTimeout(() => {
+          currentIndex = 0;
+          updateSlide(currentIndex, true);
+        }, transitionDuration);
+      }
+    }
+
+    function nextSlide() {
+      currentIndex++;
+      updateSlide(currentIndex);
+    }
+
+    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);
+      }
+    });
+
+    let resizeTimeout = null;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const newItemsPerView = getItemsPerView();
+
+        if (newItemsPerView !== itemsPerView || N_original <= newItemsPerView) {
+            clearInterval(intervalId);
+            carouselContainer.remove();
+            document.dispatchEvent(new Event('DOMContentLoaded'));
+            return;
+        }
+
+        itemsPerView = newItemsPerView;
+        shiftPercent = 100 / itemsPerView;
+        currentIndex = Math.min(currentIndex, N_original - 1);
+        recalcHeight();
+        updateSlide(currentIndex, true);
+      }, 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