github-starred/TinyTorch
2
0
Fork 0
mirror of https://github.com/MLSysBook/TinyTorch.git synced 2026-04-28 02:08:04 -05:00
Code Issues 7 Packages Projects Releases Wiki Activity

Move carousel navigation arrows below carousel content

Browse Source 
Changes to CSS:
- Remove absolute positioning from .carousel-nav
- Use flexbox centered layout with 2rem gap between arrows
- Reduce arrow size back to 36px (from 40px)
- Add margin-top: 1.5rem for spacing from carousel text

Changes to HTML:
- Move carousel-nav outside carousel-track
- Navigation now appears below carousel text instead of overlaid on GIF

This fixes overlap issues - arrows are now cleanly positioned
below the carousel text labels, not on top of the GIF terminal window.
This commit is contained in:
Vijay Janapa Reddi
2025-11-16 22:58:12 -05:00
parent 9d9f1213af
commit f07733f8d9
2 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
site/_static/custom.css
View File

@@ -1023,7 +1023,7 @@ html[data-theme="dark"] .ml-timeline-popup-metric-value {
.hero-carousel-compact {
max-width: 1100px;
margin: 2.5rem auto;
margin: 2.5rem auto 3rem auto;
padding: 0 2rem;
}
@@ -1125,31 +1125,26 @@ html[data-theme="dark"] .ml-timeline-popup-metric-value {
}
.carousel-nav {
position: absolute;
top: 40%;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
padding: 0 1rem;
justify-content: center;
gap: 2rem;
margin-top: 1.5rem;
}
.nav-arrow {
background: #e2e8f0;
border: none;
width: 40px;
height: 40px;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.3rem;
font-size: 1.2rem;
color: #475569;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
pointer-events: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

18
site/intro.md
View File

@@ -61,17 +61,17 @@ Build a complete machine learning (ML) framework from tensors to systems—under
<p>tito milestone run 03 → 1986 MLP uses YOUR code</p>
</div>
</div>
</div>
<div class="carousel-nav">
<button class="nav-arrow prev" onclick="moveCarousel(-1)">←</button>
<div class="carousel-indicators">
<span class="indicator active" onclick="currentSlide(0)"></span>
<span class="indicator" onclick="currentSlide(1)"></span>
<span class="indicator" onclick="currentSlide(2)"></span>
<span class="indicator" onclick="currentSlide(3)"></span>
</div>
<button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
<div class="carousel-nav">
<button class="nav-arrow prev" onclick="moveCarousel(-1)">←</button>
<div class="carousel-indicators">
<span class="indicator active" onclick="currentSlide(0)"></span>
<span class="indicator" onclick="currentSlide(1)"></span>
<span class="indicator" onclick="currentSlide(2)"></span>
<span class="indicator" onclick="currentSlide(3)"></span>
</div>
<button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
</div>
</div>
```