diff --git a/src/components/App/index.css b/src/components/App/index.css deleted file mode 100644 index c2fba2fc..00000000 --- a/src/components/App/index.css +++ /dev/null @@ -1,42 +0,0 @@ -* { - font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; -} - -html { - background: #efefef; - padding: 16px; -} - -body.no-scroll { - overflow: hidden; -} - -a { - text-decoration: none; -} - -h1 { - color: #444; - font-size: 18px; - font-weight: 500; - text-align: center; -} - -#Content { - display: flex; - flex-direction: column; - gap: 24px; - margin-top: 24px; -} - -#NotFound { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 40px; -} - -#NotFound h2 { - color: #444; - font-weight: 500; -} \ No newline at end of file diff --git a/src/components/App/index.scss b/src/components/App/index.scss new file mode 100644 index 00000000..4defe4f9 --- /dev/null +++ b/src/components/App/index.scss @@ -0,0 +1,47 @@ +@import '~meyer-reset-scss'; + +html { + background: $bg-color; + padding: $unit * 2; +} + +body { + font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; + + &.no-scroll { + overflow: hidden; + } +} + +a { + text-decoration: none; +} + +h1, h2, h3, p { + color: $text-color; +} + +h1 { + font-size: 18px; + font-weight: 500; + text-align: center; +} + +#Content { + display: flex; + flex-direction: column; + gap: $unit * 3; + margin-top: $unit * 3; +} + +// #NotFound { +// display: flex; +// flex-direction: column; +// align-items: center; +// margin-top: 40px; +// } + +// #NotFound h2 { +// color: #444; +// font-weight: 500; +// } \ No newline at end of file diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 2613896b..1b6d49ee 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Route, useHistory } from 'react-router-dom' -import './index.css' +import './index.scss' import Header from '~components/Header'