diff --git a/web/README.md b/web/README.md index e5c0c5a02..c6e29f918 100644 --- a/web/README.md +++ b/web/README.md @@ -1,4 +1,4 @@ -This is a [Next.js](https://nextjs.org/) project with [TypeScript](https://www.typescriptlang.org/) using [Ant Design](https://ant.design/) UI components. +This is a [Next.js](https://nextjs.org/) project with [TypeScript](https://www.typescriptlang.org/), [Sass](https://sass-lang.com/) styling, using [Ant Design](https://ant.design/) UI components. ## Getting Started diff --git a/web/package-lock.json b/web/package-lock.json index 536f25746..40a5ab8d9 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -5199,6 +5199,14 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sass": { + "version": "1.26.11", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz", + "integrity": "sha512-W1l/+vjGjIamsJ6OnTe0K37U2DBO/dgsv2Z4c89XQ8ZOO6l/VwkqwLSqoYzJeJs6CLuGSTRWc91GbQFL3lvrvw==", + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, "sass-loader": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz", diff --git a/web/package.json b/web/package.json index 75c0a9938..8839b0a71 100644 --- a/web/package.json +++ b/web/package.json @@ -11,7 +11,8 @@ "antd": "^4.6.6", "next": "9.5.3", "react": "16.13.1", - "react-dom": "16.13.1" + "react-dom": "16.13.1", + "sass": "^1.26.11" }, "devDependencies": { "@types/node": "^14.11.2", diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index b21cf9350..d53ae791f 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -1,5 +1,5 @@ import 'antd/dist/antd.css'; -import '../styles/globals.css' +import '../styles/globals.scss' import { AppProps } from 'next/app' diff --git a/web/styles/Home.module.css b/web/styles/Home.module.css deleted file mode 100644 index b55cee677..000000000 --- a/web/styles/Home.module.css +++ /dev/null @@ -1,123 +0,0 @@ -.container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.main { - padding: 5rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; -} - -.footer img { - margin-left: 0.5rem; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - - max-width: 800px; - margin-top: 3rem; -} - -.card { - margin: 1rem; - flex-basis: 45%; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h3 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/web/styles/globals.css b/web/styles/globals.scss similarity index 100% rename from web/styles/globals.css rename to web/styles/globals.scss