diff --git a/frontend/scenes/Flatpage/Flatpage.js b/frontend/scenes/Flatpage/Flatpage.js index a87ce271..e901c97f 100644 --- a/frontend/scenes/Flatpage/Flatpage.js +++ b/frontend/scenes/Flatpage/Flatpage.js @@ -1,8 +1,8 @@ // @flow import React from 'react'; import { observer } from 'mobx-react'; +import styled from 'styled-components'; import CenteredContent from 'components/CenteredContent'; -import { DocumentHtml } from 'components/Document'; import PageTitle from 'components/PageTitle'; import { convertToMarkdown } from 'utils/markdown'; @@ -17,14 +17,99 @@ type Props = { render() { const { title, content } = this.props; + const htmlContent = convertToMarkdown(content); return ( - + ); } } +const HtmlContent = styled.div` + h1, h2, h3, h4, h5, h6 { + :global { + .anchor { + visibility: hidden; + color: ; + } + } + + &:hover { + :global { + .anchor { + visibility: visible; + } + } + } + } + + ul { + padding-left: 1.5em; + + ul { + margin: 0; + } + } + + // pre { + // box-shadow: 1px 1px 1px #f5f5f5; + // } + + blockquote { + font-style: italic; + border-left: 2px solid $lightGray; + padding-left: 0.8em; + } + + table { + width: 100%; + overflow: auto; + display: block; + border-spacing: 0; + border-collapse: collapse; + + thead, tbody { + width: 100%; + } + + thead { + tr { + border-bottom: 2px solid $lightGray; + } + } + + tbody { + tr { + border-bottom: 1px solid $lightGray; + } + } + + tr { + background-color: #fff; + + // &:nth-child(2n) { + // background-color: #f8f8f8; + // } + } + + th, td { + text-align: left; + border: 1px 0 solid $lightGray; + padding: 5px 20px 5px 0; + + &:last-child { + padding-right: 0; + width: 100%; + } + } + + th { + font-weight: bold; + } + } +`; + export default Flatpage;