Skip to content

Style updates for Docs #855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 6, 2020
Merged

Style updates for Docs #855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11e075d
Style updates for Docs
carloskelly13 Mar 5, 2020
e8d336e
Prevent borders when code tags are inside gatsby blocks
carloskelly13 Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions docs/content/api-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,14 @@ These tags are for displaying textual content.

| Tag Name | Theme Props | Additional Props | Default Props |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <a name="text">**Text**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: textMargin |
| <a name="heading">**Heading**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: secondary<br /> **fontFamily**: header<br />**fontSize**: h1<br />**fontWeight**: bold<br />**textAlign**: center<br />**margin**: headerMargin |
| <a name="link">**Link**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography)<br /> | **href**: PropTypes.string | **color**: quaternary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textDecoration**: underline<br />**textAlign**: left<br />**margin**: textMargin |
| <a name="quote">**Quote**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography)<br /> | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**borderLeft**: 1px solid secondary |
| <a name="ordered-list">**OrderedList**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: listMargin |
| <a name="unordered-list">**UnorderedList**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: listMargin |
| <a name="list-item">**ListItem**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **margin**: listMargin |
| <a name="code-span">**CodeSpan**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **fontFamily**: monospace<br />**fontSize**: text |
| <a name="text"></a>**Text** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: textMargin |
| <a name="heading"></a>**Heading** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: secondary<br /> **fontFamily**: header<br />**fontSize**: h1<br />**fontWeight**: bold<br />**textAlign**: center<br />**margin**: headerMargin |
| <a name="link"></a>**Link** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography)<br /> | **href**: PropTypes.string | **color**: quaternary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textDecoration**: underline<br />**textAlign**: left<br />**margin**: textMargin |
| <a name="quote"></a>**Quote** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography)<br /> | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**borderLeft**: 1px solid secondary |
| <a name="ordered-list"></a>**OrderedList** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: listMargin |
| <a name="unordered-list"></a>**UnorderedList** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **color**: primary<br /> **fontFamily**: text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: listMargin |
| <a name="list-item"></a>**ListItem** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **margin**: listMargin |
| <a name="code-span"></a>**CodeSpan** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br /> [**Typography**](/docs/props#typography) | — | **fontFamily**: monospace<br />**fontSize**: text |

<a name="layout-tags"></a>

Expand All @@ -72,9 +72,9 @@ These tags are for adding structure to your slides.

| Tag Name | Theme Props | Additional Props | Default Props |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ----------------- |
| <a name="box">**Box**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br />[**Layout**](/docs/props#layout)<br />[**Position**](/docs/props#position)<br /> [**Border**](/docs/props#border) | — | — |
| <a name="flex-box">**FlexBox**</a> | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br />[**Layout**](/docs/props#layout)<br />[**Position**](/docs/props#position)<br /> [**Border**](/docs/props#border)<br />[**Flex**](/docs/props#flex)<br /> | — | — |
| <a name="grid">**Grid**</a> | [**Layout**](/docs/props#layout)<br />[**Position**](/docs/props#position)<br />[**Grid**](/docs/props#grid)<br /> | — | **display**: grid |
| <a name="box"></a>**Box** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br />[**Layout**](/docs/props#layout)<br />[**Position**](/docs/props#position)<br /> [**Border**](/docs/props#border) | — | — |
| <a name="flex-box"></a>**FlexBox** | [**Space**](/docs/props#space)<br />[**Color**](/docs/props#color)<br />[**Layout**](/docs/props#layout)<br />[**Position**](/docs/props#position)<br /> [**Border**](/docs/props#border)<br />[**Flex**](/docs/props#flex)<br /> | — | — |
| <a name="grid"></a>**Grid** | [**Layout**](/docs/props#layout)<br />[**Position**](/docs/props#position)<br />[**Grid**](/docs/props#grid)<br /> | — | **display**: grid |

<a name="appear"></a>

Expand Down
1 change: 0 additions & 1 deletion docs/dist-prod/open-source/spectacle
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion docs/src/components/body-copy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import styled from 'styled-components';

export const BodyCopy = styled.p`
font-family: Helvetica;
font-size: 1.5rem;
line-height: 1.5;
color: #4e4e4e;
Expand Down
1 change: 0 additions & 1 deletion docs/src/components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ const HeaderContainer = styled.a`
width: 12rem;
flex-direction: column;
color: #ffffff;
font-family: akkurat;
`;

const HeaderText = styled.p`
Expand Down
16 changes: 10 additions & 6 deletions docs/src/components/markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ export const Markdown = styled.article`
width: 75vw;
}
& h1 {
font-family: 'castledown';
font-size: 3.4rem;
margin: 0 0 2rem;

@media (min-width: 1024px) {
font-size: 4.8rem;
font-size: 3.5rem;
}

@media (max-width: 768px) {
Expand All @@ -19,7 +18,6 @@ export const Markdown = styled.article`
}

& h2 {
font-family: 'castledown';
font-size: 2.8rem;
margin: 6rem 0 2rem;
@media (min-width: 1024px) {
Expand All @@ -28,16 +26,24 @@ export const Markdown = styled.article`
}

& h3 {
font-family: 'castledown';
font-size: 1.8rem;
margin: 2rem 0;
@media (min-width: 1024px) {
font-size: 2rem;
}
}

& h4 {
font-size: 1.5rem;
margin: 2rem 0;
@media (min-width: 1024px) {
font-size: 1.8rem;
}
}

& table {
border-collapse: collapse;
width: 100%;
}

& td {
Expand Down Expand Up @@ -77,7 +83,6 @@ export const Markdown = styled.article`
}

& p {
font-family: Helvetica;
font-size: 1.7rem;
line-height: 1.6;
}
Expand All @@ -91,7 +96,6 @@ export const Markdown = styled.article`
}

& li {
font-family: Helvetica;
font-size: 1.7rem;
line-height: 1.6;
padding: 0.5rem;
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export const SidebarContainer = styled.div`
`;

export const SidebarWrapper = styled.aside`
font-family: 'akkurat';
background-image: url(${sidebarBackground});
background-repeat: repeat-y;
background-size: 100%;
Expand Down Expand Up @@ -62,7 +61,8 @@ export const SidebarNavItem = styled(Link)`
display: inline-block;
margin: 0.25rem 0;
padding: 0.25rem;
padding-left: 1.25rem;
font-weight: bold;

&:hover {
color: rgba(200, 200, 200, 0.8);
}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const constants = {
docsTitle: 'SPECTACLE',
docsTitle: 'Spectacle',
githubIssues: 'https://www.github.com/FormidableLabs/spectacle/issues',
github: 'https://www.github.com/FormidableLabs/spectacle',
color: '#eeeeee'
Expand Down
72 changes: 24 additions & 48 deletions docs/src/global-style.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions docs/src/screens/docs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,9 @@ const CollapsedMenu = styled.div`
`;

const DocsTitle = styled.h2`
font-size: 3rem;
top: 0.2rem;
font-size: 2.8rem;
flex: auto;
width: 100%;
letter-spacing: 0.5rem;
margin: 0;
position: relative;
left: 4rem;
Expand Down
10 changes: 8 additions & 2 deletions docs/src/screens/docs/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import {
SidebarWrapper
} from '../../components/navigation';
import closeButton from '../../static/svgs/x.svg';
import logoSidebar from '../../static/svgs/logo-sidebar.svg';
import logoSidebar from '../../static/bg_hero_badge.png';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we delete the logo-sidebar svg if it's not being used elsewhere?

import constants from '../../constants';

const HeroLogo = styled.img`
position: absolute;
top: 3rem;
left: 6rem;
min-width: 14rem;
align-self: center;
width: 14rem;

@media (max-width: 768px) {
display: ${props => (props.overlay ? '' : 'none')};
Expand All @@ -28,6 +29,7 @@ const ContentWrapper = styled.div`
flex-direction: column;
margin: 4rem 0rem 1rem 28px;
height: auto;
padding-left: 1.5rem;

@media (max-width: 768px) {
display: ${props => (props.overlay ? '' : 'none')};
Expand All @@ -44,6 +46,10 @@ const Wrapper = styled.div`
display: inline-block;
padding-left: 2rem;
position: relative;

a {
font-weight: normal;
}
`;

const CloseButton = styled.img`
Expand Down
4 changes: 0 additions & 4 deletions docs/src/screens/home/hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,8 @@ const HeroContent = styled.div`

const HeroTitle = styled.h1`
font-size: 3rem;
letter-spacing: 0.15em;
margin: 0 0 2rem;
text-align: center;
text-transform: uppercase;
width: 100%;
@media (min-width: 768px) {
font-size: 5.8rem;
Expand All @@ -44,8 +42,6 @@ const HeroTitle = styled.h1`
`;

const HeroBody = styled.p`
font-family: Helvetica;
letter-spacing: 0.08em;
font-size: 1.4rem;
line-height: 2.2rem;
margin: 0 0 4rem;
Expand Down