Improve page style

pages/_app.tsx

@@ -1,6 +1,7 @@
 import '../styles/globals.css'
 import '../styles/telegram.css'
 import '../styles/postcard.css'
+import "../styles/index.css"
 import type { AppProps } from 'next/app'
 import { LoginContext } from '../contexts/login'
 import { useState } from 'react'

pages/index.tsx

@@ -4,7 +4,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 export async function getStaticProps(context: NextPageContext) {
     return {props: {
-        ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
+        ...(await serverSideTranslations(context.locale, ["common"]))
     }}
 }
 
@@ -12,13 +12,13 @@ const Page: NextPage = () => {
     const {t} = useTranslation("common")
 
     return (
-        <div>
-            <h1>
+        <div className="index-layout">
+            <h1 class="index-title">
                 {t("title")}
             </h1>
-            <p>
+            <h2>
                 {t("description")}
-            </p>
+            </h2>
         </div>
     )
 }

styles/globals.css

@@ -16,10 +16,15 @@ a:visited {
     color: #aa44ff;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
 @media (prefers-color-scheme: light) {
     body {
         background-color: white;
         color: black;
+        text-shadow: 2px 2px 2px white;
     }
 }
 
@@ -27,5 +32,6 @@ a:visited {
     body {
         background-color: black;
         color: white;
+        text-shadow: 2px 2px 2px black;
     }
 }

styles/index.css

@@ -0,0 +1,19 @@
+.index-layout {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: space-around;
+    align-items: center;
+}
+
+@media only screen and (max-width: 639px) {
+    .index-title {
+        font-size: 5em;
+    }
+}
+
+@media only screen and (min-width: 640px) {
+    .index-title {
+        font-size: 10em;
+    }
+}