overall tweaks for mobile + margins

pages/404.tsx

@@ -4,7 +4,7 @@ const PageError404 = () => {
 	return (
 		<>
 			<SEO title="404" />
-			Error 404!!
+			<main>Error 404 - nie znaleziono takiego URL.</main>
 		</>
 	);
 };

pages/cytaty.tsx

@@ -4,7 +4,7 @@ const PageCytaty = () => {
 	return (
 		<>
 			<SEO title="cytaty" />
-			Miejsce na stronkę od cytatów.
+			<main>Miejsce na stronkę od cytatów.</main>
 		</>
 	);
 };

pages/index.tsx

@@ -11,8 +11,7 @@ const PageIndex = () => {
 			config.splashes[Math.floor(Math.random() * config.splashes.length)].body
 		);
 	}, []);
-	const welcometext: string =
+	const welcometext: string = "Witamy na witrynie internetowej Gractwa."; // Mamy nadzieję że odnajdziesz czego szukasz, zbłąkana duszo.";
-		"Witamy na witrynie internetowej Gractwa. Mamy nadzieję że odnajdziesz czego szukasz, zbłąkana duszo.";
 	return (
 		<>
 			<SEO />
@@ -24,17 +23,16 @@ const PageIndex = () => {
 					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
 			</div>
-			<div className={styles.stats}>
+			<main>
 				<h1>Hejo!</h1>
 				<p>
 					Gractwo istnieje od{" "}
 					{Math.floor(
-						// (Date.now() - new Date("06.07.2020").getTime()) / 86400000
 						(Date.now() - new Date("2020-07-06").getTime()) / 86400000
-					)}
+					)}{" "}
-					{" dni"}.
+					dni.
 				</p>
-			</div>
+			</main>
 		</>
 	);
 };

pages/o-gractwie.tsx

@@ -4,7 +4,7 @@ const PageInfo = () => {
 	return (
 		<>
 			<SEO title="o gractwie" />
-			Miejsce na stronkę od informacji nt. Gractwa.
+			<main>Miejsce na stronkę od informacji nt. Gractwa.</main>
 		</>
 	);
 };

pages/rankingi.tsx

@@ -4,7 +4,7 @@ const PageRankingi = () => {
 	return (
 		<>
 			<SEO title="rankingi" />
-			Miejsce na stronkę od rankingów.
+			<main>Miejsce na stronkę od rankingów.</main>
 		</>
 	);
 };

styles/Index.module.scss

@@ -2,13 +2,13 @@
 	display: block;
 	width: 100%;
 	height: 28rem;
-	@media screen and (max-width: 800px) {
-		height: 20rem;
-	}
 	overflow: hidden;
 	position: relative;
 	border-left: none;
 	border-right: none;
+	@media screen and (max-width: 800px) {
+		height: 14rem;
+	}
 }
 .hero::before {
 	position: absolute;
@@ -33,7 +33,7 @@
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-}
+	@media screen and (max-width: 800px) {
-.stats {
+		transform: scale(0.85);
-	margin: 1rem 16rem;
+	}
 }

styles/globals.scss

@@ -30,6 +30,11 @@ h3 {
 	padding: 0.5rem 0;
 	font-family: var(--fonts-bold);
 }
+main {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 1rem;
+}
 
 /* html,
 body {