From 6582d4e6252423a9390f4db81c7321da9e2cb991 Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Thu, 4 May 2023 17:34:57 +0200
Subject: [PATCH] update css

---
 client/src/components/LandingPage.css | 81 ++++++++++++++++-----------
 client/src/components/LandingPage.tsx | 73 +++++++++++++-----------
 2 files changed, 86 insertions(+), 68 deletions(-)

diff --git a/client/src/components/LandingPage.css b/client/src/components/LandingPage.css
index d5b199e..864f39a 100644
--- a/client/src/components/LandingPage.css
+++ b/client/src/components/LandingPage.css
@@ -5,6 +5,10 @@
   font-style: normal;
 } */
 
+html {
+  font-size: 16px;
+}
+
 body {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -18,38 +22,14 @@ a {
   zoom: 1.0 ;
 }
 
-/* .landing-page {
-  position: relative;
-  margin: 20px;
-} */
-
-
-
-/* p {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-
-
-h2 {
-  margin-top: 40px;
-  margin-bottom: 20px;
-}
-
-*/
-
-.title {
-  font-size: 24px;
-  font-weight: bold;
-  padding-top: 15px;
-  padding-bottom: 5px;
+.landing-page {
+  width: 100%;
 }
 
 .game-list {
   display: grid;
-  grid-gap: 25px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 40px;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 60px;
@@ -66,6 +46,8 @@ h2 {
   flex-direction: column;
   justify-content: space-between;
   justify-self: center;
+  font-size: 1rem;
+
 }
 
 .image {
@@ -93,7 +75,7 @@ div.image {
 .short-description {
   padding-top: 5px;
   padding-bottom: 5px;
-  height: 105px;
+  height: 6.5rem;
 }
 .game-stats {
   display: block;
@@ -120,6 +102,13 @@ div.image {
   text-align: right;
 }
 
+.title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding-top: 15px;
+  padding-bottom: 5px;
+}
+
 header {
   border: 1px solid green;
   background-repeat: none;
@@ -143,10 +132,10 @@ header {
 
 #main-title p {
   color: rgb(255, 255, 255);
-  font-size: 1.25rem;
   font-weight: bold;
   text-align: center;
   max-width: 600px;
+  font-size: 1.25rem;
 }
 
 #main-title a {
@@ -171,23 +160,30 @@ header nav {
 
 footer {
   background-color: rgba(0, 133, 162, 1);
-  display: flex;
-  justify-content: flex-end;
+  /* display: flex;
+  flex-direction: row;
+  justify-content: flex-end; */
   padding: 20px;
 }
 
 footer .link {
   color: white;
   cursor: pointer;
+  margin-left: 40px;
+  margin-right: 40px;
 }
 
 .github-link {
   height: 24px; /* TODO: why do I need that? s*/
 }
 
-
 .landing-page > section {
-  padding: 40px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  padding-left: 40px;
+  padding-right: 40px;
+  font-size: 1.25rem;
+
 }
 
 .landing-page > section h2 {
@@ -202,3 +198,20 @@ footer .link {
 .landing-page > section:nth-of-type(even) {
   background-color: rgb(255, 255, 255)
 }
+
+@media screen and (min-width: 1300px) {
+  .landing-page > section .wrapper {
+    max-width: 1300px;
+    margin-left: calc(50% - 650px);
+    margin-right: calc(50% - 650px);
+  }
+}
+
+/* TODO: Adjust to 180px once there are more than two games */
+@media screen and (min-width: 1300px) {
+  .game-list {
+    max-width: 1300px;
+    margin-left: calc(50% - 650px);
+    margin-right: calc(50% - 650px);
+  }
+}
diff --git a/client/src/components/LandingPage.tsx b/client/src/components/LandingPage.tsx
index 1215a1d..8f45d58 100644
--- a/client/src/components/LandingPage.tsx
+++ b/client/src/components/LandingPage.tsx
@@ -105,7 +105,6 @@ function LandingPage() {
         </p>
       </div>
     </header>
-
     <div className="game-list">
 
       <GameTile
@@ -115,8 +114,7 @@ function LandingPage() {
         description="
 Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an.
 
-(Das Spiel befindet sich noch in der Entstehungsphase.)
-"
+(Das Spiel befindet sich noch in der Entstehungsphase.)"
         image={coverRobo}
         language="German"
         />
@@ -133,46 +131,53 @@ This is a good first introduction to Lean!"
         levels="72"
         language="English"
         />
+
     </div>
     <section>
-      <h2>Development notes</h2>
-      <p>
-        As this server runs lean on our university machines, it has a capacity of ca. 15-25
-        games running simultaneously. We hope to address this limitation in the further future.
-      </p>
-      <p>
-        Most things about the games and infrastructure is still in development. Feel free to
-        write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about
-        any problems you experience!
-      </p>
+      <div className="wrapper">
+        <h2>Development notes</h2>
+        <p>
+          As this server runs lean on our university machines, it has a capacity of ca. 15-25
+          games running simultaneously. We hope to address this limitation in the further future.
+        </p>
+        <p>
+          Most things about the games and infrastructure is still in development. Feel free to
+          write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about
+          any problems you experience!
+        </p>
+      </div>
     </section>
     <section>
-      <h2>Adding new games</h2>
-      <p>
-        If you consider writing your own game, you should use
-        the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
-        a template.
-      </p>
-      <p>
-        There will be an option to load and run games through the server
-        directly by specifying a URL, but this is still in development.
-      </p>
-      <p>
-        To add games to this page, you should get in contact as
-        games will need to be added manually.
-      </p>
+      <div className="wrapper">
+        <h2>Adding new games</h2>
+        <p>
+          If you consider writing your own game, you should use
+          the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
+          a template.
+        </p>
+        <p>
+          There will be an option to load and run games through the server
+          directly by specifying a URL, but this is still in development.
+        </p>
+        <p>
+          To add games to this page, you should get in contact as
+          games will need to be added manually.
+        </p>
+      </div>
     </section>
     <section>
-      <h2>Funding</h2>
-      <p>
-        This Server has been developed as part of the
-        project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at
-        Heinrich-Heine-Universität in Düsseldorf.
-      </p>
+      <div className="wrapper">
+        <h2>Funding</h2>
+        <p>
+          This Server has been developed as part of the
+          project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at
+          Heinrich-Heine-Universität in Düsseldorf.
+        </p>
+      </div>
     </section>
     <footer>
       <a className="link" onClick={openImpressum}>Impressum</a>
-        {impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
+      {impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
     </footer>
 
     {/* <PrivacyPolicy/> */}