refactor(website): add typography improvements (#8355)

* refactor(website): add typography improvements

* chore: bold on hover
This commit is contained in:
Suneet Tipirneni
2022-07-24 15:56:50 -04:00
committed by GitHub
parent 9ae461d84d
commit 4bda24678a
10 changed files with 238 additions and 40 deletions

View File

@@ -20,8 +20,8 @@ export interface DocContainerProps {
export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
return (
<>
<div className="bg-white dark:bg-dark border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
<h2 className="flex items-center font-mono break-all m-0 dark:text-white">
<div className="bg-white dark:bg-dark border-b-solid border-gray border-0.5 border-width-0.5 sticky top-0 px-10 py-2">
<h2 className="flex items-center break-all m-0 dark:text-white">
{generateIcon(kind, 'mr-2')}
{name}
</h2>
@@ -41,21 +41,23 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
</div>
{extendsTokens?.length ? (
<div className="flex flex-row items-center dark:text-white">
<h2 className="mr-5">Extends</h2>
<h3 className="mr-5 mt-0 mb-0">Extends</h3>
<p className="font-mono">
<HyperlinkedText tokens={extendsTokens} />
</p>
</div>
) : null}
<Section title="Summary" className="dark:text-white">
<p className="text-dark-100 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
</Section>
{typeParams?.length ? (
<Section title="Type Parameters" className="dark:text-white">
<TypeParamTable data={typeParams} className="mb-5 p-3" />
<div className="space-y-10">
<Section title="Summary" className="dark:text-white">
<p className="text-dark-100 mb-0 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
</Section>
) : null}
<div>{children}</div>
{typeParams?.length ? (
<Section title="Type Parameters" className="dark:text-white" defaultClosed>
<TypeParamTable data={typeParams} className="mb-5 p-3" />
</Section>
) : null}
<div className="space-y-10">{children}</div>
</div>
</div>
</>
);