Dyalog / Dyalog/documentation-assets

Allow "stacked" commands in headings

Open
#26 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
CSS
Stars
0
Forks
3
Avg merge
6h 37m
Merged PRs (30d)
1

Description

Some pages need a "vertical stack" to the right in the header -- for example

Image

should have the two versions one over the other.

```html


Same
R←⊣YR←⊢Y


```
vs
```html


Same

R←⊣Y
R←⊢Y


```

This involves tweaking some built-in mkdocs style for the css -- untested:

```css
/* Flex the whole heading row */
.md-typeset h1.heading {
display: flex;
align-items: baseline;
gap: 0.75rem;
}

/* Left side grows */
.md-typeset h1.heading .name {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}

/* Right side: force vertical stack and right alignment */
.md-typeset h1.heading .command {
display: flex; /* ensure this actually becomes flex in MkDocs */
flex-direction: column; /* vertical stack */
align-items: flex-end; /* right-align each line */
line-height: 1.15;
color: #fff;
font-family: APL, ui-monospace, "Fira Code", monospace;
}

/* Each command line should not wrap internally */
.md-typeset h1.heading .command > * {
white-space: nowrap;
}

/* Keep MkDocs' auto header link from becoming a flex item that shifts layout */
.md-typeset h1.heading > .headerlink {
order: 99;
margin-left: 0.5rem;
}
```

Maybe? My CSS is weak.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.