diff --git a/app/package-lock.json b/app/package-lock.json index 1545cf7..a9fa111 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -6,9 +6,9 @@ "": { "dependencies": { "next": "latest", - "normalize.css": "^8.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "reset-css": "^5.0.1", "sass": "^1.49.9", "shared-stuff": "file:../shared-stuff" }, @@ -2422,11 +2422,6 @@ "node": ">=0.10.0" } }, - "node_modules/normalize.css": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", - "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" - }, "node_modules/object-assign": { "version": "4.1.1", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", @@ -2770,6 +2765,11 @@ "url": "https://github.com/sponsors/mysticatea" } }, + "node_modules/reset-css": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/reset-css/-/reset-css-5.0.1.tgz", + "integrity": "sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==" + }, "node_modules/resolve": { "version": "1.22.0", "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", @@ -4830,11 +4830,6 @@ "version": "3.0.0", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, - "normalize.css": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", - "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" - }, "object-assign": { "version": "4.1.1", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" @@ -5064,6 +5059,11 @@ "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", "dev": true }, + "reset-css": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/reset-css/-/reset-css-5.0.1.tgz", + "integrity": "sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==" + }, "resolve": { "version": "1.22.0", "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", diff --git a/app/package.json b/app/package.json index 7bc13f3..8001bbe 100644 --- a/app/package.json +++ b/app/package.json @@ -7,9 +7,9 @@ }, "dependencies": { "next": "latest", - "normalize.css": "^8.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "reset-css": "^5.0.1", "sass": "^1.49.9", "shared-stuff": "file:../shared-stuff" }, diff --git a/app/pages/_app.js b/app/pages/_app.js index 197e42e..c77a3fc 100644 --- a/app/pages/_app.js +++ b/app/pages/_app.js @@ -1,3 +1,4 @@ +import 'reset-css' import '../styles/global.scss' import Layout from '../components/layout' diff --git a/app/pages/home/Hero.js b/app/pages/home/Hero.js index 9ff25d2..bcd5da9 100644 --- a/app/pages/home/Hero.js +++ b/app/pages/home/Hero.js @@ -1,9 +1,9 @@ -import React from 'react' +import { Component } from 'react' import Image from 'next/image' import styles from './Hero.module.scss' import logo from './assets/warframe_logo.png' -export default class Hero extends React.Component { +export default class Hero extends Component { render () { return (
diff --git a/app/pages/home/Hero.module.scss b/app/pages/home/Hero.module.scss index 0f5d5f3..fd64fd5 100644 --- a/app/pages/home/Hero.module.scss +++ b/app/pages/home/Hero.module.scss @@ -3,12 +3,15 @@ padding: 128px 0; position: relative; background: white; - color: black; text-align: center; overflow: hidden; -} -.text, .logo { - width: 400px; - margin: auto; -} \ No newline at end of file + .text, .logo { + width: 400px; + margin: auto; + } + + .text { + + } +} diff --git a/app/pages/home/ItemRow.js b/app/pages/home/ItemRow.js index 209b78f..3171507 100644 --- a/app/pages/home/ItemRow.js +++ b/app/pages/home/ItemRow.js @@ -1,6 +1,6 @@ -import React from 'react' +import { Component } from 'react' -export default class ItemRow extends React.Component { +export default class ItemRow extends Component { constructor ({ scanResult }) { super() this.scanResult = scanResult diff --git a/app/public/gunner1.png b/app/pages/home/assets/gunner1.png similarity index 100% rename from app/public/gunner1.png rename to app/pages/home/assets/gunner1.png diff --git a/app/public/gunner2.png b/app/pages/home/assets/gunner2.png similarity index 100% rename from app/public/gunner2.png rename to app/pages/home/assets/gunner2.png diff --git a/app/pages/home/index.js b/app/pages/home/index.js index 9f7e27d..8b2dc68 100644 --- a/app/pages/home/index.js +++ b/app/pages/home/index.js @@ -1,10 +1,10 @@ -import React from 'react' +import { Component } from 'react' import dbConnect from '../../lib/dbConnect' import { models } from 'shared-stuff' import Hero from './Hero' import Table from './Table' -export default class Home extends React.Component { +export default class Home extends Component { constructor ({ scanResults }) { super() this.scanResults = scanResults diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss new file mode 100644 index 0000000..4381562 --- /dev/null +++ b/app/styles/_colors.scss @@ -0,0 +1 @@ +$clr-text: #1f1f1f; \ No newline at end of file diff --git a/app/styles/_fonts.scss b/app/styles/_fonts.scss new file mode 100644 index 0000000..b9bc5ce --- /dev/null +++ b/app/styles/_fonts.scss @@ -0,0 +1,22 @@ +$text-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, +Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, +sans-serif; + +$font-h0: normal normal bold 56px/64px $text-font; +$font-h1: normal normal bold 48px/56px $text-font; +$font-h2: normal normal bold 40px/48px $text-font; +$font-h3: normal normal bold 36px/44px $text-font; +$font-h4: normal normal bold 32px/40px $text-font; +$font-h5: normal normal bold 28px/36px $text-font; +$font-h6: normal normal bold 24px/32px $text-font; +$font-h7: normal normal bold 20px/26px $text-font; +$font-h8: normal normal bold 18px/24px $text-font; +$font-h9: normal normal bold 16px/20px $text-font; + +$font-r8: normal normal normal 24px/30px $text-font; +$font-r7: normal normal normal 22px/28px $text-font; +$font-r6: normal normal normal 20px/26px $text-font; +$font-r5: normal normal normal 18px/24px $text-font; +$font-r4: normal normal normal 16px/22px $text-font; +$font-r3: normal normal normal 14px/18px $text-font; +$font-r2: normal normal normal 12px/16px $text-font; diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss new file mode 100644 index 0000000..d53fabb --- /dev/null +++ b/app/styles/_variables.scss @@ -0,0 +1,2 @@ +@import './fonts'; +@import './colors'; diff --git a/app/styles/global.scss b/app/styles/global.scss index 7f80ed1..173274e 100644 --- a/app/styles/global.scss +++ b/app/styles/global.scss @@ -1,12 +1,32 @@ +@import './variables'; + html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, - sans-serif; + font: $font-r4; + color: $clr-text; } * { box-sizing: border-box; } + +h1 { + font: $font-h1; +} +h2 { + font: $font-h2; +} +h3 { + font: $font-h3; +} +h4 { + font: $font-h4; +} +h5 { + font: $font-h5; +} +h6 { + font: $font-h6; +}