mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-10-04 12:07:34 +00:00
7394828c7a
# What does this PR do? * Adds a horizontal nav bar for easy access to the API reference and the Llama Stack Github repo <img width="2696" height="520" alt="image" src="https://github.com/user-attachments/assets/82daffe1-c206-4e20-b95b-1e090011eecc" /> ## Test Plan * Built the docs and ran the local HTML server to verify changes
136 lines
2.5 KiB
CSS
136 lines
2.5 KiB
CSS
@import url("theme.css");
|
|
|
|
/* Horizontal Navigation Bar */
|
|
.horizontal-nav {
|
|
background-color: #ffffff;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1050;
|
|
height: 50px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .horizontal-nav {
|
|
background-color: #1a1a1a;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.horizontal-nav .nav-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
height: 100%;
|
|
}
|
|
|
|
.horizontal-nav .nav-brand {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
[data-theme="dark"] .horizontal-nav .nav-brand {
|
|
color: #fff;
|
|
}
|
|
|
|
.horizontal-nav .nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.horizontal-nav .nav-links a {
|
|
color: #666;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.horizontal-nav .nav-links a:hover,
|
|
.horizontal-nav .nav-links a.active {
|
|
color: #333;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.horizontal-nav .nav-links a.active {
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-theme="dark"] .horizontal-nav .nav-links a {
|
|
color: #ccc;
|
|
}
|
|
|
|
[data-theme="dark"] .horizontal-nav .nav-links a:hover,
|
|
[data-theme="dark"] .horizontal-nav .nav-links a.active {
|
|
color: #fff;
|
|
background-color: #333;
|
|
}
|
|
|
|
.horizontal-nav .nav-links .github-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.horizontal-nav .nav-links .github-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Adjust main content to account for fixed nav */
|
|
.wy-nav-side {
|
|
top: 50px;
|
|
height: calc(100vh - 50px);
|
|
}
|
|
|
|
.wy-nav-content-wrap {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.wy-nav-content {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.wy-nav-side {
|
|
/* background: linear-gradient(45deg, #2980B9, #16A085); */
|
|
background: linear-gradient(90deg, #332735, #1b263c);
|
|
}
|
|
|
|
.wy-side-nav-search {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.hide-title h1 {
|
|
display: none;
|
|
}
|
|
|
|
h2, h3, h4 {
|
|
font-weight: normal;
|
|
}
|
|
html[data-theme="dark"] .rst-content div[class^="highlight"] {
|
|
background-color: #0b0b0b;
|
|
}
|
|
pre {
|
|
white-space: pre-wrap !important;
|
|
word-break: break-all;
|
|
}
|
|
|
|
[data-theme="dark"] .mermaid {
|
|
background-color: #f4f4f6 !important;
|
|
border-radius: 6px;
|
|
padding: 0.5em;
|
|
}
|