turn page dark, alter Header stylings, add login btn

components/Header.js

@@ -14,6 +14,9 @@ export default function Home() {
 			<Link href="/">
 				<a>Sztab</a>
 			</Link>
+			<Link href="/">
+				<a>Zaloguj się</a>
+			</Link>
 		</nav>
 	);
 }

pages/index.js

@@ -10,7 +10,7 @@ export default function Home() {
 					margin: 1rem;
 				}
 				p {
-					border-left: 0.2rem solid black;
+					border-left: 0.2rem solid white;
 					padding-left: 1rem;
 				}
 			`}</style>

styles/globals.scss

@@ -11,20 +11,46 @@
 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 		Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
+body {
+	background-color: var(--black1);
+	color: white;
+}
 
 nav.main {
 	height: 4rem;
 	background-color: var(--black1);
 	display: flex;
 	align-items: center;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 	a {
 		display: block;
-		padding: 0.5rem 1.5rem;
+		padding: 0 1.5rem;
+		display: flex;
+		align-items: center;
+		height: 100%;
 		margin: 0 0.5rem;
 		color: white;
 		text-decoration: none;
 		font-family: "Lexend", sans-serif;
+		transition-duration: 150ms;
 		// font-size: 16px;
+		&:hover {
+			background-color: var(--black0);
+		}
+		&:focus {
+			outline: none;
+			background-color: var(--black0);
+		}
+		&:last-of-type {
+			background-color: #c0c0c0;
+			color: var(--black1);
+			margin-left: auto;
+			margin-right: 0;
+			&:hover,
+			&:focus {
+				background-color: #909090;
+			}
+		}
 	}
 	.logo {
 		margin: 0 1rem 0 1rem;