Skip to content

Commit b8b36cd

Browse files
lnhsinghlnhsingh
authored
update styling (#129)
- make content container wider - make nav tabs more obvious [Current preview](https://langchain-5e9cc07a-preview-stylin-1754514239-22e25c1.mintlify.app/)
1 parent ae8accc commit b8b36cd

File tree

2 files changed

+200
-14
lines changed

2 files changed

+200
-14
lines changed

‎src/docs.json

Lines changed: 60 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,10 @@
1717
"light": "/images/brand/favicon.svg",
1818
"dark": "/images/brand/favicon-dark-mode.svg"
1919
},
20-
"navbar": {
21-
"links": [
22-
{
23-
"label": "Forum",
24-
"href": "https://forum.langchain.com/"
25-
},
26-
{
27-
"label": "Trust center",
28-
"href": "https://trust.langchain.com/"
29-
}
30-
]
31-
},
3220
"fonts": {
33-
"family": "Manrope"
21+
"heading": {
22+
"family": "Manrope"
23+
}
3424
},
3525
"styling": {
3626
"eyebrows": "breadcrumbs"
@@ -47,14 +37,70 @@
4737
},
4838
"chatgpt",
4939
"claude"
50-
]
40+
]
5141
},
5242
"integrations": {
5343
"gtm": {
5444
"tagId": "GTM-MBBX68ST"
5545
}
5646
},
47+
"head": [
48+
"<link rel=\"stylesheet\" href=\"/style.css\">"
49+
],
50+
"footer": {
51+
"links": [
52+
{
53+
"header": "Resources",
54+
"items": [
55+
{
56+
"label": "Trust Center",
57+
"href": "https://trust.langchain.com/"
58+
},
59+
{
60+
"label": "Changelog",
61+
"href": "https://changelog.langchain.com/"
62+
},
63+
{
64+
"label": "LangChain Academy",
65+
"href": "https://academy.langchain.com/"
66+
}
67+
]
68+
},
69+
{
70+
"header": "Company",
71+
"items": [
72+
{
73+
"label": "About",
74+
"href": "https://langchain.com/about"
75+
},
76+
{
77+
"label": "Careers",
78+
"href": "https://langchain.com/careers"
79+
},
80+
{
81+
"label": "Blog",
82+
"href": "https://blog.langchain.com/"
83+
}
84+
]
85+
}
86+
],
87+
"socials": {
88+
"github": "https://github.com/langchain-ai",
89+
"x": "https://x.com/LangChainAI",
90+
"linkedin": "https://www.linkedin.com/company/langchain/",
91+
"youtube": "https://www.youtube.com/@LangChain"
92+
}
93+
},
5794
"navigation": {
95+
"global": {
96+
"anchors": [
97+
{
98+
"anchor": "Forum",
99+
"icon": "comments",
100+
"href": "https://forum.langchain.com/"
101+
}
102+
]
103+
},
58104
"dropdowns": [
59105
{
60106
"dropdown": "LangGraph Platform",

‎src/style.css

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/* Minimalistic Navigation Tab Styling - Using Lavender Theme */
2+
3+
/* Target the main navbar container */
4+
#navbar-transition-maple {
5+
background: rgba(229, 231, 235, 0.5) !important; /* gray-200/50 to match site palette */
6+
border-bottom: 1px solid rgba(229, 231, 235, 0.7) !important; /* gray-200/70 to match existing border */
7+
}
8+
9+
/* Target the navigation tabs container */
10+
.nav-tabs {
11+
background: transparent !important;
12+
padding: 4px 12px !important;
13+
border-radius: 8px !important;
14+
}
15+
16+
/* Target individual tab items - clean and minimal */
17+
a.nav-tabs-item {
18+
position: relative !important;
19+
font-weight: 500 !important;
20+
font-size: 14px !important;
21+
border-radius: 6px !important;
22+
margin: 0 2px !important;
23+
padding: 8px 12px !important;
24+
transition: all 0.2s ease !important;
25+
background: transparent !important;
26+
border: none !important;
27+
text-decoration: none !important;
28+
color: #64748b !important;
29+
}
30+
31+
/* Remove the default bottom border from Mintlify */
32+
a.nav-tabs-item .absolute.bottom-0 {
33+
display: none !important;
34+
}
35+
36+
/* Override any inline styles that might be applied by JavaScript - but not for active tabs */
37+
a.nav-tabs-item[style]:not([aria-selected="true"]):not(.active):not([aria-current="page"]):not(.font-semibold):not([class*="font-semibold"]) {
38+
background: transparent !important;
39+
border: none !important;
40+
}
41+
42+
/* Tab hover states - match site's hover grey */
43+
a.nav-tabs-item:hover:not(.font-semibold):not([class*="font-semibold"]) {
44+
background: rgba(229, 231, 235, 0.8) !important; /* gray-200/80 to match site hover */
45+
color: #1f2937 !important; /* gray-800 to match site text */
46+
}
47+
48+
/* Active/selected tab states - connected to content area */
49+
a.nav-tabs-item[aria-selected="true"],
50+
a.nav-tabs-item.active,
51+
a.nav-tabs-item[aria-current="page"],
52+
a.nav-tabs-item[data-active="true"],
53+
a.nav-tabs-item.selected,
54+
/* Target active tabs by their distinctive class pattern */
55+
a.nav-tabs-item.font-semibold,
56+
a.nav-tabs-item[class*="font-semibold"] {
57+
background: white !important;
58+
color: #beb4fd !important;
59+
font-weight: 600 !important;
60+
border-bottom: 1px solid white !important;
61+
margin-bottom: -1px !important;
62+
position: relative !important;
63+
z-index: 1 !important;
64+
}
65+
66+
/* Active tab indicator - removed, using only container highlight */
67+
68+
/* Focus states for accessibility */
69+
a.nav-tabs-item:focus-visible {
70+
outline: 2px solid #beb4fd !important;
71+
outline-offset: 2px !important;
72+
}
73+
74+
/* Wider content area for better code display (100-120 character lines) */
75+
.prose,
76+
.prose-sm,
77+
.prose-lg,
78+
article,
79+
.markdown,
80+
.content,
81+
main > div,
82+
[class*="prose"] {
83+
max-width: 90rem !important; /* ~1440px instead of default ~896px */
84+
}
85+
86+
/* Adjust code blocks specifically for better line length */
87+
pre,
88+
code,
89+
.highlight,
90+
.code-block,
91+
[class*="language-"] {
92+
max-width: none !important;
93+
width: 100% !important;
94+
}
95+
96+
/* Ensure the main container accommodates the wider content */
97+
.container,
98+
.max-w-7xl,
99+
.mx-auto {
100+
max-width: 100rem !important; /* ~1600px */
101+
padding-left: 2rem !important;
102+
padding-right: 2rem !important;
103+
}
104+
105+
/* Dark mode support */
106+
.dark #navbar-transition-maple {
107+
background: rgba(55, 65, 81, 0.5) !important; /* gray-700/50 to match site dark palette */
108+
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; /* white/7% to match existing dark border */
109+
}
110+
111+
.dark .nav-tabs {
112+
background: transparent !important;
113+
}
114+
115+
.dark a.nav-tabs-item {
116+
background: transparent !important;
117+
color: #9ca3af !important;
118+
}
119+
120+
.dark a.nav-tabs-item[style]:not([aria-selected="true"]):not(.active):not([aria-current="page"]):not(.font-semibold):not([class*="font-semibold"]) {
121+
background: transparent !important;
122+
}
123+
124+
.dark a.nav-tabs-item:hover:not(.font-semibold):not([class*="font-semibold"]) {
125+
background: rgba(55, 65, 81, 0.8) !important; /* gray-700/80 to match site dark hover */
126+
color: #f9fafb !important; /* gray-50 for better contrast */
127+
}
128+
129+
.dark a.nav-tabs-item[aria-selected="true"],
130+
.dark a.nav-tabs-item.active,
131+
.dark a.nav-tabs-item[aria-current="page"],
132+
.dark a.nav-tabs-item.font-semibold,
133+
.dark a.nav-tabs-item[class*="font-semibold"] {
134+
background: #1f2937 !important;
135+
color: #beb4fd !important;
136+
border-bottom: 1px solid #1f2937 !important;
137+
margin-bottom: -1px !important;
138+
position: relative !important;
139+
z-index: 1 !important;
140+
}

0 commit comments

Comments
 (0)