From 85f43ca59a0e65b5264e42f88dd6539f6495cd97 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 25 May 2022 17:03:53 +0200
Subject: [PATCH] Improve page style

---
 pages/_app.tsx     |  1 +
 pages/index.tsx    | 10 +++++-----
 styles/globals.css |  6 ++++++
 styles/index.css   | 19 +++++++++++++++++++
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 styles/index.css

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4e05a30..91fa8ad 100644
--- a/pages/_app.tsx
+++ b/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'
diff --git a/pages/index.tsx b/pages/index.tsx
index 482aad0..fa2ae36 100644
--- a/pages/index.tsx
+++ b/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>
     )
 }
diff --git a/styles/globals.css b/styles/globals.css
index eca6755..51c1e4a 100644
--- a/styles/globals.css
+++ b/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;
     }
 }
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..642d7d6
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file