filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-10 13:14:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Style: new section in typo

Browse Source
This commit is contained in:
William Felker 2020-07-19 16:49:45 +08:00
parent 6cad6b7711
commit d10c870c79
1 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
pages/system/typography.js
View File

@ -14,6 +14,21 @@ const STYLES_CSS_LABEL = css`
color: ${Constants.system.darkGray};
margin-bottom: 8px;
`;
const STYLES_TYPE_JETBRAINS = css`
font-family: ${Constants.font.code};
`;
const STYLES_BOLD = css`
font-family: ${Constants.font.text};
font-weight: bold;
`;
const STYLES_ITALIC = css`
font-style:italic;
`;
const STYLES_UNDERLINE = css`
text-decoration: underline;
`;
export default class SystemPageTypography extends React.Component {
render() {
@ -29,7 +44,7 @@ export default class SystemPageTypography extends React.Component {
<br />
<br />
<System.P>
The Filecoin Client uses the <a href="https://rsms.me/inter/" target="_blank">Inter typeface family</a>.
The Filecoin Client uses the <a href="https://rsms.me/inter/" target="_blank">Inter</a> and <a href="https://www.jetbrains.com/lp/mono/" target="_blank">Jet Brains</a> as the primiariy fonts.
</System.P>
<br />
<br />
@ -124,7 +139,6 @@ This is heading level 4
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Typefaces</System.H2>
<hr />
<br />
@ -133,20 +147,27 @@ This is heading level 4
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<System.H3>Fira Code</System.H3>
<System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
<br/>
<System.H3>Jet Brains</System.H3>
<System.P css={STYLES_TYPE_JETBRAINS}>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<System.H3>Inter</System.H3>
<System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
<br />
<System.H2>Type Styles</System.H2>
<hr />
<br />
<System.P css={STYLES_BOLD}>This text is bold</System.P>
<System.P css={STYLES_ITALIC}>This text is italic</System.P>
<System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>
<br />
<br />
<System.H2>Hyperlinks</System.H2>
<hr />
<br />
<System.P>Internal References <a href="https://slate.host" target="_blank">Link to a page</a></System.P>
<System.P>External References <ViewSourceLink file="system/typography.js" /></System.P>
<br />
</SystemPage>
);