diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/components/renderers/Latex.js | 13 | ||||
| -rw-r--r-- | frontend/src/components/renderers/Markdown.js | 35 | ||||
| -rw-r--r-- | frontend/src/pages/_app.js | 1 | ||||
| -rw-r--r-- | frontend/src/pages/index.js | 8 | ||||
| -rw-r--r-- | frontend/src/theme/GlobalStyle.js | 6 | ||||
| -rw-r--r-- | frontend/src/theme/ThemeProvider.js | 1 | ||||
| -rw-r--r-- | frontend/src/theme/style.css | 150 |
7 files changed, 60 insertions, 154 deletions
diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js index fd3d4e2..b2be6da 100644 --- a/frontend/src/components/renderers/Latex.js +++ b/frontend/src/components/renderers/Latex.js @@ -40,4 +40,15 @@ const Latex = (props) => { } } -export default Latex
\ No newline at end of file +const StyledLatex = styled(Latex)` + /* fix weird symbol height in render mode */ + .large-op { + transform: translateY(-0.55em); + } + + .small-op { + transform: translateY(-0.1em); + } +` + +export default StyledLatex
\ No newline at end of file diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js index 16f5e37..f69d176 100644 --- a/frontend/src/components/renderers/Markdown.js +++ b/frontend/src/components/renderers/Markdown.js @@ -9,6 +9,41 @@ const Content = styled.div` img { max-width: 100%; } + + h3 { + font-weight: bold; + } + + hr { + border-top: 1px solid ${p => p.theme.colors.text}; + border-style: solid; + } + + code { + background: ${p => p.theme.colors.codeHighlight}; + font-size: 0.8em; + } + + pre { + padding: 0.7em; + background: ${p => p.theme.colors.codeHighlight}; + } + + pre > code { + background: none; + } + + table { + width: 100%; + } + + code, pre { + background: none; + font-family: 'JetBrains Mono', monospace; + padding: initial; + border-radius: 3px; + outline: none; + } ` const Markdown = ({content}) => { return <Content> diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js index 7e99f01..eb205e3 100644 --- a/frontend/src/pages/_app.js +++ b/frontend/src/pages/_app.js @@ -1,7 +1,6 @@ import React from 'react' import ThemeProvider from "../theme/ThemeProvider"; import GlobalStyle from "../theme/GlobalStyle"; -import '../theme/style.css'; import {Watermark} from "../components/Watermark"; import styled from "styled-components"; diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js index 141ebac..36bcad7 100644 --- a/frontend/src/pages/index.js +++ b/frontend/src/pages/index.js @@ -10,6 +10,10 @@ import Markdown from '../components/renderers/Markdown' import {Button, SubmitButton} from "../components/Common/Button"; import {newPaste} from "../http/shared"; +const Container = styled.form` + width: 100%; +` + const Flex = styled.div` display: flex; flex-direction: row; @@ -115,7 +119,7 @@ const NewPaste = () => { } return ( - <form onSubmit={handleSubmit}> + <Container onSubmit={handleSubmit}> <PasteModal hash={hash} /> <Text label="title" @@ -143,7 +147,7 @@ const NewPaste = () => { </div> <br /> <Error ref={ErrorLabel} /> - </form> + </Container> ); } diff --git a/frontend/src/theme/GlobalStyle.js b/frontend/src/theme/GlobalStyle.js index 94e4b57..2942687 100644 --- a/frontend/src/theme/GlobalStyle.js +++ b/frontend/src/theme/GlobalStyle.js @@ -8,4 +8,10 @@ export default createGlobalStyle` font-family: 'JetBrains Mono', monospace; color: ${(p) => p.theme.colors.text}; } + + @media all and (max-width: 1000px) { + .lt-content-column { + padding: 0 calc(5vw + 1em) 0 5vw !important; + } + } `
\ No newline at end of file diff --git a/frontend/src/theme/ThemeProvider.js b/frontend/src/theme/ThemeProvider.js index 942bc40..57d57ef 100644 --- a/frontend/src/theme/ThemeProvider.js +++ b/frontend/src/theme/ThemeProvider.js @@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components' const theme = { colors: { background: '#faf9f5', + codeHighlight: '#00000008', border: '#565656', text: '#111111', error: '#ee1111', diff --git a/frontend/src/theme/style.css b/frontend/src/theme/style.css deleted file mode 100644 index 10b955b..0000000 --- a/frontend/src/theme/style.css +++ /dev/null @@ -1,150 +0,0 @@ -@media all and (max-width: 1000px) { - .lt-content-column { - padding: 0 calc(5vw + 1em) 0 5vw !important; - } -} - -form { - width: 100%; -} - -textarea, input[type=text], input[type=password], .Dropdown-root { - width: 100%; - font-family: 'JetBrains Mono', monospace; - font-size: 0.8em; - padding: calc(0.8em - 1px); - border-radius: 3px; - border: 1px solid #565656; - outline: none; - margin: 1.7em 0; -} - -/* fix weird symbol height in render mode */ -.large-op { - transform: translateY(-0.55em); -} - -.small-op { - transform: translateY(-0.1em); -} - -code, pre { - background: #00000000; - font-family: 'JetBrains Mono', monospace; - padding: initial; - border-radius: 3px; - outline: none; -} - -.Dropdown-root { - cursor: pointer; -} - -.Dropdown-root:hover, .Dropdown-root.is-open { - opacity: 1; -} - -.Dropdown-root + label { - top: 0.5em; - opacity: 0; -} - -.Dropdown-root.is-open + label, .Dropdown-root:hover + label { - opacity: 1; - top: -0.1em; -} - -.Dropdown-placeholder { - width: 5.5em; -} - -.Dropdown-menu { - border-top: 1px solid #111111; - margin-top: 0.5em; - bottom: auto; -} - -.Dropdown-option { - margin-top: 0.5em; - transition: all 0.5s cubic-bezier(.25,.8,.25,1); -} - -.Dropdown-option:hover { - font-weight: 700; - opacity: 0.4; -} - -textarea, input[type=text], input[type=password], .Dropdown-root { - opacity: 0.5; - transition: opacity 0.5s cubic-bezier(.25,.8,.25,1); -} - -textarea:focus, input[type=text]:focus, input[type=password]:focus { - opacity: 1; -} - -input[type=password] { - font-weight: 700; -} - -textarea { - height: max(40vh, 100%); - resize: vertical; - min-height: 40vh; -} - -a { - color: #111111; -} - -input[type=submit], button[type=submit] { - font-family: 'JetBrains Mono', serif; - font-weight: 700; - color: #faf9f5; - background-color: #111111; - padding: 0.8em 2em; - margin: 2em 0; - outline: 0; -} - -button[type=button] { - font-family: 'JetBrains Mono', serif; - font-weight: 700; - width: 8em; - padding: calc(0.8em - 1px) 1.5em; - border-radius: 3px; - color: #111111; - background-color: #faf9f5; - border: 1px solid #565656; - outline: none; - margin: 2em 2em; -} - - -/* fixing markdown renderer */ -.md h3 { - font-weight: bold; -} - -.md hr { - border-top: 1px solid #000; - border-style: solid; -} - -.md code { - background: #00000008; - font-size: 0.8em; -} - -.md pre { - padding: 0.7em; - background: #00000008; -} - -.md pre > code { - background: none; -} - -.md table { - width: 100%; -}
\ No newline at end of file |