From 0144bfc9cc6c616a00a8171f3950a75ec948427e Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sun, 11 Apr 2021 10:27:27 -0700 Subject: base next refactor --- frontend/src/theme/GlobalStyle.js | 10 +-- frontend/src/theme/ThemeProvider.js | 4 +- frontend/src/theme/style.css | 150 ++++++++++++++++++++++++++++++++++++ 3 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 frontend/src/theme/style.css (limited to 'frontend/src/theme') diff --git a/frontend/src/theme/GlobalStyle.js b/frontend/src/theme/GlobalStyle.js index 9fe80a5..94e4b57 100644 --- a/frontend/src/theme/GlobalStyle.js +++ b/frontend/src/theme/GlobalStyle.js @@ -2,10 +2,10 @@ import { createGlobalStyle } from 'styled-components' export default createGlobalStyle` body { - margin: 0; - padding: 0; - background: ${(p) => p.theme.colors.background}; - font-family: 'JetBrains Mono', monospace; - color: ${(p) => p.theme.colors.text}; + margin: 0; + padding: 0; + background: ${(p) => p.theme.colors.background}; + font-family: 'JetBrains Mono', monospace; + color: ${(p) => p.theme.colors.text}; } ` \ No newline at end of file diff --git a/frontend/src/theme/ThemeProvider.js b/frontend/src/theme/ThemeProvider.js index d9edcb0..942bc40 100644 --- a/frontend/src/theme/ThemeProvider.js +++ b/frontend/src/theme/ThemeProvider.js @@ -10,4 +10,6 @@ const theme = { }, } -export default ({ children }) => {children} \ No newline at end of file +const Provider = ({ children }) => {children} + +export default Provider \ No newline at end of file diff --git a/frontend/src/theme/style.css b/frontend/src/theme/style.css new file mode 100644 index 0000000..10b955b --- /dev/null +++ b/frontend/src/theme/style.css @@ -0,0 +1,150 @@ +@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 -- cgit v1.2.3 From 3f0cdc02b275e24771226417c442125f74bcd8c1 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sun, 11 Apr 2021 10:45:10 -0700 Subject: safely remove style.css --- frontend/src/theme/GlobalStyle.js | 6 ++ frontend/src/theme/ThemeProvider.js | 1 + frontend/src/theme/style.css | 150 ------------------------------------ 3 files changed, 7 insertions(+), 150 deletions(-) delete mode 100644 frontend/src/theme/style.css (limited to 'frontend/src/theme') 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 -- cgit v1.2.3