From dc33025836775874ca22864c335cb55197880fea Mon Sep 17 00:00:00 2001 From: Vijay Janapa Reddi Date: Fri, 20 Mar 2026 08:59:00 -0400 Subject: [PATCH] fix(labs,slides): put lab preview first, add visible carousel controls Labs: moved the lab preview mockup before stats/CTAs so the experience is the first thing visitors see after the title. Slides: styled carousel arrows as dark circular buttons and added pink dot indicators so users know they can browse slide previews. --- labs/index.qmd | 28 ++++++++--------- slides/index.qmd | 80 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 92 insertions(+), 16 deletions(-) diff --git a/labs/index.qmd b/labs/index.qmd index a8207d4f22..f3e230132f 100644 --- a/labs/index.qmd +++ b/labs/index.qmd @@ -232,20 +232,6 @@ subtitle: "33 interactive labs that run entirely in your browser. No install. No } - -
-
33Labs
-
2Volumes
-
~50Min Each
-
- - -
- Launch Lab 01 → - Start Orientation - Share Feedback -
-
@@ -349,6 +335,20 @@ subtitle: "33 interactive labs that run entirely in your browser. No install. No
+ + +
+ Launch Lab 01 → + Start Orientation + Share Feedback +
+ + +
+
33Labs
+
2Volumes
+
~50Min Each
+
``` Every lab follows the same three-step structure: read a real-world scenario, commit a prediction before seeing any data, then explore the simulator to discover whether your intuition was right. The prediction lock ensures you can't just passively watch --- you have to think first. diff --git a/slides/index.qmd b/slides/index.qmd index f4256bc401..cfa7aa01a3 100644 --- a/slides/index.qmd +++ b/slides/index.qmd @@ -2,8 +2,7 @@ pagetitle: "Lecture Slides" title: "Lecture Slides" subtitle: "35 Beamer decks with speaker notes, active learning, and 266 original SVG diagrams. Free to download, customize, and teach from." -page-layout: article -toc: false +toc: true --- ```{=html} @@ -199,6 +198,43 @@ toc: false font-weight: 600; vertical-align: middle; } + +/* ── Carousel Controls ───────────────────────────────────────────── */ +#slideCarousel { + position: relative; +} +#slideCarousel .carousel-control-prev, +#slideCarousel .carousel-control-next { + width: 40px; height: 40px; + top: 50%; transform: translateY(-50%); + background: rgba(0,0,0,0.5); + border-radius: 50%; + opacity: 0.7; + transition: opacity 0.2s; +} +#slideCarousel .carousel-control-prev { left: 8px; } +#slideCarousel .carousel-control-next { right: 8px; } +#slideCarousel .carousel-control-prev:hover, +#slideCarousel .carousel-control-next:hover { opacity: 1; } +#slideCarousel .carousel-control-prev-icon, +#slideCarousel .carousel-control-next-icon { + width: 16px; height: 16px; +} +#slideCarousel .carousel-indicators { + bottom: -8px; +} +#slideCarousel .carousel-indicators button { + width: 8px; height: 8px; + border-radius: 50%; + background: #94a3b8; + border: none; + opacity: 0.5; + margin: 0 4px; +} +#slideCarousel .carousel-indicators button.active { + background: #BE185D; + opacity: 1; +} @@ -210,6 +246,46 @@ toc: false
1,099Speaker Notes
+ + +

266 original SVG diagrams included across all decks — editable source files, not locked images.

+
Download All (PDF + PPTX)