From 63ca31f6bab221cd6c9eb69cd1abefecc26a9343 Mon Sep 17 00:00:00 2001 From: Thiago Chaves Date: Wed, 6 Jul 2022 16:00:19 +0300 Subject: [PATCH] Add a CSS reset --- pages/index.tsx | 63 +--------------------- styles/Home.module.css | 116 ----------------------------------------- styles/globals.css | 54 ++++++++++++++++--- 3 files changed, 50 insertions(+), 183 deletions(-) delete mode 100755 styles/Home.module.css diff --git a/pages/index.tsx b/pages/index.tsx index 86b5b3b..d6b9535 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,70 +1,11 @@ import type { NextPage } from 'next' import Head from 'next/head' import Image from 'next/image' -import styles from '../styles/Home.module.css' const Home: NextPage = () => { return ( -
- - Create Next App - - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.tsx -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - +
+ Hello
) } diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100755 index 32a57d5..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.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 { - margin: 4rem 0; - 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; -} - -.card { - margin: 1rem; - 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; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/globals.css b/styles/globals.css index e5e2dcc..f04f772 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,16 +1,58 @@ -html, -body { - padding: 0; - margin: 0; +/* +Borrowed some stuff from Next.js defaults and this CSS reset: +http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; } - a { color: inherit; text-decoration: none; } - * { box-sizing: border-box; }