oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

style & typography tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-01-21 13:37:24 +01:00
parent 2a8d60739d
commit 4834ebe4cb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/templates/Typedoc.jsx
View File

@ -12,6 +12,7 @@ import SEO from '../components/Seo'
import stylesDoc from './Doc.module.scss'
import styles from './Typedoc.module.scss'
// more kinds: 'Property', 'Class'
const showKindOfProperty = ['Method', 'Property']
const toc = typedoc => {
@ -38,8 +39,9 @@ const Type = ({ type }) => {
}
const { name, type: typeOfType, typeArguments, id } = type
const isInternal = typeOfType === 'reference' && id
return (
<span className={styles.type}>
<div className={styles.type}>
<span>
{isInternal && <a href={`#${slugify(name)}`}>{type.name}</a>}
{!isInternal && <span>{type.name}</span>}
@ -47,7 +49,7 @@ const Type = ({ type }) => {
{typeArguments && (
<span>
<span className={styles.typeSymbol}>&lt;</span>
<span className={styles.typeSymbol}> &lt;</span>
<span>
{typeArguments.map((typeArgument, i) => (
<span key={i}>
@ -65,7 +67,7 @@ const Type = ({ type }) => {
)}
{isArray && <span className={styles.typeSymbol}>[]</span>}
</span>
</div>
)
}
@ -76,8 +78,7 @@ Type.propTypes = {
const PropertyDetails = ({ property }) => {
const { type } = property
return (
<div className={styles.detailsLine}>
Type:
<div>
<Type type={type} />
</div>
)
@ -110,7 +111,7 @@ const MethodDetails = ({ property }) => {
<code>{name}</code>
{isOptional && (
<span
className={styles.parameterOptinal}
className={styles.parameterOptional}
title="optional parameter"
>
?

45
src/templates/Typedoc.module.scss
View File

@ -1,7 +1,13 @@
@import 'variables';
.version {
font-size: $font-size-base;
font-family: $font-family-monospace;
color: $brand-grey-light;
}
.entityName {
font-size: $font-size-h3;
font-size: $font-size-h2;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 2;
margin-top: $spacer * 2;
@ -47,6 +53,10 @@
vertical-align: middle;
}
.propertyName {
font-size: $font-size-large;
}
.propertyType,
.propertyModifier {
font-size: $font-size-small;
@ -76,14 +86,17 @@
}
.propertyDescription {
opacity: .6;
padding: $spacer / 6 0 $spacer / 3;
}
.sourceLink {
position: absolute;
top: $spacer / 2;
bottom: $spacer / 2;
right: $spacer / 2;
font-size: $font-size-mini;
font-family: $font-family-button;
text-transform: uppercase;
color: $brand-grey-light;
}
.deprecation {
@ -91,22 +104,11 @@
color: mix($brand-black, $brand-pink, 50%);
}
.detailsLine {
.type {
margin-left: $spacer / 4;
}
}
.type {
display: inline-block;
font-weight: $font-weight-base;
color: $brand-grey;
font-family: $font-family-monospace;
font-size: $font-size-small;
font-family: $font-family-title;
&,
a {
color: $brand-grey-light;
}
a {
&:hover {
@ -121,10 +123,13 @@
.subHeading {
font-size: $font-size-h5;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 3;
margin-bottom: $spacer / 3;
}
.parameters {
margin-top: $spacer / 3;
margin-top: $spacer / 1.5;
h5,
p {
@ -135,16 +140,16 @@
font-size: $font-size-small;
margin-bottom: $spacer / 4;
margin-right: $spacer / 4;
margin-left: -(.2rem);
display: inline-block;
}
code {
// stylelint-disable-next-line
background: rgba($brand-black, .08) !important;
padding: .2rem;
}
}
.parameterOptinal {
.parameterOptional {
font-size: $font-size-small;
vertical-align: top;
color: $brand-purple;