scss variables

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==",

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"
   },

app/pages/_app.js

@@ -1,3 +1,4 @@
+import 'reset-css'
 import '../styles/global.scss'
 import Layout from '../components/layout'
 

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 (
       <div className={styles.hero}>

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;
   }
+
+  .text {
+    
+  }
+}

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

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

app/styles/_colors.scss

@@ -0,0 +1 @@
+$clr-text: #1f1f1f;

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;

app/styles/_variables.scss

@@ -0,0 +1,2 @@
+@import './fonts';
+@import './colors';

app/styles/global.scss

@@ -1,12 +1,32 @@
+@import './variables';
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+  font: $font-r4;
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+  color: $clr-text;
-    sans-serif;
 }
 
 * {
   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;
+}