Skip to content

Commit 11f6e17

Browse files
Alek99carlosabadia
Alek99
and
carlosabadia
authored
Align docs with the Reflex marketing design (#7549)
* Align documentation with Reflex marketing design * Address docs review feedback and keep wide previews on screen Review fixes: - Reuse section_heading for the Enterprise, Cloud, Self-Hosting, and Other overview sections instead of repeating its heading markup. The sections now take their heading spacing from the helper's bottom margin rather than a flex gap; the rendered layout is unchanged. - Add Returns sections to the docstrings of the docs announcement banner, the docs navbar helpers (github_button, logo, navigation_menu, docs_navbar), and the overview call to action. Narrow-screen fixes carried over from the in-progress mobile layout work: - Start wide examples at the left edge of their scroll container: demo and generated API previews use safe centering, and the API preview scrolls horizontally instead of overflowing the reading column. - Let long headings such as API identifiers wrap inside the reading column instead of widening the page. - Cover the API preview with a unit test and both behaviors at 320px and 390px with preview browser tests. * Fix docs pager width, footer wrapping, and sidebar hover - Previous/next links share a two-column grid instead of flex items beside a spacer, which left each link a third of the column. A lone next link stays in the right column, and the pager is labelled as adjacent-page navigation. - The docs footer's theme and social controls wrap on narrow screens, so every social link stays reachable. - Sidebar links that are not the current page darken on hover again, in the sidebar and the mobile drawer. Their grey rule outranked the hover rule; its :not() conditions now sit in :where() so they add no specificity. The pager test builds its page from placeholder content so it does not re-run demo code that earlier tests already executed, and the footer test uses the file's existing typing pattern so it passes pyright. * Use Fontsource brand fonts and optimized AVIF artwork in docs * Consolidate docs font license notices * Remove docs font license files --------- Co-authored-by: carlosabadia <cutillascarlos@gmail.com> Co-authored-by: Carlos <36110765+carlosabadia@users.noreply.github.com>
1 parent 2fc4a9c commit 11f6e17

53 files changed

Lines changed: 1689 additions & 433 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/app/assets/docs-header-theme.css‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
/* Docs keep a 64px fixed header and a 40px announcement contribution.
2+
The banner artwork and glass treatment match the marketing site. */
3+
.docs-nav-frame {
4+
left: 0;
5+
--docs-control-shadow: 0 0 0 .5px rgb(0 0 0 / 12.5%), 0 1px 1px rgb(0 0 0 / 4%), 0 2px 4px rgb(0 0 0 / 4%);
6+
}
7+
.docs-nav-frame > .docs-navbar-header {
8+
height: 64px;
9+
padding-inline: 32px;
10+
background: var(--background);
11+
border-bottom: 1px solid var(--border-subtle);
12+
border-radius: 0;
13+
box-shadow: none;
14+
transition: border-radius 200ms ease, background-color 200ms ease;
15+
}
16+
.docs-nav-frame:has([data-announcement]) > .docs-navbar-header {
17+
margin-top: -24px;
18+
border-radius: 24px 24px 0 0;
19+
}
20+
.docs-nav-frame > .docs-navbar-header > .docs-navbar-inner {
21+
max-width: 1536px;
22+
}
23+
.docs-navbar-wordmark { width: 102px; height: auto; }
24+
.docs-navbar-docs-wordmark { height: 16px; width: auto; }
25+
.docs-navbar-brand { gap: 12px; }
26+
.docs-navbar-mobile-panel {
27+
padding: 12px 24px 20px;
28+
border-bottom: 1px solid var(--border);
29+
border-radius: 0 0 24px 24px;
30+
box-shadow: 0 12px 24px -16px rgb(0 0 0 / 20%);
31+
}
32+
.docs-navbar-mobile-link { padding-inline: 8px; }
33+
.docs-navbar-mobile-link svg { color: var(--muted-foreground); }
34+
35+
/* The in-page mobile drawer shares the desktop sidebar's typography. */
36+
.docs-sidebar-drawer { font-family: var(--font-sans); color: var(--foreground); }
37+
.docs-sidebar-drawer p,
38+
.docs-sidebar-drawer h3,
39+
.docs-sidebar-drawer summary { font-weight: 400; }
40+
.docs-sidebar-drawer h2 {
41+
font-family: var(--font-sans);
42+
font-size: 12px;
43+
font-weight: 500;
44+
letter-spacing: .025em;
45+
text-transform: none;
46+
}
47+
.docs-sidebar-drawer .docs-sidebar-drawer-title {
48+
font-size: 14px;
49+
font-weight: 400;
50+
line-height: 24px;
51+
letter-spacing: 0;
52+
}
53+
.docs-sidebar-drawer #sidebar-container { min-height: 0; }
54+
.docs-sidebar-drawer #sidebar-container > div { padding-left: 16px; padding-right: 20px; }
55+
.docs-sidebar-drawer a:where(:not([aria-current='page'], [aria-current='true'])) p {
56+
color: var(--muted-foreground);
57+
}
58+
.docs-sidebar-drawer a:hover p { color: var(--foreground); }
59+
.docs-sidebar-drawer a[aria-current='page'] p { font-weight: 500; }
60+
.docs-sidebar-drawer a:focus-visible,
61+
.docs-sidebar-drawer summary:focus-visible {
62+
outline: 2px solid var(--ring);
63+
outline-offset: 3px;
64+
}
65+
@layer utilities {
66+
html .docs-sidebar-drawer {
67+
top: var(--docs-header-height) !important;
68+
height: calc(100dvh - var(--docs-header-height)) !important;
69+
}
70+
}
71+
72+
.docs-nav-frame .docs-announcement {
73+
position: relative;
74+
isolation: isolate;
75+
height: 64px;
76+
padding-bottom: 24px;
77+
width: 100%;
78+
overflow: hidden;
79+
background: #e8e7f1;
80+
color: #000;
81+
border: 0;
82+
font-family: Inter, Arial, sans-serif;
83+
}
84+
.docs-announcement-glass {
85+
display: flex;
86+
position: absolute;
87+
z-index: -2;
88+
inset: -48px -12%;
89+
pointer-events: none;
90+
filter: blur(6px);
91+
will-change: transform;
92+
animation: docs-announcement-glass-drift 26s ease-in-out infinite alternate;
93+
}
94+
.docs-announcement-glass > span {
95+
flex: 1;
96+
background: url('/docs/header/opal.avif') center 22% / cover no-repeat;
97+
}
98+
.docs-announcement-glass > span:nth-child(2) { background-position: center 62%; transform: scaleX(-1); }
99+
.docs-announcement-glass > span:nth-child(3) { background-position: center 38%; }
100+
.docs-announcement-glass > span:nth-child(4) { background-position: center 78%; transform: scaleX(-1); }
101+
.docs-announcement-glass > span:nth-child(5) { background-position: center 50%; }
102+
.docs-announcement::after {
103+
content: '';
104+
position: absolute;
105+
inset: 0;
106+
z-index: -1;
107+
pointer-events: none;
108+
background: radial-gradient(ellipse 34% 90% at 50% 36%, rgb(255 255 255 / 30%), transparent),
109+
linear-gradient(180deg, rgb(255 255 255 / 28%), transparent 45%);
110+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%);
111+
}
112+
.docs-announcement-link {
113+
display: block;
114+
height: 100%;
115+
width: 100%;
116+
color: #000;
117+
background: transparent;
118+
}
119+
.docs-announcement-content {
120+
display: flex;
121+
height: 100%;
122+
width: 100%;
123+
margin-inline: auto;
124+
padding-inline: 48px;
125+
align-items: center;
126+
justify-content: center;
127+
gap: 10px;
128+
}
129+
.docs-announcement-badge {
130+
display: inline-flex;
131+
flex-shrink: 0;
132+
align-items: center;
133+
height: 20px;
134+
padding-inline: 8px;
135+
border-radius: 999px;
136+
background: #000;
137+
color: #fff;
138+
font: 400 12px/18px Inter, Arial, sans-serif;
139+
}
140+
.docs-announcement-message {
141+
color: #000;
142+
font: 400 14px/20px Inter, Arial, sans-serif;
143+
white-space: nowrap;
144+
}
145+
.docs-announcement-cta {
146+
flex-shrink: 0;
147+
padding: 5px 12px;
148+
border-radius: 999px;
149+
background: #fff;
150+
color: #000;
151+
font: 400 13px/20px Inter, Arial, sans-serif;
152+
box-shadow: var(--docs-control-shadow);
153+
white-space: nowrap;
154+
}
155+
.docs-announcement-dismiss {
156+
position: absolute;
157+
top: 20px;
158+
right: 16px;
159+
transform: translateY(-50%);
160+
display: inline-flex;
161+
align-items: center;
162+
justify-content: center;
163+
width: 28px;
164+
height: 28px;
165+
border: 0;
166+
border-radius: 999px;
167+
background: transparent;
168+
color: #000;
169+
cursor: pointer;
170+
}
171+
.docs-announcement-dismiss:hover { background: rgb(255 255 255 / 35%); }
172+
.docs-announcement-link:focus-visible,
173+
.docs-announcement-dismiss:focus-visible { outline: 2px solid #000; }
174+
.docs-announcement-link:focus-visible { outline-offset: -4px; }
175+
.docs-announcement-dismiss:focus-visible { outline-offset: 2px; }
176+
@keyframes docs-announcement-glass-drift {
177+
from { transform: translate3d(-5%, 0, 0) scale(1.04); }
178+
to { transform: translate3d(5%, 0, 0) scale(1); }
179+
}
180+
@media (max-width: 1279px) {
181+
.docs-nav-frame:has(.docs-navbar-menu[open]) > .docs-navbar-header {
182+
border-radius: 0;
183+
}
184+
}
185+
@media (max-width: 640px) {
186+
.docs-announcement-cta { display: none; }
187+
}
188+
@media (max-width: 639px) {
189+
.docs-nav-frame > .docs-navbar-header { padding-inline: 16px; }
190+
.docs-navbar-inner { gap: 16px; }
191+
.docs-navbar-brand { gap: 10px; }
192+
.docs-navbar-wordmark { width: 92px; }
193+
.docs-navbar-mobile-panel { padding-inline: 16px; }
194+
.docs-announcement-content { padding-inline: 40px; gap: 8px; }
195+
.docs-announcement-dismiss { right: 8px; }
196+
}
197+
@media (max-width: 379px) {
198+
.docs-announcement-message { font-size: 13px; }
199+
}
200+
@media (prefers-reduced-motion: reduce) {
201+
.docs-announcement-glass { animation: none; will-change: auto; }
202+
.docs-nav-frame > .docs-navbar-header,
203+
.docs-navbar-mobile-link { transition: none; }
204+
}

0 commit comments

Comments
 (0)