diff options
Diffstat (limited to 'packages/website/ts/pages/shared')
4 files changed, 49 insertions, 19 deletions
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx index db5be1f59..0270618a0 100644 --- a/packages/website/ts/pages/shared/anchor_title.tsx +++ b/packages/website/ts/pages/shared/anchor_title.tsx @@ -34,18 +34,13 @@ const styles: Styles = { }, h1: { fontSize: '1.8em', - WebkitMarginBefore: '0.83em', - WebkitMarginAfter: '0.83em', }, h2: { fontSize: '1.5em', - WebkitMarginBefore: '0.83em', - WebkitMarginAfter: '0.83em', + fontWeight: 400, }, h3: { fontSize: '1.17em', - WebkitMarginBefore: '1em', - WebkitMarginAfter: '1em', }, }; diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index be96fda16..98ca3aee6 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -17,7 +17,7 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M } public render() { return ( - <span style={{ fontSize: 16 }}> + <span style={{ fontSize: 14 }}> <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight> </span> ); diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 5487dc8cc..0ce348c98 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -6,6 +6,7 @@ import { Element as ScrollElement } from 'react-scroll'; import { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; import { HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface MarkdownSectionProps { @@ -34,14 +35,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const id = utils.getIdFromName(sectionName); return ( <div - className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden" + className="pt2 md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > <ScrollElement name={id}> <div className="clearfix"> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ textTransform: 'capitalize' }}> + <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> <AnchorTitle headerSize={this.props.headerSize} title={sectionName} @@ -50,17 +51,19 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd /> </span> </div> - <div className="col col-4 sm-hide xs-hide py2 right-align"> + <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}> {!_.isUndefined(this.props.githubLink) && ( - <RaisedButton + <a href={this.props.githubLink} target="_blank" - label="Edit on Github" - icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />} - /> + style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }} + > + Edit on Github + </a> )} </div> </div> + <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </ScrollElement> </div> diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 849c33504..fde6ef7ae 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -11,12 +11,12 @@ import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; + title: string; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; docPath?: string; - isSectionHeaderClickable?: boolean; } interface NestedSidebarMenuState {} @@ -29,7 +29,10 @@ const styles: Styles = { minHeight: 48, }, menuItemInnerDivWithHeaders: { + color: colors.grey800, + fontSize: 14, lineHeight: 2, + padding: 0, }, }; @@ -44,14 +47,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return ( - <div key={`section-${sectionName}`} className="py1"> + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}> <ScrollLink to={id} offset={-20} duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.DOCS_CONTAINER_ID} > - <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1"> + <div style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: 15 }} className="py1"> {finalSectionName.toUpperCase()} </div> </ScrollLink> @@ -64,6 +67,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N }); return ( <div> + {this._renderEmblem()} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && !_.isUndefined(this.props.docPath) && ( @@ -73,7 +77,35 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N docPath={this.props.docPath} /> )} - {navigation} + <div className="pl1">{navigation}</div> + </div> + ); + } + private _renderEmblem() { + return ( + <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> + <div className="flex" style={{ fontSize: 25 }}> + <div className="robotoMono" style={{ fontWeight: 'bold' }}> + 0x + </div> + <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> + docs + </div> + </div> + <div + className="pl1" + style={{ color: 'rgb(202, 202, 202)', paddingBottom: 9, paddingLeft: 14, height: 17 }} + > + | + </div> + <div className="flex"> + <div> + <img src="/images/book.png" width="31" /> + </div> + <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}> + {this.props.title} + </div> + </div> </div> ); } @@ -132,7 +164,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N onTouchTap={this._onMenuItemClick.bind(this, name)} style={{ minHeight: 35 }} innerDivStyle={{ - paddingLeft: 36, + paddingLeft: 16, fontSize: 14, lineHeight: '35px', }} |