Update content pages
This commit is contained in:
parent
19a328ebeb
commit
8f08f8dabf
|
@ -6,6 +6,7 @@ import Grid from 'styled-components-grid';
|
|||
import ReactMarkdown from 'react-markdown';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import Header from './components/Header';
|
||||
import Content from './components/Content';
|
||||
|
||||
type Release = {
|
||||
id: string,
|
||||
|
@ -26,7 +27,7 @@ function Changelog({ releases }: { releases: Release[] }) {
|
|||
We’re building in public. Here’s what we’ve been changing recently.
|
||||
</p>
|
||||
</Header>
|
||||
<Container>
|
||||
<Content>
|
||||
{releases.map(release => (
|
||||
<Article key={release.id}>
|
||||
<Heading id={release.name}>
|
||||
|
@ -38,7 +39,7 @@ function Changelog({ releases }: { releases: Release[] }) {
|
|||
<ReactMarkdown source={release.body} />
|
||||
</Article>
|
||||
))}
|
||||
</Container>
|
||||
</Content>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
@ -58,13 +59,6 @@ const Time = styled.time`
|
|||
display: block;
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2em;
|
||||
`;
|
||||
|
||||
const Article = styled.div`
|
||||
border-bottom: 1px solid ${props => props.theme.slateLight};
|
||||
padding-bottom: 2em;
|
||||
|
|
|
@ -27,13 +27,13 @@ function Home(props: Props) {
|
|||
<title>Outline - Team wiki & knowledge base</title>
|
||||
</Helmet>
|
||||
<Grid>
|
||||
<Hero>
|
||||
<Hero id="signin">
|
||||
<h1>Your team’s knowledge base</h1>
|
||||
<HeroText>
|
||||
Team wiki, documentation, meeting notes, playbooks, onboarding, work
|
||||
logs, brainstorming, & more…
|
||||
</HeroText>
|
||||
<p id="signin">
|
||||
<p>
|
||||
<SigninButtons {...props} />
|
||||
</p>
|
||||
{props.notice === 'google-hd' && (
|
||||
|
@ -73,7 +73,7 @@ function Home(props: Props) {
|
|||
<p>
|
||||
Outline provides a secure place for your teams
|
||||
documentation on our hosted platform, stored in portable
|
||||
Markdown format. Or, you can run your own copy – it's open
|
||||
Markdown format. Or, you can run your own copy – it’s open
|
||||
source!
|
||||
</p>
|
||||
</Feature>
|
||||
|
@ -89,7 +89,7 @@ function Home(props: Props) {
|
|||
</Centered>
|
||||
</Features>
|
||||
</Mask>
|
||||
<Centered>
|
||||
<Centered id="features">
|
||||
<Grid>
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>Blazing Fast</h2>
|
||||
|
|
|
@ -9,10 +9,11 @@ export default function Privacy() {
|
|||
return (
|
||||
<Grid>
|
||||
<Helmet>
|
||||
<title>Privacy policy</title>
|
||||
<title>Privacy Policy</title>
|
||||
</Helmet>
|
||||
<Header>
|
||||
<h1>Privacy policy</h1>
|
||||
<h1>Privacy Policy</h1>
|
||||
<p>How we collect and use your information</p>
|
||||
</Header>
|
||||
<Content>
|
||||
<p>
|
||||
|
|
|
@ -3,9 +3,9 @@ import styled from 'styled-components';
|
|||
|
||||
export default styled.div`
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 2em;
|
||||
padding: 0 2em;
|
||||
font-size: 1.1em;
|
||||
|
||||
li {
|
||||
padding: 0.2em 0;
|
||||
|
|
|
@ -1,20 +1,36 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Centered from './Centered';
|
||||
|
||||
const Header = styled.div`
|
||||
type Props = {
|
||||
children: React.Node,
|
||||
};
|
||||
|
||||
const Header = ({ children }: Props) => {
|
||||
return (
|
||||
<Wrapper>
|
||||
<Centered>{children}</Centered>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
padding: 0 2em 2em;
|
||||
text-align: center;
|
||||
background: ${props => props.theme.slateLight};
|
||||
padding: 2em;
|
||||
background: ${props => props.theme.contentHeaderBackground};
|
||||
margin-bottom: 2em;
|
||||
|
||||
p {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
font-size: 3.5em;
|
||||
margin: 0 0 0.1em;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import * as React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import styled from 'styled-components';
|
||||
import breakpoint from 'styled-components-breakpoint';
|
||||
import { TopNavigation, BottomNavigation } from './Navigation';
|
||||
import Analytics from '../../../shared/components/Analytics';
|
||||
import globalStyles from '../../../shared/styles/globals';
|
||||
|
@ -75,6 +76,10 @@ function Layout({ children }: Props) {
|
|||
|
||||
const Body = styled.body`
|
||||
padding: 0 30px;
|
||||
|
||||
${breakpoint('tablet')`
|
||||
padding: 0;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default Layout;
|
||||
|
|
|
@ -26,10 +26,10 @@ function TopNavigation() {
|
|||
<a href={about()}>About</a>
|
||||
</MenuItemDesktop>
|
||||
<MenuItemDesktop>
|
||||
<a href={twitterUrl()}>Twitter</a>
|
||||
<a href={changelog()}>Changelog</a>
|
||||
</MenuItemDesktop>
|
||||
<MenuItemDesktop>
|
||||
<a href={changelog()}>Changelog</a>
|
||||
<a href={twitterUrl()}>Twitter</a>
|
||||
</MenuItemDesktop>
|
||||
<MenuItem>
|
||||
<a href={developers()}>API</a>
|
||||
|
@ -54,9 +54,6 @@ function BottomNavigation() {
|
|||
<div>
|
||||
<a href={spectrumUrl()}>Spectrum</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href={blogUrl()}>Medium</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href={privacy()}>Privacy</a>
|
||||
</div>
|
||||
|
|
|
@ -33,6 +33,8 @@ const theme = {
|
|||
sidebarWidth: '280px',
|
||||
sidebarMinWidth: '250px',
|
||||
sidebarMaxWidth: '350px',
|
||||
|
||||
contentHeaderBackground: 'hsl(180, 58%, 85%)',
|
||||
};
|
||||
|
||||
export default theme;
|
||||
|
|
Reference in New Issue