Skip to content

feat(home): widen the stack diagram rails, drop the hero star button #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pd-builds wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(home): widen the stack diagram rails, drop the hero star button #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions docs/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ export default function HomePage() {
align="left"
subtitle="Open Standard for Generative UI"
showPlaygroundButton={false}
githubRepoUrl="https://github.com/thesysdev/openui"
githubButtonLabel="Star us on GitHub"
showTagline={false}
/>
<LogoStrip />
Expand Down
22 changes: 11 additions & 11 deletions docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@
z-index: 0;
display: flex;
align-items: stretch;
gap: 0.25rem;
gap: 0.3125rem;
pointer-events: none;
}

Expand All @@ -185,7 +185,7 @@
.rail {
position: relative;
flex: 0 0 auto;
width: 0.625rem;
width: 0.875rem;
align-self: stretch;
min-height: 4rem;
overflow: hidden;
Expand Down Expand Up @@ -214,6 +214,13 @@
animation: railDown 3.2s linear infinite;
}

/* Offset the second lane of each pair so neighbours do not march in lockstep,
which would read as one wide lane rather than two. */
.rails > :nth-child(2) .railTrack,
.rails > :nth-child(4) .railTrack {
animation-delay: -1.6s;
}

@keyframes railUp {
from {
transform: translateY(0);
Expand All @@ -234,8 +241,8 @@

.chevron {
flex: 0 0 auto;
width: 0.625rem;
height: 0.3125rem;
width: 0.875rem;
height: 0.4375rem;
opacity: 0.5;
}

Expand Down Expand Up @@ -269,7 +276,6 @@
flex: 0 1 auto;
}

/* Title on the left; everything after it rides to the right edge. */
/* Title row: vertically centred, with the arrow pinned to the right edge. */
.contentSplit {
align-items: center;
Expand Down Expand Up @@ -590,15 +596,9 @@
}

.rail {
width: 0.75rem;
min-height: 5.5rem;
}

.chevron {
width: 0.75rem;
height: 0.375rem;
}

/* The description becomes a sheet that rises from the bottom on tap. */
.trayBackdrop {
display: block;
Expand Down
6 changes: 5 additions & 1 deletion docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ export function StackDiagramSection() {
<span className={styles.itemIcon}>
<Browser size={ICON_SIZE} />
</span>
<span className={styles.itemTitle}>App surface</span>
<span className={styles.itemTitle}>Agent Interface</span>
</div>
<span className={styles.layerArrow}>
<ArrowRight size={12} weight="bold" />
Expand All @@ -276,8 +276,12 @@ export function StackDiagramSection() {
</div>

<div className={styles.connector}>
{/* Four lanes: the left pair streams UI up, the right pair carries
actions down. */}
<span className={styles.rails}>
<Rail direction="up" />
<Rail direction="up" />
<Rail direction="down" />
<Rail direction="down" />
</span>
<div className={styles.langLayer}>
Expand Down
Loading