Updated News section to have fixed height & updated landing page codes

Author: shravanngoswamii

_includes/news.qmd

@@ -3,7 +3,7 @@ listing:
 - id: news
   contents:
     - "news/posts/*/index.qmd"
-  max-items: 10
+  # max-items: 10
   sort: date desc
   type: grid
   grid-columns: 3
@@ -17,12 +17,10 @@ listing:
 ### News
 
 ::: {#news}
-
 :::
 
 [See all news →](news/)
 
-
 ```{=html}
 <style>
   /* hide default Quarto grid once JS enhancement is active */
@@ -42,48 +40,98 @@ listing:
 
   #carousel-track {
     display: flex;
-    align-items: flex-start;
+    align-items: stretch; 
     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) */
+    flex: 0 0 33.3333%;
     padding: 1rem;
     box-sizing: border-box;
     display: block !important;
-    transition: height 0.3s ease;
+    min-width: 0;
   }
 
   /* Tablet/iPad size: 2 columns */
   @media (max-width: 1024px) and (min-width: 769px) {
     #carousel-track > .g-col-1 {
-      flex: 0 0 50%; /* 2 columns */
+      flex: 0 0 50%;
     }
   }
 
-  /* Single-column on smaller mobile */
   @media (max-width: 768px) {
     #carousel-track > .g-col-1 {
-      flex: 0 0 100%; /* 1 column */
+      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;
   }
+
+  #carousel-track > .g-col-1 .card.news-item {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #carousel-track > .g-col-1 .card-body {
+    flex-grow: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #carousel-track > .g-col-1 .card-img-top {
+    max-height: 150px;
+    object-fit: cover;
+  }
+  
+  #carousel-track .listing-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+    
+  #carousel-track .listing-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  #carousel-track .card-attribution {
+    margin-top: auto;
+    padding-top: 1rem;
+    display: flex;
+    align-items: flex-end;
+    gap: 1em;
+  }
+
+  #carousel-track .listing-author {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  #carousel-track .listing-date {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
 </style>
 
 <script>
+  // The script block remains the same. No changes are needed here.
   document.addEventListener('DOMContentLoaded', function () {
     const listing = document.getElementById('listing-news');
     if (!listing) return;
@@ -93,39 +141,34 @@ listing:
     );
     const N_original = originalItems.length;
 
-  originalItems.forEach(item => {
-    const card = item.querySelector('.card');
-    if (card) {
-      card.classList.add('news-item');
-    }
-  });
+    originalItems.forEach(item => {
+      const card = item.querySelector('.card');
+      if (card) {
+        card.classList.add('news-item');
+      }
+    });
 
-    // Helper to get items per view (cached on first call, recalculated on resize)
     function getItemsPerView() {
       const width = window.innerWidth;
-      if (width <= 768) { // Mobile
+      if (width <= 768) {
         return 1;
-      } else if (width > 768 && width <= 1024) { // Tablet/iPad
+      } else if (width > 768 && width <= 1024) {
         return 2;
-      } else { // Desktop
+      } else {
         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';
@@ -138,13 +181,12 @@ listing:
       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
+    let itemsPerView = getItemsPerView();
     const numClones = Math.max(itemsPerView, 1);
 
     const clonedItems = [];
@@ -162,22 +204,18 @@ listing:
 
     const allItems = [...originalItems, ...clonedItems];
 
+    allItems.forEach(item => {
+      const titleElement = item.querySelector('.listing-title');
+      if (titleElement) {
+        titleElement.setAttribute('title', titleElement.textContent.trim());
+      }
+    });
+
     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';
@@ -186,7 +224,6 @@ listing:
       }
 
       carouselTrack.style.transform = `translateX(-${idx * shiftPercent}%)`;
-      recalcHeight();
 
       allItems.forEach((item, i) => {
           if (i >= currentIndex && i < currentIndex + itemsPerView) {
@@ -209,10 +246,8 @@ listing:
       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))
@@ -247,7 +282,6 @@ listing:
         itemsPerView = newItemsPerView;
         shiftPercent = 100 / itemsPerView;
         currentIndex = Math.min(currentIndex, N_original - 1);
-        recalcHeight();
         updateSlide(currentIndex, true);
       }, 150);
     });

index.qmd

@@ -39,8 +39,8 @@ Some text about how easy it is to [get going](https://turinglang.org/docs/tutori
 
 :::
 
-::: {.example-code}
-```julia
+::: {.example-code style="overflow-x: scroll;"}
+```{.julia .code-overflow-scroll}
 @model function coinflip(; N::Int)
     # Prior belief about the probability of heads
     p ~ Beta(1, 1)
@@ -65,8 +65,8 @@ Some text about how easy it is to interface with external packages like Abstract
 
 :::
 
-::: {.example-code}
-```julia
+::: {.example-code style="overflow-x: scroll;"}
+```{.julia .code-overflow-scroll}
 @model function putting_model(d, n; jitter=1e-4)
     v ~ Gamma(2, 1)
     l ~ Gamma(4, 1)

theming/styles.css

@@ -145,7 +145,9 @@ svg {
   .panel-wrapper {
     justify-content: center;
   }
+}
 
+@media screen and (max-width: 768px) {
   .example-code,
   .example-text {
     flex: 0 1 100%;

theming/theme-dark.scss

@@ -222,6 +222,10 @@ code {
     color: white !important;
 }
 
+.aa-List li.aa-Item[aria-selected="true"] * {
+    background-color: $lp-teal !important;
+}
+
 .tooltip-inner {
     color: white;
 }