Skip to main content

Update CSS

Some changes are needed in order for screenshots of the app to be easier to use & understand. The changes in this section do not affect the functionality of the app in any way.

Page styles​

  1. Rename the file /styles/Home.module.css to /styles/page.css

    About this change

    When the file is named like a CSS module, Next.js will not handle it like a regular CSS file. This change makes it so the styles in this file can be used globally.

  2. Edit the following file:

    /styles/page.css
    .container {
      padding: 0 2rem;
    }

    .main {
      min-height: 20vh;
      padding: 2rem 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    ...
    About these changes

    These changes reduce the amount of whitespace in the app so that screenshots can be smaller.

  3. Edit the following file:

    /pages/_app.js
      import "../styles/globals.css";
      import "../styles/page.css";

      function MyApp({ Component, pageProps }) {
        return <Component {...pageProps} />
      }

      export default MyApp
    About this change

    This adds the CSS file to every page in the application.

Global styles​

Edit the following file:

/styles/globals.css
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;
  background-color: beige;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
About this change

This change makes the background of the app contrast better with a white background.