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

Fix carousel navigation arrow overlap with heading text

Browse Source 
Changes to CSS:
- Position carousel-nav absolutely at top:40% of carousel-track
- Move arrows to sides (space-between) instead of center bottom
- Increase arrow size to 40px for better visibility
- Add box-shadow to arrows for depth
- Use pointer-events:none on nav container, auto on arrows

Changes to HTML:
- Move carousel-nav inside carousel-track for proper absolute positioning

This fixes the overlap where left/right navigation arrows were appearing
on top of the carousel heading text ("Build in Jupyter" etc).
Arrows now appear on the left/right sides of the GIF at the vertical center.
This commit is contained in:
Vijay Janapa Reddi
2025-11-16 22:53:15 -05:00
parent 7259d98582
commit 9d9f1213af
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
site/_static/custom.css
View File

@@ -1125,26 +1125,32 @@ 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: center;
gap: 1.5rem;
margin-top: 1.5rem;
justify-content: space-between;
pointer-events: none;
padding: 0 1rem;
}
.nav-arrow {
background: #e2e8f0;
border: none;
width: 36px;
height: 36px;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
font-size: 1.3rem;
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);
}
.nav-arrow:hover {

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 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>
<button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
</div>
</div>
```