update css

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 {
+.landing-page {
-  position: relative;
+  width: 100%;
-  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;
 }
 
 .game-list {
   display: grid;
-  grid-gap: 25px;
+  grid-gap: 40px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  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;
+  /* display: flex;
-  justify-content: flex-end;
+  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);
+  }
+}

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,8 +131,10 @@ This is a good first introduction to Lean!"
         levels="72"
         language="English"
         />
+
     </div>
     <section>
+      <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
@@ -145,8 +145,10 @@ This is a good first introduction to Lean!"
           write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about
           any problems you experience!
         </p>
+      </div>
     </section>
     <section>
+      <div className="wrapper">
         <h2>Adding new games</h2>
         <p>
           If you consider writing your own game, you should use
@@ -161,14 +163,17 @@ This is a good first introduction to Lean!"
           To add games to this page, you should get in contact as
           games will need to be added manually.
         </p>
+      </div>
     </section>
     <section>
+      <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>