81831f1dc4
Having build a documentation system at my job as well as the frontend for it, it was rather surprised that a surprisingly large proportion of my colleagues complained that the text was 'too narrow'. When reading documentation, the horizontal space is constrained to limit the amount of characters on a line. Long lines make for very hard to read text, because each time your eyes dart back from the end of the line to the beginning of the next line, it becomes harder to stay vertically anchored on the correct line. It's best practice to limit the line length like this, and so I've always been doing it. However, after someone at work asked, I added a toggle to allow the text to fill the available space. Much to my surprise, this was hailed like some sort of significant improvement. I still don't think it makes sense, but I've added a similar checkbox to the docs pages of both dev and org sites anyway.
38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
/*
|
|
* The default full-page FreeSewing layout
|
|
*/
|
|
export const BaseLayout = ({ children = [] }) => (
|
|
<div className="flex flex-row items-start w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
/*
|
|
* The left column of the default layout
|
|
*/
|
|
export const BaseLayoutLeft = ({ children = [] }) => (
|
|
<div className="max-w-96 w-1/4 hidden lg:block shrink-0 my-8 sticky top-4 max-h-screen overflow-scroll">
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
/*
|
|
* The right column of the default layout
|
|
*/
|
|
export const BaseLayoutRight = ({ children = [] }) => (
|
|
<div className="max-w-96 w-1/4 hidden xl:block my-8 sticky top-2">{children}</div>
|
|
)
|
|
|
|
/*
|
|
* The main column for prose (text like docs and so on)
|
|
*/
|
|
export const BaseLayoutProse = ({ children = [], wide = false }) => (
|
|
<div className={`grow w-full m-auto max-w-${wide ? 'full' : 'prose'} my-8`}>{children}</div>
|
|
)
|
|
|
|
/*
|
|
* The central column for wide content (no max-width)
|
|
*/
|
|
export const BaseLayoutWide = ({ children = [] }) => (
|
|
<div className="grow w-full m-auto my-8 grow">{children}</div>
|
|
)
|