add depth styling, index page stats, footer margin

components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Footer = () => {
 	return (
-		<div style={{ textAlign: "center" }}>
+		<div style={{ textAlign: "center", padding: "1rem 0" }}>
 			<p>
 				&copy; Gractwo 2020-{new Date().getFullYear()}
 				<span style={{ color: "#666" }}>

components/Navigation/Navigation.module.scss

@@ -2,6 +2,9 @@
 	display: flex;
 	background-color: var(--black1);
 	height: 4rem;
+	position: relative;
+	z-index: 10;
+	box-shadow: var(--shadow0);
 }
 .link {
 	display: flex;

pages/index.tsx

@@ -31,16 +31,26 @@ const PageIndex = () => {
 					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
 			</div>
-			<main>
+			<div className={styles.statscontainer}>
-				<h1>Hejo!</h1>
+				<main className={styles.stats}>
-				<p>
+					<article>
-					Gractwo istnieje od{" "}
+						<h1>~200</h1>
-					{Math.floor(
+						<p>członków na discordzie</p>
-						(Date.now() - new Date("2020-07-06").getTime()) / 86400000
+					</article>
-					)}{" "}
+					<article>
-					dni.
+						<h1>
-				</p>
+							{Math.floor(
-			</main>
+								(Date.now() - new Date("2020-07-06").getTime()) / 86400000
+							)}
+						</h1>
+						<p>dni istnienia gractwa</p>
+					</article>
+					<article>
+						<h1>dużo</h1>
+						<p>wysłanych wiadomości</p>
+					</article>
+				</main>
+			</div>
 		</>
 	);
 };

styles/Index.module.scss

@@ -43,3 +43,52 @@
 		cursor: pointer;
 	}
 }
+.statscontainer {
+	background: var(--black1);
+	box-shadow: var(--shadow0);
+}
+.stats {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	article {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		border: 1px solid var(--grey);
+		padding: 0 4rem;
+		border-top: none;
+		border-bottom: none;
+		font-size: 1.35em;
+		text-align: center;
+		h1 {
+			font-size: 2em;
+		}
+		&:first-of-type {
+			border-left: none;
+		}
+		&:last-of-type {
+			border-right: none;
+		}
+	}
+	@media screen and (max-width: 800px) {
+		padding-top: 0;
+		flex-direction: column;
+		article {
+			font-size: 1em;
+			padding: 0.5rem 0;
+			border: 1px solid var(--grey);
+			border-left: 0;
+			border-right: 0;
+			border-top: 0;
+			&:first-of-type {
+				padding-top: 0;
+				border-top: 0;
+			}
+			&:last-of-type {
+				padding-bottom: 0;
+				border-bottom: 0;
+			}
+		}
+	}
+}

styles/globals.scss

@@ -5,7 +5,9 @@
 	--black2: #2c2c2c;
 	--black3: #1d1d1d;
 	--white0: #eee;
+	--grey: #444;
 	--accent: #61f2ea;
+	--shadow0: 0 0 1rem rgba(0, 0, 0, 0.35);
 	--fonts-norm: "Quicksand", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	--fonts-bold: "Lexend", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,